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
- Il y a plusieurs blocs disponibles pour faire des variations de présentation de la fiche
- Il existe une version Générale, Validation & Staff
- Crédits : KoalaVolant
- Il y a plusieurs blocs disponibles pour faire des variations de présentation de la fiche
- Il existe une version Générale, Validation & Staff
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="bylgen bylchrono"><div class="byltitle">Chronologie de l'histoire</div>
<div class="byltext"><div class="bybylchrono">
<div class="chrono"><span>00/00/00</span><p>Blablablabla bla blablalba blal</p></div>
<!-- FIN DE LA CHRONO -->
</div>
<!-- FIN DE LA FICHE GENERALE -->
</div>
Ajouter une date
- Avant la "FIN DE LA CHRONO", copiez coller autant de fois le code suivant que vous avez de date :
- Code:
<div class="chrono"><span>00/00/00</span><p>Blablablabla bla blablalba blal</p></div>
CSS
- Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS
- Si vous n'avez pas la fiche générale.Copier coller ça à l'intérieur :
- Code:
/******************* FICHE GENERALE **************/
.bylgen{ width:95%; margin:0 auto; }
.bylgen .byltitle{ background:var(--fond-deg); padding:20px; font-size:15px; text-transform:uppercase; letter-spacing:2px; line-height:17px; color:var(--white); font-family:var(--font-title); font-weight:200; text-align:left;}
.bylgen a{ color:var(--dark) !important; }
.bylgen a:hover{ color:var(--light); }
.bylgen .byltext{ background:var(--white); color:#222; padding:20px; text-align:justify; font-size:12px; line-height:1.3em; }
.bylgen .byltitle5{ position:relative; font-size:18px; color:var(--dark); padding-left:45px; border-bottom:var(--dark) 1px solid; padding-bottom:5px;}
.bylgen .byltitle5 span{position:absolute; top:-10px; left:0; display:block; background:var(--fond-deg); width:30px; height:30px; padding:10px 3px; color:var(--white); font-weight:500; font-family:var(--font-title); }
- Et que vous ayez déjà la fiche générale ou pas, copiez coller ça en plus :
- Code:
/* CHRONO */
.bylchrono .bybylchrono{ border-left:var(--light) 1px solid; width:100%; margin:0 auto; padding-left:40px; position:relative; }
.bylchrono .chrono{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; left:-50px; margin:10px 0; width: 112%;}
.chrono span{ display:block; width:25%; background:var(--white); font-family:var(--font-title); letter-spacing:1px; border:1px solid var(--light); padding:5px; text-align:center; height:auto; }
.chrono p{ display:block; width:74%; margin:0; margin-left:20px; background:#f5f5f5; padding:10px; }
|
|
|
