Problème avec le header - Modernbb

[Vino-X]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Internet Explorer, Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis son origine je pense
Lien du forum : https://heritiersdescendres.forumactif.com/

Description du problème

Bonjour,

Je viens vers vous à l'aide en raison d'un petit problème d'ordre esthétique.
En effet, mon forum est équipé d'une bannière
Toutefois, lorsque je scroll, la bannière disparait immédiatement laissant un bloc rouge vide

Est-ce que je me suis mal pris, ou existe-t-il un code pour corriger ça ?

Merci par avance pour votre aide !

[Toryudo]

Bonjour !

Pour la version ModernBB, il veut mieux mettre la bannière au niveau de l'image "Image de fond de l'en-tête".
Ensuite, il n'y a plus qu'à ajouter un peu de CSS pour remplacer celui par défaut, histoire de garder la forme de votre image et de rajouter la couleur de fond :

Code:

.headerbar {
  background-size: inherit;
  background-color: #4a0a0a;
}

Normalement, ça devrait suffire !

[Vino-X]

Bonsoir,

Merci beaucoup.
J'ai testé, mais sans succès.

Je pense que j'ai quelque chose qui bloque sur mon CSS.
Notamment le passage sur le headerbar (que j'ai mis pour repositionner le header). (Code ci-dessous)
Est-ce que ça peut être lié à ça ?

Merci par avance.

Code:

.headerbar {
  background-size: inherit;
  background-color: #4a0a0a;
}



a, a:hover {
    text-decoration: none !important;
}


a.forumtitle:visited {
    color: #4a0a0a;
  display: block;
    font-family: MedievalSharp, 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: -6px;
}


.table-title, .table-title h2 {
 font-size:17px ! important;
 font-family: 'MedievalSharp' ! important;
 font-weight: bold ! important;
 color: #4A0A0A ! important;
      }


a{text-transform:uppercase;}


.postdetails.poster-profile textarea { width: 200px;}

.postprofile-avatar img {
    border-radius: 10px;
    border: 3px solid #FFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
    width: 200px;
    height: 320px;
}


.medievalsharp-regular {
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;
}


a.mainmenu[href="/calendar"] {display: none !important;}
a.mainmenu[href="/faq"] {display: none !important;}
a.mainmenu[href="/images"] {display: none !important;}




/* QEEL */
.onglet { background-color: # ;
border-right: 5px solid #3D4952;
 border-left: 5px solid #3D4952;
border-top: 1px dotted #3D4952;
 border-bottom: 1px dotted #3D4952;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 0px;
 font-family: verdana;
font-weight: bold; text-align: center;
color: #3D4952;}

.message { background-color: #;
 border-right: 5px solid #3D4952;
border-left: 5px solid #3D4952;
border-top: 1px dotted #3D4952;
border-bottom: 1px dotted #3D4952;
 padding-top: 5px;
 padding-bottom: 5px;
padding-left: 30px;
 padding-right: 30px;
font-family: verdana;
text-align: center;
color: #3D4952;}


.headerbar {
    background-image: url(https://2img.net/i.postimg.cc/RZkLT9ZM/fond1.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0;
    overflow: hidden;
    margin: 0;
    height: 470px;
    position: relative;
    background-color: #1D262C
}


.forabg ul.topiclist dt, .forabg ul.topiclist dd.dterm {
  width: 75%;
}
.forabg dd.lastpost {
  width: 15%;
}


.post-head {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: #4A0A0A;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}



.fa_avatar img {
  width: 100px;
  height: 160px;
  position: left;
  top: -3px;
  margin-right: 10px;
  border-radius: 10px;
  margin-bottom: -150px;
}




.postbody table,
.postbody table td,
.postbody table th {
    border: none !important; /* Supprime toutes les bordures des tableaux */
    border-collapse: collapse; /* Assure qu'il n'y ait pas d'espacement entre les cellules */
}

.postbody td {
    padding: 10px; /* Ajoute du padding aux cellules des tableaux */
}

.postbody th {
    padding: 10px; /* Ajoute du padding aux en-têtes des tableaux */
    text-align: left; /* Aligne le texte à gauche dans les en-têtes */
}


/* FICHE DE PREDEFINI */
.PFIICAN {
box-shadow:0 0 3px rgba(0,0,0,0.2); background:#CCC;
}
/* NOM PRENOM(S) */
.npPFIICAN {
box-shadow:inset 0 0 15px rgba(0,0,0,0.3);
}
/* BORDURES IMAGE */
.abtPFIICAN {
border-color:rgba(250,250,250,0.4) !important;
}
/* INFORMATIONS & PHYSIQUE */
.abtPFIICAN div {
background:rgba(250,250,250,0.7); color:black;
}
/* AGE */
.agePFIICAN {
background:rgba(250,250,250,0.3); color:black;
}
/* NATIONALITE */
.fromPFIICAN {
background:rgba(250,250,250,0.3); color:black;
}
/* BLOC CARACTERE */
.caraPFIICAN {
background:rgba(250,250,250,0.6);
}
/* ADJECTIFS */
.caraPFIICAN div {
background:black; color:white;
}
/* HISTOIRE */
.storyPFIICAN {
color:black;
}
/* INTITULE RELATIONS */
.lksPFIICAN span:nth-of-type(1) {
box-shadow:inset 0 0 15px rgba(0,0,0,0.3);
}
/* RELATIONS */
.RPFIICAN div {
color:white;
}


/* FOND LISTE DES MEMBRES */
.bgLMBER {
background:rgba(255,255,255,0.4); /* MODIFIABLE */
}
/* TITRE LISTE DES MEMBRES */
.tleLMBER {
margin-bottom:25px; width:auto; padding:20px 0;
font-family:Arial; text-transform:uppercase; font-size:32px; text-align:center;
background:#191919; color:white; /* MODIFIABLE */
}
 /* BLOC LISTE DES MEMBRES */
#LMBER {
margin:auto; width:660px; text-align:center;
}
/* BLOC MEMBRE */
#MBER {
float:left; margin:15px 10px 10px;
width:200px; height:325px; font-family:Arial;
}
/* BLOC PSEUDONYME */
#nameLMBER {
position:absolute; z-index:3; margin-top:-10px; margin-left:85px;
width:100px; height:auto;
}
/* OMBRES BLOC PSEUDONYME */
.triLMBER {
position:absolute; z-index:2; margin-top:-10px; margin-left:80px;
width:0; height:0; border-style:solid; border-width:0 0 15px 5px; border-color:transparent;
border-bottom-color:black; /* MODIFIABLE */
}
.triRMBER {
position:absolute; margin-top:-10px; margin-left:185px;
width:0; height:0; border-style:solid; border-width:15px 0 0 5px; border-color:transparent;
border-left-color:black; /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER {
width:80px; padding:10px 10px 0;
text-align:center; text-transform:uppercase;
background:#E7E7E7; /* MODIFIABLE */
}
/* IMAGES MP * WWW */
.btnLMBER {
margin-top:5px; text-align:center;
}
/* POINTE PSEUDONYME */
.triMBER {
width:0; height:0; border-style:solid; border-width:20px 50px 0 50px; border-color:transparent;
border-top-color:#E7E7E7; /* MODIFIABLE */
}
/* AVATAR */
.imgLMBER img {
position:absolute; z-index:2; margin-left:-100px;
width:200px; height:320px;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
.imgLMBER {
width:200px; height:320px; overflow:hidden;
}
.imgLMBER div {
position:relative;
width:200px; height:320px; overflow:hidden;
}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE */
.imgLMBER div div {
width:190px; height:145px; padding:5px; overflow:hidden;
font-size:11px; text-align:center;
background:grey; color:grey; /* MODIFIABLE - COULEURS PAR DEFAUT */
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
.imgLMBER:hover div div {
transform:translateY(240px); -webkit-transform:translateY(240px);
}
.imgLMBER:hover img {
transform:translateY(-85px); -webkit-transform:translateY(-85px);
}
/* INFORMATIONS */
.imgLMBER div div span {
display:inline-block; vertical-align:top; height:17px; padding-top:3px;
text-align:center; text-transform:uppercase; font-size:10px;
background:rgba(250,250,250,0.6); /* MODIFIABLE */
}



/* PRESENTATION DU SUJET */
/* BLOC TITRE SUJET */
#tlePOST {
margin:5px auto; padding:10px 0;
text-transform:uppercase; text-align:center; font-family:Arial;
background:black; /* MODIFIABLE */
}
/* TITRE SUJET */
#tlePOST h1 {
display:block; font-size:32px;
color:#F0F0EE; /* MODIFIABLE */
}
/* NAVIGATION */
.navPOST {
display:block; margin:5px auto 0; width:98%;
padding:2px 0; font-size:10px;
background:#F0F0EE; color:black; /* MODIFIABLE */
}
/* LIENS NAVIGATION */
.navPOST a {
color:black; /* MODIFIABLE */
}


/* IMG CATEGORIE*/

.image-container {
    position: relative;
    width: 300px; /* Largeur de l'image */
    height: 150px; /* Hauteur de l'image */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px; /* Ajuster l'espace intérieur de la bulle */
    border-radius: 5px;
    display: none;
    width: 300px; /* Largeur de la bulle, vous pouvez la définir à une valeur spécifique comme '200px' */
    max-width: 100%; /* Limite maximale de la largeur en pourcentage de l'image */
    text-align: justify; /* Centrer le texte à l'intérieur de la bulle */
}

.image-container:hover .hover-text {
    display: block;
}


/* FICHE DE PRESENTATION */
/* BLOC NOM PRENOM & INFORMATIONS */
.topCAN {
  box-shadow:0 0 3px rgba(0,0,0,0.2); background:#DBC388; /* Modification de la couleur de fond */
}
/* NOM PRENOM */
.npCAN {
  color:white;
}
/* INFORMATIONS */
.abtCAN {
  background:rgba(219, 195, 136, 0.2); /* Remplacement de grey par #DBC388 */
  color:black;
}
/* BLOC PHYSIQUE / CARACTERE / HISTOIRE */
.boxCAN {
  box-shadow:0 0 3px rgba(0,0,0,0.2); background:#DBC388; /* Modification de la couleur de fond */
}
/* PHYSIQUE */
.phyzCAN div p {
  background:rgba(219, 195, 136, 0.2); /* Remplacement de grey par #DBC388 */
  color:black;
}
/* CARACTERE */
.caraCAN {
  border-color:white !important;
  background:#DBC388; /* Modification de la couleur de fond */
  color:#191919;
}
/* TITRE HISTOIRE */
.storyCAN span {
  box-shadow:inset 0 0 25px rgba(0,0,0,0.1); color:white;
}
/* CONTENU HISTOIRE */
.storyCAN div {
  background:#DBC388; /* Modification de la couleur de fond */
  color:black;
}
/* PRESENTATION JOUEUR */
.UCAN {
  box-shadow:0 0 3px rgba(0,0,0,0.1); background:#DBC388; /* Modification de la couleur de fond */
  color:black;
}


[Toryudo]

Bonjour !

J'ai l'impression que votre bannière est toujours au niveau de "Logo du forum", et pas dans "Image de fond de l'en-tête" ; c'est aussi ça qu'il faut changer pour que ça fonctionne. C'est dans la gestion des images > Mode Avancé que vous trouverez ça. Il faut absolument mettre la bannière dans "Image de fond de l'en-tête", c'est compliqué à gérer sinon !

[Vino-X]

Bonjour,

J'ai déjà changé, puis remis en place car la bannière disparaissait totalement :
https://i.postimg.cc/sDJRmS0r/banni-re.jpg
Je viens de le refaire à l'instant, la bannière a donc disparu.

Merci par avance.

['Christa]

Hello !

C'est un problème de code visiblement.

Par défaut sur Forumactif l'image de fond de la bannière est insérée dans le code CSS associé à la classe headerbar.

Le souci, c'est que le CSS personnalisé du forum attribue un autre fond à cette bannière, une image rouge donc. C'est pour ça que quoi qu'on fasse niveau panneau d'administration, ça ne changera rien visuellement, à moins de retirer cette ligne de la règle .headerbar { ... }

Code:

background-image: url(https://2img.net/i.postimg.cc/RZkLT9ZM/fond1.png);

Basiquement, toute la règle .headerbar { ... } dans le CSS personnalisé pourrait être remplacée par ceci :

Code:

.headerbar {
    background-size: contain;
    height: 470px;
}

(Le reste étant, en principe, couvert par les réglages par défaut de ModernBB)

[Vino-X]

Hello.

Merci beaucoup, ça fonctionne !
C'est super !

Effectivement, c'était un problème avec ce code.

Par contre, maintenant j'ai la barre de navigation qui se positionne au-dessus de la bannière lorsque le scroll est vers le haut.
Comment on peux résoudre ça ?

['Christa]

Ah, oui, zut j'avais zappé ce détail.

Si on ne recode pas le header, il faudrait revoir un peu le CSS pour laisser l'espace à la barre de navigation. Ça implique de retirer le dimensionnement automatique, mais ça a l'air de fonctionner d'après mes tests :

Code:

.headerbar {
  height: 450px;
  background-position-y: 50px;
}

[Vino-X]

Ca fonctionne nickel !
J'ajusterais la taille au besoin.

Un grand merci pour la réactivité et la solution.