Cette fiche générale a été faite pour être adaptée. En effet, si vous changez un détail dans la fiche, ça peux changer aussi sa structure. C'est pour ça que cette fiche a une explication. Elle peux ressembler à tout ce qui vous est montré à la suite
Aussi, pour changer les couleurs, il faudra les changer grâce au :root. Si cela vous déplaît, toute couleur où c'est marqué par exemple var(--main-color) pourra être changé par #333 par exemple.

HTML du code de base

Code:

<div class="gengen degr"><div class="entgen"><img src="https://i.pinimg.com/originals/fe/68/49/fe68494f94293a20bcddb4299c30ded6.gif"><h1>Ca c'est le gros titre
<strong>Ca c'est le bébé titre si y faut un bébé titre</strong></h1></div><div class="fondgen normal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<h3>Mais alors un sous titre pop (et c'est toujours en h3 attention !)</h3></div></div>

CSS de tout le code

Code:

:root{
  --main-color:#555;
  --snd-color:#fff;
  --third-color:#888;
  --four-color:#FCC5A0;
  --five-color:#F28977;
  --five-v-color:#FAC0B6;
  --six-color:#B9919A;
    --six-v-color:#DAC5CA;
  
  --font1: 'Source Sans Pro', sans-serif;
  --font2:'Playfair Display', serif;
  --fontjournal:'Alfa Slab One', cursive;
}

.degr, .fondgen h3, .fondgen.bottin strong{ background: var(--five-color);
background: -webkit-gradient(left top, right top, color-stop(0%, var(--five-color)), color-stop(100%, var(--six-color)));
background: -webkit-linear-gradient(left, var(--five-color) 0%, var(--six-color) 100%);
background: linear-gradient(to right, var(--five-color) 0%, var(--six-color) 100%);
    position:relative; z-index:20;
}

/* Fiche Générale du forum par KoalaVolant */

.gengen{ width:80%; margin:0 auto; padding:5px; }
.gengen *{ box-sizing:border-box; }

/* Image de la fiche + Titre */
.entgen{ position:relative; width:100%; height:200px; }
.entgen img{ width:100%; height:200px; object-fit:cover; border:double 7px var(--snd-color); }
  .entgen h1{ font-family:var(--font2); font-size:22px; text-align:center; line-height:25px; padding:13px; color:var(--main-color);
  width:80%; text-align:center; padding:5px; background-color:var(--snd-color); position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.entgen h1 strong{ font-size:12px; line-height:13px; font-family:var(--font1); letter-spacing:1px;  color:var(--six-color); }
  
/* Reste */
.fondgen{ background-color:#fff;text-align:justify; color:var(--main-color); padding:20px; font-size:12px; line-height:1.4em; }
.fondgen h3{ text-align:center; padding:5px; font-family:var(--font1); color:var(--snd-color);  width:85%; position:relative; left:50%; transform:translateX(-50%);  margin:5px 0px;
  font-size:15px; letter-spacing:2px; font-weight:normal;  line-height:18px; }
.fondgen img{ width:80%; max-height:200px; object-fit:cover; border:3px solid var(--six-color); padding:2px; position:relative; left:50%; transform:translateX(-50%); }

/* Liste */

.gengen ul{ margin:0px; padding:0px; }
.gengen ul li{ list-style-type : none !important; margin:5px 0px;}
.gengen li:before{ content:'•'; padding-right:5px; color:var(--five-color) !important; }

/* Presentation Staff */

.debstaff{ display:flex; justify-content:space-between; align-items:center;  }
.fondgen.staff h2{ font-family:var(--font2); font-size:18px; text-transform:uppercase; margin:0px;}
.fondgen.staff h3{ width:100%; font-size:13px; position:initial; transform:none; margin:0px; }
.debstaff img{ width:100%; height:100px; position:initial; transform:none;}
.sta-left{ width:59%; }
.sta-right{ width:40%; }
.debstaff.reverse{ flex-direction:row-reverse; }
.debstaff.reverse h2{ text-align:right; }

/* Bottins */

.fondgen.bottin strong{   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
.fondgen.bottin strong:before{ content:':spades:'; background:none !important; padding-right:5px; }  

Explications

Version Normale

Pour avoir la version normale il suffit juste de laisser la classe "fondgen normal". Là, pour des sous titres il faudra mettre

Code:

<h3>Sous titre</h3>

Les images seront recadrées également, et les listes seront un brin colorées.

Version Staff

Mais, il existe aussi une version staff. Comment marche-t-elle ?
Il suffit pour ça de changer la classe "fondgen normal" en "fondgen staff". A partir de là, il vous suffira de copier ce code :

Code:

<div class="debstaff"><div class="sta-left"><h2>Pseudo de la personne</h2>
<h3>Comptes de la personne</h3></div>
<div class="sta-right"><img src="https://i.pinimg.com/originals/b9/c2/77/b9c2773133b36078fc5aaa17ba33337e.gif"></div></div>

Qui contient le pseudo plus l'image pour pouvoir y mettre tout ce qui est nécessaire. Après, pour la présentation du membre du staff, il suffit de mettre du texte normal à la suite. Pour inverser l'image et le pseudo, il suffit de remplacer "class="debstaff"" par "class="debstaff reverse"" =)

Version Bottins

Pour les bottins, la seule particularité, c'est que le ce que vous mettrez en gras, sera d'une couleur différente.
Ainsi, pour activer la version bottin il suffit de remplacer "fondgen normal" par "fondgen bottin"