Star Wars The Last StandConnexion
Alerte HNN People: Bal huppé sur Coruscant ! Comme toujours, le Moff von Rosenhart a su s'entourer du gratin de la haute société impériale mais qui est la mystérieuse beauté au bras de l'amiral Reige ?

descriptionfff - Exemples de codages EmptyExemples de codages

more_horiz
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



Avatar

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.


Avatar

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>








fff - Exemples de codages Vhells10
Vhell parle en #ffccff - Irina parle en 00ccff - Fiche de présentation - Fiche de suivi

descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz

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:

 
<!---------debut------------>
 <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>
<!--------fin--------->




fff - Exemples de codages Vhells10
Vhell parle en #ffccff - Irina parle en 00ccff - Fiche de présentation - Fiche de suivi

descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz

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>




« Je ne suis pas la Jedi parfaite, mais je suis celle que je dois être. Je n'affronte pas l'ombre sans peur, mais avec la force d'avoir appris à danser avec elle. »



descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz

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>




« Je ne suis pas la Jedi parfaite, mais je suis celle que je dois être. Je n'affronte pas l'ombre sans peur, mais avec la force d'avoir appris à danser avec elle. »



descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz
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>




« Je ne suis pas la Jedi parfaite, mais je suis celle que je dois être. Je n'affronte pas l'ombre sans peur, mais avec la force d'avoir appris à danser avec elle. »



descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz

Possessions





Objet :  Description



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>




« Je ne suis pas la Jedi parfaite, mais je suis celle que je dois être. Je n'affronte pas l'ombre sans peur, mais avec la force d'avoir appris à danser avec elle. »



descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz

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>


fff - Exemples de codages KoAuU71

descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz


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 !




« Je ne suis pas la Jedi parfaite, mais je suis celle que je dois être. Je n'affronte pas l'ombre sans peur, mais avec la force d'avoir appris à danser avec elle. »



descriptionfff - Exemples de codages EmptyRe: Exemples de codages

more_horiz
privacy_tip Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum