Personnalisation bandeau thème ModernBB

[efredo]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : aujourd'hui
Lien du forum : http://climat-presquile.forumactif.com/

Description du problème

Bonjour à tous, je voudrais de l'aide pour mettre en place ce bandeau.
Qui peut m'aider ?

[*Splash*]

Hi,

Je poste pour voir l'image
Le lien image ne fonctionne pas

[efredo]

le lien de l'image en png est : https://i.servimg.com/u/f44/19/97/03/88/15448114.png

comment la mettre en place à partir de la console ? avec le code css ?

[*Splash*]

Hi,

Met ce code à la CSS :

Code:

/* image header */
.headerbar {
    background-color: #1D262C;
    background-image: url("https://i.servimg.com/u/f44/19/97/03/88/15448114.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

[efredo]

J'ai essayé de copier ton code dans le css (images & couleurs de l'onglet Affichage) à la place de la première ligne ci-dessous et cela ne marche pas :

Code:

.headerbar, #headerbar-top.is-sticky,
.forabg, .forumbg,
.module .h3,
.button, .button1, .button2, input[type="submit"], .button-round {
  background-color: #36a2a2
}
.content h2, .panel h2 {
    border-color: #36a2a2;
    color: #36a2a2;
}

.statistics {
  background-color: #58a5a6;
}

#page-footer {
  background-color: #268485;
}

#page-footer .copyright-body {
  border-color: #3c6e6f;
}


 ?

[*Splash*]

Hum,
Remplace ta CSS par ceci :

Code:

/* image header */
.headerbar {
    background-color: #1D262C;
    background-image: url(https://i.servimg.com/u/f44/19/97/03/88/15448114.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.headerbar, #headerbar-top.is-sticky,
.forabg, .forumbg,
.module .h3,
.button, .button1, .button2, input[type="submit"], .button-round {
  background-color: #36a2a2
}
.content h2, .panel h2 {
    border-color: #36a2a2;
    color: #36a2a2;
}
 
.statistics {
  background-color: #58a5a6;
}
 
#page-footer {
  background-color: #268485;
}
 
#page-footer .copyright-body {
  border-color: #3c6e6f;
}

[efredo]

on voit que la lune, quel est le pb la taille du bandeau ou son ancrage ?

[*Splash*]

Ton image est celle-ci :


Une fois inserée au header, avec le code donné, elle apparait ainsi :


C'est bien la même non ?

[efredo]

J'ai ça à l'écran,



Pourquoi ? une idée ?

[*Splash*]

Tu peux mettre l'intégralité de ta CSS ici ?

[efredo]

Code:

    /* image header */
.headerbar {
background-image: url(https://i.servimg.com/u/f44/19/97/03/88/15448114.png);
background-attachment: fixed;
background-size: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
padding: 0;
overflow: hidden;
margin: 0;
height: 350px;
position: relative;
background-color: #1D262C;
}
.headerbar, #headerbar-top.is-sticky,
.forabg, .forumbg,
.module .h3,
.button, .button1, .button2, input[type="submit"], .button-round {
background-color: #36a2a2
}
.content h2, .panel h2 {
border-color: #36a2a2;
color: #36a2a2;
}
   
.statistics {
background-color: #58a5a6;
}
   
#page-footer {
background-color: #268485;
}
   
#page-footer .copyright-body {
border-color: #3c6e6f;
}

[Invité]

Code:

    /* image header */
.headerbar {
background-image: url(https://i.servimg.com/u/f44/19/97/03/88/15448114.png);
background-attachment: fixed;
background-size: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
padding: 0;
overflow: hidden;
margin: 0;
height: 350px;
position: relative;
background-color: #1D262C;
}
.headerbar, #headerbar-top.is-sticky,
.forabg, .forumbg,
.module .h3,
.button, .button1, .button2, input[type="submit"], .button-round {
background-color: #36a2a2
}
.content h2, .panel h2 {
border-color: #36a2a2;
color: #36a2a2;
}
    
.statistics {
background-color: #58a5a6;
}
    
#page-footer {
background-color: #268485;
}
    
#page-footer .copyright-body {
border-color: #3c6e6f;
}

Bonsoir, vous avez oublié de rajouter :
(ce qui permet d'agrandir le bloc entête pour permettre à l'image de se positionner dans sa totalité.)

height: 350px;

[efredo]

height: 350px ou ça ? dans le code ?

[Invité]

height: 350px ou ça ? dans le code ?

Oui, regardez le code donné par Splash. Celui-ci est exact.

[*Splash*]

Dans ta CSS, remplace ceci :

Code:

.headerbar {
background-image: url(https://i.servimg.com/u/f44/19/97/03/88/15448114.png);
background-attachment: fixed;
background-size: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
padding: 0;
overflow: hidden;
margin: 0;
height: 350px;
position: relative;
background-color: #1D262C;
}

Par ceci :

Code:

.headerbar {
    background-color: #1D262C;
    background-image: url(https://i.servimg.com/u/f44/19/97/03/88/15448114.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

[efredo]

J'ai modifié le code comme vous avez indiqué et l'image s'affiche, j'ai aussi modifié la hauteur du bandeau pour voir, il fait maintenant 1900 X487
Tout semble décalé!

De plus je voudrais enlever le descriptif du forum et son titre si ils sont déjà en dur dans l'image, c'est possible ?

[*Splash*]

Pour masquer le titre du forum il faut aller dans :
PA / Affichage / Page d'accueil / En-tête & navigation

Afficher le titre du forum : Cocher Non

Pour masquer la description du forum :
Suivre cette astuce : https://lesforums.caforum.fr/t108-masquer-la-description-du-forum?highlight=description

[efredo]

merci beaucoup pour votre aide

[Chacha]

Bonjour, Le topic est replacé à la demande de *Splash*. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[*Splash*]

Merci Chacha,

Pour avoir cette image parfaitement centrée au header, remplacer le code CSS par celui-ci :

Code:

.headerbar {
    background-color: #1D262C;
    background-image: url(https://i.servimg.com/u/f44/19/97/03/88/15448114.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 280px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

Bonne journée