Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[MODERNBB] Image de fond en footer sur toute la largeur du forum

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

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Lun 31 Mai 2021 - 20:53

  • Version du forum :
    MODERNBB
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour Phil,

Je reviens vers toi pour une nouvelle difficulté.
Pour la première fois, je fais un design ModernBB et chose étrange, je ne parviens pas du tout à mettre une image de fond au footer qui fasse toute la largeur du forum.

le forum  en question : https://whistledown.forumactif.com/

L'image : https://i.imgur.com/3jvWjpO.png

Je me trouve bloquée parce que le footer est divisé en 2 avec un début et une fin.
Ce que je souhaiterais obtenir c'est d'avoir l'image de fond qui fasse toute la largeur du forum (qui varie selon la résolution d'écran) avec dessus les liens de forumactif et le panneau d'administration.
Les statistiques seront quant à elles reportées dans le QEEL donc je ne vais pas les conserver à cet endroit.

J'ai simplement retiré des éléments du template, je n'en ai pas ajoutés mais je peux te mettre le code si tu le souhaites.

En revanche, voici le css correspondant :

Code:
/*****************************************************************
            FOOTER
******************************************************************/
.copyright {
  background: url('https://i.imgur.com/3jvWjpO.png');
  background-size: 100% auto;
  width: 100% !important;
}
.statistics {
  display: none;
}
#page-footer {
  display: none !important;
}

En te remerciant beaucoup pour tes réponses.

Pizi

Te serait-il possible de me venir en aide s'il te plaît ?


Dernière édition par Pizi le Mer 2 Juin 2021 - 18:22, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 1 Juin 2021 - 5:59

Hello Pizi,
alors les deux parties comme tu le mentionnes sont dans une div ayant l"id page-footer.
Il faut donc remplacer la class par l'id:

Code:

#page-footer {
  background: url('https://i.imgur.com/3jvWjpO.png');
  background-size: 100% auto;
  width: 100% !important;
}
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 2 Juin 2021 - 14:14

Bonjour Phil,

Merci pour cet élément, j'ai mis le code et ça me donne ce résultat.
Toutefois ça ne se positionne pas sur toute la longueur de la page, seulement sur une partie.
Je ne parviens pas à "étirer" cet affichage...

Tu saurais à quoi cela peut-il être dû ?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 2 Juin 2021 - 15:21

Hello Pizi ,

j'ai mis le code et ça me donne ce résultat.

hum je pensais que tu m'aurais joint une capture!!

Dans ta css, tu as ceci:

Code:
#page-footer {
  display: none !important;
}

As tu pensé à supprimer ce style ?

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 2 Juin 2021 - 15:45

Phil,

Pardon je n'y ai même pas pensé, toutes mes excuses.

Voici une capture d'écran de ce que je vois :



Voici le genre d'affichage que j'aimerai obtenir :



Oui j'ai retiré cette partie du code, voici désormais la zone correspondante :

Code:
/*****************************************************************
            FOOTER
******************************************************************/
.statistics {
  display: none;
}
#page-footer {
  background: url('https://i.imgur.com/3jvWjpO.png');
  background-size: 100% auto;
  width: 100% !important;
}
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 2 Juin 2021 - 15:56

C'est pas grave Pizi ok .
Alors, c'est sur le forum de ton profil ?

Tu peux tester ce style en replacement stp:

Code:
  #page-footer {
      background: url('https://i.imgur.com/3jvWjpO.png');

      width: 100% !important;
  background-position: center;
    }
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 2 Juin 2021 - 16:12

Phil,

Non c'est sur le forum dont je t'ai mis le lien en premier message.
Revoici le lien (pour que tu n'aies pas à remonter la page :) ) : https://whistledown.forumactif.com/

Cela me donne cet affichage avec le code que tu viens de me donner :

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 2 Juin 2021 - 16:26

Oh tu es toute mimi, c'est pas un scrool qui va me fatiguer lOL .
Ah vi, je comprend, la largeur de ton fofo est très étroite:


Ce style devrait correspondre:
Code:

  #page-footer {
      background: url('https://i.imgur.com/3jvWjpO.png');

      width: 100% !important;
  background-position: center;
position: absolute;
left: 0;
right: 0;
    }

Pizi aime ce message

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 2 Juin 2021 - 16:48

Oh c'est super ! Cela fonctionne. Merci beaucoup ! :)
Tu me confirmes que si je veux augmenter la hauteur, il suffit que j'y ajoute un height ?

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 2 Juin 2021 - 18:08

Oui c'est bien cela Pizi impeccable

Pizi aime ce message

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 2 Juin 2021 - 18:22

Merci encore Phil :)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 2 Juin 2021 - 18:40


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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