Exemples de codages

Ce topic a pour but de recenser des exemples de codes pour mettre en forme vos fiches de suivi. Sentez vous libre de me MP en cas de pépin avec l'un d'entre eux.

LIENS

Nom du PJ

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nom du PJ

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:: <div style="display:flex;justify-content:center;flex-wrap:wrap;"> <div class="liens__container"><div class="liens__container-image"><img src="https://image.noelshack.com/fichiers/2018/13/1/1522017172-force.png" alt="Avatar"></div><div class="liens__container-texte"><h2>Nom du PJ</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div> </-----> <div class="liens__container"><div class="liens__container-image"><img src="https://image.noelshack.com/fichiers/2018/13/1/1522017172-force.png" alt="Avatar"></div><div class="liens__container-texte"><h2>Nom du PJ</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div> </-----> </div>

Inventaire

Vaisseaux

NOM

Une petite note, un lien vers une image...

DESCRIPTION DE L'OBJET/VASSEAU/CE QUE VOUS VOULEZ

NOM

Une petite note, un lien vers une image...

DESCRIPTION DE L'OBJET/VASSEAU/CE QUE VOUS VOULEZ

Armures

blablabla

Armes.

Blablabla

Code:: <details> <summary>Vaisseaux</summary> <div class="inventaire"><div class="nom_objet">NOM</div><div class="note_objet">Une petite note, un lien vers une image... </div><div class="description_objet">DESCRIPTION DE L'OBJET/VASSEAU/CE QUE VOUS VOULEZ</div> </div> </-----> <div class="inventaire"><div class="nom_objet">NOM</div><div class="note_objet">Une petite note, un lien vers une image... </div><div class="description_objet">DESCRIPTION DE L'OBJET/VASSEAU/CE QUE VOUS VOULEZ</div> </div> </-----> </details> <details> <summary>Armures</summary> blablabla </details> <details> <summary>Armes.</summary> Blablabla </details> <div>

Inventaires 2 :

Sabre laser à poigné recourbée

Une arme typique des escrimeurs, élégante et raffinée. Cette fois-ci, on reconnaît aisément toute l’attention qui lui est dédiée : en effet, son revêtement en cortosis brille, témoin évident des soins qui lui sont apportés. La lame qui jaillit de cette arme est violette.

» Amélioration 1 : Régulateur de puissance
» Amélioration 2 : Revêtement en cortosis

Code::  <div class="inventaire__wrapper"><div class="inventaire__image"><img src="https://img00.deviantart.net/4a17/i/2012/240/3/2/darth_bane__s_curved_lightsaber_by_madcow_genesis-d5cq5v4.jpg"></div><div class="inventaire__nom">Sabre laser à poigné recourbée</div><div class="inventaire_description"> Une arme typique des escrimeurs, élégante et raffinée. Cette fois-ci, on reconnaît aisément toute l’attention qui lui est dédiée : en effet, son revêtement en cortosis brille, témoin évident des soins qui lui sont apportés. La lame qui jaillit de cette arme est violette.</div><div class="inventaire__description--plus">» Amélioration 1 : Régulateur de puissance » Amélioration 2 : Revêtement en cortosis</div> </div>

Identité

Prénom :
Nom usuel :
Surnom :
Age :
Race :
Affiliation :
Rang :

Chronologie - Évènements notables :

Écrire ici

Code:: <div class="container_officiel" id="recap"><h1>Identité</h1><div style="display:flex;justify-content: space-between;flex-direction:row-reverse;"><img src="URL ICI - SERA SUR LE COTÉ DROIT - CHANGER LA VALEUR DE FLEX-DIRECTION POUR "ROW ET LE PADDING-RIGHT:20PX POUR UN PADDING LEFT (IL EST UN PEU PLUS LOIN) POUR AVOIR L'IMAGE A GAUCHE" style="box-shadow:0px 0px 10px #000;height: fit-content;width:300px;"><div style="padding-right:20px;">[b]Prénom :[/b] Mazekeen [b]Nom usuel :[/b] [b]Surnom :[/b] [b]Age :[/b] [b]Race : [/b] [b]Affiliation : [/b] [b]Rang :[/b] [size=24]Chronologie - Évènements notables : [/size] Écrire ici </div></div></div>

Prénom Nom

Type de lien : Écrire ici

Puis d'écrire ici

Changer la valeur #9F6BFF de la border-left (bordure gauche) pour modifier sa couleur.

Code:: <div style="background: #2f2d2d;border-left: 6px solid #9F6BFF;padding: 5px 10px 10px 10px;position:relative;"><h3 style="position:absolute;top:-20px;font-family:'Exo 2';">Prénom Nom</h3><div style="display: flex; margin-top:10px;"><img src="URL DE L'IMAGE ICI" style="padding-right: 20px;"/><div style="width: 85%;overflow:auto;font-size:11px;max-height: 280px;">[b]Type de lien :[/b] Écrire ici Puis d'écrire ici </div></div></div>

Titre du RP

Avec X

Lieu - Nom de la planète. Résumé

Changer la valeur border-color pour changer sa couleur (blue, red... ou valeur hexadécimal : #fff (blanc) etc...). J'utilise le vert pour notifier les sujets en cours. Le background peut aussi être modifié, il suffit de changer la valeur #.

Code:: <div class="elo_rp" style="border-color:green; background: #2f2d2d;"><div class="elo_titre_rp"><a href="#">Titre du RP</a></div> <div class="elo_rp_partenaire">Avec X<br></div> <div class="elo_rp_resume"><br><span class="elo_rp_lieu">Lieu - Nom de la planète.</span> Résumé</div><br></div>

Possessions

Objet : Description

Simplement dupliquer les lignes entre commentaires (vous ne pourrez pas les manquer Razz

) pour rajouter 2 autres blocs. Vous pouvez supprimer les commentaire ou les garder pour faire une séparation visuelle.
Changez la largeur de l'image en modifiant " width:600px; ". 600px de large par défaut.

Code:: <div class="container_officiel" id="inventaire"><h1>Possessions</h1><div> </---CECI EST UN COMMENTAIRE INVISIBLE. COPIER COLLER CE QUI SE TROUVE AU DESSOUS POUR RAJOUTER 2 AUTRES IMAGES ----> <div style="display:flex;width: 100%;"><div style="width: 50%;margin-right: 15px;"> [center]<img src="URL ICI" style="box-shadow:0px 0px 10px #000;width:600px;">[/center] [b]Objet :[/b] Description </div><div style="width: 50%;"> [center]<img src="URL ICI" style="box-shadow:0px 0px 10px #000;width:600px;"> [/center] [b]Objet :[/b] Description </div></div> </---CECI EST UN COMMENTAIRE INVISIBLE. COPIER COLLER CE QUI SE TROUVE AU DESSUS POUR RAJOUTER 2 AUTRES IMAGES ----> </div></div></div>

Capacités

Pouvoirs de la Force

Rang I :
- Bouclier de Force
- Cri de Force
- Détection de Vie
- Divination
- Mémoire de Force
- Persuasion de Force
- Poussée de Force
- Saut de Force
- Télékinésie
- Télépathie
- Vision de Force
- Vitesse de Force

Rang II :
- Cécité
- Déflexion de Force 1
- Guérison de Force 1
- Lumière de Force

Rang III :
- Appel de Force
- Déflexion de Force 2
- Stase de Force
- Illusion de Force 1
- Aura de Force
- Guérison de Force 2
- Navigation de Force
- Esprit de bataille
- Poursuite de Force
- Réseau de Vie

Rang IV :
- Vague de Force
- Illusion de Force 2
- Protection de Force
- Transe de Guérison

Rang V :
- Guérison de Force 3
- Projection de Force
- Ballistikinésie
- Crucitorn (300pts)
- Illusion de Force 3 (300pts)

Rang VI :
- Tutaminis
- Absorption d’Énergie
- Mur de Lumière (600pts)

Techniques au sabre laser

Rang I :
- Forme de base : Shii-Cho
- Maîtrise de spé 1 : Sabre-Laser

Rang II :
- Forme de base 1 : Prédilection : Niman
- Forme de base 1 : Djem So
- Forme de base 1 : Ataru
- Maîtrise de spé 1 : Garde en croix

Rang III :
- Maîtrise de spé 2 : Sabre Laser
- Maîtrise de spé 2 : Garde en croix

Rang IV :
- Forme de base 2 : Niman
- Forme de base 2 : Ataru (150pts)
- Forme de base 2 : Djem So (150pts)

Rang V :
- Maîtrise de spé 3 : Sabre laser
- Maîtrise de spé : Garde en croix (300pts)

Rang VI :
- Forme de combat : Maîtrise Ultime : Niman

Don : méditation de combat

Blablabla

Code:: <div class="container_officiel" id="pouvoirs"><h1>Capacités</h1> [center]<img src="https://imgs.search.brave.com/S1oAcnU_vBffi2Fq0lf1c3vh43TU1zCGiDKjn_7w0UY/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9mYWtl/aW1nLnBsLzYwMHg0/MDA" style="box-shadow:0 0 3px #000;width: 600px;">[/center] [h2]Pouvoirs de la Force[/h2] <div style="display:grid;grid-template-columns: 33% 33% 33%;column-gap: 20px; row-gap: 20px;"><div style="padding: 0 10px 0 0;"> [b]Rang I : [/b] - Bouclier de Force - Cri de Force - Détection de Vie - Divination - Mémoire de Force - Persuasion de Force - Poussée de Force - Saut de Force - Télékinésie - Télépathie - Vision de Force - Vitesse de Force </div><div style="padding: 0 10px 0 0;">[b]Rang II :[/b] - Cécité - Déflexion de Force 1 - Guérison de Force 1 - Lumière de Force </div><div style="padding: 0 10px 0 0;">[b]Rang III :[/b] - Appel de Force - Déflexion de Force 2 - Stase de Force - Illusion de Force 1 - Aura de Force - Guérison de Force 2 - Navigation de Force - Esprit de bataille - Poursuite de Force - Réseau de Vie </div><div style="padding: 0 10px 0 0;">[b]Rang IV :[/b] - Vague de Force - Illusion de Force 2 - Protection de Force - Transe de Guérison </div><div style="padding: 0 10px 0 0;">[b]Rang V :[/b] - Guérison de Force 3 - Projection de Force - Ballistikinésie <span style="opacity:0.2">- Crucitorn (300pts) - Illusion de Force 3 (300pts)</span> </div><div style="padding: 0 10px 0 0;">[b]Rang VI :[/b] - Tutaminis - Absorption d’Énergie <span style="opacity:0.2">- Mur de Lumière (600pts)</span></div> </div> [h2]Techniques au sabre laser[/h2] <div style="display:grid;grid-template-columns: 33% 33% 33%;column-gap: 20px; row-gap: 20px;"><div style="padding: 0 10px 0 0;">[b]Rang I : [/b] - Forme de base : Shii-Cho - Maîtrise de spé 1 : Sabre-Laser </div><div style="padding: 0 10px 0 0;">[b]Rang II :[/b] - Forme de base 1 : Prédilection : Niman - Forme de base 1 : Djem So - Forme de base 1 : Ataru - Maîtrise de spé 1 : Garde en croix </div><div style="padding: 0 10px 0 0;">[b]Rang III :[/b] - Maîtrise de spé 2 : Sabre Laser - Maîtrise de spé 2 : Garde en croix </div><div style="padding: 0 10px 0 0;">[b]Rang IV :[/b] - Forme de base 2 : Niman - Forme de base 2 : Ataru (150pts) - Forme de base 2 : Djem So (150pts) </div><div style="padding: 0 10px 0 0;">[b]Rang V :[/b] - Maîtrise de spé 3 : Sabre laser <span style="opacity:0.2">- Maîtrise de spé : Garde en croix (300pts)</span> </div><div style="padding: 0 10px 0 0;">[b]Rang VI :[/b] - Forme de combat : Maîtrise Ultime : Niman</div> </div> [h2]Don : méditation de combat[/h2] Blablabla </div>

Sommaire de la fiche

Récapitulatif
Liste des sujets
Liens et rencontres
Pouvoirs de la Force et Maîtrise du Sabre Laser
Possessions
Vaisseau

Le sommaire fonctionne avec des ancres nommées. Basiquement, c'est un lien HTML qui appelle un ID (#quelquechose) plutôt que l'url d'une page :

Code:: <a href="#pouvoirs">Pouvoirs de la Force et Maîtrise du Sabre Laser</a>

Sur le poste dédié aux pouvoirs, on retrouve donc un ID unique dans la première div :

Code:: <div class="container_officiel" id="pouvoirs">

C'est ce qui permet de faire le lien entre le sommaire et le bon endroit dans la page. Si l'ID est placé plus bas alors l'ancre nommée va faire un saut jusque là quand on clique sur le lien. C'est ce qui me permet d'avoir l'équipement et le vaisseau d'Arsenicia dans le même poste mais de les séparer dans le sommaire (https://swtls.forumactif.com/t923-arsenicia-ombrelune#14322).

Have fun !

Exemples de codages