Modifier la couleur du bas de page

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

Résolu Modifier la couleur du bas de page

Message par Mysticals le 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.


Dernière édition par Mysticals le Ven 8 Mai 2015 - 21:55, édité 1 fois

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par MlleAlys le 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>
<!-- 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
+ Hyperactif +

Messages : 4406
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par Mysticals le 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.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par MlleAlys le 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)

MlleAlys
+ Hyperactif +

Messages : 4406
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par Mysticals le 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.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par MlleAlys le 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;
}

MlleAlys
+ Hyperactif +

Messages : 4406
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par Mysticals le 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 :



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.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par MlleAlys le 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);
}

MlleAlys
+ Hyperactif +

Messages : 4406
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par Mysticals le 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

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par MlleAlys le 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

MlleAlys
+ Hyperactif +

Messages : 4406
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par Mysticals le 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.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par MlleAlys le 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://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Aller en haut" /></a> <a href="#bottom"><img src="https://i42.servimg.com/u/f42/09/02/12/09/sort_d10.png" alt="Aller en bas" /></a></div>');
});

MlleAlys
+ Hyperactif +

Messages : 4406
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la couleur du bas de page

Message par Mysticals le 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

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

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


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