Les codes du forum

14/10/2022

Codes en libre-service

Les codes et balises spéciales ci-dessous sont les mêmes que celles utilisées dans le design du forum. Cela signifie que leur style sera automatiquement agencé au design du forum, peu importe la version. N'hésitez pas à vous en servir librement !

TITRES & EMPHASE FORMATTAGE DE SUJET WIDGETS VARIÉS & IMAGES

TEMPLATE POUR FICHE DE BASE AUTRES TEMPLATES

TITRES & EMPHASE TEXTEEmphase & couleurs

Emphase 0 Emphase 1

Emphase 2
Emphase 3

Emphase 4
Emphase 5

Emphase 6
Emphase 7

Code:: <e0>Emphase 0</e0> <e1>Emphase 1</e1> <e2>Emphase 2</e2> <e3>Emphase 3</e3> <e4>Emphase 4</e4> <e5>Emphase 5</e5> <e6>Emphase 6</e6> <e7>Emphase 7</e7>

Icarus Phenomenon
Theseus Paradox
Twilight Zone
Hybrid Theory
Tomorrow's Disaster

Code:: <ip>Icarus Phenomenon</ip> <tp>Theseus Paradox</tp> <tz>Twilight Zone</tz> <ht>Hybrid Theory</ht> <to>Tomorrow's Disaster</to>

Vous pouvez combiner les couleurs avec les autres balises d'emphase ou de titre:

Icarus Phenomenon
Theseus Paradox
Twilight Zone
Hybrid Theory
Tomorrow's Disaster

Code:: <e1><ip>Icarus Phenomenon</ip></e1> <e2><tp>Theseus Paradox</tp></e2> <e3><tz>Twilight Zone</tz></e3> <e4><ht>Hybrid Theory</ht></e4> <t3><to>Tomorrow's Disaster</to></t3>

Petits et grands titres

Titre 3Titre 4Titre 5

Code:: <t3>Titre 3</t3> <t4>Titre 4</t4> <t5>Titre 5</t5>

Titre de fiche 0
Titre de fiche 1
Titre de fiche 2

Code:: <t0>Titre de fiche 0</t0> <t1>Titre de fiche 1</t1> <t2>Titre de fiche 2</t2>

FORMATTAGE DE SUJETLiens & séparateurs
Tag

Lien tag

Bouton

Code:: <tag>Tag</tag> <a href="VOTRE_URL"><ltag>Lien tag</ltag></a> <a href="VOTRE_URL"><btn>Bouton</btn></a>

Code:: <hr> <line></line>

Blocs de texte

Encadré spécial

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.

Code:: <div class="special_container"><div class="tag special_title">Titre</div><box2>Votre texte</box2></div>

Blockquote d'emphase. 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.

Code:: <bq>Votre texte</bq>

Blockquote décorative. 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.

Code:: <bq2>Votre texte</bq2>

WIDGETS VARIÉS & IMAGESWidgets variés

Lorem ipsum...

Faire un retour à la ligne va affecter l'espace entre les titres. Dans cet exemple, il n'y a aucun retour à la ligne entre les trois sections.

Code:: <button type="button" class="accordion">Section 1</button><div class="acc_content"><p>Lorem ipsum... <line></line></p></div>

Texte en spoiler/trigger warning en milieu de phrase.
Vous pouvez intégrer un style, mais ce sera sans couleur.
SVP ne pas cacher vos TW en début de message, ils sont importants.

Code:: <tw>Votre texte</tw> <e4 class="tw">Votre texte avec un style</e4>

Texte changeant au passage de la souris.Utile pour les dialogues avec traduction par exemple.

Code:: <dialogue><span class="base dotted">Texte initial. Vous pouvez le décorer avec d'autres balises.</span><span class="trad dotted">Texte alternatif. Vous pouvez le décorer avec d'autres balises.</span></dialogue>

Code:: <div class="tooltip dotted">Texte initial. Vous pouvez le décorer avec d'autres balises.<span class="tooltiptext" style="min-width:100%;">Ce qui apparaît dans le tooltip. Vous pouvez ajuster la largeur minimale avec min-width au besoin.</span></div>

Barre de progression

20%

Code:: <center><e1>Petit titre</e1> <progressbar><div style="width:20%">20%</div></progressbar></center>

Formats d'images

Code:: <img class="img_rect" src="https://zupimages.net/up/22/47/5avh.png">

Code:: <img class="img_rect" src="https://zupimages.net/up/22/47/aaw1.png" style="width:80px; height:80px; border-radius:50px;">

Code:: <img class="f_icon pres_icon" src="https://zupimages.net/up/22/47/7lxk.png">

Code:: <img class="f_icon" src="https://zupimages.net/up/22/47/52qb.png">

TEMPLATE FICHE DE BASEFiche simple (sans onglets)
La base inclut un header et une section (titre de catégorie + zone texte dans un encadré).

Code:: <div class="f_bg"><div class="box1 f_header"> <t1>TITRE DE FICHE</t1> <div class="f_icon_box"> <img class="f_icon" src="https://zupimages.net/up/22/47/aaw1.png"> <img class="f_icon" src="https://zupimages.net/up/22/47/2l1c.png"> </div></div><box1> <t2>TITRE DE CATÉGORIE</t2> <innerbox>Texte</innerbox></box1></div>

Pour ajouter une section (boîte):

Code:: <box1> <t2>TITRE DE CATÉGORIE</t2> <innerbox>Texte</innerbox></box1>

Fiche avancée (avec onglets)
Les fiches avec onglets sont utiles pour bien catégoriser l'information sans prendre trop de place, mais le code est plus complexe. Pour vous faciliter la tâche, nous vous suggérons de planifier à l'avance le nombre d'onglets désirés.

IMPORTANT

○ Pour le moment, nous pouvons supporter un maximum de 5 onglets.
○ Vous ne pouvez pas poster deux fiches avec onglets dans un même sujet, sauf si les tabs sont différents (par exemple : tab1 et tab2 dans un premier message, puis tab3 et tab4 dans le message suivant).
○ Si vous désirez enlever la scrollbar qui limite la hauteur de la boîte, vous pouvez retirer le mot scrollable.
○ Astuce avancée : pour ajouter une boîte simple en dehors des onglets, il faut s'assurer de le faire soit :
— après le header et avant la balise "input" (pour une boîte au-dessus des onglets)
— avant les deux derniers divs de la fin (pour une boîte en-dessous des onglets)

Deux onglets

Code:: <div class="f_bg"><div class="box1 f_header"> <t1>TITRE DE FICHE</t1> <div class="f_icon_box"> <img class="f_icon" src="https://zupimages.net/up/22/47/aaw1.png"> <img class="f_icon" src="https://zupimages.net/up/22/47/2l1c.png"> </div></div><input checked type="radio" id="tab1" name="f_tab"/><input type="radio" id="tab2" name="f_tab"/><div class="tabs_list"> <div class="tabs_labels"> <label class="btn tab tab1" for="tab1">TAB 1</label> <label class="btn tab tab2" for="tab2">TAB 2</label> </div></div><div class="tab_container"><div class="box1 tab_content tab1 scrollable"> <t2>TITRE DE CATÉGORIE_1</t2> <innerbox>Texte de la première boîte</innerbox></div><div class="box1 tab_content tab2 scrollable"> <t2>TITRE DE CATÉGORIE_2</t2> <innerbox>Texte de la deuxième boîte</innerbox></div></div></div>

Trois onglets

Code:: <div class="f_bg"><div class="box1 f_header"> <t1>TITRE DE FICHE</t1> <div class="f_icon_box"> <img class="f_icon" src="https://zupimages.net/up/22/47/aaw1.png"> <img class="f_icon" src="https://zupimages.net/up/22/47/2l1c.png"> </div></div><input checked type="radio" id="tab1" name="f_tab"/><input type="radio" id="tab2" name="f_tab"/><input type="radio" id="tab3" name="f_tab"/><div class="tabs_list"> <div class="tabs_labels"> <label class="btn tab tab1" for="tab1">TAB 1</label> <label class="btn tab tab2" for="tab2">TAB 2</label> <label class="btn tab tab3" for="tab3">TAB 3</label> </div></div><div class="tab_container"><div class="box1 tab_content tab1 scrollable"> <t2>TITRE DE CATÉGORIE_1</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab2 scrollable"> <t2>TITRE DE CATÉGORIE_2</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab3 scrollable"> <t2>TITRE DE CATÉGORIE_3</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div></div></div>

Quatre onglets

Code:: <div class="f_bg"><div class="box1 f_header"> <t1>TITRE DE FICHE</t1> <div class="f_icon_box"> <img class="f_icon" src="https://zupimages.net/up/22/47/aaw1.png"> <img class="f_icon" src="https://zupimages.net/up/22/47/2l1c.png"> </div></div><input checked type="radio" id="tab1" name="f_tab"/><input type="radio" id="tab2" name="f_tab"/><input type="radio" id="tab3" name="f_tab"/><input type="radio" id="tab4" name="f_tab"/><div class="tabs_list"> <div class="tabs_labels"> <label class="btn tab tab1" for="tab1">TAB 1</label> <label class="btn tab tab2" for="tab2">TAB 2</label> <label class="btn tab tab3" for="tab3">TAB 3</label> <label class="btn tab tab4" for="tab4">TAB 4</label> </div></div><div class="tab_container"><div class="box1 tab_content tab1 scrollable"> <t2>TITRE DE CATÉGORIE_1</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab2 scrollable"> <t2>TITRE DE CATÉGORIE_2</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab3 scrollable"> <t2>TITRE DE CATÉGORIE_3</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab4 scrollable"> <t2>TITRE DE CATÉGORIE_4</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div></div></div>

Cinq onglets

Code:: <div class="f_bg"><div class="box1 f_header"> <t1>TITRE DE FICHE</t1> <div class="f_icon_box"> <img class="f_icon" src="https://zupimages.net/up/22/47/aaw1.png"> <img class="f_icon" src="https://zupimages.net/up/22/47/2l1c.png"> </div></div><input checked type="radio" id="tab1" name="f_tab"/><input type="radio" id="tab2" name="f_tab"/><input type="radio" id="tab3" name="f_tab"/><input type="radio" id="tab4" name="f_tab"/><input type="radio" id="tab5" name="f_tab"/><div class="tabs_list"> <div class="tabs_labels"> <label class="btn tab tab1" for="tab1">TAB 1</label> <label class="btn tab tab2" for="tab2">TAB 2</label> <label class="btn tab tab3" for="tab3">TAB 3</label></div><div class="tabs_labels"><label class="btn tab tab4" for="tab4">TAB 4</label> <label class="btn tab tab5" for="tab5">TAB 5</label></div></div><div class="tab_container"><div class="box1 tab_content tab1 scrollable"> <t2>TITRE DE CATÉGORIE_1</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab2 scrollable"> <t2>TITRE DE CATÉGORIE_2</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab3 scrollable"> <t2>TITRE DE CATÉGORIE_3</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab4 scrollable"> <t2>TITRE DE CATÉGORIE_4</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div><div class="box1 tab_content tab5 scrollable"> <t2>TITRE DE CATÉGORIE_5</t2> <innerbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </innerbox></div></div></div>

AUTRES TEMPLATESRéponses RP
La fiche RP ci-dessous est proposée, mais elle n'est en aucun cas obligatoire. Vous pouvez aussi vous en servir comme base et la personnaliser à votre guise, ou utiliser l'une des autres idées de fiches RP mises à votre disposition dans la galerie des créations.

Code:: <div class="f_bg"><div class="box1 f_header"> <div><t1>TITRE DU RP</t1> <e4>@"Pseudo" & @"Pseudo"</e4></div><div class="f_icon_box"> <img class="f_icon" src="https://zupimages.net/up/22/47/aaw1.png"> <img class="f_icon" src="https://zupimages.net/up/22/47/2l1c.png"> </div></div><box1><e4>TW : écrire ici </e4></box1><box1><innerbox><img src="URL_DE_VOTRE_IMAGE" style="width:180px;margin: 4px 10px 0 0;" class="left" /> Votre texte RP ici </innerbox></box1></div>

Galerie des créations
D'autres templates préfabriqués par le staff et les membres sont disponibles dans la galerie des créations.
Idées de signatures — accéderIdées de carnets de bord — accéder Idées de fiches RP — accéder