Fiche de présentation compacte

Hellooow,

Voici un LS pour une fiche de présentation "compacte".

Aperçus de la fiche:

Codes pour les fondateurs et Administrateurs, HTML et CSS divisés :

Partie HTML dans le message :

Code:

<div class="blocprez"><div class="blochaut"><img class="IMGprez" src="https://i.servimg.com/u/f51/18/81/56/20/imgpre11.jpg" /><div class="infosprez"><div class="carreprez"><span><!---->NATIONALITE ICI<!----></span><span><!---->AGE ICI<!----></span><span><!---->GENRE ICI<!----></span><span><!---->DATE D'ARRIVEE ICI<!----></span><span><!---->FACTION ICI<!----></span><span><!---->FONCTION ICI<!----></span></div><div class="blocphobie"><span>Phobies et Peurs</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div></div></div><div class="pseudoperso">Prénom&Nom ou Pseudo du personnage</div><div class="blocmilieu"><div class="blocpower"><span>Pouvoir Inutile</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div><div class="blocIB"><span>Infos Bonus</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div><div class="blocpsyphy"><div class="blocpsy"><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span></div><div class="bloctaille"><!---->TAILLE ICI<!----></div><div class="blocorpu"><!---->CORPULENCE ICI<!----></div><div class="bloctiff"><!---->CHEVEUX ICI<!----></div><div class="blocSD"><span>Signe Distinctif</span><!---->ECRIRE ENTRE LES BALISES<!----></div></div><div class="blocsouvenirs"><span>Mes Souvenirs</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div></div><div class="pseudojoueur">Pseudo du joueur</div><div class="blocbas"><div class="infosjoueur"><span>Comment as-tu découvert le forum ?</span></div></div></div>


Partie CSS dans la feuille de style :

Code:

/** Fiche de présentation du personnage **/
.blocprez {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
background:url("https://i.servimg.com/u/f90/17/48/87/58/fondca12.png") rgba(69,68,68,0.75);
border-top: 2px solid #fcae19;
border-bottom: 2px solid #fcae19;
color: #DEDEDE;}

.blochaut {
  display: flex;
background-color: rgba(78,5,5,0.15);
width: 100%;
height: 150px; }

.IMGprez {
position: relative;
margin: 0 5px 0 0;
width: 125px;
height: 125px;
top: 10px;
left: 20px;
border: 10px solid transparent;
outline: 1px solid #e59b0d;}

.infosprez {
  display: flex;
  position: relative;
  width: 75%;
  height: 125px;
top: 10px;
left: 20px;}

.carreprez {
  position: relative;
  width: 42%;
  height: 115px;
  margin: 0 3px 0 0;
top: 5px;
left: 5px;
padding: 2px;}

.carreprez span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
text-align: center;}

.blocphobie {
  background: linear-gradient(328deg, rgba(35,34,34,1) 50%, rgba(53,53,53,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
  border: 1px solid #484747;
  position: relative;
  width: 55%;
  height: 115px;
top: 5px;
left: 5px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocphobie span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocphobie p {text-align: justify; font-size: 12px;}

.pseudoperso {
position: relative;
width: 85%;
height: 25px;
top: 0px;
left: 100px;
font-family: 'Special Elite', verdana;
color: #fcae19;
text-shadow: 0 1px 2px black;
font-size: 30px;}

.blocmilieu{
width: 100%;
height: 380px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: space-between;}

.blocpower {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 38%;
height: 115px;
top: 5px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocpower span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocpower p {text-align: justify; font-size: 12px;}

.blocIB {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 55%;
height: 115px;
top: 5px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocIB span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocIB p {text-align: justify; font-size: 12px;}

.blocpsyphy {
  display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
position: relative;
width: 38%;
height: 255px;
top: 15px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocpsy {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
height: 75px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.quali { display: inline-block; background: #11927c; line-height: 1.5;
text-align: center;margin: 2px;
padding: 2px 3px;}

.defo { display: inline-block; background: #8b1919;line-height: 1.5;
text-align: center; margin: 1px;
padding: 2px 3px;}

.bloctaille {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
line-height: 1.5;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocorpu {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
line-height: 1.5;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.bloctiff{
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
line-height: 1.5;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocSD{
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 70px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocSD span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocsouvenirs {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 55%;
 height: 255px;
top: 15px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocsouvenirs span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocsouvenirs p {text-align: justify; font-size: 12px;}

.pseudojoueur {
position: relative;
width: 90%;
height: 25px;
top: 20px;
left: 20px;
font-family: 'Special Elite', verdana;
text-shadow: 0 1px 2px black;
font-size: 25px;
color: #DEDEDE;}

.blocbas{
background-color: rgba(78,5,5,0.15);
width: 100%;
height: 65px; }

.infosjoueur {
margin: auto;
position: relative;
width: 90%;
height: 45px;
top: 20px;
left: 20px; }

.infosjoueur span { font-weight: bold;}
/**Fin fiche de présentation du personnage **/

Code de la police "Special Elite" :

Code a mettre dans le template overall_header entre les balises < head >< /head > (sans les espaces dans le template ^^) :

Code:

<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

Codes pour les membres, HTML et CSS ensemble dans le message :

Code:

<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<style>.blocprez{display:flex;flex-direction:column;justify-content:space-between;width:100%;background:url(https://i.servimg.com/u/f90/17/48/87/58/fondca12.png) rgba(69,68,68,0.75);border-top:2px solid #fcae19;border-bottom:2px solid #fcae19;color:#DEDEDE}.blochaut{display:flex;background-color:rgba(78,5,5,0.15);width:100%;height:150px}.IMGprez{position:relative;margin:0 5px 0 0;width:125px;height:125px;top:10px;left:20px;border:10px solid transparent;outline:1px solid #e59b0d}.infosprez{display:flex;position:relative;width:75%;height:125px;top:10px;left:20px}.carreprez{position:relative;width:42%;height:115px;margin:0 3px 0 0;top:5px;left:5px;padding:2px}.carreprez span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;text-align:center}.blocphobie{background:linear-gradient(328deg,rgba(35,34,34,1) 50%,rgba(53,53,53,1) 100%);border:1px solid #484747;position:relative;width:55%;height:115px;top:5px;left:5px;padding:2px;overflow:auto;scrollbar-width:thin}.blocphobie span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocphobie p{text-align:justify;font-size:12px}.pseudoperso{position:relative;width:85%;height:25px;top:0;left:100px;font-family:'Special Elite',verdana;color:#fcae19;text-shadow:0 1px 2px #000;font-size:30px}.blocmilieu{width:100%;height:380px;display:flex;flex-flow:row wrap;align-content:flex-start;justify-content:space-between}.blocpower{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:38%;height:115px;top:5px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocpower span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocpower p{text-align:justify;font-size:12px}.blocIB{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:55%;height:115px;top:5px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocIB span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocIB p{text-align:justify;font-size:12px}.blocpsyphy{display:flex;flex-direction:column;justify-content:space-between;margin:auto;position:relative;width:38%;height:255px;top:15px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocpsy{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:75px;top:0;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.quali{display:inline-block;background:#11927c;line-height:1.5;text-align:center;margin:2px;padding:2px 3px}.defo{display:inline-block;background:#8b1919;line-height:1.5;text-align:center;margin:1px;padding:2px 3px}.bloctaille{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;line-height:1.5;overflow:auto;scrollbar-width:thin}.blocorpu{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;overflow:auto;line-height:1.5;scrollbar-width:thin}.bloctiff{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;overflow:auto;line-height:1.5;scrollbar-width:thin}.blocSD{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:70px;top:0;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.blocSD span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:12px;text-transform:uppercase;font-weight:700;text-align:center}.blocsouvenirs{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:55%;height:255px;top:15px;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.blocsouvenirs span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocsouvenirs p{text-align:justify;font-size:12px}.pseudojoueur{position:relative;width:90%;height:25px;top:20px;left:20px;font-family:'Special Elite',verdana;text-shadow:0 1px 2px #000;font-size:25px;color:#DEDEDE}.blocbas{background-color:rgba(78,5,5,0.15);width:100%;height:65px}.infosjoueur{margin:auto;position:relative;width:90%;height:45px;top:20px;left:20px}.infosjoueur span{font-weight:700}</style>

<div class="blocprez"><div class="blochaut"><img class="IMGprez" src="https://i.servimg.com/u/f51/18/81/56/20/imgpre11.jpg" /><div class="infosprez"><div class="carreprez"><span><!---->NATIONALITE ICI<!----></span><span><!---->AGE ICI<!----></span><span><!---->GENRE ICI<!----></span><span><!---->DATE D'ARRIVEE ICI<!----></span><span><!---->FACTION ICI<!----></span><span><!---->FONCTION ICI<!----></span></div><div class="blocphobie"><span>Phobies et Peurs</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div></div></div><div class="pseudoperso">Prénom&Nom ou Pseudo du personnage</div><div class="blocmilieu"><div class="blocpower"><span>Pouvoir Inutile</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div><div class="blocIB"><span>Infos Bonus</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div><div class="blocpsyphy"><div class="blocpsy"><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span></div><div class="bloctaille"><!---->TAILLE ICI<!----></div><div class="blocorpu"><!---->CORPULENCE ICI<!----></div><div class="bloctiff"><!---->CHEVEUX ICI<!----></div><div class="blocSD"><span>Signe Distinctif</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div></div><div class="blocsouvenirs"><span>Mes Souvenirs</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p></div></div><div class="pseudojoueur">Pseudo du joueur</div><div class="blocbas"><div class="infosjoueur">[b]Comment as-tu découvert le forum ?[/b]
[b]Feat sur l'avatar :[/b]</div></div></div>

Hello Rozie et merci pour ce super LS J'aime beaucoup le style de cette présentation et elle change des fiches qui sont toute en longueur.

Malheureusement, avant de la valider il manque quelques petits trucs dans ton code :

• L'import des polices utilisées : puisque tu n'as pas mit de liens Google Font ou de @import dans ton CSS, les polices ne s'affichent pas lorsque l'on utilise ton LS. Il faut donc que tu les ajoutes ou que tu précises quelque part qu'il faut importer les polices que tu utilises.
  
• Préciser la couleur d'écriture : Là où tu as testé ton LS la couleur d'écriture devait être blanche, le problème c'est que si sur un autre forum la police n'est pas blanche le rendu devient tout moche ! Il faut donc que tu précises dans ton code pour être sûr qu'il n'y ait pas de problème
  
• Enlève le BBCode à la fin de ta fiche : comme le précise le règlement de la section on ne mélange pas HTML et BBCode dans les LS.

Voilà, une fois ces 3 points corrigés, je pourrais valider ton LS !

Hellooow.

Pardon pour le temps de modification. Normalement tout est bon. :)

Merci pour les modifications !

2 dernières petites choses :

• Le fond de la fiche sur ta capture d'écran est sombre, mais là tu n'en as pas... Est-ce que tu veux en mettre un ou laisser libre ? Est-ce que tu pourrais préciser dans ton 1er message s'il s'agit du fond du forum si ce n'est pas celui de la fiche sur la capture d'écran ?
  
• La couleur du texte n'est pas bonne sur la majorité de la fiche, il faudrait ajouter des !important pour forcer à passer par dessus la couleur choisis dans le PA.

Voilà, c'est tout ! Après ces deux points, je valide la fiche

Hey,

Comme dit sur discord, j'ai ajouté le code pour que les membres puissent l'utiliser sans problème. :)

Tout est bon, je valide !

Encore merci pour ce LS, et n'oublie pas tes 5XP Architecte pour ce LS

Merci pour le partage ! :)