Modifier la couleur du bas de page

par Invité Ven 8 Mai 2015 - 15:57

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.teso-event.com/

Description du problème

Salutation !

Tout est dans le titre, je souhaite tester mon site avec un bas de page noir pour mettre plus en évidence les textes et les logos.

J'ai essayer via le Css, mais ça ne m'englobe que la zone copyright et ce que j'ai mis dans mon overall_footer_begin.

Hors, je voudrais qu'il prenne tout la largeur du forum et jusqu'en bas.

Des idées? Merci Smile

Ps : A titre d'exemple : http://forums.elderscrollsonline.com/fr/ défilez vers le bas vous verrez.

par MlleAlys Ven 8 Mai 2015 - 16:48

Bonjour,

Il faut pour cela sortir le footer du cadre du forum dans les templates. Ou plutôt, refermer le cadre du forum avant le footer dans les templates ^^ :

- dans affichage > templates > général, éditez le template overall_footer_begin (début du haut de page)

- repérez le passage suivant :

Code:: </div>  <div id="page-footer"> <div align="center"> <div class="gen">  </div> </div> </div>

- on ferme le bodyline-width (qui est un tableau) juste avant le footer, ce qui donne :

Code:: </div>  </td> </tr> </table> <div id="page-footer"> <div align="center"> <div class="gen">  </div> </div> </div>

- et, pour ne pas que les balises apparaissent en rouge, dans le passage au début :

Code::  <div> <div> <table> <tbody> <tr> <td>

- On ajoute les balises de début de tableau, ce qui donne :

Code::  <table><tr><td> <div> <div> <table> <tbody> <tr> <td>

- Enregistrez et publiez

- éditez le template overall_footer_end (fin du bas de page)

- repérez le passage suivant :

Code::  </div> {PROTECT_FOOTER} </td> </tr> </table>

- retirez les balises qu'on a ajouté dans le template précédent, ce qui donne :

Code::  </div> {PROTECT_FOOTER}

- et, pour qu'il n'y ai pas d'erreurs de balises détectées, dans le passage au début du 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"> <body> <table> <tr> <td> <div> <div> <div>

- on retire les balises de tableau correspondantes ce qui donne :

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"> <body> <div> <div> <div>

- enregistrez et publiez

=> votre footer sera à l'extérieur du cadre de votre forum, et vous pourrez appliquer le fond noir et le coller aux bords avec le code css :

Code:: #page-footer { background: black; } body { margin: 0; }

par Invité Ven 8 Mai 2015 - 17:07

J'ai du retirer toutes mes modifications personnelles ( reset du template ) pour pouvoir applique tout ça et cela fonctionne, j'ai plus qu'as essayer de les remettre en place et je verrais bien ce que ça donne.

Merci pour l'aide, mais je ne vais pas clôturer le topic au cas ou j'ai un soucis pour remettre en place mes codes.

par MlleAlys Ven 8 Mai 2015 - 17:41

pas de souci, c'est vrai que je n'ai pas pensé à demander si ces templates étaient modifiés, désolée Confused

(le sujet sera archivé dans une semaine si vous ne donnez pas de nouvelles par contre)

par Invité Ven 8 Mai 2015 - 19:11

Quelques modification seraient à faire.

Regardez sur cette page par exemple : http://www.teso-event.com/calendar Le fond s’arrête après les texte de copyright, j'aurais voulu qu'il prenne tout le bas.

Et à propos du copyright, le texte est noir, comment lui donner la couleur, la police et la taille identique au reste?

Merci.

par MlleAlys Ven 8 Mai 2015 - 19:22

Je vois bien le fond jusqu'en bas sur cette page avec tous mes navigateurs (chrome, firefox et explorer). Avez-vous à tout hasard essayé de vider votre cache ?

Pour ce qui est de la couleur de la dernière ligne, complétez votre code :

Code:: #gfooter, #page-footer, #pun-foot, .textebas { color: #C9C9C9; font-size: 13px; }

en :

Code:: #gfooter, #page-footer, #pun-foot, .textebas, #page-footer a, #page-footer .gensmall { color: #C9C9C9; font-size: 13px; }

par Invité Ven 8 Mai 2015 - 19:55

Nickel pour les copyright.

Pour le reste, vider le cache ne fonctionne pas, je vous met un screen pour vous montrer le soucis :

Modifier la couleur du bas de page Image1

Modifier la couleur du bas de page Image1

En faite, dès que le contenue est petit en hauteur, nous avons ceci, il faudrait ajouter une ligne de code qui précise qu'il faut étendre le background vers le bas tout le temps.

par MlleAlys Ven 8 Mai 2015 - 20:10

Ah oui, je n'avais pas pensé à ça !

Essayez le code suivant :

Code:: html { background: rgb(23, 23, 23); }

par Invité Ven 8 Mai 2015 - 20:30

Parfait. Encore une petite demande, comme c'est assez moche, j'ai rajouter une transparence pour voir le background derrière, il fonctionne pour

Code:: #page-footer { filter:alpha(opacity=0.97); -moz-opacity:0.97; -khtml-opacity:0.97; opacity:0.97; }

Mais pas pour html. Help Smile

par MlleAlys Ven 8 Mai 2015 - 20:54

Alors, d'abord je ense que c'est plus simple d'utiliser une couleur en rgba plutôt qu'un filtre d'opacité, ce qui permettra en plus de n'appliquer la transparence qu'au fond et pas au texte en même temps :

- modifiez

Code:: #page-footer { -khtml-opacity: .97; -moz-opacity: .97; background: #171717; filter: alpha(opacity=0.97); opacity: .97; }

en :

Code:: #page-footer { background: rgba(23, 23, 23, 0.97); }

pour le fond de html, on ne pourra pas mettre l'image sous la couleur, il faut soit que vous ajoutiez le calque couleur par dessus l'image via un logiciel avant d'appliquer l'image modifiée en fond de html, soit il faut passer par un autre moyen pour le codage du pied de page :

ajoutez les codes suivants à votre feuille de style :

Code:: html, body { margin: 0 !important; padding: 0!important; height: 100%; } body { display: table; width: 100%; } #page-footer { display: table-row; height: 150px; /*hauteur du pied de page*/ }

ça devrait fixer le pied de page en bas de la page quelque soit la hauteur de celle-ci

par Invité Ven 8 Mai 2015 - 21:15

Cela fonctionne, mais je perd le padding de .bas { padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px; } qui évitait que le texte ne soit collé au bord.

Et également celui du haut de page, du coup des éléments disparaissent en haut sous la barre de navigation.

Edit, j'ai rattraper le haut de page en ajoutent un saut de ligne dans overall_header donc il ne reste plus que le padding du bas a récupérer.

par MlleAlys Ven 8 Mai 2015 - 21:33

vous pouvez appliquer le padding à la div à l'intérieur du footer, par exemple :

Code:: #page-footer div.gen { padding: 10px; }

Par contre, je ne sais pas comment vous avez introduit vos bouton haut et bas, mais ça pose problème sur la page de connexion : http://www.teso-event.com/login
Il faut qu'il n'y ai rien du tout sous le footer pour que cette technique fonctionne...
Si vous avez utilisé le code javascript du tutoriel, modifiez dans le code "append" en "prepend" :

$(function(){
$("body").prepend('<div class="bouhautbas"><a href="#top"><img src="https://i.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Aller en haut" /></a> <a href="#bottom"><img src="https://i.servimg.com/u/f42/09/02/12/09/sort_d10.png" alt="Aller en bas" /></a></div>');
});

par Invité Ven 8 Mai 2015 - 21:54

Tout est parfait désormais, je pense que ce topic peux être clôturé, encore merci beaucoup Alys. Cool

Modifier la couleur du bas de page