Personnaliser les balises "Code", "Quote", "Spoiler" et "Hide"

Code:

Je suis un code.

Onyx a écrit:Je suis un quote (une citation).

Spoiler:

Personnalisation des balises sous phpBB2

Les balises code

Code:

/*Contenu de CODE*/
.code {
  propriété: valeur;
}
/*Intérieur du contenu de CODE*/
.cont_code {
  propriété: valeur;
}

Les balises quote (citer)

Code:

/*Contenu de QUOTE*/
.quote {
  propriété: valeur;
}

Les balises spoiler

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_closed {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler_content {
  propriété: valeur;
}
/*Pour éliminer un espace pas rapport sous le spoiler*/
.spoiler > dd:last-child {
  border: none;
}

Les balises hide

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Code:

/*Bloc qui contient le titre et le contenu de CODE, SPOILER, QUOTE ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER FERMÉ, QUOTE ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET QUOTE*/
.codebox > dt {
  propriété: valeur;
}
/*Titre de CODE, SPOILER ET QUOTE*/
.codebox > dt .genmed, .spoiler > dt {
  propriété: valeur;
}

Personnalisation des balises sous Invision

Les balises code

Code:

/*Contenu de CODE*/
code {
  propriété: valeur;
}

Les balises quote (citer)

Code:

/*Bloc qui contient la ligne de l intitulé et le contenu de QUOTE*/
blockquote {
  propriété: valeur;
}
/*Bloc intérieur de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  background-image: none;
  propriété: valeur;
}


Les balises spoiler

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}

Les balises hide

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Code:

/*Bloc qui contient le titre et le contenu de CODE ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE ET HIDE*/
.codebox > dt {
  propriété: valeur;
}

Personnalisation des balises sous phpBB3

Les balises code

Code:

/*Contenu de CODE*/
code {
  propriété: valeur;
}

Les balises quote (citer)

Code:

/*Bloc qui crée l apostrophe et l espace autour de QUOTE*/
blockquote {
  margin: 0px;
  background-image: none;
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  propriété: valeur;
}
/*Bloc de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}

Les balises spoiler

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}

Les balises hide

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Code:

/*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET HIDE*/
.codebox > dt {
  propriété: valeur;
}

Personnalisation des balises sous PunBB

Les balises code

Code:

/*Contenu de CODE*/
.cont_code {
  propriété: valeur;
}

Les balises quote (citer)

Code:

/*Bloc autour de QUOTE*/
blockquote {
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  background-image: none;
  propriété: valeur;
}
/*Bloc de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}

Les balises spoiler

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}

Les balises hide

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Code:

/*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET HIDE*/
.codebox > dt {
  propriété: valeur;
}

Code:

      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Code:

 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <div class="namePOST"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><div class="imgrankPOST">{postrow.displayed.RANK_IMAGE}</div><div class="avaPOST"><div>{postrow.displayed.POSTER_RANK}<br/><br/><!-- BEGIN profile_field --><font style="color:white;">{postrow.displayed.profile_field.LABEL}</font> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div><p>{postrow.displayed.POSTER_AVATAR}</p></div><div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="openPOST">Ouvrir</div><div class="rpgPOST" style="display:none;">{postrow.displayed.POSTER_RPG}</div>
 </td>

Code:

/*****************PROFIL*****************/
/* PSEUDONYME SUJET */
.namePOST {
  font-family: 'Eagle Lake'; /**modifiable**/
  text-decoration:none;
  text-shadow: 0px 1px lightgrey;
text-transform:uppercase; text-align:center;
}
.namePOST a {
  text-decoration:none;}
/* AVATAR SUJET */
.avaPOST {
position:relative; z-index:5; width:200px; height:400px; overflow:hidden; border-radius:10px;
  border:2px groove DarkGoldenRod; /* MODIFIABLE */
}
.avaPOST p {
position:relative; z-index:3; margin:0;
}
.avaPOST:hover p{
z-index:-1; opacity:0;
}
/* INFORMATIONS JOUEUR SUJET */
.avaPOST div{
position:absolute;
width:190px; height:390px; padding:5px; overflow:auto;
background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* IMAGE RANG SUJET */
.imgrankPOST {margin-top:-5px;
}
.imgrankPOST img{
max-height:400px;
}
/* OUVRIR FEUILLE DE PERSONNAGE SUJET */
.openPOST {
position:relative; z-index:10; margin:auto; margin-top:-15px;
cursor:pointer; width:175px; height:25px; color:rgba(0,0,0,0);
background:url(http://image.noelshack.com/fichiers/2016/31/1470580990-sans-titre-2.png);  /* IMAGE 175*25 */
}
/* FEUILLE DE PERSONNAGE SUJET */
.rpgPOST {
margin-top:-10px;
padding:08px 10px 10px; border-radius:0 0 15px 15px;
background:#191919; /* MODIFIABLE */
font-size:11px;
}

Enlever l'espace en haut de la signature

Exemple

J'ai voulu mettre un fond bleu à ma signature, et des marges à l'intérieure mais... J'ai un grand espace en haut !


Une fois le code ajouté, je n'ai plus le soucis des retours à la ligne en haut :

Code

Code:

/* Enlever espaces en haut de la signature */
.signature_div > br:nth-of-type(-n+2) {
  display: none;
}

Code:

<div class="signature_div">{postrow.displayed.SIGNATURE}</div>

Onyx a écrit:
Si je peux me permettre, cette div n'existe pas pour PunBB. À la place, le CSS à utiliser serait celui-ci :

Code:

/* Enlever espaces en haut de la signature */
.sig-content > br:nth-of-type(-n+2) {
  display: none;
}

Code:

<div class="cadre">
 <div class="titre">Nom Prénom</div>
 <br />
 <div class="image"><img src="http://img15.hostingpics.net/pics/454841500250.jpg" /></div>
 <br />
 <table><tr><td>
<div class="gene">Généralité âge</div></td><td><table><tr><td><div class="faction"><img src="http://img15.hostingpics.net/pics/252028Reptile.jpg" /></div></td></tr><tr><td><div class="arme">Armes :</div>
</td></tr></table></td></tr></table>
 <div class="titrecat">Pouvoir</div>
 <br />
 <div class="texte">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
 <div class="titrecat">Description physique</div>
 <br />
 <div class="texte">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
 <div class="titrecat">Description mentale</div>
 <br />
 <div class="texte">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
 <div class="titrecat">Histoire</div>
 <br />
 <div class="texteh">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
<div style="text-align: center; color: white;">c AngelsMari sur <a href="http://www.never-utopia.com/">Never Utopia</a></div>
</div>

Code:

.cadre{
 background-image: url('http://img15.hostingpics.net/pics/569791test.jpg');
 width: 500px;
 text-align: justify;
 color: white;
}

.titre{
 font-family: 'Comic Sans MS';
 font-size: 40px;
 text-shadow: #DF3A01 1px 5px;
 color: #D7DF04;
 text-align: center;
}

.image{
 height: 250px;
 width: 500px;
}


.gene{
 height: 250px;
 width: 120px;
 font-size: 12px;
 color: white;
}

.faction{
 height: 124px;
 width: 370px;
}

.arme{
 height: 124px;
 width: 370px;
 color: white;
}
.titrecat{
 font-family: 'Comic Sans MS';
 font-size: 25px;
 text-shadow: #B43104 1px 5px;
 color: #A48904;
 text-align: center;
}
 
.texte{
 width: 480px;
 overflow: auto;
 height: 125px;
 margin-left: 10px;
}
.texteh{
 width: 480px;
 overflow: auto;
 height: 160px;
 margin-left: 10px;
}

Code:

<div class="faction"><img src="http://img15.hostingpics.net/pics/252028Reptile.jpg" /></div>

Fiche colorée

Je vous propose une petite fiche de ma création !
Cette fiche peut servir pour des utilisation différentes donc, à vous de voir ce que vous en faites !

Aperçu en direct
Aperçu en image

Le codage est a mettre dans une page html et ensuite, pour l'utiliser, vous devrez utiliser une belle iframe !

Soyez gentils, laissez moi le petit crédit lorsque vous utiliser le code

Le code HTML

Code:

<!DOCTYPE html><html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css' />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Fiche colorée</title>
<style type="text/css">
body {
margin: 0px;
}
.banana {color: #2DB38F; font-family: Oswald;font-size: 11px;font-weight: bold;}
.peach {color: #B51F8C; font-family: Oswald;font-size: 11px;font-weight: bold;}
.b0 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #d0d3d4;} 
.b1 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #e07059;}
.b2 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #99d5e4;}
 
 /*Tableau du mag */

.tab {width:504px !important;
 height: 600px :important!;
 box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 background-color: #fff;
 border: 5px solid #fff;}

.tab0 {width:500px !important;
 margin:auto;}


 /*Colonnes colorées en haut du tableau*/

.tab1 {width: 25%, display:block;
  background-color: #ffc22c;}

.tab2 {width: 25%, display:block;
  background-color: #f79037;}

.tab3 {width: 25%, display:block;
  background-color: #13ada6;}

.tab4 {width: 25%, display:block;
  background-color: #b6d552;}

.tab5 {width: 25%, display:block;
  background-color: #ffc22c;
 height:25px;}

.tab6 {width: 25%, display:block;
  background-color: #f79037;}

.tab7 {width: 25%, display:block;
  background-color: #13ada6;}

.tab8 {width: 25%, display:block;
  background-color: #b6d552;}

 /*Titres*/

.headlight { width: 100%;
  background-color: #fff;
 height:100px;
 font-family: oswald;
 color: #414142 !important;
  text-align: center;
  text-transform: uppercase;
 font-size: 50px;
  font-weight: 700;}

.bottomlight { width: 100%;
  background-color: #fff;
 height:60px;
 font-family: oswald;
 color: #414142 !important;
  text-align: justify;
  text-transform: italic;
 font-size: 14px;
  font-weight: 500;
 line-height: 12px;
 font-style:italic;
 padding: 10px;}

.sub {color:#b6d552;
 display:block;
 font-family: 'Roboto', sans-serif;
 font-size:10px;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 width:90%;
 text-transform: uppercase;
 padding-top:-150px;
border-bottom:1px solid #13ada6;}

.cimg{
 opacity: 0.7;
 transition-duration: 0.7s;}

.cimg:hover{
 opacity: 1;
 transition-duration: 0.7s;}

 /*Tableau à onglets*/
 .linknav {
  display:block;
  background-color: #c9d852;
  margin:5px;
  padding:5px;
  color: #eeeeec !important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
 font-family: 'Questrial', sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.linknav:hover {
  display:block;
  background-color: #ededea;
  border-bottom: #e1755d 2px solid;
  margin:5px;
  padding:5px;
  color: #e1755d !important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
 font-family: 'Questrial', sans-serif;
  font-size: 14px;
  font-weight: bold;
}


/* par défaut on masque le conenu de l.onglet */
.contenu-onglet, .radio-onglet {
  display: none;
}

/* on affiche l.onglet sélectionné */
.radio-onglet:checked + .contenu-onglet {
  display: block;
}
 
 .credit {color:#b6d552;
 display:block;
 font-family: 'Roboto', sans-serif;
 font-size:10px;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 width:90%;
 padding-top:-150px;
}
</style>
</head>
<body>



<center>
  <div class="tab">
    <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
      <tr>
        <td>
          <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
            <tr>
              <td class="tab5"></td>
              <td class="tab6"></td>
              <td class="tab7"></td>
              <td class="tab8"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table style="border-spacing : 0px; border-collapse : collapse;" >
            <tr>
              <td class="headlight">Gros titre <br /> <span class="sub">petit slogan bien sympa  </span></td>
            </tr>
            <tr>
              <td>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab1"></td>
                    <td class="tab2"></td>
                    <td class="tab3"></td>
                    <td class="tab4"></td>
                  </tr>
                </table>
                <img src="http://img15.hostingpics.net/pics/750110melbournecityscape.png" class="cimg" width="500px"/>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab1"></td>
                    <td class="tab2"></td>
                    <td class="tab3"></td>
                    <td class="tab4"></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <center>
                  <div style="vertical-align:top;background-color: #edefec; border-bottom: 2px solid #ee9507;width:500px">
                    <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                      Edito
                    </div>
                    <div align="justify" style="display:block;height:175px;overflow:auto;background-color: #edefec;padding:2px;margin:2px;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;text-align: justify;">
                      <table>
                        <tr>
                          <td>
                            <table>
                              <tr>
                                <td>
                                  <br />
                                  <img src="http://i21.servimg.com/u/f21/19/32/80/36/mytyo10.png" />
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <center>
                                    <span class="b0">AM</span> <span class="b1">∆ 12° </span><span class="b2"> ∇ 9°</span><br /><span class="b0">PM</span> <span class="b1">∆ 28°</span>  <span class="b2">∇ 21° </span>
                                  </center>
                                </td>
                              </tr>
                            </table>
                          </td>
                          <td style="font-size: 12px;color: #787878;">
                            <div style="text-align: justify;">
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.
                            </div>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </center>
                <table>
                  <tbody>
                    <tr>
                      <td align="justify" style="background-color: #fe8c21;border-bottom: 2px solid #50c6b6; width: 150px; height: 110px;overflow:auto;font-size: 12px;color: #787878;">
                        <label for="contenu1" class="linknav">Titre 1</label><label for="contenu2" class="linknav">Titre2</label><label for="contenu3" class="linknav">Titre 3</label><label for="contenu4" class="linknav">Titre 4</label><label for="contenu5" class="linknav">Titre 5</label>
                      </td>
                      <td align="justify" style="border-bottom: 2px solid #50c6b6; width: 300px; height: 150px;overflow:auto;font-size: 12px;color: #787878;">
                        <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                          Infos
                        </div>
                        <div align="justify" style="display:block;height:150px;width: 350px;overflow:auto;background-color: #edefec;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
                          <input type="radio" id="contenu1" checked class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.</div>
                          <input type="radio" id="contenu2" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 2 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu3" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 3 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu4" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 4 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu5" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 5 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <table style="cborder-spacing : 0px; border-collapse : collapse;" >
                  <tr>
                    <td class="bottomlight">Maecenas vel libero quis arcu eleifend molestie accumsan eu neque. Suspendisse metus metus, imperdiet vitae turpis vel, semper efficitur velit </td>
                  </tr>
                </table>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab5"></td>
                    <td class="tab6"></td>
                    <td class="tab7"></td>
                    <td class="tab8"></td>
                  </tr>
                </table>
                <div class="credit" style="text-align: center;">Llunn</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</center>
</body>
</html>

L'iframe

Code:

<iframe frameborder="0" scrolling="no" src="LIEN DE LA PAGE" name="fiche colorée" style="width: 550px; height: 970px; margin: auto; display: block;"></iframe>

Les codes

PhPBB2

Code:

/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
 position: fixed;
 top: 0;
 left: 0;
 width: 185px;
 height: 100%;
 background: grey;
 z-index: 200;
 padding: 5px;
 font-family: 'Verdana', sans-serif;
}
#panneau_lat h2 {
 font-size: 19pt;
 font-family: 'Georgia', serif;
 text-align: center;
 color: #FFF;
 margin-bottom: 3px;
 margin-top: 1px;
 font-variant: small-caps;
}
#panneau_lat h3 {
 font-size: 15pt;
 text-align: center;
 color: #FFF;
 margin-bottom: 0px;
 margin-top: 10px;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
 text-align: center;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
 font-size: 11px;
 color: #FFF;
}
.recherche {
 text-align: center;
 font-family: 'Georgia', serif;
 color: #FFF;
 font-size: 13px;
 font-variant: small-caps;
 margin-top: 3px;
}
.boite {
 width: 175px;
 height: 120px;
 background: #ccc;
 overflow: auto;
 margin: auto;
 padding: 5px;
 font-size: 12px;
 text-align: justify;
}
.membre_mois {
 display: inline-block;
 width: 85px;
 height: 60px;
 background: #ccc;
 border: 1px solid orange;
 margin-left: 4px;
 overflow: hidden;
}
.member_des {
 width: 85px;
 height: 60px;
 overflow: auto;
 text-align: center;
 font-family: 'Georgia', serif;
 background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
 width: 85px;
 height: 60px;
 overflow: hidden;
 margin-top: -60px;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 1;
 visibility: visible;
}
.membre_mois:hover img {
 opacity: 0;
 visibility: hidden;
}
.util_link {
 text-align: center;
 font-family: 'Georgia', serif;
 color: #FFF;
 font-variant: small-caps;
 font-size: 15px;
}
.util_link a {
 color: #ccc !important;
 text-decoration: none !important;
 letter-spacing: 0;
 -webkit-transition: all 800ms;
 transition: all 800ms;
}
.util_link a:hover {
 letter-spacing: 2px;
 text-decoration: none !important;
}
.credits_pann {
 font-size: 10px;
 color: #FFF;
 text-align: center;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
 margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/

Code:

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Code:

<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
  <h2>Bienvenue</h2>
  <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
    <h3>Liens utiles</h3>
    <div class="util_link">
      <a href="mon_lien">x Règlement</a><br />
      <a href="mon_lien">x Contexte</a><br />
      <a href="mon_lien">x Annexes</a><br />
      <a href="mon_lien">x FAQ</a><br />
      <a href="mon_lien">x Défis</a><br />
      <a href="mon_lien">x Annonces</a><br />
      <a href="mon_lien">x Partenariats</a>
    </div>
    <h3>Effectifs</h3>
    <div class="recherche">
      Groupe 1 x ... membre(s)<br />
      Groupe 2 x ... membre(s)<br />
      Groupe 3 x ... membre(s)<br />
      Groupe 4 x ... membre(s)</div>
    <h3>Rumeurs</h3>
    <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
      <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
    <h3>Membres du mois</h3>
    <div class="membre_mois"><div class="member_des">NOM<br />
      <span style="font-size: 12px;"><a href="mon_lien">Profil</a></span><br />
      <span style="font-size: 12px;"><a href="mon_lien">Fiche</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="membre_mois"><div class="member_des">NOM²<br />
      <span style="font-size: 12px;"><a href="mon_lien">Profil²</a></span><br />
      <span style="font-size: 12px;"><a href="mon_lien">Fiche²</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
  </div>
<!-- Menu latéral by MV/Shoki [END] -->

Code:

{JAVASCRIPT}

PhPBB3

Code:

/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
  position: fixed;
  top: 0;
  left: 0;
  width: 185px;
  height: 100%;
  background: grey;
  z-index: 200;
  padding: 5px;
  font-family: 'Verdana', sans-serif;
}
#panneau_lat h1 {
  font-size: 19pt;
  font-family: 'Georgia', serif;
  text-align: center;
  color: #FFF;
  margin-bottom: 3px;
  margin-top: 1px;
  font-variant: small-caps;
  border: 0 !important;
}
#panneau_lat h4 {
  font-size: 15pt;
  text-align: center;
  color: #FFF;
  margin-bottom: -1px;
  margin-top: 10px;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  border: 0 !important;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
  text-align: center;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  font-size: 11px;
  color: #FFF;
}
.recherche {
  text-align: center;
  font-family: 'Georgia', serif;
  color: #FFF;
  font-size: 13px;
  font-variant: small-caps;
  margin-top: 3px;
}
.boite {
  width: 175px;
  height: 120px;
  background: #ccc;
  overflow: auto;
  margin: auto;
  padding: 5px;
  font-size: 12px;
  text-align: justify;
}
.membre_mois {
  display: inline-block;
  width: 85px;
  height: 60px;
  background: #ccc;
  border: 1px solid orange;
  margin-left: 4px;
  overflow: hidden;
}
.member_des {
  width: 85px;
  height: 60px;
  overflow: auto;
  text-align: center;
  font-family: 'Georgia', serif;
  background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
  width: 85px;
  height: 60px;
  overflow: hidden;
  margin-top: -60px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  visibility: visible;
}
.membre_mois:hover img {
  opacity: 0;
  visibility: hidden;
}
.util_link {
  text-align: center;
  font-family: 'Georgia', serif;
  color: #FFF;
  font-variant: small-caps;
  font-size: 15px;
}
.util_link a {
  color: #ccc !important;
  letter-spacing: 0;
  -webkit-transition: all 800ms;
  transition: all 800ms;
}
.util_link a:hover {
  letter-spacing: 2px;
}
.credits_pann {
  font-size: 10px;
  color: #FFF;
  text-align: center;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/

Code:

</head>
<body id="phpbb">

Code:

<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
  <h1>Bienvenue</h1>
  <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
    <h4>Liens utiles</h4>
    <div class="util_link">
      <a href="mon_lien">x Règlement</a><br />
      <a href="mon_lien">x Contexte</a><br />
      <a href="mon_lien">x Annexes</a><br />
      <a href="mon_lien">x FAQ</a><br />
      <a href="mon_lien">x Défis</a><br />
      <a href="mon_lien">x Annonces</a><br />
      <a href="mon_lien">x Partenariats</a>
    </div>
    <h4>Effectifs</h4>
    <div class="recherche">
      Groupe 1 x ... membre(s)<br />
      Groupe 2 x ... membre(s)<br />
      Groupe 3 x ... membre(s)<br />
      Groupe 4 x ... membre(s)</div>
    <h4>Rumeurs</h4>
    <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
      <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
    <h4>Membres du mois</h4>
    <div class="membre_mois"><div class="member_des">NOM<br />
      <span style="font-size: 12px;">Profil</span><br />
      <span style="font-size: 12px;">Fiche</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="membre_mois"><div class="member_des">NOM²<br />
      <span style="font-size: 12px;">Profil²</span><br />
      <span style="font-size: 12px;">Fiche²</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
  </div>
<!-- Menu latéral by MV/Shoki [END] -->

Code:

{JAVASCRIPT}

Code:

<div class="color-topbox">
<div class="center-box"><div class="color-code"><div class="cube1"></div><div class="desc"><b>Lover</b> - Love is when the other person's happiness is more important than your own. <i>H. Jackson Brown, Jr.</i></div></div><div class="color-code"><div class="cube2"></div><div class="desc"><b>Good Friend</b> - A real friend is one who walks in when the rest of the world walks out. <i>Walter Winchell</i></div></div><div class="color-code"><div class="cube3"></div><div class="desc"><b>Friend</b> - One loyal friend is worth ten thousand relatives. <i>Euripide</i></div></div><div class="color-code"><div class="cube4"></div><div class="desc"><b>Acquaintance</b> - The beginning of an acquaintance whether with persons or things is to get a definite outline of our ignorance. <i>George Eliot</i></div></div><div class="color-code"><div class="cube5"></div><div class="desc"><b>Indifferent</b> - At the bottom of enmity between strangers lies indifference. <i>Soren Kierkegaard</i></div></div><div class="color-code"><div class="cube6"></div><div class="desc"><b>Rival</b> - I embrace my rival, but only to strangle him. <i>Jean Racine</i></div></div><div class="color-code"><div class="cube7"></div><div class="desc"><b>Frenemy</b> - An enemy to whom you show kindness becomes your friend, excepting lust, the indulgence of which increases its enmity. <i>Saadi</i></div></div><div class="color-code"><div class="cube8"></div><div class="desc"><b>Enemy</b> - You have enemies? Good. That means you've stood up for something, sometime in your life. <i>Winston Churchill</i></div></div><div class="color-code"><div class="cube9"></div><div class="desc"><b>Mortal Enemy</b> -  Know thy self, know thy enemy. A thousand battles, a thousand victories. <i>Sun Tzu</i></div></div></div>
<div class="color-name">Nom Prénom</div></div>

<div class="color-body">
<div class="color-linkbox" style="background-color: #f93974;"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Rival</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="color-linkbox" style="background-color: #6b39f9"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Mortal Enemy</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="color-linkbox" style="background-color: #05f598"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Lover</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="frost">Code de <a href="http://www.never-utopia.com/">Frosty Blue</a></div></div><style type="text/css">.color-topbox {width: 500px; margin: auto; position: relative;} .color-code {height: 20px; width: 20px; display: inline-block; vertical-align: top; margin-right: 15px; opacity: 0.5; transition: 1s; -webkit-transition: 1s;} .desc {background: black; color: lightgrey; text-align: justify; position: absolute; z-index: 2; opacity: 0; transition: 1s; -webkit-transition: 1s; width: 0px; box-sizing:border-box; padding: 10px; height: 50px; overflow: auto; position: absolute; left: 0px; top: 45px;} .cube1:hover {-webkit-transition: 1s; transition: 1s; box-shadow: 0px 0px 3px lightgrey;} .color-code:hover {opacity: 1; transition: 1s; -webkit-transition: 1s;} .color-code:hover .desc {width: 500px; opacity: 1; -webkit-transition: 1s; transition: 1s;} .cube1 {height: 20px; width: 20px; background: #05f598; position: relative; -webkit-transition: 1s; transition: 1s;} .cube2 {height: 20px; width: 20px; background: #81f939; position: relative; transition: 1s; -webkit-transition: 1s;} .cube3 {height: 20px; width: 20px; background: #f9f639; position: relative; transition: 1s; -webkit-transition: 1s;} .cube4 {height: 20px; width: 20px; background: #f99c39; position: relative; transition: 1s; -webkit-transition: 1s;} .cube5 {height: 20px; width: 20px; background: #f93939; position: relative; -webkit-transition: 1s; transition: 1s;} .cube6 {height: 20px; width: 20px; background: #f93974; position: relative; transition: 1s; -webkit-transition: 1s;} .cube7 {height: 20px; width: 20px; background: #ed39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .cube8 {height: 20px; width: 20px; background: #b63bf7; position: relative; transition: 1s; -webkit-transition: 1s;} .cube9 {height: 20px; width: 20px; background: #6b39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .color-name {font-size: 30px; position: relative; z-index: 1; color: black; text-align: center; letter-spacing: 15px; text-transform: uppercase; font-family:'Cantarell'; font-weight: bold; line-height: 30px;} .color-body {width: 500px; margin: auto;} .color-linkbox {width: 500px; margin: auto; text-align: center; font-family: 'Cantarell'; text-transform: uppercase; letter-spacing: 5px; color: black; font-size: 18px; padding: 7px; box-sizing: border-box; height: 30px;} .color-linkname {position: relative; transition: 1s; -webkit-transition: 1s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} .color-linkbox:hover .color-linkname {-webkit-filter: blur(25px); filter: blur(25px); opacity: 0; transition: 1s; -webkit-transition: 1s;} .color-reminder {opacity: 0; transition: 1s; -webkit-transition: 1s; position: relative; top: -18px; color: white;} .color-linkbox:hover .color-reminder {opacity: 1; transition-delay: 1s; -webkit-transition-delay: 1s; -webkit-transition: 1s; transition: 1s;} .color-descbox {width: 500px; height: 70px; margin: auto; box-sizing: border-box; padding: 10px; background: black;} .linkdesc {box-sizing: border-box; padding: 10px; height: 50px; width: 300px; float: left; overflow: auto; background: lightgrey; color: black; font-family: 'Cantarell'; text-align: justify; position: relative; z-index: 1;} .color-descbox img {height: 50px; width: 50px; background: white; overflow: hidden; margin-left: 8px;} .frost {opacity: 0.5; color: lightgrey; font-size: 10px; text-align: center;} .center-box {margin: auto; text-align: center;}

</style><link href='https://fonts.googleapis.com/css?family=Cantarell:400,700' rel='stylesheet' type='text/css' />

Code:

<div class="aay-perso"><div class="aay-presgroup">Groupe</div><div class="aay-presname">Prénom Nom</div><br>
<div class="aay-presinfo"><span class="info">Age:</span> réponse
<span class="info">Sexe:</span> réponse
<span class="info">Métier:</span> réponse
<span class="info">Taille:</span> réponse
<span class="info">Poids:</span> réponse
<span class="info">Couleur des yeux/cheveux:</span> réponse
<span class="info">Signes distinctifs:</span> réponse
</div><div class="aay-photo"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-photo-src"><i>Nom du personnage, Manga/Anime/Source</i></div></div>
<div class="aay-title">Caractère</div>
<div class="aay-bloctxt">Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.

Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div>
<div class="aay-title">Histoire</div>
<div class="aay-bloctxt">Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.

Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div>
<div class="aay-player"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-playerinfo"><span class="info">Pseudo:</span> réponse
<span class="info">Age:</span> réponse
<span class="info">Quelque chose à nous dire?</span> réponse
<span class="info">Code du règlement:</span> réponse
</div></div><div class="aay-opinion"><span class="in">Opinion sur tel(s) groupe(s):</span><br>Votre opinion
<br><span class="in2"> Opinion sur tel(s) groupe(s):</span> Votre opinion
</div>
<div class="crédits">Code by Frosty Blue de <a href="http://www.never-utopia.com">never Utopia</a></div></div>

<style type="text/css"> .aay-presgroup {margin-left: auto; background: #fa5858; width: 150px; padding: 17px;text-align: center; color: #f4f4f4; font-family: 'Abel'; text-shadow: 1px 2px 1px rgba(0,0,0,0.4); display: inline-block; font-size: 17px; line-height: 23px; text-transform: uppercase; margin-right: 10px;} .aay-presname {margin-right: auto; width: 350px; padding: 10px; text-align: center; color: #fa5858; background: #eaebeb; overflow: hidden; font-family: 'Abel'; font-size: 35px; line-height: 37px; display: inline-block; vertical-align: top; text-shadow: -1px -2px 1px rgba(0,0,0,0.4), 1px 2px 1px rgba(255,255,255,1); text-transform: uppercase; letter-spacing: 1px;} .aay-perso {margin: auto; text-align: justify; width: 565px;} .aay-presinfo {float: left; width: 320px; height: 200px; overflow: auto; padding: 10px; margin-right: 10px;background: #eaebeb;} .info {color: white; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 13px; text-transform: uppercase; font-style: normal;} .aay-photo {width: 215px; background: black; vertical-align: top; height: 220px; overflow: hidden;} .aay-photo img {-webkit-filter: grayscale(80%); filter: grayscale(80%); transition: 1s; -webkit-transition: 1s; position: relative; z-index: 1;} .aay-photo-src {position: relative; top: -60px; background: rgba(195,195,195,0.6); color: white; text-align: center; font-size: 12px; z-index: 2; padding: 5px; opacity: 0; transition: 1s; -webkit-transition: 1s;} .aay-photo:hover img {-webkit-filter: grayscale(0%); filter: grayscale(0%); transition: 2s; -webkit-transition: 2s;} .aay-photo:hover .aay-photo-src {opacity: 1; transition: 2s; -webkit-transition: 2s;} .aay-bloctxt {background: #eaebeb; padding: 10px; height: 250px; overflow: auto; border-top: #fa5858 4px solid; position: relative; z-index: 2;} .aay-title {text-shadow: -1px -2px 1px rgba(0,0,0,0.4), 1px 2px 1px rgba(255,255,255,1); text-transform: uppercase; letter-spacing: 1px; font-family: 'Abel'; color: #fa5858; font-size: 25px; position: relative; left: 5px; bottom: -15px; z-index: 1;} .aay-player {width: 215px; height: 220px; display: inline-block; margin-right: 15px; background: #fa5858;} .aay-opinion {display: inline-block; width: 315px; padding: 10px; height: 200px; overflow: auto; background: #eaebeb; text-align: justify; vertical-align: top;} .aay-player img {position: relative: 1; -webkit-filter: grayscale(50%); filter: grayscale(50%); transition: 1s; -webkit-transition: 1s; } .aay-playerinfo {padding: 10px; position: relative; z-index: 2; background: #fa5858; transition: 1s; -webkit-transition: 1s; opacity: 0; overflow: auto; width: 200px; height: 202px; top: -222px;} .aay-player:hover .aay-playerinfo {opacity: 1; transition: 2s; -webkit-transition: 2s;} .in {font-style: normal; color: #fa5858; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 14px; text-transform: uppercase;} .in2 {font-style: normal; color: #0080ff; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 14px; text-transform: uppercase;} .crédits {text-align: right; color: silver; opacity: 0.4; font-size: 11px; font-family: 'Abel'; position: relative; right: 5px;}</style><link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />

Navigation - Remplacer "Déconnexion [ Pseudo ]" par un autre texte

Exemple

Avant "Déconnexion [ Pseudo ]"


Après "Déconnexion [ Pseudo ]" devient "Quitter"

Code CSS

Code:

/* Remplacer le lien déconnexion */
#logout {
  font-size: 0!important; /* on cache le lien */
  letter-spacing: normal!important; /* on enlève un eventuel letter spacing présent */
}

/* Lien déconnexion faux texte */
#logout::after {
  content: "Quitter"; /* nouveau texte*/
  font-size: 12px; /* taille du texte */
  /* style supplémentaire à mettre ici */
}
/* Fin remplacer le lien déconnexion */

Code:

#logout::after {
  content: "Quitter"; /* nouveau texte*/
  font-size: 12px; /* taille du texte */
  /* style supplémentaire à mettre ici */
}

BONUS:

Fiche Administrative

Code Css

Code:

/* -------------------------------- FICHE RP  PAR CRUELLY -------------------------------- */

        .Fond {
        width: 500px;
        background-color: #C6C9D8;
        margin :auto;
        box-shadow: 0px 0px 5px #ffffff;
        }

        .Fond p {
        font-size: 12px;
         margin-left: 10px;
        margin-right: 10px;
         color: #555555;
        text-align: justify;
        font-family: arial;
        text-shadow: 0px 0px 5px #ffffff;
        }
        
        .Parg {
        width: 440px;
        background-color: #AAAFC4;
          margin :auto;
        box-shadow: 0px 0px 5px #888888;
        }
        

        .Fond h4 {
        font-family: 'Monotype corsiva', cursive;
        color: #ffffff;
        font-size: 40px;
        font-style: italic;
        background-color: #8C99AE;
        text-align: center;
        text-shadow: 0px 0px 2px #ffffff;
        }

        .Cred1 {
        font-size: 10px;
        color: #ffffff;
        text-align: center;
        font-family: arial;
        }
/* -------------------------------- FIN FICHE RP  -------------------------------- */

HTML Fiche 01

Code:

<div class="Fond"><H4>Ton titre super classe</H4><div class="Parg"><p>Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.</p>
</div><div class="Cred1">(c) Cruelly pour <a href="http://www.never-utopia.com">Never Utopia</a>.</div>
</div>

HTML Fiche 02

Code:

<div class="Fond"><H4>Ton titre super classe</H4><div class="Parg"><p>Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.</p><H4>Ton titre super classe</H4><p>Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.</p></div><div class="Cred1">(c) Cruelly pour <a href="http://www.never-utopia.com">Never Utopia</a>.</div>
</div>

HTML Fiche 03

Code:

<div class="Fond"><H4>Ton titre super classe</H4><div class="Parg"><div style=" height: 118px; background: url(http://image.noelshack.com/fichiers/2016/17/1461639114-sans-titre-2.png); "></div><p>Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.</p>
</div><div class="Cred1">(c) Cruelly pour <a href="http://www.never-utopia.com">Never Utopia</a>.</div>
</div>

Changement automatique du rang selon le groupe

Salut !

Pour certains administrateurs, il y a beaucoup de changements de groupes et de rangs. Déjà que changer le groupe de 15 personnes par jour prend du temps, devoir en plus changer leur rang à chaque fois ne rend pas les choses très faciles.

Du coup, j'ai créé une petite astuce pour tricher et lier les rangs au groupe de la personne à la demande de Darkius.

Plus précisément, cette astuce remplace le rang et l'image de rang par un "faux titre de rang" et une "fausse image de rang" et un javascript va "regarder la couleur du pseudo de la personne", trouvera le rang et l'image de rang associés à ce groupe (à cette couleur) et le mettra dans l'espace du "faux titre de rang" et de la "fausse image de rang".

Attention :
- Si une personne fait partie de plusieurs groupes, le groupe qui apparaîtra sera celui dont elle a la couleur, pas les autres.
- Cela agit seulement dans les messages, pas pour le rang dans les profils. Je recommande de tout simplement supprimer les rangs pour qu'ils ne s'affichent nul part. Comme ça, les seuls rangs qui s'afficheront seront les faux.


Ce LS est en trois parties.

• Tout d'abord, nous allons créer l'espace pour les faux rangs dans le template des messages.
  
• Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  
• Enfin, nous allons voir comment mettre vos propres rangs et groupes dans le javascript.

- La version du forum est PhpBB2.
- Il est possible (mais pas toujours) que l'astuce ne fonctionne pas si votre template a déjà été modifié. Si c'est le cas, vous pouvez aller dans "personnalisations" ou "problème avec mon code" pour recevoir de l'aide

Mettre un crédit vers Never-Utopia est obligatoire.

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

1. Ajouter l'espace des "faux rangs" (Template Viewtopic_Body)

Nous allons commencer par aller dans les templates, plus précisément dans le template "viewtopic_body".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Puis, on chercher cette variable :

Code:

{postrow.displayed.POSTER_RANK}

Qu'on va remplacer par ceci :

Code:

<span class="rangtitre"></span>

Et on va trouver cette variable :

Code:

{postrow.displayed.RANK_IMAGE}

Qu'on va remplacer par ceci :

Code:

<span class="rangimg"></span>

2. Ajouter le javascript

Maintenant que les rangs normaux ont été remplacés par les faux rangs, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.

Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de faux rangs".
On choisit le placement "Sur les sujets" (c'est super important).

Enfin, on met le javascript suivant et on enregistre :

Code:

$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)",
  "rgb(162, 176, 102)",
  "rgb(133, 199, 194)",
  "rgb(67, 145, 181)",
  "rgb(10, 163, 97)",
  ];

  var group1 = [
  "Élèves",
  "Professeurs",
  "Personnel",
  "Habitants",
  "PNJ",
  ];

  var group2 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png",
  "https://2img.net/i/fa/subsilver/icon_pm.gif",
  "https://2img.net/i/fa/subsilver/icon_email.gif",
  "https://illiweb.com/fa/subsilver/icon_www.gif",
  "https://2img.net/i/fa/subsilver/icon_online_fr.gif",
  ];

  var nbgroup = groupcouleur.length;
  $('tr.post > td span.name > strong > a > span > strong').each(function () {
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');
    var uncolor = $(this).css('color');
    for (i=0; i < nbgroup; i++) {
      if (uncolor == groupcouleur[i]) {
        $(rang1).html(group1[i]);
        $(rang1).css('color', groupcouleur[i]);
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});

3. Adapter le javascript à vos propres groupes et rangs

Voici le fonctionnement du javascript :
Il va aller "regarder la couleur du pseudo". Ensuite, il consulte une liste des couleurs des groupes (que vous allez devoir mettre vous-même) pour savoir le groupe auquel la couleur du nom correspond. Puis, il regarde la liste de rang (que vous devrez faire vous-même) et il ajoute le titre du rang et l'image du rang qui correspond au groupe.

On va décortiquer le javascript pour savoir où on doit modifier quoi

---

Partie des couleurs des groupes qui ont des rangs

Si on décortique le javascript, la première partie, "groupcouleur", comporte la couleur de chacun des groupes en mode "rgb":

Code:

$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)", /*Couleur du 1er groupe*/
  "rgb(162, 176, 102)", /*Couleur du 2e groupe*/
  "rgb(133, 199, 194)", /*Couleur du 3e groupe*/
  "rgb(67, 145, 181)", /*Couleur du 4e groupe*/
  "rgb(10, 163, 97)", /*Couleur du 5e groupe*/
  ];

Vous devez aller dans chacun de vos groupes et copier/coller exactement la couleur qui appartient à chaque groupe. Vous verrez que la couleur est en mode "hex", soit quelque chose comme "#AD8H46". Or, le javascript utilise uniquement les codes en mode "rgb", tel que "rgb(173, 8, 70)", ce qui donne la même couleur.

Pour transférer vos codes de couleur "hex" en codes de couleur "rgb", vous pouvez utiliser ce site : http://www.javascripter.net/faq/hextorgb.htm . Bref, une fois que vous avez la couleur en "rgb", vous la mettez dans la partie "groupcouleur" pour chacun de vos groupes.

---

Partie des "faux titres de rang"

Ensuite, la deuxième partie, "group1", sert à mettre le titre de chacun des rangs : :

Code:

 var group1 = [
  "Élèves", /*Titre du 1er groupe*/
  "Professeurs", /*Titre du 2e groupe*/
  "Personnel", /*Titre du 3e groupe*/
  "Habitants", /*Titre du 4e groupe*/
  "PNJ", /*Titre du 5e groupe*/
  ];

À noter que le premier rang doit correspondre à la couleur du premier groupe que vous avez mis dans la section précédente et ainsi de suite.

D'ailleurs, si vous voulez personnaliser chacun des rangs, vous pouvez facilement mettre quelque chose comme :

Code:

 var group1 = [
  "<span style='color: red;'>Élèves</span>",
  "<span style='color: blue;'>Professeurs</span>",
  "<span style='color: orange;'>Personnel</span>",
  "<span style='color: purple;'>Habitants</span>",
  "<span style='color: green;'>PNJ</span>",
  ];

Ou encore :

Code:

 var group1 = [
  "<span class='nom_de_class1'>Élèves</span>",
  "<span class='nom_de_class2'>Professeurs</span>",
  "<span class='nom_de_class3'>Personnel</span>",
  "<span class='nom_de_class4'>Habitants</span>",
  "<span class='nom_de_class5'>PNJ</span>",
  ];

---

Partie des "fausses images de rang"

La troisième partie, "group2", sert à mettre l'url des images de rang pour chacun des groupes :

Code:

 var group2 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png", /*Image du 1er groupe*/
  "https://2img.net/i/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "https://2img.net/i/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "https://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "https://2img.net/i/fa/subsilver/icon_online_fr.gif", /*Image du 5e groupe*/
  ];

À noter que la première url d'image doit correspondre au premier titre du rang de la section précédente et à la couleur du premier groupe que tu as mis dans la section d'avant et ainsi de suite.

---

La partie où le javascript fait actuellement quelque chose

La dernière partie du javascript, soit le reste, sert à repérer la couleur du nom de l'utilisateur, de la comparer avec le groupcouleur et d'appliquer le titre de rang et l'image de rang qui correspond :

Code:

 /*On calcule le nombre de couleurs au total*/
  var nbgroup = groupcouleur.length;

  /*On va chercher chaque nom pour chaque message posté pour appliquer le reste du javascript. On répète le processus à chaque fois qu'on trouve un nom*/
  $('tr.post > td span.name > strong > a > span > strong').each(function ()

    /*On sélectionne le l'espance du "faux titre de rang" dans le template*/
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');

    /*On sélectionne l'espace de "fausse image de rang" dans le template*/
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');

    /*On prend la couleur du pseudo*/
    var uncolor = $(this).css('color');

    /*On va aller comparer la couleur de pseudo à chaque couleur de groupe*/
    for (i=0; i < nbgroup; i++) {

      /*Si la couleur du pseudo = la couleur du groupe, on va faire les modifications*/
      if (uncolor == groupcouleur[i]) {

        /*On ajoute le titre de rang qui correspond à la couleur du groupe dans l'espace du "faux titre de rang"*/
        $(rang1).html(group1[i]);

        /*On donne la même couleur au titre de rang que la couleur du groupe*/
        $(rang1).css('color', groupcouleur[i]);

        /*On ajoute l'image de rang qui correspond à la couleur du groupe dans l'espace de la "fausse image de rang"*/
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});

Ce bout n'a absolument pas à être modifié pour fonctionner. Sérieux, pas touche, à moins d'être sûr de savoir ce que vous faites, ok?

---

Personnaliser le titre de rang et l'image de rang

On a déjà vu précédemment qu'on pouvait entourer d'un span avec une classe différente chaque titre de rang, donc vous pouvez vous servir de ces classes pour personnaliser chaque rang.

Pour personnaliser tous les titres de rang à la fois, vous pouvez mettre ceci dans votre CSS :

Code:

/*Titres des rangs*/
.rangtitre {
  propriété: valeur;
}

Pour personnaliser tous les images de rang à la fois, vous pouvez mettre ceci dans votre CSS :

Code:

/*Images des rangs*/
.rangimg img {
  propriété: valeur;
}

Quant à personnaliser les images de rang individuellement, vous pouvez mettre ceci dans votre CSS et remplacer le URL par le lien de l'image de rang à modifier :

Code:

.rangimg img[src="URL"] {
  propriété: valeur;
}

---

Partie des rangs dans le reste du forum

À ma connaissance, les rangs apparaîssent à un seul autre endroit dans le forum, soit le profil.

Le hic, c'est que puisque le profil (à moins que vous ayez la version simplifié du profil) ne peut pas être modifié entièrement dans un template, on peut difficilement remplacer le rang par le faux rang.

Donc, si la personne change de groupe, le rang se changera automatiquement dans les messages (grace aux "faux rang"), mais restera pareil dans le profil. Alors si quelqu'un va voir, il sera genre "WTF?". Pas trop joyeux ><

Ce que je vous conseille, une fois que vous avez installé le javascript comme il faut et vérifié qu'il fonctionne bien, c'est d'aller carrément supprimer les rangs qui ne sont plus nécessaire (dans le panneau d'administrateur, dans les utilisateurs, dans les rangs, vous les supprimez tous).

Comme ça, les rangs ne seront simplement pas affichés sur le profil (ce qui n'est vraiment pas un drame, on s'entend) et ne contraseront donc plus avec le faux rang des messages. Perfect!

---

C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

Mise en place

Code:

<!-- BEGIN forumrow -->
<div class="un-forum">

  <!-- Bloc statistiques (dernier message + statistiques) -->
    <div class="stats-forum">
        <div class="last-message">{catrow.forumrow.LAST_POST}</div>
        <div class="sujets-messages">{catrow.forumrow.TOPICS} sujets • {catrow.forumrow.POSTS} msg</div>
    </div>
    
    <!-- Bloc infos : titre + description + sous forums -->
    <div class="infos-forum">
        <div class="titre-forum"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
        
        <div class="description-forum">
            <div class="description">{catrow.forumrow.FORUM_DESC}</div>
            <div class="sous-forums gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        </div>
    </div>
    
    <!-- Bloc nouveaux messages / pas de nouveaux messages / verrouillé -->
    <div class="status-forum">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </div>
    
</div> <!-- fermeture .un-forum -->
<!-- END forumrow -->

Sélectionner un forum précis en CSS

Exemple simple, la couleur du titre du forum

Code:

.titre-forum a {
  color: #ffffff;
}

Code:

<a href="/f16-forum-2">Forum 1</a>

Code:

.titre-forum a[href="/f16-forum-2"] {
  color: #ffffff;
}

Code:

.titre-forum a[href^="/f16-"] {
  color: #ffffff;
}

Ce qui signifie "sélectionne dans .titre-forum la balise a qui a comme attribut href la valeur qui commence par /f16-
Le "qui commence par" est indiqué par la présence du petit chapeau avant le signe égale :)

Cela simplifie le code car au lieu de mettre le nom du forum entier "/f16-forum-2", il suffit de mettre "/f16-".
Avec "/f16-forum-2", si je décide d'appeler mon forum "Petit éléphant volant", je vais devoir changer dans le CSS partout avec le nouveau lien.
Ici, "/f16-" indique le numéro du forum, même si le nom du forum change, je n'aurai pas besoin de modifier mon CSS.

La couleur de fond de la zone "Dernier message"

Code:

.stats-forum {
  background: #f1c40f;
}

Code:

<!-- BEGIN forumrow -->
<div class="un-forum">

Code:

<a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>

Attention à ne pas rendre son HTML invalide (par exemple un balise a en dehors d'une cellule (td) dans un tableau si vous avez le template de base. Si vous avez un template de base non modifié, allez dans la section "Problème avec mon code", on pourra vous aider

Code:

.forum-perso-link[href^="/f16-"] {
}

Code:

.forum-perso-link[href^="/f16-"] + .stats-forum{
  background: #f1c40f;
}

Code:

.forum-perso-link[href^="/f16-"] ~ .stats-forum{
  background: #f1c40f;
}

Modifier les enfants

Code:

.forum-perso-link[href^="/f16-"] ~ .stats-forum .sujets-messages {
  background: #f39c12;
  color: #fff;
}

Code:

.forum-perso-link[href^="/f16-"] ~ .infos-forum .titre-forum {
  background: #f39c12;
  color: #fff;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

Code:

.forum-perso-link[href^="/f16-"] ~ .infos-forum .description-forum {
  height: 40px;
}

Conseils, amélioration

Code:

<!-- BEGIN forumrow -->
<div class="un-forum">
  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>
  TOUT MON ANCIEN CODE SE TROUVE JUSTE APRES
<!-- END forumrow -->

Code:

<!-- BEGIN forumrow -->
<div class="un-forum">
  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>
  <div class="forum-perso-autour">TOUT MON ANCIEN CODE SE TROUVE DANS CETTE NOUVELLE DIV</div>
<!-- END forumrow -->

Code:

.forum-perso-link[href^="/f16-"] ~ .stats-forum {
  background: #f1c40f;
}

.forum-perso-link[href^="/f16-"] ~ .stats-forum .sujets-messages {
  background: #f39c12;
  color: #ffffff;
}

.forum-perso-link[href^="/f16-"] ~ .infos-forum .titre-forum {
  text-align: center;
  background: #f39c12;
  color: #ffffff;
  height: 100px;
  line-height: 100px;
}

.forum-perso-link[href^="/f16-"] ~ .infos-forum  .description-forum {
  height: 40px;
}

Code:

.forum-perso-link[href^="/f16-"] + .forum-perso-autour .stats-forum {
  background: #f1c40f;
}

.forum-perso-link[href^="/f16-"] + .forum-perso-autour .sujets-messages {
  background: #f39c12;
  color: #ffffff;
}

.forum-perso-link[href^="/f16-"] + .forum-perso-autour .titre-forum {
  text-align: center;
  background: #f39c12;
  color: #ffffff;
  height: 100px;
  line-height: 100px;
}

.forum-perso-link[href^="/f16-"] + .forum-perso-autour .description-forum {
  height: 40px;
}

Pour les forums en HTML5

Code:

<!-- BEGIN forumrow -->
<div class="un-forum">
  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum-perso-link" style="display:none;"></a>

Code:

<!-- BEGIN forumrow -->
<div class="un-forum" data-link="{catrow.forumrow.U_VIEWFORUM}">
  LE RESTE DE VOTRE

Code:

.un-forum[data-link^="/f16-"] .stats-forum {
  background: #f1c40f;
}

.un-forum[data-link^="/f16-"] .sujets-messages {
  background: #f39c12;
  color: #ffffff;
}

.un-forum[data-link^="/f16-"] .titre-forum {
  text-align: center;
  background: #f39c12;
  color: #ffffff;
  height: 100px;
  line-height: 100px;
}

.un-forum[data-link^="/f16-"] .description-forum {
  height: 40px;
}

Rendu en image:

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
   
    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<link href='https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web|Yanone+Kaffeesatz|Roboto' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left" valign="middle">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>   
          </tr>
          <tr>
      <td class="nav" valign="middle" width="100%">
      </td>
   </tr>
</table>

<table class="affichagesujet" width="100%" border="0" cellspacing="0" cellpadding="0" >
   <tr>
             <td colspan="3">
                     <h1 class="sujettitre">
                          {TOPIC_TITLE}<br />
           <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                      <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                      <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                      {NAV_CAT_DESC_SECOND}
                    </span>
                     </h1>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
             <td colspan="2" align="right" valign="top">
                     <div class="paginationsujet">{PAGINATION}</div>
             </td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}">
          <td valign="top">
            <div class="profilmodif">
              <h1 class="pseudo">{postrow.displayed.POSTER_NAME}</h1>
              <div class="profavatar">
                <div class="infos">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
              </div>
              <div class="rang">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            </td>
                <td valign="top" colspan="2">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr class="heureedit">
                                     <td class="heureedit">
                                          <div class="on">{postrow.displayed.ONLINE_IMG}</div>
                                          <div class="heure">{postrow.displayed.POST_DATE}</div>
                                     </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="affichmess">
                                                  <div class="imagesedit">{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
                    <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                  </div>
                                  </td>
                          </tr>
                  </table>
          </td>
        </tr>
        <!-- BEGIN switch_signature -->
     <tr>
          <td colspan="3">
            <div class="signmss">
              {postrow.displayed.SIGNATURE}
            </div>
          </td>
     </tr>
        <!-- END switch_signature -->
   <!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="paginationsujet" valign="top" {COLSPAN_PAGINATION}>{PAGE_NUMBER}</td>
      <!-- BEGIN topicpagination -->
      <td class="paginationsujet" align="right" valign="top" >{PAGINATION}</td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="paginationsujet" colspan="2" align="right" valign="top">{S_WATCH_TOPIC}</td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="2" align="center">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Code:

/*Affichage des sujets par Cheshire Cat*/
/*Message du posteur*/
.affichagesujet{
  margin:10px 0;
  background-color:#BAC49C;
}
.sujettitre{
  margin:0 0 10px;
  padding:5px;
  background-color:#E2DFED;
  color:#8665AB;
  font-family: 'Amaranth', sans-serif;
  font-size:24px;
  text-transform:uppercase;
  text-align:center;
  font-weight:normal;
  letter-spacing:2px;
}
.sujettitre .nav{
  font-size:0;
}
.sujettitre .nav a{
  color:#8665AB!important;
  font-size:12px;
  font-weight:normal;
}
.sujettitre .nav a:not(:last-of-type):after{
  content:"-";
  margin:0 2px;
}
.paginationsujet{
  font-size:12px;
  padding:0 10px;
  color:#504254;
}
.paginationsujet a{
  color:#504254!important;
}
.paginationsujet img{
  height:10px;
  opacity:0.8;
}
.heureedit{
  height:20px;
  padding:10px 10px 0 0;
}
.on{
  float:left;
}
.heure{
  float:right;
  font-family: 'Titillium Web', sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#794F82;
  text-transform:uppercase;
}
.imagesedit{
  text-align:right;
}
.imagesedit img{
  height:20px;
  opacity:0.8;
  margin:0 3px;
}
.affichmess{
  width:480px;
  min-height:357px;
  margin:10px;
  padding:10px;
  background-color:#929a79;
  font-size:12px;
  color:#504254;
  text-align:justify;
  font-family:Roboto;
  line-height:18px;
}
.signmss{
  min-height:100px;
  max-height:200px;
  margin:0 10px 10px;
  padding:10px;
  color:#504254;
  background-color:#E2DFED;
  overflow:auto;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
}
.signmss br:first-of-type,
.signmss br:nth-of-type(2){
  display:none;
}
/*Profil du posteur*/
.profilmodif{
  z-index:1;
  width:200px;
  background-color:#E2DFED;
  margin:0 0 10px 10px;
}
.pseudo{
  margin:0;
  padding:7px 0 5px;
  text-align:center;
  font-family:Yanone Kaffeesatz;
  font-size:23px;
}
.pseudo strong{
  font-weight:normal;
}
.pseudo a{
  text-decoration:none !important;
}
.pseudo a:hover{
  text-decoration:none !important;
}
.profavatar{
  position:relative;
  width:200px;
  height:320px;
  overflow:hidden;
}
.profil_avatar img{
  position:absolute;
  top:-15px;
  left:0px;
  height:320px;
  width:200px;
  margin-top:15px;
  transition: all 600ms;
}
.profavatar:hover .profil_avatar img {
  -webkit-transform:translatex(-200px);
  transform:translatex(-200px);
}
.infos{
  position:absolute;
  top:0px;
  left:0px;
  width:190px;
  height:310px;
  overflow:auto;
  padding:5px;
  text-align:left;
  letter-spacing:0px;
  color:#504254;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
  background-color:#f4ecea;
}
.rang{
  overflow:hidden;
  color:#504254;
  text-align:center;
  font-size:20px;
  letter-spacing:-2px;
  font-family: 'Titillium Web', sans-serif;
}
.rang img{
  height:20px;
  opacity:0.8;
  margin:0 2px;
}

/* empeche certaines infos du profil de depasser*/
.profavatar .infos img,
.profavatar .infos textarea {
  max-width: 100%;
  box-sizing: border-box;
}

Bloc de connexion rapide verte

Il s'agit du bloc de connexion. La partie image à gauche est un lien version l'inscription.

Template

Connexion rapide en haut

Code:

<!-- BEGIN switch_user_login_form_header -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->

Connexion rapide en bas

Code:

<!-- BEGIN switch_user_login_form_footer -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->

Le HTML

Code:

<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<div class="cnxl-bloc">
    <form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <!-- Bloc gauche - INSCRIPTION-->
       <a class="cnxl-inscription" href="/register" title="S'inscrire !">
           <img src="http://image.noelshack.com/fichiers/2016/09/1457207134-decoration.png" alt="Rejoindre le forum" />
       </a>

         <!-- Bloc milieu - LES CHAMPS A REMPLIR-->
        <div class="cnxl-input-bloc">
            <input type="text" name="username" placeholder="Pseudo" />
            <input type="password" name="password" placeholder="Mot de passe" />
        </div>

         <!-- Bloc droit - BOUTON CONNEXION-->
         <div class="cnxl-submit-bloc">
            <input type="submit" name="login" value="Connexion" />
        </div>

        <!-- En bas-->
        <div>
            <input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
            <label for="autologin">Connexion automatique</label>
        </div>
    </form>
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->

Spoiler:

CSS

Code:

/*
 * Libre service bloc de connexion rapide verte
 * NEVER UTOPIA
 */

 /* Bloc qui entoure tout */
 .cnxl-bloc {
     margin: 20px auto;

     font-family: 'Playfair Display', serif;
     text-align: center;
     font-size: 15px;
     color: #484848;
 }

 /* Aligner les 3 blocs */
 .cnxl-submit-bloc,
 .cnxl-inscription,
 .cnxl-input-bloc {
     display: inline-block;
     vertical-align: middle;
 }

 /* Style commun pour tous les champs */
 .cnxl-form input {
     padding: 10px;
     border: none;
     font-family: inherit;
     font-size: 15px;
     outline: none;
 }

 /*
  * Décoration à gauche
  * Inscription
  */

 .cnxl-inscription {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 2px solid #E5DB84;
     padding: 8px;
 }

 .cnxl-inscription img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }


 /*
  * Champs à remplir au centre
  */

 .cnxl-input-bloc {
     margin: 0 20px;
     width: 200px;
     border-radius: 5px;
     box-shadow: 0 0 0 2px #E5DB84;
     overflow: hidden;
     padding: 0 5px; /* espace entre le bord et le trait des input */
     background: #FFFFFF;
 }

 .cnxl-input-bloc input {
     color: black;
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-bottom: 1px solid #E5DB84; /* bordure entre les input */
     box-shadow: 0 0 0 100px #ffffff inset; /* couleur de fond des input */
 }
 .cnxl-input-bloc input:last-of-type {
     border: none;
 }


 /*
  * Connexion à droite
  */

 /* Bouton de connexion */
 .cnxl-submit-bloc input {
     background: #E5DB84;
     border-radius: 3px;
     cursor: pointer;
     transition: all 300ms ease-out;
 }

 /* Bouton de connexion au survol */
 .cnxl-submit-bloc input:hover {
     background: #ede390;
 }

 /*
  * Zone en bas
  */

 .cnxl-form label {
     cursor: pointer;
 }

 /* Liens (Mot de passe oublié) */
 .cnxl-bloc a {
     font-size: 10px;
     text-decoration: none!important;
     color: #766e6e;
     text-decoration: none;
     transition: all 300ms ease-out;
 }

 /* Liens au survol (Mot de passe oublié) */
 .cnxl-bloc a:hover {
     color: #a79d46;
 }

 /*
  * Fin libre service Connexion rapide verte
  * Never Utopia
  */