Aliaume Delalande
Directeur & Professeur d’Alchimie
[Tutoriel] Fiche de présentation - Aide au code
Pour vous aider à modifier votre fiche sans patauger dans le code, nous vous proposons un tutoriel. Celui-ci vous permettra de modifier les couleurs et l'aspect de votre fiche de présentation.
Si vous avez du mal à lire "entre les lignes" de code, nous pouvons vous suggérer de remplir votre fiche via Sublim Text (logiciel à télécharger) ou bien HTMLed.it (éditeur en ligne) qui colore les balises, et vous permettra peut-être d'y voir plus clair. Sur ce, voici une première aide :
- Code:
<div class="fiche-personnage"><div class="fiche-liens"><a class="fiche-liens-courrier" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche fiche-lien-actuel" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
Ceci est le début de la fiche, la première balise est le cadre de la fiche : fiche-personnage. Dans fiche-liens vous trouverez les icônes qui servent à naviguer à travers les différentes publications de votre fiche:
1 • fiche-liens-courrier : sert à vous envoyer un message privé, veuillez compléter l'adresse /privmsg?mode=post&u=NUMERODEPROFIL - vous obtiendrez votre numéro de profil en allant sur votre profil. Par exemple, le compte d'Aliaume est le profil u1 et nous remplirons le lien de la sorte /privmsg?mode=post&u=1
2 • fiche-liens-fiche : sert à aller sur la publication de votre fiche, admettons que nous prennions pour exemple le sujet "Réglements", l'adresse de la première publication est /t10-1-reglements#10. Vous obtiendrez le lien exact en cliquant sur l'icône de baguette magique à côté de la date et heure de publication.
3 • fiche-liens-capacites : sert à aller sur la publication de vos capacités, traits magiques, acquis etc. À remplir de la même manière que le lien de la fiche.
4 • fiche-liens-malle-baguette : sert à aller sur la publication de votre baguette et coffre. À remplir de la même manière que le lien de la fiche.
5 • fiche-liens-relations : sert à aller sur la publication de vos relations. À remplir de la même manière que le lien de la fiche.
6 • fiche-liens-rps : sert à aller sur la publication de votre journal de bord. À remplir de la même manière que le lien de la fiche.
Il y a, par exemple sur la première publication à côté de fiche-liens-fiche, les termes fiche-lien-actuel, ils servent à mettre en couleur le lien actuel, autrement dit sur la première publication il dit "Ici nous sommes sur la publication concernant la fiche". En changeant de publication il faudra supprimer fiche-lien-actuel du lien procédant pour le mettre sur le lien suivant. En pratique : nous sommes sur la première publication donc nous avons "fiche-liens-fiche fiche-lien-actuel" , quand je publie ma deuxième publication je supprime fiche-lien-actuel de "fiche-liens-fiche
Mais alors pourquoi on met juste à partir du slash (/t10-1-reglements#10) et pas l'adresse complète (https://www.beauxbatons.org/t10-1-reglements#10) ? Parce qu'en mettant à partir du slash, cela permet de garder le lien même si la plateforme change d'adresse !
Et voilà pour cette partie, vous pourrez à présent la copier/coller à chaque début et fin de publication ;)
- Code:
<div class="fiche-identite" style="background:var(--neutral);"><div class="fiche-avatar"><svg style="filter:var(--ssavatar_bleu);" id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0"><stop id="stop1" stop-color="rgba(114, 176, 204, 1)" offset="0%"></stop><stop id="stop2" stop-color="rgba(255, 255, 255, 1)" offset="100%"></stop> </linearGradient></defs><path fill="url(#sw-gradient)" d="M18.4,-27.3C25.9,-23.8,35.5,-22.2,37.8,-17.2C40,-12.3,35,-4,30.9,2.4C26.8,8.8,23.6,13.2,20.5,18.8C17.3,24.4,14.2,31.2,8.7,35.3C3.2,39.5,-4.7,41.2,-12.1,39.6C-19.4,38.1,-26.3,33.4,-30,27.1C-33.8,20.8,-34.3,12.9,-35,5.3C-35.7,-2.3,-36.5,-9.7,-34.2,-16C-31.9,-22.3,-26.5,-27.6,-20.3,-31.7C-14.1,-35.8,-7,-38.6,-0.8,-37.4C5.4,-36.2,10.9,-30.8,18.4,-27.3Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: all 0.3s ease 0s;" stroke="url(#sw-gradient)"></path></svg><img class="lienavatar" src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /></div>
<div class="fiche-infos"><div class="fiche-nom-prenom" style="background:var(--secondary);color: var(--primaryfont);">Nom Prénom</div><div style="background:var(--accentcolor);color: var(--primaryfont);">Date de naissance - Âge</div><div style="background:var(--infospublication);color: var(--colorheader);">Nationalité</div><div style="background:var(--accentpublication);color: var(--primaryfont);">Lieu de résidence</div><div style="background:var(--accentcolor);color: var(--terfont);">Année d'étude</div>
</div></div>
Cette partie là concerne l'avatar et les informations générales de votre personnage, et il se passe déjà beaucoup de choses ! Décryptons :
1 • La partie SVG, un svg c'est une forme vectorielle, c'est la forme en dessous de l'avatar. Vous pouvez modifier la couleur en changeant la partie style="filter:var(--ssavatar_bleu);" et plus précisément --ssavatar_bleu, en effet plusieurs couleurs sont disponibles à savoir :
--ssavatar_bleu, --ssavatar_vert, --ssavatar_rouge et --ssavatar_rose.
2 • L'image de votre avatar : il suffit de changer le lien de l'image, privilégiez le format carré.
3 • Les informations : Vous pouvez personnaliser les couleurs en modifiant background et color dans style="background:var(--accentpublication);color: var(--primaryfont);", supprimez simplement var(--accentpublication) et remplacez par la couleur de votre choix, par exemple #0001111.
- Code:
<div class="fiche-caractere-physique">
<div class="fiche-caractere" style="background:var(--backgroundpublication);"><div class="fiche-titre" style="color:var(--accentcolor);">Caractère</div><div>Écrire ici.</div>
</div>
<div class="fiche-physique" style="background:var(--backgroundpublication);"><div class="fiche-titre" style="color:var(--accentcolor);">Physique</div><div class="fiche-infos-physique"><div style="background:var(--secondary);color: var(--primaryfont);">Taille</div><div style="background:var(--accentcolor);color: var(--primaryfont);">Corpulence</div><div style="background:var(--infospublication);color: var(--colorheader);">Cheveux</div><div style="background:var(--accentpublication);color: var(--primaryfont);">Yeux</div><div style="background:var(--accentcolor);color: var(--terfont);">Particularité(s)?</div>
</div>
<div class="fiche-physique-ssinfos" style="background:var(--accentcolor);" ><div class="fiche-style-vestimentaire"><span style="background:var(--secondary);">Style vestimentaire</span><br/>
Écrire ici.</div>
<div class="fiche-physique-autre"><span style="background:var(--secondary);">Autre</span><br/>
Écrire ici.</div>
</div></div>
</div>
Ici, il s'agit de décrire le caractère et le physique de votre personnage :
1 • Toujours dans un soucis de personnalisation, vous avez la possibilité de changer background et color, et ce n'importe où dans la fiche du moment que vous voyez ces propriétés initialement écrites.
- Code:
<div class="fiche-histoire" style="background:var(--neutral);"><div class="fiche-titre" style="color:var(--accentcolor);">Histoire familiale</div>Écrire ici.
<div class="fiche-anecdote" style="background: var(--secondary);">Une anecdote ou une citation</div>
</div>
Place à l'histoire de votre personnage :
1 • Anecdote : à la fin il y a une partie fiche-anecdote, remplacez le texte par une anecdote ou bien une citation en lien avec votre personnage.
2 • Toujours dans un soucis de personnalisation, vous avez la possibilité de changer background et color.
- Code:
<div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche fiche-lien-actuel" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
</div>
La même chose qu'en tête de fiche, tandis que la dernière fermeture de balise sert à fermer le cadre ouvert par fiche-personnage.
Pour rappel une balise c'est un élément de codage qui permet de dire "ici j'ouvre une boîte, ici un titre, et là je referme le titre, et là la boîte".
Aliaume Delalande
Directeur & Professeur d’Alchimie
Nous nous retrouvons pour le tutoriel, sur la deuxième publication.
Je ne reviendrai pas sur cette partie, étant donné qu'elle est expliquée dans la première publication, je dirai seulement que comme dit plus haut "fiche-lien-actuel" est désormais sur "fiche-liens-capacites" donnant "fiche-liens-capacites fiche-lien-actuel".
Dans cette partie, vous identifiez les capacités de vos personnages (merci de vous référez à Fiches pratiques) en remplaçant le texte "Capacité X" par le nom de la capacité. De même pour Traits magiques. Supprimez la case en surplus si nécessaire, vous serez toujours à temps de la rajouter plus tard.
Rappelons que les couleurs sont personnalisables en modifiant les propriétés background et color.
Les dés du destin, selon si votre personnage est un.e élève ou adulte il vous faudra supprimer une partie du nom du dé.
1 • Pour un.e élève, on garde : autonomie, communication, effort et émotivité.
2 • Pour un.e adulte, on garde : intellect, physique, psyché et sensitivité.
Chaque dé est sur 9 et vous devez au total répartir 16 points entre les quatre dés. Dans le modèle, il y a des chiffres mis au hasard à titre d'exemple, veuillez les remplacer par vos propres données.
Si votre personnage n'a pas de familier, vous pouvez supprimer toute cette partie. S'il en a un, vous pouvez vous référez à la partie "Informations générales" de votre personnage. On y retrouve le svg, l'image à changer pour un visuel de votre familier, ainsi que le nom et un petit texte de description qui viendra remplacer le "Écrire ici.".
Bon, on ne va pas se mentir, il y a moyen que cette partie là vous fasse tourner la tête mais en réalité, on va décortiquer et ça ira. Comme vous le savez il y a 9 acquis répartis en 7 niveaux pour chacune des 9 matières de Beauxbâtons (voir Acquis). Vous comprendrez que cela fait beaucoup de contenu et que dans le but de raccourcir la longueur des informations nous avons opté pour un système d'onglets, et donc, une fois que vous aurez compris comment fonctionne un onglet, vous aurez compris comment fonctionnent les autres.
En soi, un onglet c'est construit par le code ci-haut, ici l'onglet "Alchimie", finalement la seule chose qui nous intéresse c'est la balise spoiler qui elle est écrite en bbcode. Dans l'exemple nous avons un spoiler "Niveau 1", qui regroupe les acquis d'Alchimie de niveau 1 :
Ensuite dans un spoiler on remarque deux types de contenu :
1 • ST : abrégé de Savoir Théorique
2 • SP : abrégé de Savoir Pratique
Une couleur a été attribuée à chacun afin de les différencier, cette couleur elle est définie dans la balise span par background et color qui sont modifiables à votre guise. Il suffit de remplacer "SP (ou ST) Lorem ipsum" par "SP (ou ST) Titre de l'acquis".
Dans la partie Permis de transplanage, nous avons deux "boîtes", l'une appelée fiche-permis-nonobtenu et l'autre fiche-permistransplange, dans un premier temps il faudra supprimer l'une ou l'autre selon votre cas.
Si vous gardez :
Si vous gardez :
Et bien il vous faudra remplacer le lien de l'image, actuellement https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png, par celui de votre avatar. Puis il suffit de remplacer les X par les informations souhaitées. Et enfin, vous pouvez modifier 48XF4886FR par la combinaison que vous souhaitez du moment que vous respectez la mise en forme. Les deux premiers chiffres (ici 48) doivent correspondre à votre pourcentage de réussite.
Veuillez ne pas modifier l'apparence du permis, où le Ministère des Affaires Magiques le jugera contrefait!
Et cette dernière partie, qui est comme dans la première publication, il s'agit des liens de navigation rapide dans votre fiche de personnage.
- Code:
<div class="fiche-personnage"><div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites fiche-lien-actuel" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
Je ne reviendrai pas sur cette partie, étant donné qu'elle est expliquée dans la première publication, je dirai seulement que comme dit plus haut "fiche-lien-actuel" est désormais sur "fiche-liens-capacites" donnant "fiche-liens-capacites fiche-lien-actuel".
- Code:
<div class="fiche-capacites-traits"><div class="fiche-capacites" style="background:var(--secondary);"><div class="fiche-titre" style="color:var(--accentcolor);">Capacités</div><div class="fiche-infos"><div style="background:var(--accentcolor);color: var(--primaryfont);">Capacité 1</div><div style="background:var(--infospublication);color: var(--colorheader);">Capacité 2</div><div style="background:var(--secondary);color: var(--primaryfont);">Capacité 3</div>
</div></div>
<div class="fiche-traitsmagiques" style="background:var(--secondary);"><div class="fiche-titre" style="color:var(--accentcolor);">Traits Magiques</div><div class="fiche-infos"><div style="background:var(--secondary);color: var(--primaryfont);">Trait magique 1</div><div style="background:var(--accentcolor);color: var(--primaryfont);">Trait magique 2</div>
</div></div>
</div>
Dans cette partie, vous identifiez les capacités de vos personnages (merci de vous référez à Fiches pratiques) en remplaçant le texte "Capacité X" par le nom de la capacité. De même pour Traits magiques. Supprimez la case en surplus si nécessaire, vous serez toujours à temps de la rajouter plus tard.
Rappelons que les couleurs sont personnalisables en modifiant les propriétés background et color.
- Code:
<div class="fiche-desdestin" style="background:var(--neutral);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">Dés du destin</div>
<div class="fiche-de1" style="background-color: var(--infospublication);color:var(--colorheader);">Dé d'autonomie ou d'intellect - 2/9</div>
<div class="fiche-de2" style="background-color: var(--accentcolor);color:var(--colorheader);">Dé de communication ou de physique - 9/9</div>
<div class="fiche-de3" style="background-color: var(--accentpublication);color:var(--colorheader);">Dé d'effort ou de psyché - 1/9</div><div class="fiche-de4" style="background-color:var(--secondary);color:var(--colorheader);">Dé d'émotivité ou de sensitivité - 4/9</div>
</div>
Les dés du destin, selon si votre personnage est un.e élève ou adulte il vous faudra supprimer une partie du nom du dé.
1 • Pour un.e élève, on garde : autonomie, communication, effort et émotivité.
2 • Pour un.e adulte, on garde : intellect, physique, psyché et sensitivité.
Chaque dé est sur 9 et vous devez au total répartir 16 points entre les quatre dés. Dans le modèle, il y a des chiffres mis au hasard à titre d'exemple, veuillez les remplacer par vos propres données.
- Code:
<div class="fiche-familier" style="background:var(--secondary);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">Familier</div>
<div class="fiche-infos-familier"><div class="fiche-avatar"><svg style="filter:var(--ssavatar_bleu);" id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs><linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0"><stop id="stop1" stop-color="rgba(114, 176, 204, 1)" offset="0%"></stop><stop id="stop2" stop-color="rgba(255, 255, 255, 1)" offset="100%"></stop> </linearGradient></defs><path fill="url(#sw-gradient)" d="M30.8,-10.1C35.5,4.5,31.8,21.7,21.6,28.9C11.4,36.2,-5.5,33.5,-17.6,24.6C-29.8,15.7,-37.2,0.6,-33.4,-12.7C-29.7,-25.9,-14.9,-37.4,-0.9,-37.1C13,-36.8,26,-24.7,30.8,-10.1Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: all 0.3s ease 0s;"></path></svg><img class="lienavatar" src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /></div>
<div class="fiche-infos"><div class="fiche-nom-prenom" style="background:var(--secondary);color: var(--primaryfont);">Nom</div>
Écrire ici.</div>
</div></div>
Si votre personnage n'a pas de familier, vous pouvez supprimer toute cette partie. S'il en a un, vous pouvez vous référez à la partie "Informations générales" de votre personnage. On y retrouve le svg, l'image à changer pour un visuel de votre familier, ainsi que le nom et un petit texte de description qui viendra remplacer le "Écrire ici.".
- Code:
<div class="fiche-acquis" style="background:var(--infospublication);"><div class="fiche-titre" style="color:var(--accentcolor);">Acquis</div>
<div id="fiche-acquis-menu-tab"><div id="fiche-contenu-acquis">
<div class="fiche-acquis-tabs"><div class="fiche-acquis-tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /><label for="tab-1" style="background: var(--secondary);">Alchimie</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2" style="background: var(--secondary);">Artisanat Magique</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3" style="background: var(--secondary);">Conjuration du Mal</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4" style="background: var(--secondary);">Créatures Magiques</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5" style="background: var(--secondary);">E.H.C</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6" style="background: var(--secondary);">E.S.M</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-7" name="tab-group-1" type="radio" /> <label for="tab-7" style="background: var(--secondary);">Gastromagie</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-8" name="tab-group-1" type="radio" /> <label for="tab-8" style="background: var(--secondary);">Guérison</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
<div class="fiche-acquis-tab"><input id="tab-9" name="tab-group-1" type="radio" /> <label for="tab-9" style="background: var(--secondary);">Métamorphose</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
</div>
</div></div>
</div>
Bon, on ne va pas se mentir, il y a moyen que cette partie là vous fasse tourner la tête mais en réalité, on va décortiquer et ça ira. Comme vous le savez il y a 9 acquis répartis en 7 niveaux pour chacune des 9 matières de Beauxbâtons (voir Acquis). Vous comprendrez que cela fait beaucoup de contenu et que dans le but de raccourcir la longueur des informations nous avons opté pour un système d'onglets, et donc, une fois que vous aurez compris comment fonctionne un onglet, vous aurez compris comment fonctionnent les autres.
- Code:
<div class="fiche-acquis-tabs"><div class="fiche-acquis-tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /><label for="tab-1" style="background: var(--secondary);">Alchimie</label><div class="fiche-content-acquis" style="background: var(--backgroundpublication);">[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 2"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 3"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 4"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 5"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 6"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler][spoiler="Niveau 7"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
</div></div>
En soi, un onglet c'est construit par le code ci-haut, ici l'onglet "Alchimie", finalement la seule chose qui nous intéresse c'est la balise spoiler qui elle est écrite en bbcode. Dans l'exemple nous avons un spoiler "Niveau 1", qui regroupe les acquis d'Alchimie de niveau 1 :
- Code:
[spoiler="Niveau 1"]<span class="acquis-theorique" style="background:var(--secondary);color:var(--primaryfont);">ST Lorem ipsum</span>
<span class="acquis-pratique" style="background:var(--infospublication);color:var(--primaryfont);">SP Lorem ipsum</span>[/spoiler]
Ensuite dans un spoiler on remarque deux types de contenu :
1 • ST : abrégé de Savoir Théorique
2 • SP : abrégé de Savoir Pratique
Une couleur a été attribuée à chacun afin de les différencier, cette couleur elle est définie dans la balise span par background et color qui sont modifiables à votre guise. Il suffit de remplacer "SP (ou ST) Lorem ipsum" par "SP (ou ST) Titre de l'acquis".
- Code:
<div class="fiche-permis-nonobtenu"></div>
<div class="fiche-permistransplange"><div class="fiche-titre-permis"> <<<<<<<<<<<<<<<< <span style="font-weight:bold;color:#000;font-size:18px;">Permis de Transplanage</span> </div>
<div class="fiche-infos-permis"><div class="fiche-permis-avatar"><img src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /></div>
<div class="fiche-infos"><b>Nom :</b> XXXXXXXXXXXXXX
<b>Prénom :</b> XXXXXXXXXXXXXX
<b>Date de naissance :</b> XX/XX/XXXX
<b>Nationalité :</b> XXXXXXXXXXXXXX
<b>Délivré le :</b> XX/XX/XXXX à XXXXXXXXXXXXXX</div>
<div class="fiche-permis-ministere"><div style="color:#000;font-family:'Vidaloka', serif;font-size:12px;text-align:left!important;">Délivré par le Ministères des Affaires Magiques</div>
>>>>>>>>>>>>>>>>>>>> <span style="font-weight:bold;color:#000;font-size:25px;">48XF4886FR</span></div></div></div>
Dans la partie Permis de transplanage, nous avons deux "boîtes", l'une appelée fiche-permis-nonobtenu et l'autre fiche-permistransplange, dans un premier temps il faudra supprimer l'une ou l'autre selon votre cas.
Si vous gardez :
- Code:
<div class="fiche-permis-nonobtenu"></div>
Si vous gardez :
- Code:
<div class="fiche-permistransplange"><div class="fiche-titre-permis"> <<<<<<<<<<<<<<<< <span style="font-weight:bold;color:#000;font-size:18px;">Permis de Transplanage</span> </div>
<div class="fiche-infos-permis"><div class="fiche-permis-avatar"><img src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /></div>
<div class="fiche-infos"><b>Nom :</b> XXXXXXXXXXXXXX
<b>Prénom :</b> XXXXXXXXXXXXXX
<b>Date de naissance :</b> XX/XX/XXXX
<b>Nationalité :</b> XXXXXXXXXXXXXX
<b>Délivré le :</b> XX/XX/XXXX à XXXXXXXXXXXXXX</div>
<div class="fiche-permis-ministere"><div style="color:#000;font-family:'Vidaloka', serif;font-size:12px;text-align:left!important;">Délivré par le Ministères des Affaires Magiques</div>
>>>>>>>>>>>>>>>>>>>> <span style="font-weight:bold;color:#000;font-size:25px;">48XF4886FR</span></div></div></div>
Et bien il vous faudra remplacer le lien de l'image, actuellement https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png, par celui de votre avatar. Puis il suffit de remplacer les X par les informations souhaitées. Et enfin, vous pouvez modifier 48XF4886FR par la combinaison que vous souhaitez du moment que vous respectez la mise en forme. Les deux premiers chiffres (ici 48) doivent correspondre à votre pourcentage de réussite.
Veuillez ne pas modifier l'apparence du permis, où le Ministère des Affaires Magiques le jugera contrefait!
- Code:
<div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites fiche-lien-actuel" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
</div>
Et cette dernière partie, qui est comme dans la première publication, il s'agit des liens de navigation rapide dans votre fiche de personnage.
Aliaume Delalande
Directeur & Professeur d’Alchimie
Nous enchaînons avec le tutoriel de la troisième publication.
Première partie de la fiche, que vous connaissez déjà, le lien actuel est maintenant fiche-liens-malle-baguette.
Bien, nous voilà dans la "boîte" concernant la baguette magique. Toujours composé du svg, dont la couleur est régi par style="filter:var(--ssavatar_bleu);" et qu'on peut modifier en utilisant --ssavatar_bleu, --ssavatar_vert, --ssavatar_rouge ou --ssavatar_rose.
Ensuite vient l'image de votre baguette, actuellement définie par src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png", veuillez remplacer le lien par celui de votre image, dont les dimensions sont définies à 250px par 100px.
Enfin vous trouverez des "boîtes" avec les mots taille, coeur, essence de bois et flexibilité, qu'il faudra remplacer par les informations adéquates. Puis le texte "Écrire ici." à remplacer par une courte description.
Le code du coffre peut faire peur, mais en réalité c'est une répétition, comme les onglets des Acquis. Pour l'exemple de la fiche, il y a déjà 8 emplacements, mais voyons comment est codé un emplacement.
Et oui, un objet ça représente ça en code. En premier la "boîte" fiche-malle-objet, dont on peut modifier le background, et surtout le data-title="Nom de l'objet", remplacez simplement Nom de l'objet parce qui correspond, cela d'indiquer au survol le titre de l'objet. Ensuite l'image, dont il faut modifier "LIENDEl'IMAGE". Puis vient le span "fiche-malle-compteur-objet" qui sert à savoir combien d'exemplaire vous avez dudit objet, remplacez simplement par le numéro nécessaire ou laissez à un exemplaire.
Vous pouvez supprimer, ou ajouter selon vos besoins. Et voilà, c'était pas si sorcier!
Et cette dernière partie, déjà expliquée dans la première publication, concerne les liens de navigation rapide dans votre fiche de personnage, un copié/collé de la première partie bien qu'on ouvre pas la balise fiche-personnage mais qu'on la ferme à la suite des liens.
- Code:
<div class="fiche-personnage"><div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette fiche-lien-actuel" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
Première partie de la fiche, que vous connaissez déjà, le lien actuel est maintenant fiche-liens-malle-baguette.
- Code:
<div class="fiche-baguette" style="background:var(--neutral);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">Baguette Magique</div><div class="fiche-imgbaguette"><svg style="filter:var(--ssavatar_bleu);" id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0"><stop id="stop1" stop-color="rgba(114, 176, 204, 1)" offset="0%"></stop><stop id="stop2" stop-color="rgba(255, 255, 255, 1)" offset="100%"></stop> </linearGradient></defs><path fill="url(#sw-gradient)" d="M16.3,-26.3C22.9,-24.4,31.4,-23.7,36.2,-19.5C40.9,-15.4,41.8,-7.7,40.5,-0.7C39.3,6.2,35.8,12.5,31.6,17.5C27.3,22.4,22.3,26.2,16.9,29.4C11.5,32.6,5.8,35.2,-0.4,35.8C-6.5,36.4,-13,35,-17.5,31.3C-22,27.7,-24.5,21.6,-29.3,16C-34,10.4,-40.9,5.2,-42.1,-0.7C-43.2,-6.5,-38.6,-13.1,-33.2,-17.5C-27.7,-21.9,-21.5,-24.2,-15.9,-26.7C-10.2,-29.2,-5.1,-31.8,-0.1,-31.5C4.8,-31.3,9.6,-28.1,16.3,-26.3Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: all 0.3s ease 0s;"></path></svg><img class="imgbaguette" src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /></div>
<div class="fiche-infos"><div style="background:var(--accentcolor);color: var(--primaryfont);">Taille</div><div style="background:var(--infospublication);color: var(--colorheader);">Coeur</div><div style="background:var(--accentpublication);color: var(--primaryfont);">Essence de bois</div><div style="background:var(--accentcolor);color: var(--terfont);">Flexibilité</div>
Écrire ici.</div>
</div>
Bien, nous voilà dans la "boîte" concernant la baguette magique. Toujours composé du svg, dont la couleur est régi par style="filter:var(--ssavatar_bleu);" et qu'on peut modifier en utilisant --ssavatar_bleu, --ssavatar_vert, --ssavatar_rouge ou --ssavatar_rose.
Ensuite vient l'image de votre baguette, actuellement définie par src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png", veuillez remplacer le lien par celui de votre image, dont les dimensions sont définies à 250px par 100px.
Enfin vous trouverez des "boîtes" avec les mots taille, coeur, essence de bois et flexibilité, qu'il faudra remplacer par les informations adéquates. Puis le texte "Écrire ici." à remplacer par une courte description.
- Code:
<div class="fiche-malle" style="background:var(--secondary);"><div class="fiche-titre" style="color:var(--accentcolor);">Coffre</div><div class="fiche-malle-contenu"><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div><div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div>
</div></div>
Le code du coffre peut faire peur, mais en réalité c'est une répétition, comme les onglets des Acquis. Pour l'exemple de la fiche, il y a déjà 8 emplacements, mais voyons comment est codé un emplacement.
- Code:
<div class="fiche-malle-objet" style="background:var(--backgroundpublication)" data-title="Nom de l'objet"><img src="LIENDEL'IMAGE" /><span class="fiche-malle-compteur-objet" style="background:var(--accentcolor);color:var(--primaryfont);">1</span></div>
Et oui, un objet ça représente ça en code. En premier la "boîte" fiche-malle-objet, dont on peut modifier le background, et surtout le data-title="Nom de l'objet", remplacez simplement Nom de l'objet parce qui correspond, cela d'indiquer au survol le titre de l'objet. Ensuite l'image, dont il faut modifier "LIENDEl'IMAGE". Puis vient le span "fiche-malle-compteur-objet" qui sert à savoir combien d'exemplaire vous avez dudit objet, remplacez simplement par le numéro nécessaire ou laissez à un exemplaire.
Vous pouvez supprimer, ou ajouter selon vos besoins. Et voilà, c'était pas si sorcier!
- Code:
<div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette fiche-lien-actuel" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
</div>
Et cette dernière partie, déjà expliquée dans la première publication, concerne les liens de navigation rapide dans votre fiche de personnage, un copié/collé de la première partie bien qu'on ouvre pas la balise fiche-personnage mais qu'on la ferme à la suite des liens.
Aliaume Delalande
Directeur & Professeur d’Alchimie
On poursuit notre route en passant la quatrième publication en revue.
Toujours pareil : veuillez vous référer à la première publication.
Ici vous pourrez décrire la famille de votre personnage. Dans le modèle, il y a la place pour décrire deux membres mais pour en rajouter il suffit de copier/coller cette partie :
On commence avec la "boîte" fiche-relation-lien qui contient les informations de la personne décrite. Puis vient l'image, où il faut remplacer le lien https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png par celui de l'image désirée. Ensuite veuillez remplacer Nom Prénom par les informations requises, de même que Nature du lien (frère, mère, grand-père...) et enfin le texte "Écrire ici." est à remplacer par une courte description.
Et en fait, dans la "boîte" fiche-relations, c'est construit de la même manière que pour la famille, mais elle est dédiée au cercle hors-famille.
Et toujours pareil, un copié/collé de la première partie de la fiche.
- Code:
<div class="fiche-personnage"><div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations fiche-lien-actuel" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
Toujours pareil : veuillez vous référer à la première publication.
- Code:
<div class="fiche-relations" style="background:var(--neutral);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">Famille</div><div class="fiche-relation-lien" style="background:var(--secondary)"><div><img src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /></div><div class="fiche-relation-contenu"><div class="fiche-nom-prenom" style="background:var(--secondary);color: var(--primaryfont);">Nom Prénom</div><span style="background:var(--accentcolor);color: var(--colorheader);">Nature du lien</span> Écrire ici.
</div></div>
<div class="fiche-relation-lien" style="background:var(--secondary)"><img src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /><div class="fiche-relation-contenu"><div class="fiche-nom-prenom" style="background:var(--secondary);color: var(--primaryfont);">Nom Prénom</div><span style="background:var(--accentcolor);color: var(--colorheader);">Nature du lien</span> Écrire ici. quam. Aenean efficitur commodo sem non porta.
</div></div>
</div>
Ici vous pourrez décrire la famille de votre personnage. Dans le modèle, il y a la place pour décrire deux membres mais pour en rajouter il suffit de copier/coller cette partie :
- Code:
<div class="fiche-relation-lien" style="background:var(--secondary)"><img src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /><div class="fiche-relation-contenu"><div class="fiche-nom-prenom" style="background:var(--secondary);color: var(--primaryfont);">Nom Prénom</div><span style="background:var(--accentcolor);color: var(--colorheader);">Nature du lien</span> Écrire ici.
</div></div>
</div>
On commence avec la "boîte" fiche-relation-lien qui contient les informations de la personne décrite. Puis vient l'image, où il faut remplacer le lien https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png par celui de l'image désirée. Ensuite veuillez remplacer Nom Prénom par les informations requises, de même que Nature du lien (frère, mère, grand-père...) et enfin le texte "Écrire ici." est à remplacer par une courte description.
- Code:
<div class="fiche-relations" style="background:var(--neutral);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">Relations</div><div class="fiche-relation-lien" style="background:var(--secondary)"><img src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /><div class="fiche-relation-contenu"><div class="fiche-nom-prenom" style="background:var(--secondary);color: var(--primaryfont);">Nom Prénom</div><span style="background:var(--accentcolor);color: var(--colorheader);">Nature du lien</span> Écrire ici.
</div></div>
<div class="fiche-relation-lien" style="background:var(--secondary)"><img src="https://raw.githubusercontent.com/Stevousse/Images-BB/main/avatar-defaut-200.png" /><div class="fiche-relation-contenu"><div class="fiche-nom-prenom" style="background:var(--secondary);color: var(--primaryfont);">Nom Prénom</div><span style="background:var(--accentcolor);color: var(--colorheader);">Nature du lien</span> Écrire ici.
</div></div>
</div>
Et en fait, dans la "boîte" fiche-relations, c'est construit de la même manière que pour la famille, mais elle est dédiée au cercle hors-famille.
- Code:
<div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations fiche-lien-actuel" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
</div>
Et toujours pareil, un copié/collé de la première partie de la fiche.
Aliaume Delalande
Directeur & Professeur d’Alchimie
Dernière ligne droite : le code de la cinquième publication concernant le Journal de bord.
Vous connaissez maintenant, mais avez-vous bien compris ? Alors sans tricher où se trouve "fiche-lien-actuel" ?
Ici vous trouverez de quoi renseigner vos RPs en cours, on commence par donner la date du RP, puis les participants, on remplace LIEN RP par le véritable lien, puis Titre RP par le titre, et enfin le texte "Écrire ici." par une courte description, ce n'est pas obligatoire, supprimez cette partie si vous le souhaitez.
Et bien sûr, vous pouvez personnaliser background et color.
Pour rajouter un RP, copiez/collez ce code :
Et si vous avez besoin de rajouter un.e participant.e, copiez/collez à la suite d'une "boîte" Nom Prénom :
Le fonctionnement est le même que pour les RPs en cours, coupez simplement le code du RP en cours et collez le dans la "boîte" RPs terminés.
La section RPs abandonnés a le même fonctionnement que précédemment mais un filtre est appliqué pour baisser l'opacité, et la remettre à la normale lorsque l'on survole la "boîte".
La même chose que pour les autres publications, on copie/colle la partie concernant les liens de navigation entre les publications de la fiche et on ferme la "boîte" fiche-personnage.
Bravo ! Vous êtes venu à bout de ce tutoriel !
- Code:
<div class="fiche-personnage"><div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps fiche-lien-actuel" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
Vous connaissez maintenant, mais avez-vous bien compris ? Alors sans tricher où se trouve "fiche-lien-actuel" ?
- Réponse:
- Dans "fiche-liens-rps"
- Code:
<div class="fiche-rp-encours" style="background:var(--neutral);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">RPs en cours</div><div class="fiche-infos" style="background:var(--backgroundpublication);"><div style="background:var(--infospublication);color: var(--primaryfont);">XX/XX/XXXX</div><div style="background:var(--accentpublication);color: var(--colorheader);">Nom Prénom</div><div style="background:var(--accentcolor);color: var(--primaryfont);">Nom Prénom</div> <a href="LIEN RP">Titre RP</a> Écrire ici.</div>
</div>
Ici vous trouverez de quoi renseigner vos RPs en cours, on commence par donner la date du RP, puis les participants, on remplace LIEN RP par le véritable lien, puis Titre RP par le titre, et enfin le texte "Écrire ici." par une courte description, ce n'est pas obligatoire, supprimez cette partie si vous le souhaitez.
Et bien sûr, vous pouvez personnaliser background et color.
Pour rajouter un RP, copiez/collez ce code :
- Code:
<div style="background:var(--infospublication);color: var(--primaryfont);">XX/XX/XXXX</div><div style="background:var(--accentpublication);color: var(--colorheader);">Nom Prénom</div><div style="background:var(--accentcolor);color: var(--primaryfont);">Nom Prénom</div> <a href="LIEN RP">Titre RP</a> Écrire ici.</div>
Et si vous avez besoin de rajouter un.e participant.e, copiez/collez à la suite d'une "boîte" Nom Prénom :
- Code:
<div style="background:var(--accentpublication);color: var(--colorheader);">Nom Prénom</div>
- Code:
<div class="fiche-rp-termines" style="background:var(--secondary);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">RPs terminés</div><div class="fiche-infos" style="background:var(--backgroundpublication);"><div style="background:var(--infospublication);color: var(--primaryfont);">XX/XX/XXXX</div><div style="background:var(--accentpublication);color: var(--colorheader);">Nom Prénom</div><div style="background:var(--accentcolor);color: var(--primaryfont);">Nom Prénom</div> <a href="LIEN RP">Titre RP</a> Écrire ici.</div>
</div>
Le fonctionnement est le même que pour les RPs en cours, coupez simplement le code du RP en cours et collez le dans la "boîte" RPs terminés.
- Code:
<div class="fiche-rp-abandonnes" style="background:var(--infospublication);"><div class="fiche-titre" style="width:100%!important;color:var(--accentcolor);">RPs abandonnés</div><div class="fiche-infos" style="background:var(--backgroundpublication);"><div style="background:var(--infospublication);color: var(--primaryfont);">XX/XX/XXXX</div><div style="background:var(--accentpublication);color: var(--colorheader);">Nom Prénom</div><div style="background:var(--accentcolor);color: var(--primaryfont);">Nom Prénom</div> <a href="LIEN RP">Titre RP</a> Écrire ici.</div>
</div>
La section RPs abandonnés a le même fonctionnement que précédemment mais un filtre est appliqué pour baisser l'opacité, et la remettre à la normale lorsque l'on survole la "boîte".
- Code:
<div class="fiche-liens"><a class="fiche-liens-fiche" href="/privmsg?mode=post&u=NUMERODEPROFIL" target="_blank" data-title="Courrier"><i class="fa-solid fa-envelope"></i></a><a class="fiche-liens-fiche" href="/LIENVERSVOTREFICHE" data-title="Fiche"><i class="fa-solid fa-file"></i></a><a class="fiche-liens-capacites" href="/LIENVERSVOSCAPACITES" data-title="Capacités"><i class="fa-solid fa-wand-magic-sparkles"></i></a><a class="fiche-liens-malle-baguette" href="/LIENVERSVOTREMALLE" data-title="Inventaire"><i class="fa-solid fa-suitcase"></i></a><a class="fiche-liens-relations" href="/LIENVERSVOSRELATIONS" data-title="Relations"><i class="fa-solid fa-users"></i></a><a class="fiche-liens-rps fiche-lien-actuel" href="/LIENVERSVOTREJOURNALRP" data-title="Journal de bord"><i class="fa-solid fa-book"></i></a></div>
</div>
La même chose que pour les autres publications, on copie/colle la partie concernant les liens de navigation entre les publications de la fiche et on ferme la "boîte" fiche-personnage.
Bravo ! Vous êtes venu à bout de ce tutoriel !
Contenu sponsorisé