Accueil
KoalaVolant
Mar 20 Déc 2022 - 10:33
Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Gang Technology"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".
Voir le thème complet "Gang Technology"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".
Particularités du code :
- Crédits : KoalaVolant et 0tsana
- Il existe une version Fiche de présentation & Fiche de scénario
- Crédits : KoalaVolant et 0tsana
- Il existe une version Fiche de présentation & Fiche de scénario
Couleurs
- Pour rappel, ce code appartient à un thème complet. Si vous utilisez déjà d'autres codes de ce thème, vous pouvez esquiver cette partie. Elle concerne les couleurs, et les polices d'écriture.
Sinon : les couleurs sont à placer où vous voulez, mais quand vous les modifierez, elles se modifieront partout où les "variables" sont utilisées.
Ce code utilise un système de “variables” rangé dans un “:root”.
Si vous trouvez :root { } dans votre CSS déjà actuel, coller ce qu’il y a à l’intérieur du :root suivant, dans celui que vous possédez déjà.
Attention, il peut y avoir des conflits de variable. Il ne peut pas y avoir deux mêmes variables. (genre, pas deux fois de --color1). Si c’est le cas, il suffit de renommer “--fond” par exemple en “--main-color-banane” (ce que vous voulez), partout dans le code.
Pour rechercher et remplacer dans tout un code : https://convertir.github.io/outils/remplacer-texte-en-ligne.html
Note : Si vous utilisez plusieurs codes de Pisrale indifférents de ce thème, il y a des chances qu’il y ait des conflits. Si vous voulez qu’on modifie les codes pour vous, suivez un de ces bouton
Personnaliser mon code
Signaler un souci - Pour copier coller le ":root" il faut aller dans le Panneau d'administration > Affichage > Couleurs et CSS > Feuille de style CSS et copier coller ça :
- Code:
:root{
--fond-deg:linear-gradient(90deg, var(--dark) 32.29%, var(--light) 89.86%);
--fond-img:url('https://www.zupimages.net/up/22/45/f0t6.png');
--fond-img2:url('https://www.zupimages.net/up/22/45/f0t6.png');
--fond-bodyline:#4d4d4d;
--dark:#531b37;
--light:#88263C;
--black:#FDE8ED;
--white:#dedede;
--whitef:#363636;
--text-shadow:0px 0px 0px #757575;
--font-text:'Inter', sans-serif;
--font-title:'GothamPro', sans-serif;
--groupe1:#d7ba83;
--groupe2:#ff85a7;
--groupe3:#88c6ff;
--groupe4:#6ed373;
}
- Attention, les polices d'écriture utilisées sur ce thème sont "Inter" et "Gotham Pro" dans ce but, donc, il vous faudra les installer. Pour ça, connectez vous au compte fondateur, allez dans le Panneau d'administration > Affichage > Templates > Haut du forum (overall-header) et avant le "< /head>" (sans espace), copiez coller ça :
- Code:
<!-- FONTS DU FORUM -->
<link href="https://cdn.statically.io/gist/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/fad2f254369fb54250260077a4c87391a6280c52/gotham.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
- Vous pouvez bien sûr changer les fonts par autre chose, en allant vous servir sur Google Fonts
HTML
- Copier coller ça :
- Code:
<div class="bylpres bylprelien bylscenario"><div class="byltitlepres">Nom du ou des liens
<em>Libre / <strike>Pris</strike> / <strike>Réservé</strike></em></div>
<!-- IDENTITE -->
<div class="bylpresbloc"><b1>groupe du personnage :</b1> vous pouvez décrire ici le groupe ou la famille en rapport avec votre personnage. Donner un maximum de détails sur celleux-ci.
<cad1>genre - âge - etc</cad1>
<b1>description du lien :</b1> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<cad1>genre - âge - etc</cad1>
<b1>description du lien :</b1> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<cad1>genre - âge - etc</cad1>
<b1>description du lien :</b1> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="bylpres"><div class="byltitlepres2">Petits détails du créateurice</div>
<div class="bylpresbloc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a sagittis tellus. Etiam posuere urna quis odio cursus, eget vehicula sapien mattis. Aenean viverra purus vel pretium vehicula. Aliquam vel eleifend eros. Phasellus pretium iaculis mi sed cursus. Nulla convallis, nulla in ultrices pharetra, erat nibh consequat orci, et elementum dui mauris vitae dui. Ut hendrerit sapien nisi, in dignissim metus pulvinar sed. Vivamus nunc nulla, pretium sed nulla sed, placerat dictum lacus. Quisque augue mi, tincidunt molestie libero ut, feugiat sollicitudin nunc. Donec eu hendrerit orci. Integer faucibus, enim non condimentum rutrum, velit orci lacinia sapien, eget tempor ex nulla ac eros. Quisque ac magna lacus. Nam sollicitudin mi sed ipsum blandit, ut porta enim faucibus. Sed rhoncus ligula eu mi aliquam luctus.</div></div>
CSS
- Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS
- Si vous n'avez pas la fiche de présentation qui va avec, copier coller ça à l'intérieur :
- Code:
/********************** FICHE DE PRESENTATION *************/
.bylpres{ width:90%; margin:0 auto; }
.bylpres br{ display:none; }
.bylidentite br, .bylpresbloc br, .byljoueur br{ display:block;}
.bylpres .byltitlepres{ background:var(--fond-deg); padding:20px; color:var(--white); font-family:var(--font-title); letter-spacing:4px; text-transform:uppercase; font-weight:200; font-size:20px; text-align:center;}
.byltitlepres{ background:var(--fond-deg); padding:20px; color:var(--white); font-family:var(--font-title); letter-spacing:4px; text-transform:uppercase; font-weight:200; font-size:20px; text-align:center;}
.bylidentite{ display:flex; justify-content:space-between; margin:5px 0px; }
.bylidentite div, .bylidentite img{ width:49.5%; height:130px; }
.bylidentite strong, .byljoueur strong{ font-family:var(--font-title);
font-size: 13px;
letter-spacing: 1px;
color: #94616F;
text-transform: lowercase;
font-weight:700;}
.bylidentite div{ background:var(--whitef); padding:10px; overflow:auto; border:1px solid var(--light); }
.bylpres .byltitlepres2{ background:var(--fond-img); padding:15px; font-family:var(--font-title); color:var(--white); font-size:25px; background-size:100%; text-align:right; text-shadow:var(--text-shadow);}
.byltitlepres2{ background:var(--fond-img); padding:15px; font-family:var(--font-title); color:var(--white); font-size:25px; background-size:100%; text-align:right; text-shadow:var(--text-shadow);}
.bylpres .bylpresbloc{ background:var(--whitef); padding:20px; font-size:13px; line-height:1.3em; height:200px; overflow:auto; margin-bottom:10px; }
.byljoueur{ display:flex; justify-content:space-between; }
.byljoueur div{ background:var(--whitef); width:80%; border:1px solid var(--light); padding:15px; height:100px; overflow:auto; }
.byljoueur img:last-child{ width:100px; height:100px; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
- Que vous ayez la fiche de présentation ou pas vous avez besoin de ce bout de code à copier coller en plus :
- Code:
/* PRELIENS */
.bylprelien .bylpresbloc{ height:auto; }
/* DÉBUT TYPO PERSONNALISÉ */
u1 {text-decoration: none;box-shadow: inset 0px -5px 0px rgb(133, 74, 99);}
u2 {text-decoration: none;box-shadow: inset 0px -5px 0px rgb(110, 41, 70);}
u3 {text-decoration: none;border-bottom: dotted 2px #6e2946;}
cad1 {color:#ffffff;background:#854a63;}
cad2 {color:#ffffff;background:#6e2946;}
cad1 a, cad2 a{ color:#fff !important; }
i1 {font-weight:bold !important; font-style:italic !important; font-size:12px !important; color:#854a63 !important;font-family:Calibri !important;}
i2 {font-weight:bold !important; font-style:italic !important; font-size:12px !important; color:#6e2946 !important;font-family:Calibri !important;}
b1 {font-weight:regular !important; font-size:12px !important; color:#854a63 !important; font-family:Impact !important; letter-spacing:1px;}
b2 {font-weight:regular !important; font-size:12px !important; color:#6e2946 !important; font-family:Impact !important; letter-spacing:1px;}
/* FIN TYPO PERSONNALISÉ */
