Modifier la couleur du bas de page
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Modifier la couleur du bas de page
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
Ps : A titre d'exemple : http://forums.elderscrollsonline.com/fr/ défilez vers le bas vous verrez.
Dernière édition par Mysticals le Ven 8 Mai 2015 - 21:55, édité 1 fois
Invité- Invité
Re: Modifier la couleur du bas de page
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 :
- on ferme le bodyline-width (qui est un tableau) juste avant le footer, ce qui donne :
- et, pour ne pas que les balises apparaissent en rouge, dans le passage au début :
- On ajoute les balises de début de tableau, ce qui donne :
- Enregistrez et publiez
- éditez le template overall_footer_end (fin du bas de page)
- repérez le passage suivant :
- retirez les balises qu'on a ajouté dans le template précédent, ce qui donne :
- et, pour qu'il n'y ai pas d'erreurs de balises détectées, dans le passage au début du template :
- on retire les balises de tableau correspondantes ce qui donne :
- 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 :
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>
<!-- close div id="page-body" -->
<div id="page-footer">
<div align="center">
<div class="gen">
<!-- BEGIN html_validation -->
</div>
</div>
</div>
- on ferme le bodyline-width (qui est un tableau) juste avant le footer, ce qui donne :
- Code:
</div>
<!-- close div id="page-body" -->
</td>
</tr>
</table>
<div id="page-footer">
<div align="center">
<div class="gen">
<!-- BEGIN html_validation -->
</div>
</div>
</div>
- et, pour ne pas que les balises apparaissent en rouge, dans le passage au début :
- Code:
<!-- BEGIN html_validation -->
<div>
<div>
<table>
<tbody>
<tr>
<td>
<!-- END html_validation -->
- On ajoute les balises de début de tableau, ce qui donne :
- Code:
<!-- BEGIN html_validation -->
<table><tr><td>
<div>
<div>
<table>
<tbody>
<tr>
<td>
<!-- END html_validation -->
- Enregistrez et publiez
- éditez le template overall_footer_end (fin du bas de page)
- repérez le passage suivant :
- Code:
<!-- END switch_footer_links -->
</div>
{PROTECT_FOOTER}
</td>
</tr>
</table>
<!-- BEGIN switch_facebook_login -->
- retirez les balises qu'on a ajouté dans le template précédent, ce qui donne :
- Code:
<!-- END switch_footer_links -->
</div>
{PROTECT_FOOTER}
<!-- BEGIN switch_facebook_login -->
- et, pour qu'il n'y ai pas d'erreurs de balises détectées, dans le passage au début du template :
- Code:
<!-- BEGIN html_validation -->
<!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>
<!-- END html_validation -->
- on retire les balises de tableau correspondantes ce qui donne :
- Code:
<!-- BEGIN html_validation -->
<!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>
<!-- END html_validation -->
- 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;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Modifier la couleur du bas de page
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.
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.
Invité- Invité
Re: Modifier la couleur du bas de page
pas de souci, c'est vrai que je n'ai pas pensé à demander si ces templates étaient modifiés, désolée
(le sujet sera archivé dans une semaine si vous ne donnez pas de nouvelles par contre)
(le sujet sera archivé dans une semaine si vous ne donnez pas de nouvelles par contre)
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Modifier la couleur du bas de page
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.
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.
Invité- Invité
Re: Modifier la couleur du bas de page
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 :
en :
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;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Modifier la couleur du bas de page
Nickel pour les copyright.
Pour le reste, vider le cache ne fonctionne pas, je vous met un screen pour vous montrer le soucis :
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.
Pour le reste, vider le cache ne fonctionne pas, je vous met un screen pour vous montrer le soucis :
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.
Invité- Invité
Re: Modifier la couleur du bas de page
Ah oui, je n'avais pas pensé à ça !
Essayez le code suivant :
Essayez le code suivant :
- Code:
html {
background: rgb(23, 23, 23);
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Modifier la couleur du bas de page
Parfait. Encore une petite demande, comme c'est assez moche, j'ai rajouter une transparence pour voir le background derrière, il fonctionne pour
Mais pas pour html. Help
- Code:
#page-footer { filter:alpha(opacity=0.97); -moz-opacity:0.97; -khtml-opacity:0.97; opacity:0.97; }
Mais pas pour html. Help
Invité- Invité
Re: Modifier la couleur du bas de page
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
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 :
ça devrait fixer le pied de page en bas de la page quelque soit la hauteur de celle-ci
- modifiez
- Code:
#page-footer {
-khtml-opacity: .97;
-moz-opacity: .97;
background: #171717;
filter: alpha(opacity=0.97);
opacity: .97;
}
- 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
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Modifier la couleur du bas de page
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.
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.
Invité- Invité
Re: Modifier la couleur du bas de page
vous pouvez appliquer le padding à la div à l'intérieur du footer, par exemple :
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" :
- 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" :
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Modifier la couleur du bas de page
Tout est parfait désormais, je pense que ce topic peux être clôturé, encore merci beaucoup Alys.
Invité- Invité
Sujets similaires
» Modifier la couleur d'un bloc du pied de page
» Modifier la couleur de fond de la page d'accueil
» Modifier la couleur de la légende sur la deuxième page du forum.
» Modifier la couleur des numéros de pages dans les sujets
» Modifier couleur de police pied de page phpBB3
» Modifier la couleur de fond de la page d'accueil
» Modifier la couleur de la légende sur la deuxième page du forum.
» Modifier la couleur des numéros de pages dans les sujets
» Modifier couleur de police pied de page phpBB3
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum