Header de fond

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Header de fond

Message par Argimpasa Lun 18 Mar 2024 - 15:59

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 18/03/2024
Lien du forum : https://mydearjane.forumactif.com/

Description du problème

Bonjour,

J'ai un souci avec le header. J'aimerai qu'il soit en header de fond. J'ai essayé la méthode classique en passant par les images mais rien n'y fait. Le header se trouve dans un template et j'aimerai qu'il soit en header de fond OU centré avec la possibilité de faire comme le footer, un background-size: 100%;.
Merci, pour le coup je suis perdue encore une fois, je m'en suis sortie pour le footer mais là je sèche.

Mes codes sont :

CSS
Code:
.conteneur_container_IE {
  background-image: url('https://images2.imgbox.com/e6/3e/gz2lUQgQ_o.png');
  background-repeat: no-repeat;
  background-position: bottom;
   background-size: 100%;
}

#wrap {
    box-sizing: content-box;
}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
}
/* CATÉGORIES */

/*liens voir nouveaux messages, supp cookies (en haut et en bas des catés*/

.liens_pa {
 background: var(--background2);
    padding: 5px 0 7px;
    border-radius: 7px;
    margin-top: 9px;
    text-align: center;
}

.liens_pa a {
    background: var(--background1);
    border-radius: 7px;
    padding: 1px 10px;
    margin: 0 10px;
    text-transform: uppercase;
    font-size: 10px;
}

/*Titre de la catégorie*/

.cat_titre { background: var(--background3);
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-weight: 300;
    letter-spacing: 3px;
    margin-top: 14px;
    padding: 9px 20px;
    text-transform: uppercase;}

.cat_titre h2 {color: #fff;
    font-size: 14px;
    font-weight: 300;
    margin: 0;}

/*Rassemblement de balises répétitives*/

#cate {margin: 0 7px 0 0;
    border-radius: 7px;}

.liensforums, .imgnew, .txt_derniermess {
  border: var(--border1); }

/*Corps des catégories*/

.cat_container {  background: var(--background2);
    border-radius: 7px;
    height: 114px;/*à modifier seulement si vous la voulez plus haute*/
    padding: 10px;
    margin: 0 0 4px;
    display: flex;
font-size:14px;}

/*Partie liens forums*/

.liensforums { font-size: 0px;
    overflow: auto;
    width: 18%;
    padding: 5px;
    text-align: left;}

#liensforums2 a {
display: block;
    text-transform: lowercase;
    font-size: 14px;
}

#liensforums2 a::before {
    color: #DD9F8C;
    content: " ● ";
}

/*Partie image new, no new etc.*/

.imgnew {    padding: 3px;
    width: 5%;}

.imgnew  img {     border-radius: 7px;
height: 100%;
    object-fit: cover;
    width: 100%;}

/*Partie titre du forum et description*/

.titredescriforum {  
    width: 65%;}

/*titre forum*/
.titreforum {    background: var(--background1);
    border-radius: 7px;
    padding-left: 13px;
    text-transform: lowercase;
    text-align: left;}

.titreforum a {     font-size: 15px;
    font-weight: 700;
    color: #000;}

/*description*/
.descricat {    height: 67px; /*à modifier si vous changer la height de .cat_container*/
    margin-top: 4px;
    text-align: justify;
    overflow: auto;
    line-height: 20px;
    border-top: var(--border1);}

/*Partie nb de sujets et messages*/

.nbsujnotes {     display: flex;
    flex-wrap: wrap;
    max-width: 60px;}

.nbsujnotes2 {  background: var(--background1);
    border-radius: 4px;
    color: var(--acc1);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;}

.nbsujnotes2:nth-child(2) {margin-top:7px;
  color:var(--acc2);}

/*Partie dernier message posté*/

.derniermess {
        max-width: 164px;}

/* titre avec écrit last song*/
.ti_derniermess {       background-image: var(--degrade);
    border-radius: 4px;
    color: var(--acc3);
    font-size: 11px;
    margin: 0 0 0 21px;
    text-align: center;
    min-width: 140px;}

/*dernier avatar*/
.avatarcat {    background: var(--background2);
    border: var(--border1);
    border-radius: 50px;
    margin-top: -18px;
    padding: 2px;
    position: absolute;
}

.avatarcat img {        border-radius: 50px;
    width: 39px;
    height: 39px;
    object-fit: cover;}

/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
    border-radius: 7px;
    margin: 5px 0 0;
    padding: 6px 0 7px 32px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
    text-transform: lowercase;
    height: 73px; /*à modifier si vous changer la height de .cat_container*/
    display: flex;
    line-height: 13px;
    flex-wrap: wrap;
    align-items: center;
}

.txt_derniermess a {    font-size: 14px;}

.txt_derniermess br {
content: "";
    margin: 2em 0 0 4em;
    display: block;
    font-size: 24%;
}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/*QEEL*/

/*balise qui contient tout le QEEL*/
.qeel_container {      background: var(--background2);
    margin: 10px 0 0;
    border-radius: 10px;
    padding: 10px 10px 7px;
    display: flex;
    flex-wrap: wrap;}

/*BALISE QUI CONTIENT LES MEMBRES CO 24 HEURES / NOUVEAU MEMBRE / TEXTE CRÉDITS / PARTIE GROUPES*/
.qeel1 {       margin-right: 7px;
    width: 70%;}

/*balise qui contient membres co 24 heures / nouveau membre et txt credits*/
.qeel4 {    display: flex;
margin:0 0 7px 0;}

/*balise connectes dernieres 24 heures*/
.qeel_dc {         width: 57%;
    margin: 0 7px 0 0;
    height: 98px;
    border-top: var(--border1);
    margin-right: 7px;
    padding: 5px;
    font-size: 14px;
    text-align: justify;
    overflow: auto;}

/*balise nouveau inscrit et txt credits*/
.qeel_nmcred {width: 43%;}

/*balise nouveau inscrit*/
.qeel_nm {    border: var(--border1);
    border-radius: 7px 7px 7px 28px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;}

/*balise avatar nouveau inscrit*/
.qeel_avatar {       width: 50px;
    z-index: 100;
    height: 50px;
    padding: 4px;
    border-radius: 10px 100% 100%;
    background: var(--background2);
    border: var(--border1);
box-sizing: border-box;}

/*avatar nouveau inscrit*/
.qeel_avatar img {   width: 40px;
    object-fit: cover;
    height: 40px;
    border-radius: 10px 100% 100%;}

/*balise pseudo nouveau inscrit*/
.qeel_nouvmembre { text-align: center;
    text-transform: lowercase;
    font-size: 16px;
    line-height: 31px;
    min-height: 30px;
    margin: 0 0 0 20px;}

.qeel_nouvmembre strong {font-weight:500;}

/*balise titre bienvenue sur forum*/
.qeel_bienvenue {      width: 100%;
    text-align: right;
    background: var(--background1);
    text-transform: lowercase;
    font-weight: 600;
    font-size: 12px;
    padding: 0 10px 0 0;
    margin: -17px 0 0 24px;
    border-radius: 4px;
    color: var(--acc1);}

/*balise txt libre/credits*/
.qeel_cred {   text-align: justify;
    height: 45px;
    overflow: auto;
    margin-top: 4px;
    font-size: 12px;}

/*balise contenant groupes*/
.qeel_groups {      display: flex;
    width: 100%;
    border-top: var(--border1);
    padding: 7px 0 0;}

/*balise des groupes*/
.group {    background: var(--background1);
    padding: 3px 10px 2px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;margin:0 7px 0 0;
    font-size: 12px;
    font-weight: 600;}

.group:last-child {margin:0;}

/*BALISE QUI CONTIENT NB CONNECTES ET INVITES, MEMBRES CONNECTES ET NB INSCRITS/MESSAGES*/
.qeel2 {    width: 29%;}

/*balise nb utilisateurs en ligne*/
.qeel_stats {    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    border-bottom: var(--border1);
    padding: 0 0 4px;
  letter-spacing: 1px;}

.qeel_stats strong {
  font-weight:500;}

/*balise nb inscrits/messages et membres connectes*/
.qeel5 {    display: flex;
  margin: 7px 0 0;}

/*balise nb inscrits/messages*/
.qeel_sujmess {      margin: 0 7px 0 0;
    max-width: 85px;}

/*nb inscrits/messages*/
.qeel_sujmess2 {  background: var(--background1);
    text-align: center;
    font-size: 11px;
    padding: 0 10px;
    border-radius: 7px;
    font-weight: 700;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;    color: var(--acc2);}

.qeel_sujmess2:nth-child(1) {margin: 0 0 5px;
    color: var(--acc1);}

/*balise membres connectes*/
.qeel_mc {    border: var(--border1);
    border-radius: 7px;
    padding: 5px;
    text-align: justify;
    text-transform: lowercase;
    width: 100%;}

.qeel_mc br {display:none!important;}

/*balise titre membres co*/
.qeel_mc2 {    text-align: center;
    background: var(--acc2);
    text-transform: uppercase;
    font-size: 11px;
    color: var(--acc3);
  border-radius: 4px;}

/*balise contenant les pseudos des membres co*/
.qeel_mc3 {font-size: 0px;
    height: 76px;
    margin: 4px 0 0;
    border-top: var(--border1);
    overflow: auto;}

.qeel_mc3 a {font-size:14px;}

/*balise credits, surtout ne SUPPRIMEZ PAS*/
.qeel_iaf {    width: 100%;
    border-top: 1px solid #ededed;
    margin: 7px 0 0;
    padding: 7px 0 0;
    text-align: center;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d1d1d1;}
/* PA */

:root {
    --accc1: #000;
    --accc2:#DD9F8C;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --background: #f1f1f1;
    --degrag: #ccc9c7;
}

/**************** CORPS DE LA PA AVEC GRID *****************/

.pa_1 {          background-color: var(--white);
    border-radius: 10px;
    display: grid;
text-align:center;
    grid-gap: 7px;
    grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 100px;
    padding: 10px;}


/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/

/* CONTAINER ACTUALITÉ */
.item_13 {  border: 1px solid var(--border);
    border-radius: 4px;
    grid-area: 1 / 1 / span 3 /span 1;
    padding: 4px 4px 0;
    text-align: justify;}

.texte_4 {       height: 69px;
    line-height: 15px;
    overflow: auto;}

/* PARTIE STAFF ET ONGLETS */

/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}

/*container des onglets*/
.onglets_pa { display: flex;
    flex-direction: column;
    height: 75px;
    position: relative;
    text-align: justify;
    width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}

/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}

/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff {      border-radius: 50px;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    object-fit: cover;}

/*décide de la largeur de la séparation entre les images*/
.lab {     cursor: pointer;
    margin-left: 8px;
}
.lab:hover {
    opacity:0.8;
}

/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {  
      border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    margin-top: 5px;
    opacity: 0;
    padding: 4px 0;
    position: absolute;
    scrollbar-width: none;
    text-align: center;
    visibility: hidden;
    width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
    height: 36px;
}

.contenu.visible {
  opacity: 1;
  visibility: visible;
}

/*balise déco du prénom, nom*/
h {     color: var(--accc1);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;}

/*balise de la partie admin / profil*/
.sous_titre {    font-size: 9px;
  letter-spacing: 1px;}

/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}

/*container déco de la partie optimisée pour*/
.titre_3 {
         background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 3px 0;
}


/**************** PARTIE CENTRALE (contexte, liens navigation, règles *****************/


/*CONTEXTE ET HOVER*/

/* corps du contexte (container en gros qui tient tout*/
.gif_pa {     border: 1px solid var(--border);
    border-radius: 7px;
    display: inline-block;
    grid-area: 1 / 2 / span 5 /span 2;
    height: 192px;
    line-height: 110%;
    overflow: auto;
    padding: 3px;
    width: 216px; } /* à modifier si vous modifiez la largeur de la grid */

/*container de l'image du contexte*/
.img_pa {
    width: 100%;
margin: 0 auto;
position: relative;
      overflow: hidden;
  border-radius:7px;
}

/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
    height: 192px;
    object-fit: cover;
    width: 216px; /* même largeur que gif_pa*/
}

/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt {  background-color: var(--white);
    height: 192px;
    left: 108px;
    line-height: 16px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    scrollbar-width: none;
    text-align: justify;
    top: 96px;
    transform: translate(-50%,-50%);
    width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */

/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background);
    bottom: 0;
    height: 0;
    left: 0;
    overflow: hidden auto;
    position: absolute;
    scrollbar-width:none;
    right: 0;
    transition: .5s ease;
    width: 100%;
}
.img_pa:hover .overflow {
  height: 100%}

/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar  {width:0px;height:0px;}


/*PARTIE NAVIGATION / LIENS*/

.item_1 {    grid-area: 1 / 4 / span 5 /span 1;}

/*liens navigation*/
.link_pa {        background-color: var(--background);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
  text-transform:uppercase;
    margin-bottom: 6px;
    line-height: 10px;
    padding: 1px 0;}

/*container avec les règles*/
.item_5 {       border: 1px solid var(--border);
    border-radius: 4px;
    height: 77px;
    line-height: 15px;
    overflow: auto;
    padding: 5px 7px 3px;
    text-align: justify;
    margin: 8px 0;}



/**************** PARTIE DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) *****************/

/*TIMELINE*/

/*container timeline*/
.item_8 {      border: 1px solid var(--border);
    border-radius: 5px;
    grid-area: 1 / 5 / span 2 /span 2;
    height: 57px;
    padding: 2px 5px;
    text-align: justify;}

/*container texte timeline*/
.texte_1 {   height: 43px;
    line-height: 13px;
    overflow: auto;
    text-align: justify;}

/*partie premiere version signée xx*/
.titre_4 {    background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;}


/*PARTIE PÉRIODE DE JEU*/

/*container période de jeu*/
.item_9 {      border-bottom: 1px solid var(--border);
    color: var(--accc1);
    font-size: 11px;
    font-weight: 600;
    grid-area: 3 / 5 / span 1 /span 2;
    letter-spacing: 1px;
    margin-top: -2px;
    text-transform: uppercase;}

/*déco de texte pour rendre rose*/
j {color:var(--accc2);
  font-style: italic;
}


/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/

/*container du tout*/
.item_10 {   grid-area: 4 / 5 / span 2 /span 2;}

/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}

/*container des membres du mois (colonne gauche)*/
.float_pa1 {    float: left;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
    height: 56px;}

/*style des images des membres du mois*/
.mdm1, .mdm2 {
          border: 1px solid var(--border);
    border-radius: 10px;
    height: 30px;
    object-fit: cover;
    padding: 3px;
    width: 21px;
}
.mdm2 {margin:0 5px;}

/*container de la partie nous soutenir*/
.float_pa2 {float: left;
    height: 56px;
    margin-left: 4px;
    line-height: 12px;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}

/*icons discord et tumblr*/
.discord_pa {    width: 21px;}

/*PARTIE PARTENARIATS*/

/*container de la partie partenariats*/
.item_11 {          border-top: 1px solid var(--border);
    margin-top: 5px;
    padding-top: 3px;}

/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
  border-width: 1px;
  border-radius: 5px;
  border: 1px solid var(--border);
  width: 175px;
  letter-spacing: 1px;
  font-size: 8px;
  text-transform: uppercase;}


/*LES TITRES AVEC DÉGRADES ROSE ET NOIR ET LES DÉCOS TEXTE*/

.titre_1, .titre_2 {
   border-radius: 4px;
    color: var(--white);
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.titre_1 {margin-bottom: 5px;background-image: linear-gradient(-45deg,var(--degrag),var(--accc2))!important;} /*dégradé rose*/
.titre_2 {background-image: linear-gradient(-45deg,var(--degrag),var(--accc1))!important;} /*dégradé noir*/

w,y {font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
  text-transform:uppercase;
}

w {  color: var(--accc2);}
y {  color: var(--accc1);}

/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 {    grid-area: 6 / 1 / span 1 /span 6;
    font-size: 7px;
    border-top: 1px solid var(--border);
    letter-spacing: 1px;
    padding-top: 5px;
  color: #d1d1d1;}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

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

/***********PARTIE AU-DESSUS ET EN-DESSOUS LISTE DES SUJETS***********/

/*Boutons nouv/rep et navigation*/
.pro_nav {      display: flex;
    font-size: 0;
    margin: 15px 0;
align-items:center;}

/*liens dans navigation*/
.pro_nav a {    font-size: 12px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
    font-weight: 600;
    padding: 1px 0 0;}

/*styling bouton nouv/rep*/
.pro_nouvrep a {    background: var(--background3);
    color: var(--acc3)!important;
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;    transition: .5s ease;}

.pro_nouvrep {       margin: 0 10px 0 0;
}
.pro_nouvrep a:nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.pro_nouvrep a:nth-child(1):hover {background: var(--background3);    transition: .5s ease;
    color: var(--acc3)!important;}

/*liens navigation à côté de bouton rep/nouv*/
.liens_suj {       background: var(--background2);
    padding: 2px 10px 3px;
    border-radius: 7px;
    display: flex;
    justify-content: flex-start;
    font-size: 0;
    align-items: center;}

.liens_suj a {
    margin: 0 15px 0 0;
    text-transform: uppercase;
    font-size: 12px;
  font-weight: 600;}

/*la pagination*/
.pagination {    float: none;
    display: flex;
    justify-content: flex-end;
  font-size: 0px;
margin:0;}

.pagination2 {    
    text-transform: uppercase;
}

.pagination a, .pagination span {font-size:12px;}

.pagination a {    padding: 0 10px 0;}

.pagination a strong {font-weight:500;}

.pagination span strong {      background: var(--acc2);
    padding: 0 5px;
    border: none;
    color: var(--acc3);
    font-size: 10px;
    border-radius: 3px;
        line-height: 16px;
    width: auto;}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active
{    color: var(--acc1);
    background: var(--background1);
    padding: 0 5px;
    border: none;
    font-size: 10px;
  border-radius: 3px;
    line-height: 16px;
    width: auto;}

.pagination span a.pag-img {vertical-align: baseline;}

.pagination span a.pag-img img {    height: 9px;
    margin-top: 0;}

/*titre de liste des sujets*/
.cat_titre { background: var(--background3);
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-weight: 300;
    letter-spacing: 3px;
    margin-top: 14px;
    padding: 9px 20px;
    text-transform: uppercase;}

/*********** LES SUJETS ***********/

/*Div qui contient toutes les balises*/
.af_suj1 {    display: flex;
    background: var(--background2);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: 74px;
    margin: 0 0 7px;}

/*partie image new/no new*/
.af_suj2 {   width: 57px;
    margin: 0 7px 0 0;}

.af_suj2 img {       width: 57px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;}

/*partie réponses / vues*/
.af_suj3 {       width: 9%;
    margin: 0 7px 0 0}

.suj_stat {background: var(--background1);
    border-radius: 7px;
    display: flex;
    height: 25px;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--acc2);}

.suj_stat:nth-child(1) {
margin:0 0 4px;
color:var(--acc1);}

/*partie titre du sujet, auteur, pagination & description*/
.af_suj4 {width: 58%;}

/*titre du sujet*/
.suj_titre {       border-bottom: var(--border1);
    padding: 0 0 4px;
    margin: 0 0 4px;}

a.topictitle {   color: var(--acc1);
    font-weight: 600;
    font-size: 15px;
    text-transform: lowercase;
    line-height: 13px;}

a.topictitle:hover {
text-decoration:none;}

ba {    color: var(--acc2);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 13px;}

.suj_titre img {margin:0 5px 0 0;}

/*partie auteur et pagination*/
.af_suj5 {    display: flex;}

.suj_auteur {        width: 50%;
  font-size: 11px;
    text-transform: uppercase;}

.suj_pagination {    text-transform: uppercase;
    font-size: 0px;
    width: 50%;
    text-align: right;
  }

.suj_pagination a {    font-size: 11px;
    background: var(--background1);
    padding: 0 9px;
    border-radius: 4px;
    margin: 0 3px 0 0;}

.suj_pagination br, .suj_pagination img {display:none!important;}

.suj_pagination .gensmall {font-size:0px!important;}

/*description du sujet*/

.suj_description {    color: var(--acc1);
    font-style: italic;
  font-size: 13px;}

/*partie avatar dernier posteur*/
.af_suj6 {       border: var(--border1);
    padding: 3px;
    width: 50px;
    height: 50px;
    border-radius: 60px;
    box-sizing: border-box;
    margin: auto 7px;}

.af_suj6 img {width: 41px;
    height: 42px;
    border-radius: 51px;
  object-fit: cover;}

/*partie dernier message et dernier posteur pseudo*/
.af_suj7 {width: 17%;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    text-transform: lowercase;
    margin: auto 0;}

.af_suj7 span {
  padding:0 10px 0 0;
}

.af_suj7 img {margin:0 0 0 3px;}

/*********** AFFICHAGE SUJETS SI PAS DE SUJETS ***********/
li.row {
    border: none;
    text-align: center;
    list-style: none;
    padding: 9px;
    text-transform: uppercase;
    color: var(--acc1);
    letter-spacing: 1px;
  border-radius: 0 0 10px 10px;
  font-size:14px;
  background:var(--background2);
}

li.row:hover {
    background-color: var(--background2);
}
:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************** AFFICHAGE DUN PROFIL *****************************/

/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/

.spro_1 {
    background: var(--background2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
  margin:20px 0;
}

/***** AFFICHAGE À GAUCHE (rang et avatar) *****/

/*Div à gauche qui contient avatar et rang*/
.spro_2 {
    background: var(--background1);
    padding: 10px;
    border-radius: 10px;
    width: 232px;
    box-sizing: border-box;
}

/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
    background: var(--background2);
    flex-wrap: wrap;
    margin: 0 0 7px;
    border-radius: 10px 30px 30px 10px;
}

/*Div qui contient le pseudo*/
.spro_username {      padding: 4px 0 0 12px;
    border-bottom: var(--border1);
    text-align: left;
    font-size: 15px;
    height: 31px;
    box-sizing: border-box;
    width: 100%;}

/*Div contenant le rang et limage*/
.spro_rang2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 28px;
}

/*Styling de limage*/
.spro_rang2 img {        width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border: var(--border1);
    margin: -31px 0 0 7px;
}

/*Div contenant lavatar*/
.spro_avatar {
        background: var(--background2);
    padding: 6px;
    border-radius: 10px;
    box-sizing: border-box;
}

/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
    max-width: 200px;}


/***** AFFICHAGE À DROITE (derniere visite, images contact, infos, feuille perso) *****/

/*Div contenant le tout*/
.spro_3 {
    margin: 0 0 0 7px;
    width: 100%;
}

/*Div contenant les infos et la feuille de perso*/
.spro_5 {display: flex;}

/*Div contenant lastvisit, infos, etc.*/
.spro_6 {
  width: 70%;
    margin: 0 7px 0 0;
}

/*Div de la derniere connexion*/
.spro_lastvisit {      margin: 0 0 7px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    color: var(--acc2);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
}

/*Div contenant contact et les infos*/
.spro_profile {    border: var(--border1);
    padding: 10px;
    border-radius: 10px;
}

/*Div contenant le en ligne et les images contact*/
.spro_contact {      border-bottom: var(--border1);
    padding: 0 0 7px;
    margin: 0 0 7px;
    display: flex;
    text-transform: uppercase;
    justify-content: space-evenly;
    font-weight: 600;
    color: var(--acc1);
    font-size: 14px;
    align-items: center;
}

/*Styling images contact*/
.spro_contact img {
width: 23px;
    background: var(--background1);
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
}

/*Div contenant toutes les infos*/
.spro_info {          height: 292px;
    overflow: auto;}

.spro_info img {
max-width:200px;
  border-radius:10px;
}

/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}

dl.details dt {
    text-align: left;
    width: 12em;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--acc2);
}

dl.details dd {
    margin: 0 0 .5em 12em;
  font-size:14px;
  line-height:22px;
}

/*Div contenant la feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div contenant les liens en bas*/
.spro_links {    display: flex;
    margin: 7px 0 0;
}

/*Styling des liens*/
.spro_links a {
        width: 100%;
    line-height: 29px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 12px;
}

.spro_links a:nth-child(2) {
    margin:0 7px;
}

/*Div contenant feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div titre feuille de personnage*/
.spro_frpgtitle {
    background-image: var(--degrade);
    color: var(--acc3);
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
}

/*Div avec scroll pour feuille personnage*/
.spro_frpg {
    margin: 7px 0 0;
    height: 335px;
    overflow: auto;
    border-top: var(--border1);
    box-sizing: border-box;
    padding: 10px 0 0;
}

/*Styling des champs*/
frpg {font-weight: 700;
    letter-spacing: 1px;
    color: var(--acc1);
    text-transform: uppercase;
  font-size: 13px;}

/*Styling où le texte se trouve*/
.spro_frpg textarea {
    width: 100%!important;
    height: 93px!important;
    border: var(--border1);
    border-radius: 10px;
    margin: 10px 0 12px;
    overflow: auto;
    box-sizing: border-box;
}

.inputbox:hover {
    border: var(--border1);
}
.memberlist_t {
      width: 850px !important;
    height: 50px;
    background: #cbcbcb;
    border-radius: 10px;
    margin: auto !important;
    text-align: center;
    color: white !important;
    font: 11px roboto !important;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    margin-bottom: 10px;
}


.panelarte {
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 850px;
  margin: auto;
  background: none;
}

.panelarte h2 {
  border: none;
  color: #cbcbcb;
}

.memberlist_arte {
  width: 850px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
  padding: 0;
  
}

.one_member {
  width: 275px;
  height: 120px;
  background: #95b8d9;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}

.one_member a, .one_member a:hover {
  text-decoration: none;
  color: white !important;
}

.one_member:before {
  content: " ";
  width: 120px;
  height: 180px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(251,251,251,0.2);
  z-index: 0;
  -webkit-clip-path: circle(50% at 29% 22%);
          clip-path: circle(50% at 29% 22%);
}

.avatar_member_list {
  width: 70px;
  height: 70px;
  z-index: 99;
}

.avatar_member_list img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid white;
  -o-object-fit: cover;
     object-fit: cover;
}


.pseudo_memberlist {
  margin: 0;
  width: 155px;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}

.pseudo_memberlist > h2 {
  color: white;
  font: 12px roboto;
  text-transform: uppercase;
  font-weight: 500;
  border-left: 2px solid white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 5px;
  width: 100%;
}

.pseudo_memberlist div {
      color: white;
    font: 9px roboto;
    font-weight: 400;
    margin-top: -40px;
    font-style: oblique;
    margin-bottom: -5px;
    text-transform: lowercase;
  
  
}

.pseudo_memberlist > h2 strong {
  color: white;
  font-weight: 500;
}

.stats_link_members {
  width: 155px;
  margin-left: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -5px;
}

.stats_link_members span {
  display: block;
  font: 9px source code pro;
  color: white;
  text-transform: uppercase;
  margin: 0 0px;}

.one_member a[href^="/privmsg"]:before{
  content:'MP';
}

.stats_link_members a[href^="/privmsg"] img{
    display: none;
}

.stats_link_members span:after {
  content: "|";
    margin: 0 3px;
}

.stats_link_members span:last-child:after {
  content: " ";
}
/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */

#wrap-topic {
    width: 800px;
    margin: auto;
    display: flex;
    flex-flow: wrap;
}

#header-topic {
    background-color: #f1f0f4;
    width: 100%;
    color: #c07c59;
    font-size: 11px;
    font-style: italic;
    line-height: 27px;
    height: 80px;
    display: flex;
    align-content: center;
    flex-flow: wrap;
    justify-content: center;
}

#header-topic .sousligne {
    font: 11px 'Roboto', sans-serif;
    font-style: italic;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
}

#header-topic a:not(:first-of-type) {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: -0.5px;
}

#header-topic a:first-of-type {
    color: #262929;
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
    text-transform: uppercase;
    font-style: normal;
    line-height: 30px;
    width: 100%;
    text-align: center;
}

.new-reply-topic,
.topic-pagination {
    display: flex;
    align-content: center;
    flex-flow: wrap;
}

.topic-pagination,
#pagination_memberlist {
    margin-left: auto;
    text-transform: uppercase;
    font-family: initial;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -1px;
    color: transparent;
}

.topic-pagination>div,
#pagination_memberlist>div {
    margin: 20px 0 5px;
}

.topic-pagination>div a,
#pagination_memberlist>div a {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -0.5px;
}

.new-reply-topic a {
    padding: 28px 17px 28px 25px;
}

.topic-pagination span strong,
#pagination_memberlist strong {
    padding: 0 0 0 5px;
}

.topic-pagination span,
#pagination_memberlist span {
    color: #262929;
}

.topic-pagination strong,
#pagination_memberlist strong {
    color: #c07c59;
    padding: 0 2px;
}

.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
    display: none;
}

.header-message {
    width: 100%;
    height: 86px;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
    align-content: center;
    position: relative;
    padding: 0 50px 0 0;
    color: #f6f5f8;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
    background-color: #262929;
}

.header-message div {
    position: absolute;
    left: 35px;
    bottom: 22px;
}

.header-message span,
.header-message a[href*="/u"] {
    width: 100%;
    text-align: right;
}

.header-message span {
    font: 20px 'DM Serif Display', serif;
    font-style: normal;
    margin-right: -20px;
}

.header-message span,
.header-message>a {
    width: 100%;
}

.header-message strong {
    color: #f6f5f8;
    font-weight: 100;
}

.header-message>div img {
    padding: 0 2px;
}

.wrap-topic-content {
    background-color: #F1F0F4;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    padding: 19px 0;
}

.topic-content {
    width: 538px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding-top: 6px;
}

.topic-content,
.topic-content>a {
    color: #C3C3C3;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

.topic-content>div a {
    font-weight: bold !important;
}

.topic-content>div {
    color: #262929;
    font-style: normal;
    text-align: justify;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid #C3C3C3;
    padding: 18px 0;
    margin-top: 8px;
    width: 100%;
}

.topic-content>div img {
    max-width: 100%;
}

.topic-avatar {
    border: 2px solid #F6F5F8;
    overflow: hidden;
    width: 196px;
    height: 396px;
    position: relative;
}

.topic-avatar>div img {
    max-width: 100%;
}

.topic-avatar>a img {
    width: 196px;
}

.topic-avatar>div {
    position: absolute;
    top: 396px;
    background-color: #ffffffe0;
    width: 200px;
    height: 400px;
    transition: all 1s;
    padding: 5px 20px 10px;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.topic-avatar:hover>div {
    top: 0;
}

.feuille-de-perso a[href*="/u"],
.title-profil {
    font: 30px 'Hamilton', cursive;
    color: #c07c59;
    text-align: right;
    display: block;
    height: 32px;
    text-transform: lowercase;
  white-space: nowrap;
}

.topic-avatar .label {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 15px;
    color: #262929
}

.topic-avatar>div .label span,
.feuille-de-perso {
    color: #262929 !important;
}

.feuille-de-perso textarea {
    min-width: 100%;
    max-width: 100%;
    display: block;
    height: 50px;
    background-color: #F6F5F8;
    padding: 6px;
    overflow: auto;
    margin-bottom: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 12px;
}

/*.feuille-de-perso br { display: none; }*/

.topic-avatar .contact_link_p {
    position: sticky;
    bottom: 5px;
    margin: 10px -10px 0 0;
    font-size: 0;
    text-align: right;
}

.topic-avatar .contact_link_p a:first-child {
    padding-right: 7px;
}

.separation {
    width: 555px;
    margin: auto;
    height: 1px;
    background-color: #C3C3C3;
    margin: 15px 0 2px;
}

.signature-topic {
    width: 100%;
    max-height: 280px;
    padding: 5px;
    overflow: auto;
}

.signature-topic img {
    max-width: 100%;
}

#wrap-topic a[name="quickreply"]+.h3 {
    display: none;
}

#wrap-topic form#quick_reply {
    width: 100%;
}

#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
    background-color: #F1F0F4 !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif;
}

#wrap-topic #quick_reply #textarea_content {
    box-shadow: none;
}

#wrap-topic #quick_reply #textarea_content+div input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 15px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0px 10px 10px 10px;
    height: 35px;
    padding: 0 15px;
}

#topic-form label {
    font-size: 0;
}

#topic-form select {
    background-color: #F1F0F4;
    border: none;
    font-size: 10px;
    padding: 3px 5px;
}

#topic-form fieldset {
    margin: 55px 0 28px;
}

#topic-form input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 12px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0 5px;
    height: 21px;
    padding: 0 5px;
}

/* Affichage du bloc des permissions */
.permissions {
    width: 100%;
    background-color: #F1F0F4;
    padding: 20px 25px;
    font: 11px 'Roboto', sans-serif;
}

.permissions a {
    color: #c07c59;
}

.permissions .h3 {
    border: none;
    font: 13px 'DM Serif Display', serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
    margin: 0 0 20px;
    background: none;
    font: 12px 'Roboto', sans-serif;
    padding: 0;
    border: none;
}

blockquote {
    padding: 10px 30px;
}

dl.codebox code,
.spoiler dd,
.hidecode {
    background-color: #F6F5F8 !important;
    padding: 10px 30px !important;
}

.hidecode dt,
dl.codebox::before,
blockquote::before {
    display: none !important;
}

dl.codebox dt,
cite {
    border: none;
    color: #C38567;
    font: 11px 'Roboto', sans-serif;
    text-transform: uppercase;
    margin: 5px 0 8px 11px;
    font-weight: 500;
}

.spoiler dt {
    margin-bottom: 3px !important;
}

dl.codebox code {
    font-size: 12px;
}
  /* --------- FIN AFFICHAGE MESSAGES --------- */
/********************************************************* NAVIGATION ET HEADER *********************************************************/
/* NAVIGATION */
.navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #f4f4f4;
        border-bottom: 2px solid #759dac;
        z-index: 99;
        padding: 1rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
   font-family: Arial, sans-serif;
        color: #8f8a9e;
        text-transform: uppercase;
}

.navigation img {
     display: none;
}

.barre_nav {
        display: flex;
        margin: auto;
}

.barre_nav li {
        list-style-type: none;
        padding: 0 .5rem;
}

.barre_nav .mainmenu {
        font-weight: bold;
        font-size: 10px;
        color: #8f8a9e;
}

/* BOUTONS HAUT BAS */
.up_down {
        color: #8f8a9e;
        font-size: 10px;
        font-weight: 700;
        padding: 0 2rem 0 0;
        position: absolute;
        right: 0;
}

.up_down a:first-child {
     color: #429679;
}

.up_down a:last-child {
     color: #b88749;
}

/* CACHER LA DESCRIPTION */
#site-desc {
     display: none;
}

/* HEADER */
/* HEADER */
a.header_ban {
        margin: 0 0 0;
        display: flex;
  position: center;
  size: 100%;
}

Argimpasa

Argimpasa
**

Messages : 82
Inscrit(e) le : 22/05/2018

http://argimpasatest.forumactif.com
Argimpasa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond

Message par Argimpasa Lun 18 Mar 2024 - 15:59

Template :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

 <!-- BEGIN switch_fb_login -->
 <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
 <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch( tickerDirParam )
 {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function() {

 $('#fa_ticker_content').css('display','block');

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0)
 {
 $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
 if ($(this).width() > width_item)
 {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 if (slid_vert)
 {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each( function () {
 if ($(this).height() > height_max)
 {
 height_max = $(this).height();
 }
 } );

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
 $('ul#fa_ticker_content li').height(height_max);
 }


 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 }
 else
 {
 $('ul#fa_ticker_content li:not(:first)').css('display','none');
 $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function(){
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if(pm != null) { pm.focus(); }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if(report != null) { report.focus(); }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(document).ready(function() {
 Ticker.start({
 height : {switch_ticker.HEIGHT},
 spacing : {switch_ticker.SPACING},
 speed : {switch_ticker.SPEED},
 direction : '{switch_ticker.DIRECTION}',
 pause : {switch_ticker.STOP_TIME}
 });
 });
 <!-- END switch_ticker -->
 });

 <!-- BEGIN switch_login_popup -->
            var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

            $(document).ready( function() {
                $(window).resize(function() {
                    var windowWidth = document.documentElement.clientWidth;
                    var popupWidth = $("#login_popup").width();
                    var mypopup = $("#login_popup");

                    $("#login_popup").css({
                        "left": windowWidth/2 - popupWidth/2
                    });
                });
            });
 <!-- END switch_login_popup -->
 //]]>
 </script>

 {GREETING_POPUP}

 <style type="text/css">
 #page-footer, div.navbar, div.navbar ul.linklist {
 display: block !important;
 }

 ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
 display: inline !important;
 }

 <!-- BEGIN switch_ticker_new -->
 .jcarousel-skin-tango .jcarousel-item {
 text-align:center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }
 <!-- END switch_ticker_new -->
 </style>

 {HOSTING_JS}

 <!-- BEGIN google_analytics_code -->
 <script type="text/javascript">
 //<![CDATA[
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', '{G_ANALYTICS_ID}', 'auto');
 ga('send', 'pageview');
 ga('set', 'anonymizeIp', true);

 <!-- BEGIN google_analytics_code_bis -->
 ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
 ga('bis.send', 'pageview');
 ga('bis.set', 'anonymizeIp', true);
 <!-- END google_analytics_code_bis -->
 //]]>
 </script>
 <!-- END google_analytics_code -->

 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
 <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>

<body id="modernbb">
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>

 </div>
 </div>
 <!-- END hitskin_preview -->

 <!-- BEGIN switch_login_popup -->
 <div id="login_popup" style="z-index: 10000 !important;">
 <div class="h3">{SITENAME}</div>
            <div id="login_popup_message">
                {LOGIN_POPUP_MSG}
            </div>
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button1" value="{L_LOGIN}" />
 <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 </div>
 <!-- END switch_login_popup -->

 <a id="top" name="top" accesskey="t"></a>
 {JAVASCRIPT}

 <div id="page-header">
          
           <div class="navigation">
                   <div class="barre_nav">
                           {GENERATED_NAV_BAR}
                   </div>
                  
                   <div class="up_down">(
                           <a href="#top">
                                   Haut
                         </a>
                          
                           |
                          
                           <a href="#bottom">
                                   Bas
                           </a>
                           )
                   </div>
           </div>
 <div>
 <div class="wrap">
 <div id="site-desc">
 <!-- BEGIN switch_h1 -->
 <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p>{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>
 </div>
 </div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_blockD" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->
 </div>

 <div class="conteneur_minwidth_IE">
 <div class="conteneur_layout_IE">
 <div class="conteneur_container_IE">
 <div id="wrap">
 <div id="page-body">
                  
                  
                   <a class="header_ban" href="{U_INDEX}">
                           <img src="https://www.zupimages.net/up/24/12/i5a6.png" alt="" />
                   </a>

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>

 <div id="container">
 <div id="content-main">
 <div id="main">
 <div id="main-content">
Argimpasa

Argimpasa
**

Messages : 82
Inscrit(e) le : 22/05/2018

http://argimpasatest.forumactif.com
Argimpasa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond

Message par MlleAlys Mer 20 Mar 2024 - 15:45

Bonjour,

En modernBB, l'élément qui correspond au corps du forum, avec la largeur indiquée dans le panneau d'administration, est l'élément "wrap", qui commence ligne 310 de votre template.

L'élément qui contient l'ensemble de l'en-tête du forum est l'élément "page-header", qui commence ligne 257 de votre template, et contient déjà la barre de navigation et le titre et la description du forum.
L'élément page-header ne fait pas partie du wrap, et donc prend par défaut toute la largeur de la page.

Dans votre template, vous avez mis le header à la main directement à la ligne 314, donc à l'intérieur du wrap.
Si vous souhaitez que votre header puisse prendre toute la largeur de la page, il faut le sortir du wrap, et logiquement le remettre à l'intérieur du page-header, par exemple juste après la barre de navigation.
Vous pouvez le déplacer avec un simple couper/coller.

On peut aussi garder le contrôle de l'image du header via le panneau d'administration en utilisant la variable qui correspond au "logo du forum", pour pouvoir la changer facilement via le panneau plutôt que de devoir modifier le template. (la variable "image du fond de l'entête" étant comme dit une image de fond, il est plus difficile d'automatiser les dimensions et notamment la hauteur nécessaire en fonction des résolutions d'écran des utilisateurs. C'est pourquoi la variable du logo me semble plus simple ici).

Ce qui donne le template, avec le header déplacé à la ligne 274 sous la forum d'une image avec la variable du logo (et template en partie réindenté pour l'occasion) :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

 <!-- BEGIN switch_fb_login -->
 <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
 <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch( tickerDirParam )
 {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function() {

 $('#fa_ticker_content').css('display','block');

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0)
 {
 $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
 if ($(this).width() > width_item)
 {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 if (slid_vert)
 {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each( function () {
 if ($(this).height() > height_max)
 {
 height_max = $(this).height();
 }
 } );

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
 $('ul#fa_ticker_content li').height(height_max);
 }


 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 }
 else
 {
 $('ul#fa_ticker_content li:not(:first)').css('display','none');
 $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function(){
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if(pm != null) { pm.focus(); }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if(report != null) { report.focus(); }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(document).ready(function() {
 Ticker.start({
 height : {switch_ticker.HEIGHT},
 spacing : {switch_ticker.SPACING},
 speed : {switch_ticker.SPEED},
 direction : '{switch_ticker.DIRECTION}',
 pause : {switch_ticker.STOP_TIME}
 });
 });
 <!-- END switch_ticker -->
 });

 <!-- BEGIN switch_login_popup -->
            var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

            $(document).ready( function() {
                $(window).resize(function() {
                    var windowWidth = document.documentElement.clientWidth;
                    var popupWidth = $("#login_popup").width();
                    var mypopup = $("#login_popup");

                    $("#login_popup").css({
                        "left": windowWidth/2 - popupWidth/2
                    });
                });
            });
 <!-- END switch_login_popup -->
 //]]>
 </script>

 {GREETING_POPUP}

 <style type="text/css">
 #page-footer, div.navbar, div.navbar ul.linklist {
 display: block !important;
 }

 ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
 display: inline !important;
 }

 <!-- BEGIN switch_ticker_new -->
 .jcarousel-skin-tango .jcarousel-item {
 text-align:center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }
 <!-- END switch_ticker_new -->
 </style>

 {HOSTING_JS}

 <!-- BEGIN google_analytics_code -->
 <script type="text/javascript">
 //<![CDATA[
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', '{G_ANALYTICS_ID}', 'auto');
 ga('send', 'pageview');
 ga('set', 'anonymizeIp', true);

 <!-- BEGIN google_analytics_code_bis -->
 ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
 ga('bis.send', 'pageview');
 ga('bis.set', 'anonymizeIp', true);
 <!-- END google_analytics_code_bis -->
 //]]>
 </script>
 <!-- END google_analytics_code -->

 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
 <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>
  
  
  
  <body id="modernbb">
    
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
      <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
        <p>
          {hitskin_preview.L_THEME_SITE_PREVIEW}
          <br />
          <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
        </p>
      </div>
    </div>
    <!-- END hitskin_preview -->
    
    
    <!-- BEGIN switch_login_popup -->
    <div id="login_popup" style="z-index: 10000 !important;">
      <div class="h3">{SITENAME}</div>
      <div id="login_popup_message">
        {LOGIN_POPUP_MSG}
      </div>
      <div id="login_popup_buttons">
        <form action="{S_LOGIN_ACTION}" method="get">
          <input type="submit" class="button1" value="{L_LOGIN}" />
          <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
          <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
        </form>
      </div>
    </div>
    <!-- END switch_login_popup -->
    
    <a id="top" name="top" accesskey="t"></a>
    
    {JAVASCRIPT}
    
    
    
    <div id="page-header">
      
      <div class="navigation">
        <div class="barre_nav">
          {GENERATED_NAV_BAR}
        </div>
        <div class="up_down">
          (<a href="#top">Haut</a> | <a href="#bottom">Bas</a>)
        </div>
      </div>
      
      <a href="{U_INDEX}" id="header-img">
        <img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/>
      </a>
      
      <div id="site-desc">
        <!-- BEGIN switch_h1 -->
        <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
        <!-- END switch_h1 -->
        <!-- BEGIN switch_desc -->
        <p>{switch_desc.SITE_DESCRIPTION}</p>
        <!-- END switch_desc -->
      </div>
      
      <!-- BEGIN switch_ticker_new -->
      <div id="fa_ticker_blockD" style="margin-top:4px;">
        <div class="module">
          <div class="inner">
            <div id="fa_ticker_container">
              <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                <!-- BEGIN ticker_row -->
                <li>{switch_ticker.ticker_row.ELEMENT}</li>
                <!-- END ticker_row -->
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- END switch_ticker_new -->
      
    </div>
    <!-- fin page-header-->
    
    
    <div class="conteneur_minwidth_IE">
      <div class="conteneur_layout_IE">
        <div class="conteneur_container_IE">
          <div id="wrap">
            <div id="page-body">
              
              <!-- BEGIN switch_ticker -->
              <div id="fa_ticker_block" style="margin-top:4px;">
                <div class="module">
                  <div class="inner">
                    <div id="fa_ticker_container">
                      <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                        <div class="fa_ticker_content">
                          <!-- BEGIN ticker_row -->
                          <div>{switch_ticker.ticker_row.ELEMENT}</div>
                          <!-- END ticker_row -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- END switch_ticker -->
              
              
              <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                <div id="outer-wrapper">
                  <div id="wrapper">
                    
                    <div id="{ID_LEFT}">
                      <!-- BEGIN giefmod_index1 -->
                      {giefmod_index1.MODVAR}
                      <!-- BEGIN saut -->
                      <div style="height:{SPACE_ROW}px"></div>
                      <!-- END saut -->
                      <!-- END giefmod_index1 -->
                    </div>
                    
                    
                    <div id="container">
                      <div id="content-main">
                        <div id="main">
                          <div id="main-content">


Dans la gestion des images, mettez l'image voulue dans "logo du forum".
Vous pourrez alors régler la taille du logo par exemple avec le code css :
Code:
#header-img img {
    width: 100%;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5800
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond

Message par Chacha Dim 24 Mar 2024 - 10:17

Header de fond UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69440
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond

Message par Chacha Lun 25 Mar 2024 - 9:14

Header de fond 8djze9qBonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est archivé afin de ne pas perdre les réponses apportées.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69440
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum