KoalaVolant
Ven 26 Mai 2023 - 13:39
Version du forum : PHPBB2
Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Sombre Pose"
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 "Sombre Pose"
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 (codage) & Andrea (maquette & couleurs)
- Les images se redimensionnent toutes seules
- Crédits : KoalaVolant (codage) & Andrea (maquette & couleurs)
- Les images se redimensionnent toutes seules
Couleurs & Fonts
- 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 n'appartenant pas à 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 boutons
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:
/* COLORS */
:root{
--font1:'Encode Sans', sans-serif;
--font2:'Fjalla One', sans-serif;
--fond:#1c1c1c;
--fond2:#666464;
--fond3:#2c2c2c;
--text: #959494;
--text2:#848484;
--black:#000;
--colorp:#9860b1;
--degrade:linear-gradient(90deg, #5e3172 0%, #000 100%);
--degrade-hover:linear-gradient( #000,#5e3172);
--bg-img:url('https://i.imgur.com/x5JsKHa.png');
--box-shadow:rgba(0,0,0,0.75);
/* Couleurs groupes */
--groupe1:#c01919;
--groupe2:#474ec8;
--groupe3:#A000F0;
--groupe4:#E09421;
--groupe5:#509E4C;
}
- Attention, les polices d'écriture utilisées sur ce thème sont "Encode Sans" et "Fjalla One" 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://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&display=swap" rel="stylesheet">
- Vous pouvez bien sûr changer les fonts par autre chose, en allant vous servir sur Google Fonts
HTML
- Poster ça :
- Code:
<div class="fichepresntos">
<!-- Image de fond -->
<div class="fondimage"><img src="https://i.imgur.com/odKBT3M.gif"/></div>
<div class="fichepresflex">
<!-- Avatar -->
<img src="https://images2.imgbox.com/db/03/3fneK4EH_o.jpg" class="avatarimage"/>
<!-- Nom et infos -->
<div class="liennom">
<div class="nominfos">Nom / Nature</div>
<div class="infosinfos">Look at that! It seems Hank has a new partner. Fucking plastic detective! Hey! You his drinking buddy? You bring him home when he's too drunk to find his car? Ha, he stinks of booze!</div>
<!-- Fin Nom et infos -->
</div></div>
<!-- Recensement -->
<div class="recensntos">
<div class="titrepres">Recensement</div>
<span>Avatar
Logement
Métier</span>
</div>
<!-- Fin recensement -->
<!-- Anecdotes -->
<div class="anecdntos">
<div class="titrepres">Anecdotes</div>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam arcu ut ligula sagittis commodo ac eget purus. Proin elementum euismod magna, et pharetra sem scelerisque sollicitudin. Duis id tempus ligula, non ultricies velit. Pellentesque egestas placerat accumsan. Aliquam dui est, hendrerit non mollis non, egestas sit amet tortor. Vestibulum sodales mauris vitae orci elementum, non dignissim velit faucibus. Etiam vestibulum, lectus ullamcorper fermentum ornare, lacus arcu iaculis tortor, id suscipit velit nibh ac massa. Proin sit amet consequat massa.
In hendrerit lorem non sapien varius, sit amet vulputate risus accumsan. Quisque egestas tempus consequat. Nullam vitae imperdiet orci. Aliquam placerat tristique tortor, ac fermentum turpis mattis a. Sed molestie rutrum tellus, eu tincidunt quam tempus id. Aliquam venenatis mauris lorem, sed molestie nisl tempus a. Aliquam justo libero, facilisis ac posuere vitae, gravida eget justo.
Maecenas malesuada iaculis viverra. Nunc lectus nunc, interdum vitae suscipit at, semper in justo. Nullam in vestibulum arcu. Donec ut blandit quam. Cras lobortis ante at elit blandit fringilla sed vel nulla. Morbi eget velit gravida, fringilla urna ut, luctus neque. Ut ac lectus erat. Nullam sed feugiat neque. Donec sit amet eleifend eros. Ut sagittis augue eget elit mollis, nec sollicitudin orci tempor. Donec pharetra sit amet nisi eu elementum. Vestibulum posuere sed nisl in lobortis. Maecenas eget elementum libero, eu mollis nisi. Donec aliquet tortor ac nisi placerat, sed pharetra diam cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span>
</div>
<!-- Fin Anecdotes -->
<!-- Histoire -->
<div class="anecdntos">
<div class="titrepres">Histoire</div>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam arcu ut ligula sagittis commodo ac eget purus. Proin elementum euismod magna, et pharetra sem scelerisque sollicitudin. Duis id tempus ligula, non ultricies velit. Pellentesque egestas placerat accumsan. Aliquam dui est, hendrerit non mollis non, egestas sit amet tortor. Vestibulum sodales mauris vitae orci elementum, non dignissim velit faucibus. Etiam vestibulum, lectus ullamcorper fermentum ornare, lacus arcu iaculis tortor, id suscipit velit nibh ac massa. Proin sit amet consequat massa.
In hendrerit lorem non sapien varius, sit amet vulputate risus accumsan. Quisque egestas tempus consequat. Nullam vitae imperdiet orci. Aliquam placerat tristique tortor, ac fermentum turpis mattis a. Sed molestie rutrum tellus, eu tincidunt quam tempus id. Aliquam venenatis mauris lorem, sed molestie nisl tempus a. Aliquam justo libero, facilisis ac posuere vitae, gravida eget justo.
Maecenas malesuada iaculis viverra. Nunc lectus nunc, interdum vitae suscipit at, semper in justo. Nullam in vestibulum arcu. Donec ut blandit quam. Cras lobortis ante at elit blandit fringilla sed vel nulla. Morbi eget velit gravida, fringilla urna ut, luctus neque. Ut ac lectus erat. Nullam sed feugiat neque. Donec sit amet eleifend eros. Ut sagittis augue eget elit mollis, nec sollicitudin orci tempor. Donec pharetra sit amet nisi eu elementum. Vestibulum posuere sed nisl in lobortis. Maecenas eget elementum libero, eu mollis nisi. Donec aliquet tortor ac nisi placerat, sed pharetra diam cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </span>
</div>
<!-- Fin Histoire -->
<!-- Info joueuxe -->
<div class="jouflex">
<!-- Blabla -->
<div><div class="titrepres">Info joueuxe</div>
<span>Nunc rhoncus quam sapien, ac consectetur quam consequat quis. Suspendisse interdum nisl turpis, vel tristique eros euismod id. Cras vestibulum tempor eros, sed cursus lectus tristique a. Proin et mollis arcu. Etiam non pellentesque tortor, sed convallis metus. Aliquam mi metus, hendrerit hendrerit elit quis, laoreet finibus mi. Aenean nulla nisl, iaculis non nibh id, rutrum luctus lacus. Quisque interdum et sem vel volutpat. Nullam sed finibus lacus, at aliquam neque. Etiam id nisl ut augue bibendum mattis. Sed sit amet arcu in neque malesuada suscipit id et ligula. </span>
</div>
<img src="https://i.imgur.com/9pCqgbN.jpg"/>
</div>
<!-- Fin Info Joueureuse -->
<!-- Fin de fiche -->
</div>
CSS
- Allez dans Panneau d'admin > Affichage > Couleurs et CSS > Feuille de style CSS
- Postez ça :
- Code:
/* Fiche de présentation */
.fichepresntos, .fichepresntos *, { box-sizing:border-box; }
.fichepresntos{ width:550px; margin:0 auto; position:relative; }
.fichepresntos br{ display:none; }
.fichepresntos .titrepres{ background:var(--degrade); color:var(--text);
font-family:var(--font1); font-size:18px; letter-spacing:3px; padding:5px; }
.fichepresntos .fondimage{ margin-bottom:250px; position:relative; display:block; }
.fichepresntos .fondimage img{ width:100%; height:130px; object-fit:cover; }
.fichepresntos .fondimage:before{ content:' '; position:absolute; top:0; left:0; width:100%; height:130px;
background:var(--fond); opacity:0.5; }
.fichepresntos .fichepresflex{ position:absolute; width:84%; margin:0 auto; left:50%;
transform:translateX(-50%); top:100px; display:flex; justify-content:space-between; }
.fichepresntos .fichepresflex img{ width:160px; height:256px; object-fit:cover; }
.fichepresntos .fichepresflex .liennom{ width:63%; position:relative; }
.fichepresntos .fichepresflex .nominfos{ color:white; font-family:var(--font2);
font-size:22px; display:block; text-align:left; text-transform:uppercase; }
.fichepresntos .fichepresflex .infosinfos{ background:var(--fond); padding:10px; margin-top:15px; color:var(--text);
font-size:12px; height:222px; overflow:auto; line-height:18px; }
.fichpresntos .infosinfos br, .fichepresntos .recensntos br, .fichepresntos .anecdntos br, .fichepresntos .jouflex span br{ display:block; }
.fichepresntos .recensntos, .fichepresntos .anecdntos{ margin-bottom:20px; }
.fichepresntos .recensntos span, .fichepresntos .anecdntos span, .fichepresntos .jouflex span{ display:block; background:var(--fond); padding:10px;
color:var(--text); }
.fichepresntos .anecdntos span{ display:block; }
.fichepresntos .jouflex{ display:flex; justify-content:space-between;
}
.fichepresntos .jouflex img{ width:100px; height:100px; object-fit:cover; }
.fichepresntos .jouflex div{ width:80%; }
.fichepresntos .jouflex .titrepres{ width:100%; }
|
|
|
