avatar
Sexe : Masculin
Date d'inscription : 16/08/2016
Messages : 64
Newbie
Voir le profil de l'utilisateur

Quelle structure est concernée par votre problème ? La bannière.
Qu'elle est l'adresse du forum concerné (sous hide si cela vous dérange) ? http://divinetemptation.forumactif.org/
Un screen du problème : éventuellement, si aide à la compréhension
Spoiler:
Expliquez précisément votre problème : Bonjour, j'espère que vous allez bien !

Le problème dont je souffre sur mon forum est très spéciale, voilà plus d'un an que j'essaye d'installer un header de fond sans succès.  

Je pense avoir lu tous les tutos en long, en large et en travers mais à chaque fois que j'essaye d'installer une bannière, je me retrouve avec un vide à la place de celle-ci.

J'ai l'impression qu'un code quelque part sur le forum vient en contradiction de l'installation de la bannière.  

Donc, à proprement parler, il y a un problème de code mais j'ignore où il peut se situer, je n'ai pas le niveau. Il est très important pour notre forum de réussir à mettre un header car pour le moment, comme vous pourrez le constater par vous même, nous nous contentons de bricoler avec des bannières artisanales.

Par avance, merci pour votre aide !   Happyness
Les codes : écrire ici
avatar
Sexe : Féminin
Date d'inscription : 02/10/2017
Messages : 23
Newbie
Voir le profil de l'utilisateurhttp://amnesia.actifforum.com/
Bonjour

Ma question va te sembler tout bête, mais est-ce que tu as pensé à mettre une image invisible à la place du header (dans la PA, dans les images, pas le code) ? Personnellement, c'est ce que je fais depuis des années. Après, je ne sais pas si le code a évolué pour ne pas avoir à utiliser une image transparente !

edit : j'ai mal vu. Ce serait plutôt la couleur de l'intérieur du cadre à enlever !
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Sinon au lieu de mettre une image transparente, tu peux tout simplement mettre le code
Code:
#i_logo { height:XXpx;}
en ajustant la hauteur en fonction de ta bannière et enlever la couleur de l'intérieure du cadre du forum comme le dit Quake et ce devrait être bon :)

AH et si tu as des contours de cadre disgracieux, supprime toute les couleurs faisant partie de la partie "Les contours" ^^
avatar
Sexe : Masculin
Date d'inscription : 16/08/2016
Messages : 64
Newbie
Voir le profil de l'utilisateur
Merci pour vos réponses et astuces.

J'ai procédé à plusieurs essais. En supprimant la couleur de l'intérieur du cadre, je me retrouve avec un cadre transparent. Le problème, c'est que ma bannière, en arrière plan, se répète indéfiniment. C'est comme l'image que j'ai mise en spoiler sauf qu'au lieu d'avoir un cadre blanc, on voit au travers...
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Pour le fait qu'elle se répète, tu peux insérer le code
Code:
body {Background-repeat:no-repeat;}
dans ton css et elle ne se répétera plus :) Tu peux nous fournir ton css ? Peut-être qu'un code entre en conflit :)
avatar
Sexe : Masculin
Date d'inscription : 16/08/2016
Messages : 64
Newbie
Voir le profil de l'utilisateur
Bien-sûr, merci beaucoup, voici ma feuille de style CSS

Spoiler:
Code:
/*** DÉBUT DES BANNIÈRES DE FOND ***/



.ban1 {background-image: url('#');}


.ban2 {background-image: url('#');}


.ban3 {background-image: url('#');}




/*** FIN DES BANNIÈRES DE FOND ***/




* GENERAL ET CORPS DE PAGE */



body
{
 
  /* le motif est en transparence il suffit de changer la couleur de fond */
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}
a:link, a:hover
{
  text-decoration: none !important;
}
.bodylinewidth
{
  position: relative;
  z-index: 10;
  width: 937px;
  margin: 0 auto;
  background: #FEFEFE; /* couleur de fond du corps */
  box-shadow: 0px 0px 10px #39322c;
}
.bodyline
{
  padding: 0;
  margin: 0;
}
#page-body
{
  width: 98%;
  margin: auto;
}
#navigation
{
  text-align: center;
  margin: 0 10px -10px 0;
}
#navigation img
{
  opacity: 0.3;
  transition: 500ms;
}
#navigation img:hover
{
  opacity: 0.7;
  transition: 500ms;
}
#search_menu
{
  left: 50% !important;
  text-align: center;
}
#i_logo
{
  margin-top: 10px;
}

/* table
{
width: 100%;
} */

.forumline
{
width: 100%;
background: #ffffff;
}

table.three-col
{
max-width: 880px !important;
}



/* CATEGORIES */

.cate_titre h2
{
width: 100%;
background: radial-gradient(#AC6935, #453523);
color: #EDEDED;
font-family: 'Metamorphous';
text-shadow: 1px 2px 3px rgba(0,0,0, 0.7);
font-size: 22px;
letter-spacing: 2px;
text-align: center;
padding: 3px 0;
}

.cate_bloc
{
  height: 180px;
  margin: 5px 0;
}

.cate_description
{
  position: relative;
  z-index: 5;
  width: 300px;
  height: 150px;
  overflow: hidden;
  border: 2px solid #FEFEFE;
}
.description_texte
{
  position: absolute;
  width: 280px;
  height: 130px;
  overflow: auto;
  color: #000000;
  font-size: 11px;
  padding: 10px;
  line-height: 11px;
  background: #FEFEFE;
  text-align: justify;
  margin-top: 150px;
  opacity: 0;
  transition: 10s;
}
.cate_description:hover .description_texte
{
  margin-top: 0;
  opacity: 1;
  transition: 1s;
}
a.forumlink
{
  position: absolute;
  z-index: 10;
  display: block;
  width: 485px;
  margin: 10px 0 0 295px;
  padding: 2px 0 2px 100px;
  background: #6F4A2A;
  font-family: 'Alegreya Sans SC', sans-serif;
  color: #FEFEFE !important;
  text-transform: uppercase;
  font-size: 16px;
  transition: 500ms;
}
a.forumlink:hover
{
  background: #382714;
}
.sous_forum
{
  position: absolute;
  width: 350px;
  height: 113px;
  margin-left: 310px;
  margin-top: 40px;
  color: #ffffff;
}
.sous_forum img
{
  vertical-align: center;
}
.sous_forum a.gensmall
{
  padding: 2px;
  background: #e7e5e1;
  color: #627764 !important;
  font-size: 11px;
  text-shadow: 1px 1px 0px #ffffff;
  transition: 500ms;
}
.sous_forum a.gensmall:hover
{
  background: #d0cdc8;
}
.last_post
{
  position: absolute;
  z-index: 11;
  width: 150px;
  height: 100px;
  padding-top: 50px;
  right: 0;
  margin-right: 50px;
  background: #EDEDED;
  border: 5px solid #ffffff;
  box-shadow: 0px 0px 7px #39322c;
  border-radius: 150px;
  overflow: hidden;
  text-align: center;
  font-size: 11px;
}
.stats1, .stats2
{
  position: absolute;
  z-index: 12;
  width: 60px;
  text-align: center;
  right: 0;
  font-size: 26px;
  line-height: 14px;
  font-family: 'Shadows Into Light Two', cursive;
  color: #b2b0ae;
}
.stats1
{
  margin-right: 100px;
  margin-top: 12px;
}
.stats2
{
  margin-right: 100px;
  margin-top: 120px;
}
.stats1 .gensmall, .stats2 .gensmall
{
  display: block;
  font-family: 'Kameron', serif;
  color: #b2b0ae;
  font-size: 11px;
}
.forum_avatar
{
  position: absolute;
  z-index: 13;
  width: 60px;
  height: 60px;
  right: 0;
  margin-right: 30px;
  margin-top: -10px;
  overflow: hidden;
  border-radius: 60px;
  border: 3px solid #ffffff;
  box-shadow: 0px 0px 5px #39322c;
  background: #3a332d;
}
.forum_avatar img
{
  width: 65px;
  margin-top: -20px;
}
.forum_icone
{
  position: absolute;
  z-index: 12;
  right: 0;
  margin-right: 10px;
  margin-top: 30px;
}

/* CHAMPS DE SAISIE ET BOUTONS */
input, select, textarea
{
  background: #d0cdc8;
  padding: 2px;
  border: none;
}
.mainoption, .liteoption
{
  background: #a26843;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  transition: 500ms;
}
.mainoption:hover, .liteoption:hover
{
  background: #cba857;
}
.sceditor-container iframe, .sceditor-container textarea
{
  max-width: 620px;
}
td.pourcentback img
{
  background: #cba857;
}

/* RETRAIT DES BORDURES */
    .row3Right
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }
a.mainmenu[href="/faq"] {display: none !important;}
a.mainmenu[href="/groups"] {display: none !important;}
    .selectCode { float:right; text-transform: uppercase; cursor:pointer; }
    div.cont_code { clear: right; }
    .postbody {
    text-align:justify;
    }
    span#fa_share {display:none!important;}
    #fa_toolbar, #fa_toolbar_hidden {background-color: rgba(95, 95, 95, 0) !important;}

    #chatbox .cb-avatar {
      width: auto !important;
      height: auto !important;
    }
    #chatbox .cb-avatar > img {
      width: auto !important;
      height: auto !important;
      max-width: 100px;  /*largeur maximale des avatars dans la cb*/
      max-height: 70px;  /*hauteur maximale des avatars dans la cb*/
    }


 
/* DÉBUT AILES D'ANGE HAUT / BAS */
 
    .bouhautbas {
        bottom: 40px;
        right: 10px; /* remplacez left par right pour afficher les boutons à droite */
        position: fixed;
        z-index: 100;
    }
 
  /* FIN AILES D'ANGE HAUT / BAS */

 
/* DÉBUT DE LA PAGE D'ACCUEIL */


#mainPA{
 margin:0 auto;
  /***Largeur de la page accueil***/
 width: 800px;
 /***Police du contexte***/
 font-family:'Amarante', cursive;
 font-size:12.5px;
 color: #303030;
 }

 #mainPA a{
 text-decoration:none;
 transition:all 400ms;
 }

 #mainPa a:hover{
 color: #94bb8c;
 }

 #titreBienvenuePA{
 margin:-20px 0;
 color: #C9BFB3;
 font-size: 25px;
 font-family:'Amarante';
 font-weight:normal;
 text-transform:uppercase;
 text-align:center;
 }

 #fondPA{
 background-color: #FFFFFF;
 border: #C1BFB1 3px solid;
 border-radius:10px;
 padding:15px;
 }

 .inline{
 display:inline-block;
 vertical-align:top;
 }

 .infobulle{
 position:relative;
 width:345px;
 height:164px;
  /***Couleur de l'encadrement du contexte***/
 border: #C1BFB1 3px solid;
 }

 .infobulle > img{
 position:absolute;
 top:0;
 left:0;
 }

 .infobulle div{
 position:absolute;
 top:0;
 left:0;
 height:134px;
  /***Fond du contexte***/
 background-color: #FFFFFF;
 padding:15px;
 text-align:justify;
 overflow:auto;
 opacity:0;
 transition:all 600ms;
 }

 .infobulle:hover div{
 opacity:1;
 }

 .NousAttendons{
 width:200px;
 text-align:center;
 line-height:16px;
 font-family:'Amarante';
  /***Couleur sous le pseudo***/
 color: #C1BFB1;
 }
 .NousAttendons > img{
 border-radius:50%;
 overflow:hidden;
 }
 .NousAttendons a{
  /***Couleur du pseudo***/
 color: #94812B;
 font-size:18px;
 text-transform:uppercase;
 }
        .staff{
        width:200px;
        height:200px;
        position:relative;
        }
        .staff ul{
        position:absolute;
        bottom:0;
        left:25px;
        margin:0;
        padding:0;
        }
        .staff li{
        display:inline-block;
        margin:10px 5px 0 0;
        }
        .staff li > a{
        display:block;
  /***Petit cercles du staff***/
        background-color: #C1BFB1;
        width:25px;
        height:25px;
        border-radius:50%;
        }
        .contenuOnglet{
        position:absolute;
        top:0;
        left:25px;
  /***Couleur bordure cercle avatar staff***/
        border: #C1BFB1 3px solid;
        width:150px;
        height:150px;
        overflow:hidden;
        border-radius:50%;
        }
        .contenuOnglet > div{
        position:absolute;
        top:0;
        left:0;
        width:150px;
        height:150px;
        border-radius:50%;
        padding:50px 20px;
        box-sizing:border-box;
  /***Fond avatar staff***/
        background-color: #EBE9E0;
  /***Couleur de la fonction du staff***/
        color: #677179;
        font-family:'Amarante';
        line-height:25px;
        text-align:center;
        opacity:0;
        transition:all 600ms;
        }
        .contenuOnglet:hover > div{
        opacity:1;
        }
        .contenuOnglet > div a{
  /***Couleur pseudos du staff***/
        color: #DB1803;
        font-size:15px;
        text-transform:uppercase;
        }
        .contenuOnglet > div a:hover{
  /***Couleur surbrillance liens du staff***/
        color: #850606!important;
        }
        .contenuOnglet img{
        position:absolute;
        top:-30%;
        left:0;
        width:100%;
        }
 /*Fonctionnement des onglets*/
 /*NE PAS MODIFIER*/
        /*On masque toutes les spans (.tli-target), c'est important si vous ne voulez pas que la page scroll en cliquant sur un lien*/
        .tli-target{
        display:none;
        }
        /*On masque toutes les divs qui sont précédées d'une span (.tli-target)*/
        .tli-target + div{
        display:none;
        }
        #wrap1 + div{
        display:initial!important;
        }
        /*On affiche les blocs que l'on vient de masquer lorsque le span qui les précède (.tli-target) est actif, c'est à dire lorsque le lien correspondant (ancre) a été cliqué*/
        .tli-target:target + div{
        display:block;
        }
        .titreBloc{
        margin:0 0 10px;
  /***Couleur des titres des différentes sections***/
        color: #677179;
        font-size:18px;
        font-family:'Amarante';
        text-transform:uppercase;
        text-align:center;
        }
        .blocBas1, .blocBas2, .blocBas3, .blocBas4{
        margin:20px 14px 0 0;
        height:170px;
        overflow:auto;
        text-align:center;
        line-height:22px;
        }
        .blocBas1{
        width:140px;
        }
        .blocBas1 a{
  /***Couleur des liens pour la partie Navigation***/
        color: #303030;
        }
        .blocBas2{
        width:173px;
        }
        .blocBas2 img{
        width:35px;
        height:35px;
  /***Couleur des bordures des Prédéfinis***/
        border: #C1BFB1 2px solid;
        margin:0px 2px;
        }
        .blocBas3{
        width:210px;
        }
        .blocBas3 img{
  /***Couleur des bordures Top-sites***/
        573 border: #C1BFB1 3px solid;
        margin:3px 4px;
        }
        .blocBas4{
        margin:20px 0 0 0;
        width:180px;
        line-height:20px;
        }

 .Infos{
 width:200px;
 text-align:center;
 line-height:16px;
 font-family:'Amarante';
 color: #303030;
 }


/* FIN DE LA PAGE D'ACCUEIL */


/***** DÉBUT EFFET DE TRANSITION SUR LES LIENS (astuce Forumactif) *****/

a {
-moz-transition:color 3s; /* Mozilla Firefox */
-webkit-transition:color 3s; /* Safari et Google Chrome */
-o-transition:color 3s; /* Opera */
transition:color 3;
}
a:hover {
color:#850606;
}

/***** FIN EFFET DE TRANSITION SUR LES LIENS (astuce Forumactif) *****/


/*
    * 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
      */




    /* DEBUT SUPPRESSION DE LA BARRE DE RECHERCHE FORUMACTIF */
    div#fa_search {display:none!important;}
    /* FIN SUPPRESSION DE LA BARRE DE RECHERCHE FORUMACTIF */




    /*DÉBUT DU QEEL*/

    /* Pour supprimer le soulignement des liens sur le forum */
    a:hover
    {
    text-decoration: none!important;
    }

    a
    {
    text-decoration: none!important;
    }

    /* Concerne la structure principale du QEEL */
    #corpducentre
    {
    margin:auto;
    }

    /* Organisation de la structure/!\ Ne pas toucher*/
    #corpducentre table
    {
    margin:auto;
    border-spacing:30px;
    }

    /* Titre des blocs*/
    #corpducentre h1
    {
    /* Si vous souhaitez modifiez la couleur de "En ces lieux" et "24 AGO", changez ce paramètre */
    color:#E3D9E0;
    /* Si vous souhaitez modifiez la police de "En ces lieux" et "24 AGO", changez ce paramètre */
    font-family: 'Amarante';
    text-align:center;
    /* Si vous souhaitez modifiez la taille de la police de "En ces lieux" et "24 AGO", changez ce paramètre*/
    font-size:30px;
    }

    /* Concerne les blogs "En ces lieux" et "24 AGO*/
    .bloc2bis
    {
    margin:auto;
    padding:5px;
    border-radius:25px;
    position:relative;
    top:-27px;
    height:hidden;
    /* Si vous souhaitez modifiez l'ombre portée de "En ces lieux" et "24 AGO", changez ce paramètre*/
    box-shadow:1px 1px 1px #c9c7c7;
    /* Si vous souhaitez modifiez la couleur du fond de "En ces lieux" et "24 AGO", changez ce paramètre*/
    background-color:#F9F9F9;
    font-family: Amarante;
    /* Si vous souhaitez modifiez la couleur de la police du bloc, changez ce paramètre*/
    color:#3f3f6c;
    /* Si vous souhaitez modifiez la taille de la police du bloc, changez ce paramètre*/
    font-size: 13px;
    }

    /* Concerne "24 AGO" /!\ Ne pas toucher */
    .connected
    {
    width:260px;
    text-align: justify;
    padding:5px;
    display: table;
    table-layout: fixed;
    }

    #lepeuple
    {
    height: 180px;
    overflow-y: auto;
    padding:5px;
    }

    /* /!\ Ne pas toucher*/
    .connected td.row1
    {
    background : none;
    }

    /* Concerne le "Qui est en Ligne"*/
    .qeel
    {
    position:relative;
    top:-30px;
    /* Si vous souhaitez modifiez la police de "Qui est en ligne ?!", changez ce paramètre*/
    font-family: 'Amarante';
    /* Si vous souhaitez modifiez la taille de la police de "Qui est en ligne ?!", changez ce paramètre*/
    font-size: 40px;
    text-align:center;
    /* Si vous souhaitez modifiez la couleur de "Qui est en ligne ?!", changez ce paramètre*/
    color:#E3D9E0;
    /* Si vous souhaitez modifiez l'ombre portée de "Qui est en ligne ?!", changez ce paramètre*/
    text-shadow: 1px 3px 3px #d2d1d1;
    }

    /* Concerne "dernier inscrit" "x posts" "x inscrits" */
    .ssqeel
    {
    margin:auto;
    position:relative;
    top:-45px;
    left:40px;
    width:600px;
    /* Si vous souhaitez modifiez la police de "dernier inscrit" "x posts" "x inscrits", changez ce paramètre*/
    font-family: 'Amarante';
    /* Si vous souhaitez modifiez la taille de la police de "dernier inscrit" "x posts" "x inscrits", changez ce paramètre*/
    font-size:20px;
    /* Si vous souhaitez modifiez la couleur de la police de "dernier inscrit" "x posts" "x inscrits", changez ce paramètre*/
    color:#587C97;
    text-align:center;
    line-height:0 px;
    }

    /* /!\ Ne pas toucher*/
    .ssqeel > span
    {
    margin-left:70px;
    }

    /* Concerne les groupes*/
    .groupenani
    {
    text-align:center;
    /* Si vous souhaitez modifiez la  police des groupes, changez ce paramètre*/
    font-family: 'Amarante';
    /* Si vous souhaitez modifiez la taille de la police des groupes, changez ce paramètre*/
    font-size:30px;
    /* Si vous souhaitez modifiez l'ombre de la  police des groupes, changez ce paramètre*/
    text-shadow: 1px 0px 0px #d2d1d1;
    }

    /* Concerne les paramètres de l'infobulle des groupes*/
    .groupenani span
    {
    padding:10px;
    position:absolute;
    margin-top:-85px;
    margin-left:-185px;
    width:400px;
    height:60px;
    overflow-y:hidden/* Si vous souhaitez modifiez l'ombre de l'infobulle, changez ce paramètre*/
    box-shadow:1px 1px 1px #c9c7c7;
    /* Si vous souhaitez modifiez la police du texte de l'infobulle, changez ce paramètre*/
    font-family: Verdana,Geneva,sans-serif;
    /* Si vous souhaitez modifiez la couleur de la police du texte de l'infobulle, changez ce paramètre*/
    color:#3f3f6c;
    /* Si vous souhaitez modifiez la taille de la police du texte de l'infobulle, changez ce paramètre*/
    font-size:9px;
    text-align:justify;
    /* Animation de l'infobule /!\ Ne pas toucher*/
    transform:scale(0) rotate(-60deg);
    transition:all .55s;
    opacity:O;
    text-shadow :none;
    }

    /* Animation de l'infobule /!\ Ne pas toucher*/
    .groupenani a:hover span, a:focus span
    {
    transform:scale(1) rotate(0);
    opacity: 1;
    text-decoration:none;
    /* Si vous souhaitez modifier la couleur de fond de l'infobulle, changez ce paramètre*/
    border-radius:25px;
    background-color:#FCFCFC;
    }

    /* Credits /!\ Ne pas toucher*/
    .hush
    {
    font-family: Verdana,Geneva,sans-serif;
    font-size:10px;
    color:auto;
    font-style:italic;
    text-align:center;
    }

    /*FIN DU QEEL*/

    /************************************* LISTE DES SUJETS ******************************************/

    .corp_sujet {
        margin: 10px auto;
        width: 890px;
        height: 65px;
    }

    .vu_rep_sujet {
        background-color: #C4B07A; /*modifiable*/
        color: #F7F7F7; /*modifiable*/
        margin-bottom: 8px;
        padding: 2px;
    }

    .corp_desc_sujet {
        display: inline-block;
        margin-left: 10px;
        width: 573px;
    }

    .titre_sujet {
        background-color: #F7F7F7; /*modifiable*/
        box-shadow: 1px 1px 1px #5F5D5D; /*modifiable*/
        height: 75px;
        overflow: hidden;
        padding-left: 10px;
        padding-top: 5px;
        width: 554px;
    }

    .titre_sujet a {
        color: #244377!important; /*modifiable*/
        font-family: sans-serif; /*modifiable*/
        font-size: 18px; /*modifiable*/
    }

    .titre_sujet a:hover {
          color: #850606 !important; /*modifiable*/
    }

    .auteur_sujet {
        font-size: 10px;
        margin: 5px 10px 0;
        text-align: left;
        color: #5B2440; /*modifiable*/
    }

    .auteur_sujet a {
    font-size: 10px; /*modifiable*/
    }

    .desc_sujet {
      color:#191919; /*modifiable*/
      font-size: 10px; /*modifiable*/
    }

    .corp_stat_sujet {
        color: #5D5959; /*modifiable*/
        display: inline-block;
        font-size: 12px; /*modifiable*/
        height: 80px;
        overflow: hidden;
        text-align: center;
        width: 183px;
        background-color: #F7F7F7; /*modifiable*/
        box-shadow: 1px 1px 1px #4C4B4B; /*modifiable*/
    }

    .stats_sujet {
      float:center;
    }

    .avatar_sujet {
        float: right;
        height: 80px;
        overflow: hidden;
        width: 50px;
    }

    .avatar_sujet img {
      width: 50px;
        height: 80px;
    }


    .img_old_new_sujet {
        display: inline-block;
        height: 80px;
        width: 65px;
    }

    .go_to_page_sujet {
        float: right;
        font-size: 10px; /*modifiable*/
        margin-right: 5px;
        margin-top: -24px;
        text-align: right;
        display: inline-block;
    }

    .go_to_page_sujet a {
    font-size: 11px; /*modifiable*/
    }

/************************************* FIN LISTE DES SUJETS ******************************************/



/************************************* DÉBUT BOTTIN DES AVATARS ***************************************/

    /* COULEURS LETTRES A/D/E/H/ETC */
    .IIILTRS {
    color: Black !important; background: White !important;
    }
    /* COULEURS LETTRES B/C/F/G/ETC */
    .IINDIII {
    color:Black !important; background:White !important;
    }
    /* COULEURS LISTES */
    .IIILTRS div{
    background:rgba(250,250,250,0.5) !important; color:black !important;
    }
    /* COULEURS CONSEIL BOTTIN */
    .cdtABCIII {
    background: White!important;
    }
    .cdtABCIII a{
    color: Black !important;
    }

/************************************* FIN BOTTIN DES AVATARS ***************************************/



/************************************* DÉBUT OPACITÉ IMAGE ******************************************/
             
    .opac {
        opacity: 0.5;
    /* formule firefox */
        filter: alpha(opacity=60);
        transition: opacity 3s;
        -moz-transition: opacity 3s;
        -o-transition: opacity 3s;
        -webkit-transition: opacity 3s;
        -htm-transition: opacity 3s;
                }
         
      .opac:hover {
        opacity: 2;
        -moz-opacity: 2;
        filter: alpha(opacity=120);
        transition: opacity 3s;
        -moz-transition: opacity 3s;
        -o-transition: opacity 3s;
        -webkit-transition: opacity 3s;
        -htm-transition: opacity 3s;   
                        }

/************************************* FIN OPACITÉ IMAGE ******************************************/



/************************************* DÉBUT INFO-BULLE PRÉDÉFINIS PA ******************************************/

.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none;
margin: 5px;
display: inline-block;
}
 
.info:hover{
z-index:25;
}
 
.info span{
display: none
}
 
.info:hover span{
display:block;
position:absolute;
right:-170px;
top:5px;
z-index:26;
width:160px;
height:25px;
border:2px solid #0000;
background-color:#0000;
color:#000000;
text-align: center !important;
font-size:x-small;
padding:5px;
}

/************************************* FIN INFO-BULLE PRÉDÉFINIS PA ******************************************/

/************************************* DÉBUT CSS FICHE DE PRÉSENTATION DES ANGES *****************************/

.fondprezA{
width:700px;
height: auto;
font-size: 10px;
font-family: Georgia;
color: #000000;
background-color:#FFF9DD;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgprezA{
width:600px;
height:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.imgtxtprezA{
float: right;
margin-right: 10px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid #ffffff;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
width: 100px;
height: 100px;
}

.h1prezA{
font-family: 'Romanesco', georgia;
font-size: 70px;
color:#94812B;
text-shadow: 0px 1px 4px #94812B;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h2prezA{
font-family: 'Romanesco', georgia;
font-size: 50px;
color:#94812B;
text-shadow: 0px 1px 4px #94812B;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.h3prezA{
font-family: 'Romanesco', georgia;
font-size: 40px;
color:#94812B;
text-shadow: 0px 1px 4px #94812B;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.bprezA{
width: 600px;
height: 850px;
background-color:#FFFEFE; 
color: #94812B;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
}

.qprezA{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color:#5B1616;
margin-top: -25px;
text-align: center;
}

.pprezA{
width: 600px;
height: 370px;
background-color:#FFFEFE; 
color:#94812B;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.spprezA{
width: 600px;
height: 200px;
background-color:#FFFEFE; 
color: #94812B;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.mprezA{
width: 600px;
height: 250px;
background-color:#FFFEFE; 
color: #94812B;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.qdprezA{
width: 600px;
height: 110px;
background-color:#FFFEFE;
color: #94812B;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
overflow: auto;
text-align: center;
position:relative;
z-index:1;
}

.tprezA{
font-size:12px;
width:95%;
padding:10px;
font-family:'Verdana';
}

/************************************* FIN CSS FICHE DE PRÉSENTATION DES ANGES *****************************/

/************************************* DÉBUT CSS FICHE DE PRÉSENTATION DES DÉMONS **************************/

.fondprezD{
width:700px;
height: auto;
font-size: 10px;
font-family: Georgia;
color: #000000;
background-color:#FFE2E2;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgprezD{
width:600px;
height:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.imgtxtprezD{
float: right;
margin-right: 10px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid #ffffff;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
width: 100px;
height: 100px;
}

.h1prezD{
font-family: 'Romanesco', georgia;
font-size: 70px;
color:#850606;
text-shadow: 0px 1px 4px #850606;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h2prezD{
font-family: 'Romanesco', georgia;
font-size: 50px;
color:#850606;
text-shadow: 0px 1px 4px #850606;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.h3prezD{
font-family: 'Romanesco', georgia;
font-size: 40px;
color:#850606;
text-shadow: 0px 1px 4px #850606;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.qprezD{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color:#5B1616;
margin-top: -25px;
text-align: center;
}

.bprezD{
width: 600px;
height: 850px;
background-color:#FFFEFE; 
color: #850606;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
}

.pprezD{
width: 600px;
height: 370px;
background-color:#FFFEFE; 
color:#850606;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.spprezD{
width: 600px;
height: 200px;
background-color:#FFFEFE; 
color: #850606;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.mprezD{
width: 600px;
height: auto;
background-color:#FFFEFE; 
color: #850606;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.qdprezD{
width: 600px;
height: 110px;
background-color:#FFFEFE;
color: #850606;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
overflow: auto;
text-align: center;
position:relative;
z-index:1;
}

.tprezD{
font-size:12px;
width:95%;
padding:10px;
font-family:'Verdana';
}

/************************************* FIN CSS FICHE DE PRÉSENTATION DES DÉMONS **************************/

/************************************* DÉBUT CSS FICHE DE PRÉSENTATION DES ESCLAVES **********************/

.fondprezE{
width:700px;
height: auto;
font-size: 10px;
font-family: Georgia;
color: #896969;
background-color:#CDEED8;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgprezE{
width:600px;
height:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.simgprezE{
width: 450px;
height: auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.vsimgprezE{
width: 280px;
height:auto;
border-radius: 25px;
box-shadow: 0px 3px 8px #896969;
}

.imgtxtprezE{
float: right;
margin-right: 10px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid #ffffff;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
width: 100px;
height: 100px;
}

.h1prezE{
font-family: 'Romanesco', georgia;
font-size: 70px;
color:#00571C;
text-shadow: 0px 1px 4px #000000;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h3prezE{
font-family: 'Romanesco', georgia;
font-size: 40px;
color:#00571C;
text-shadow: 0px 1px 4px #000000;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.qprezE{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color:#5B1616;
margin-top: -25px;
text-align: center;
}

.bprezE{
width: 600px;
height: 850px;
background-color:#FFFEFE; 
color: #00571C;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
}

.pprezE{
width: 600px;
height: 370px;
background-color:#FFFEFE; 
color:#00571C;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.qdprezE{
width: 600px;
height: 110px;
background-color:#FFFEFE;
color: #00571C;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
overflow: auto;
text-align: center;
position:relative;
z-index:1;
}

.tprezE{
font-size:12px;
width:95%;
padding:10px;
font-family:'Verdana';
}

/************************************* FIN CSS FICHE DE PRÉSENTATION DES ESCLAVES **********************/

/************************************* DÉBUT CSS FICHE DE PRÉSENTATION DES RÉSIDENTS *******************/

.fondprezR{
width:700px;
height: auto;
font-size: 10px;
font-family: Georgia;
color: #000000;
background-color:#E1EFFC;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgprezQ{
width:600px;
height:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.imgprezR{
width:250px;
height:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.imgprezS{
width:600px;
height:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.simgprezR{
width: 200px;
height: 320px;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.h1prezR{
font-family: 'Romanesco', georgia;
font-size: 70px;
color:#357AB8;
text-shadow: 0px 1px 4px #000000;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h3prezR{
font-family: 'Romanesco', georgia;
font-size: 40px;
color:#357AB8;
text-shadow: 0px 1px 4px #000000;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.qprezR{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color:#5B1616;
margin-top: -25px;
text-align: center;
}

.bprezR{
width: 600px;
height: 850px;
background-color:#FFFEFE; 
color: #357AB8;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
}

.pprezR{
width: 600px;
height: 370px;
background-color:#FFFEFE; 
color:#357AB8;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.qdprezR{
width: 600px;
height: 110px;
background-color:#FFFEFE;
color: #357BB8;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
overflow: auto;
text-align: center;
position:relative;
z-index:1;
}

.tprezR{
font-size:12px;
width:95%;
padding:10px;
font-family:'Verdana';
}

/************************************* FIN CSS FICHE DE PRÉSENTATION DES RÉSIDENTS *******************/

/************************************* DÉBUT COPYRIGHT FICHES PRÉSENTATION **************************/

.cc{
text-align:center;
font-size:8px;
opacity:0.6;
color: #896969;
}

/************************************* FIN COPYRIGHT FICHES PRÉSENTATION ***************************/

/************************************* DÉBUT FICHE SORCIERS ***************************************/

.fondprezF{
width: 665px;
height: auto;
font-size: 10px;
font-family: Georgia;
color: #000000;
background-color:#F9D7F9;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgprezF{
width:600px;
margin-left:auto;
margin-right:auto;
margin:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.simgprezF{
width: 300px;
margin-left:auto;
margin-right:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.imgprezSorc{
width: 500px;
margin-left:auto;
margin-right:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.imgtxtprezF{
float: right;
margin-right: 10px;
margin-top: -10px;
margin-left: 10px;
border: 1px solid #ffffff;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
width: 100px;
height: 100px;
}

.h1prezF{
font-family: 'Romanesco', georgia;
font-size: 70px;
color:#D473D4;
text-shadow: 0px 1px 4px #D473D4;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h2prezF{
font-family: 'Romanesco', georgia;
font-size: 50px;
color:#D473D4;
text-shadow: 0px 1px 4px #D473D4;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h3prezF{
font-family: 'Romanesco', georgia;
font-size: 40px;
color:#D473D4;
text-shadow: 0px 1px 4px #D473D4;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.qprezF{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color:#5B1616;
margin-top: -25px;
text-align: center;
}

.bprezF{
width: 600px;
height: 850px;
margin:auto;
background-color:#FFFEFE; 
color: #D473D4;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
}

.pprezF{
width: 600px;
height: 370px;
margin:auto;
background-color:#FFFEFE; 
color:#D473D4;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.qdprezF{
width: 600px;
min-height: 110px;
max-height: 300px;
margin:auto;
padding:auto;
background-color:#FFFEFE;
color: #D473D4;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
overflow: auto;
text-align: center;
position:relative;
z-index:1;
}

.tprezF{
font-size:12px;
width:95%;
padding:10px;
font-family:'Verdana';
}

/************************************* FIN FICHE SORCIERS *****************************************/


/************************************* DÉBUT FICHE LYCANS ***************************************/

.fondprezL{
width: 665px;
height: auto;
font-size: 10px;
font-family: Georgia;
color: #000000;
background-color:#C7C5C5;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgprezL{
width:600px;
margin-left:auto;
margin-right:auto;
margin:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.AppartenanceprezL{
font-family: 'Romanesco', georgia;
font-size: 40px;
color: #303030;
text-shadow: 0px 1px 4px #303030;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.RangprezL{
font-family: 'Romanesco', georgia;
font-size: 40px;
color: #303030;
text-shadow: 0px 1px 4px #303030;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.imgprezLy1{
width: 491px;
margin-left:auto;
margin-right:auto;
margin:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;


.imgprezLy2{
width: 500px;
margin-left:auto;
margin-right:auto;
margin:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.simgprezF{
width: 300px;
margin-left:auto;
margin-right:auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.imgtxtprezL{
float: right;
margin-right: 10px;
margin-top: -10px;
margin-left: 10px;
border: 1px solid #ffffff;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
width: 100px;
height: 100px;
}

.h1prezL{
font-family: 'Romanesco', georgia;
font-size: 70px;
color: #303030;
text-shadow: 0px 1px 4px #303030;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.h2prezL{
font-family: 'Romanesco', georgia;
font-size: 50px;
color: #303030;
text-shadow: 0px 1px 4px #303030;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h3prezL{
font-family: 'Romanesco', georgia;
font-size: 40px;
color: #303030;
text-shadow: 0px 1px 4px #303030;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.qprezL{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color:#5B1616;
margin-top: -25px;
text-align: center;
}

.bprezL{
width: 600px;
height: 850px;
margin:auto;
background-color:#FFFEFE; 
color: #303030;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
}

.pprezL{
width: 600px;
height: 370px;
margin:auto;
background-color:#FFFEFE; 
color: #303030;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
padding-top: 20px;
padding-left: 10px;
overflow: auto;
text-align: justify;
position:relative;
z-index:1;
}

.qdprezL{
width: 600px;
min-height: 110px;
max-height: 300px;
margin:auto;
padding:auto;
background-color:#FFFEFE;
color: #303030;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000; 
overflow: auto;
text-align: center;
position:relative;
z-index:1;
}

.tprezL{
font-size:12px;
width:95%;
padding:10px;
font-family:'Verdana';
}

/************************************* FIN FICHE LYCANS *************************************/



/********** DÉBUT DU PROFIL **********/


/* Commande profil par Cheshire Cat */
/* Concerne le pseudo du membre */
.SujetPseudo{
  margin-bottom:-12px; /* fait descendre le pseudo en dessous de la bordure du profil */
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
}
/* Empêche le pseudo d'être écrit en gras */
.SujetPseudo strong{
  font-weight:normal;
}
/* Concerne l'avatar et le rang */
.SujetProfil{
  margin:0 5px;
  width:230px;
  padding:15px;
  box-sizing:border-box;
  border-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
}
/* Concerne le rang */
.SujetRang{
  margin:5px 0 15px;
  text-align:center;
  font-size:15px;
  color:#6e520f;
  letter-spacing:1px;
}
/* Concerne les informations du profil */
.SujetInfosProfil{
  width:135px;
  padding:0px 15px 0px 15px;
  margin-top:-1px;
  margin-left:34px;
  box-sizing-border-box;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
  transition:all 800ms;
  font-size:11px;
}
/* Ajoute un padding supérieur au passage de la souris pour afficher les informations */
.SujetInfosProfil:hover{
  padding:15px 15px 0 15px;
}
/* Concerne la parite interne aux informations */
.SujetInfosProfil > div{
  height:0px;
  overflow:auto;
  transition:all 800ms; /* créé une transition progressive avant et après passage de la souris */
}
/* Affiche les informations au survol */
.SujetInfosProfil:hover > div{
  height:180px;
}
/* Concerne les champs du profil */
.SujetLabel{
  margin-bottom:5px;
  margin-right:5px;
  padding:3px;
  background-color:rgba(233, 236, 234, 0.7);
  border:1px solid #bcb7ba;
  color:#6e520f;
}
/* Supprime le margin-bottom pour le dernier champ du profil */
.SujetLabel:last-of-type{
  margin-bottom:0;
}
/* Concerne la feuille de personnage */
.SujetFeuillePerso{
  color:#6e520f;
}
/* Concerne le lien vers la feuille de personnage */
.SujetFeuillePerso a[href="/u1rpgsheet"]{
  text-align:center;
  letter-spacing:1px;
  display:block;
  margin:10px 0 5px;
  color:#6e520f;
  border-bottom:1px solid #6e520f;
}
/* Supprime les balises BR avant et après le lien vers la feuille de personnage */
.SujetFeuillePerso br:first-of-type,
.SujetFeuillePerso br:nth-of-type(2){
  display:none;
}
/* Concerne l'image en bas des informations du profil */
.ImageInfosClosed{
  margin-bottom:-1px;
  margin-left:-15px;
  opacity:0.6;
}


/********** FIN DU PROFIL **********/



/********** DÉBUT LISTE DES MEMBRES **********/

/* AFFICHAGE LISTE DES MEMBRES */
#LMBER {
width:690px; margin:auto;
}
/* ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */
.tleLMBER {
background:none; /* MODIFIABLE */
}
/* BLOC MEMBRE */
#MBER {
float:left; margin:5px; width:220px; height:160px; font-family:Arial;
}
/* PSEUDONYME */
.nameLMBER{
margin-bottom:5px; width:210px;
text-align:left; text-transform:uppercase;
}
/* BLOC INFORMATIONS */
.stsLMBER {
display:inline-block; vertical-align:top;
width:100px; font-size:11px;
}
/* INFORMATIONS */
.stsLMBER div{
margin-bottom:5px; padding:5px;
background:white; color:black; /* MODIFIABLE */
}
/* IMAGES MP & WWW */
.btnLMBER {
background:none !important;
}
/* AVATAR */
#imgLMBER {
display:inline-block; margin-left:10px;
width:100px; height:140px; overflow:hidden;
}
.imgLMBER {
position:relative;
width:100px; height:140px; overflow:hidden;
}
.imgLMBER div img{
position:absolute; margin-left:-50px; width:100px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
#imgLMBER:hover .imgLMBER div img{
transform:translateX(100px); -webkit-transform:translateX(100px);
}
/* FT */
.imgLMBER span {
position:absolute;
width:80px; height:120px; padding:10px; overflow:auto;
text-align:justify; font-size:10px;
background:rgba(0,0,0,0.6); color:white; /* MODIFIABLE */
transform:translateX(-150px); -webkit-transform:translateX(-150px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
#imgLMBER:hover .imgLMBER span{
transform:translateX(-50px); -webkit-transform:translateX(-50px);
}

/********** FIN LISTE DES MEMBRES **********/



/********** DÉBUT DE LA FICHE DU POSTE VACANT DES ANGES PAR CELSIUS **********/


.fondPVAnge{
background-color: #FFF9DD;
width: 665px;
font-family: Georgia;
color: #000000;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgPV{
max-width: 600px;
height: auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.h1PVAnges{
font-family: 'Romanesco', georgia;
font-size: 70px;
color: #94812B;
text-shadow: 0px 1px 4px #94812B;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h2PVAnge{
font-family: 'Romanesco', georgia;
font-size: 50px;
color: #94812B;
text-shadow: 0px 1px 4px #94812B;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.h3PVAnges{
font-family: 'Romanesco', georgia;
font-size: 40px;
color: #94812B;
text-shadow: 0px 1px 4px #94812B;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.h4PVAnges{
font-family: 'Romanesco', georgia;
font-size: 30px;
color: #94812B;
text-shadow: 0px 1px 4px #94812B;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.qPV{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color:#5B1616;
margin-top: -25px;
text-align: center;
padding:10px;
}

.hpPVAnges{
width: 600px;
background-color: #FFFEFE;
font-family: georgia;
font-size:18px;
color: #94812B;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000;
padding:10px;
overflow: auto;
text-align: justify;
position:relative;
z-index: 1;
}

.bpPV{
width: 600px;
max-height: 380px;
background-color:#FFFEFE;
font-family: georgia;
font-size:20px;
color:#000000;
border-radius:10px;
box-shadow: 0px 3px 8px #000000;
padding:10px;
overflow: auto;
text-align: justify;
position:relative;
z-index: 1;
}

.qdPVAnges{
width: 600px;
min-height: 100px;
background-color:#FFFEFE;
font-family: georgia;
font-size:18px;
color: #94812B;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000;
padding:10px;
overflow: auto;
text-align: justify;
}

.pPV{
font-size:12px;
width:100%;
}



/********** FIN DE LA FICHE DU POSTE VACANT DES ANGES PAR CELSIUS **********/



/********** DÉBUT DE LA FICHE DU POSTE VACANT DES DÉMONS PAR CELSIUS **********/


.fondPVDémon{
background-color: #FFE2E2;
width: 665px;
font-family: Georgia;
color: #000000;
box-shadow: 0px 3px 8px #000000;
border-radius:50px;
margin: auto;
}

.imgPV{
max-width: 600px;
height: auto;
border-radius: 55px;
box-shadow: 0px 3px 8px #000000;
}

.h1PVDemon{
font-family: 'Romanesco', georgia;
font-size: 70px;
color: #850606;
text-shadow: 0px 1px 4px #850606;
margin-top: -15px;
text-align: center;
position:relative;
z-index:2;
}

.h2PVDemon{
font-family: 'Romanesco', georgia;
font-size: 50px;
color: #850606;
text-shadow: 0px 1px 4px #850606;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.h3PVDémons{
font-family: 'Romanesco', georgia;
font-size: 40px;
color: #850606;
text-shadow: 0px 1px 4px #850606;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.h4PVDemon{
font-family: 'Romanesco', georgia;
font-size: 30px;
color: #850606;
text-shadow: 0px 1px 4px #850606;
margin-bottom: -20px;
text-align: center;
position:relative;
z-index:2;
}

.qPV{
font-family: 'Almendra Display', georgia;
font-size: 24px;
color: #5B1616;
margin-top: -25px;
text-align: center;
padding:10px;
}

.hpPVDémons{
width: 600px;
max-height: 500px;
background-color:#FFFEFE;
font-family: georgia;
font-size:18px;
color: #850606;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000;
padding:10px;
overflow: auto;
text-align: justify;
position:relative;
z-index: 1;
}

.bpPVDémons{
width: 600px;
max-height: 380px;
background-color:#FFFEFE;
font-family: georgia;
font-size:20px;
color: #850606;
border-radius:10px;
box-shadow: 0px 3px 8px #000000;
padding:10px;
overflow: auto;
text-align: justify;
position:relative;
z-index: 1;
}

.qdPVDémons{
width: 600px;
min-height: 100px;
background-color:#FFFEFE;
font-family: georgia;
font-size:18px;
color: #850606;
border-radius: 10px;
box-shadow: 0px 3px 8px #000000;
padding:10px;
overflow: auto;
text-align: justify;
}

.pPV{
font-size:12px;
width:100%;
}


/********** FIN DE LA FICHE DU POSTE VACANT DES DÉMONS PAR CELSIUS **********/




/*** Début icône en ligne déplacée ***/

.icon_online {
position:absolute;
margin-left: -20px;
margin-top: 0px;}

/*** Fin icône en ligne déplacée ***/
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Hey :) Déjà tes bannières de fond sous chaque tu peux ajouter le code suivant
Code:
 background-repeat: no-repeat, repeat;
background-color: transparent, transparent;
background-attachment: scroll, scroll;
background-position: top center;
ainsi que le code encore plus haut (le #i_logo) en ajustant la hauteur en fonction de ta bannière :)

Ensuite, pour enlever le blanc et le contour transparent disgracieux, dans la ligne .bodylinewidth, supprime les deux dernières lignes :) Ça devrait régler le soucis ^^


EDIT : Bien évidemment il faut enlever la couleur intérieure du cadre ainsi que tout les contours sinon ça ne marchera pas :P
avatar
Sexe : Masculin
Date d'inscription : 16/08/2016
Messages : 64
Newbie
Voir le profil de l'utilisateur
C'est à n'y rien comprendre...

Après avoir suivi tes conseils, voici ce que j'obtiens...



Pourtant, ça devrait marcher...

Si ça ne vient pas du CSS, ça peut peut-être venir d'un template, non ?
avatar
Sexe : Féminin
Date d'inscription : 01/10/2017
Messages : 194
Membre timide
Voir le profil de l'utilisateur
Tu as pris quel code pour faire tes bannières aléatoires ? Sachant que le plus simple c'est de mettre ce code dans la description du forum -au lieu de passer par l'étape chiante des templates XD-

Code:
<script type=text/javascript> var banListe=['1','2','3',]; document.write('<body class=ban' + banListe[Math.floor(Math.random()*banListe.length)] +'>'); </script>

Sachant que tu dois adapter les chiffres en fonction de ton nombre de bannières :)

EDIT : Ah, je viens de voir qu'il y a déjà un i_logo dans ton code, donc soit tu ajuste le margin-top: 10px; en changeant le 10px par la hauteur de ta bannière, soit tu met à la place height:XXpx; en changeant selon la hauteur encore une fois :)
avatar
Sexe : Masculin
Date d'inscription : 16/08/2016
Messages : 64
Newbie
Voir le profil de l'utilisateur
Je vous remercie beaucoup pour votre aide. En fait, j'ai suivi vos recommandations pas à pas, sans résultat. Afin d'en avoir le cœur net, j'ai pris un second forum test, donc complètement vierge, et je me suis rendu compte que même sur ce nouveau forum, je ne parviens toujours pas à installer mon header. Bien que j'ai le sentiment de faire les choses correctement, ça ne peut donc venir que de moi. À ce niveau, je crois que je dois encore beaucoup travailler le codage avant de comprendre.

Quoi qu'il en soit, merci pour votre aide et les solutions apportées. Je me remets au travail ! ;)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
Coucou :3

Tu peux modifier le CSS de tes bannières comme suite :

Code:
/*HEADER CLASSIQUE-DE FOND ALÉATOIRE*/

.ban1,
.ban2,
.ban3 {
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
}

.ban1 {

background-image: url('lien image1');
}

.ban2 {

background-image: url('lien image2');
}

.ban3 {

background-image: url('lien image3');
}

#i_logo{
 height:400px; /* modifiable selon la hauteur de tes bannières */
}

Et puis tu vas dans Affichage > Templates

Dans la template Overall_Header, colle le script au début juste après
Code:
<head>

Voici donc le script pour rappel :

Code:
<script type="text/javascript"> var banListe=['1','2','3']; document.write('<body class=ban' + banListe[Math.floor(Math.random()*banListe.length)] +'>'); </script>



Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
avatar
Sexe : Masculin
Date d'inscription : 16/08/2016
Messages : 64
Newbie
Voir le profil de l'utilisateur
Bonjour Reine des Ténèbres,

J'ai essayé ta méthode aujourd'hui sur mon forum test, ça marche parfaitement. UN GRAND GRAND MERCI pour ton aide ! Je désespérais d'y arriver un jour !  

Encore merci à tous les intervenants, merci beaucoup pour votre aide ! ;)
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 707

Fiche Membre
Lots gagnés:
Maxi-Codeur en stage
Voir le profil de l'utilisateur
Je t'en prie :)

J'archive donc :)



Merci à Aed pour la zoulie signa ♥️ Et à Bora. pour le beau vava ♥️


Merci à Eskimo pour le joli vava :
Spoiler:
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum