Accueil
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".
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 préliens
- Crédits : KoalaVolant et 0tsana
- Il existe une version Fiche de présentation & 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:
<!-- 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 bylscenario"><div class="byltitlepres">Prénom Nom
<em>Libre / <strike>Pris</strike> / <strike>Réservé</strike></em></div>
<!-- IDENTITE -->
<div class="bylidentite"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/><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>modèle :</strong> si vous êtes un androïde, référez-vous à ce [url=https://becomeyourlife.forumactif.com/t217-bottin-des-modeles-d-androides]bottin[/url] afin d'éviter les doublons. <strong>matricule :</strong> #000 000 000 - 00 ( remplacez par les chiffres que vous voulez ). <strong>âge :</strong> écrire ici ; <strong>sexe//genre :</strong> écrire ici ; <strong>date & lieu de naissance :</strong> date et lieu de conception pour les androïdes ; <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>groupe :</strong> écrire ici ; <strong>avatar & crédits :</strong> écrire ici ;
</div></div>
<!-- CARACTERE -->
<div class="byltitlepres2">Personnage</div>
<div class="bylpresbloc">Décrivez son caractère (même en mot clé), comment est le personnage en gros résumé, un peu de son histoire, etc.
</div>
<!-- LIENS -->
<div class="byltitlepres2">Liens</div>
<div class="bylpresbloc bylliens"><span><img src="https://i.pinimg.com/originals/6b/a6/e2/6ba6e204f38131e83ef18a8e071f0ca3.gif"><div><cad1>Titre du lien</cad1> 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.
Ut at luctus enim. Nulla nec tempor purus. Phasellus at sapien neque. Etiam mattis neque orci, ultricies tempor velit tincidunt eget. Etiam hendrerit rutrum justo, ac cursus nulla lacinia sit amet. Aliquam venenatis scelerisque mattis. Mauris vehicula metus leo, eu convallis odio tempor sit amet. Morbi dui lectus, ornare ac volutpat varius, volutpat id ex. In et erat gravida massa sodales convallis at at massa. Pellentesque feugiat libero tellus, ut scelerisque enim vehicula ut. Phasellus vestibulum tristique rhoncus.</div></span>
<span><img src="https://i.pinimg.com/originals/6b/a6/e2/6ba6e204f38131e83ef18a8e071f0ca3.gif"><div><cad1>Titre du lien</cad1> 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.
Ut at luctus enim. Nulla nec tempor purus. Phasellus at sapien neque. Etiam mattis neque orci, ultricies tempor velit tincidunt eget. Etiam hendrerit rutrum justo, ac cursus nulla lacinia sit amet. Aliquam venenatis scelerisque mattis. Mauris vehicula metus leo, eu convallis odio tempor sit amet. Morbi dui lectus, ornare ac volutpat varius, volutpat id ex. In et erat gravida massa sodales convallis at at massa. Pellentesque feugiat libero tellus, ut scelerisque enim vehicula ut. Phasellus vestibulum tristique rhoncus.</div></span>
<span><img src="https://i.pinimg.com/originals/6b/a6/e2/6ba6e204f38131e83ef18a8e071f0ca3.gif"><div><cad1>Titre du lien</cad1> 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.
Ut at luctus enim. Nulla nec tempor purus. Phasellus at sapien neque. Etiam mattis neque orci, ultricies tempor velit tincidunt eget. Etiam hendrerit rutrum justo, ac cursus nulla lacinia sit amet. Aliquam venenatis scelerisque mattis. Mauris vehicula metus leo, eu convallis odio tempor sit amet. Morbi dui lectus, ornare ac volutpat varius, volutpat id ex. In et erat gravida massa sodales convallis at at massa. Pellentesque feugiat libero tellus, ut scelerisque enim vehicula ut. Phasellus vestibulum tristique rhoncus.</div></span>
<span><img src="https://i.pinimg.com/originals/6b/a6/e2/6ba6e204f38131e83ef18a8e071f0ca3.gif"><div><cad1>Titre du lien</cad1> 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.
Ut at luctus enim. Nulla nec tempor purus. Phasellus at sapien neque. Etiam mattis neque orci, ultricies tempor velit tincidunt eget. Etiam hendrerit rutrum justo, ac cursus nulla lacinia sit amet. Aliquam venenatis scelerisque mattis. Mauris vehicula metus leo, eu convallis odio tempor sit amet. Morbi dui lectus, ornare ac volutpat varius, volutpat id ex. In et erat gravida massa sodales convallis at at massa. Pellentesque feugiat libero tellus, ut scelerisque enim vehicula ut. Phasellus vestibulum tristique rhoncus.</div></span>
</div>
<!-- FIN FICHE -->
</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:
/* SCENARIOS */
.bylscenario .byltitlepres em{ display:block; font-size:11px; margin-top:5px;}
.bylscenario .bylidentite{ flex-wrap:wrap; }
.bylscenario .bylidentite img{ height:100px; }
.bylscenario .bylidentite div{ width:100%; margin-top:5px; }
.bylscenario .bylliens{ height:auto; }
.bylscenario .bylliens span{ display:flex; justify-content:space-between; }
.bylscenario .bylliens span img{ width:80px; height:80px; outline:1px solid var(--white); outline-offset:-3px; }
.bylscenario .bylliens span div{ display:block; margin-left:10px; height:100px; overflow:auto; padding:5px; }
.bylscenario .bylliens span cad1{ display:block; width:auto; }
