KoalaVolant

Mar 20 Déc 2022 - 10:34

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".

Particularités du code :
- Crédits : KoalaVolant et 0tsana
- Il y a plusieurs blocs disponibles pour faire des variations de présentation de la fiche
- Il existe une version Fiche de scénario & Fiche de préliens

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:

 <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"><div class="byltitlepres">Prénom Nom</div>  <div class="bylidentite"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/> <div><strong>nom :</strong> écrire ici ; <strong>prénom(s) :</strong> écrire ici ; <strong>espèce :</strong> humain ou androïde ( déviant ou non ) ; <strong>âge :</strong> écrire ici ; <strong>sexe//genre :</strong> écrire ici ; <strong>date & lieu de naissance :</strong> écrire ici ; <strong>nationalité :</strong> écrire ici ; <strong>orientation sexuelle :</strong> écrire ici ; <strong>statut civil :</strong> écrire ici ; <strong>situation financière :</strong> écrire ici ; <strong>métier(s) :</strong> écrire ici ; <strong>capacité :</strong> écrire ici <strong>groupe :</strong> écrire ici ; <strong>avatar & crédits :</strong> écrire ici ; </div></div>  <div class="byltitlepres2">Caractère</div> <div class="bylpresbloc">Peut être sous forme de mots clés, d'anecdotes, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in molestie nibh. Vivamus congue justo ipsum, vitae tristique diam blandit sed. Praesent vitae aliquam risus, non commodo ligula. Aliquam mollis leo ut commodo vehicula. Sed ut velit sed lectus lacinia sollicitudin. Nunc non lacus ipsum. Nullam pulvinar a nisl eget vulputate. Morbi eget magna id erat tempus mollis. Maecenas dui orci, ultricies sagittis interdum eget, ornare et nisl. Suspendisse sit amet velit eros. Maecenas sed mollis massa. Sed tincidunt ipsum quis magna consectetur hendrerit. </div>  <div class="byltitlepres2">Histoire</div> <div class="bylpresbloc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in molestie nibh. Vivamus congue justo ipsum, vitae tristique diam blandit sed. Praesent vitae aliquam risus, non commodo ligula. Aliquam mollis leo ut commodo vehicula. Sed ut velit sed lectus lacinia sollicitudin. Nunc non lacus ipsum. Nullam pulvinar a nisl eget vulputate. Morbi eget magna id erat tempus mollis. Maecenas dui orci, ultricies sagittis interdum eget, ornare et nisl. Suspendisse sit amet velit eros. Maecenas sed mollis massa. Sed tincidunt ipsum quis magna consectetur hendrerit. </div>  <div class="byljoueur"><div><strong>pseudo :</strong> écrire ici ; <strong>âge :</strong> écrire ici ; <strong>prélien, predef', scénario ou inventé ? :</strong> ( penser à mentionner le créateur•trice du PL, etc ) ; <strong>comment nous as-tu connu ? :</strong> écrire ici ; <strong>double compte ? :</strong> écrire ici ; <strong>un dernier mot ? :</strong> écrire ici ; </div><img src="https://i.imgur.com/7xR7D1I.jpg"/></div>  </div>

CSS

Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS

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%); }

Sujets similaires

Fiche de présentation

Pisrale :: Codages :: Thèmes complets :: Gang Technology

Nos amis proches