Un pied de page stylisé ...

Révision infoking1 du 11/03/2013

Introdution

Swan: Ce tutoriel nous a été proposé par hight_tower à la base sur le forum. Je l'ai un peu simplifié pour les puriste de PHPBoost

Hight_tower: Le tutoriel que je vous présente vient d'un bouquin qui se nomme Savoir tout faire pour le Web - Avec les CSS de Julien Debove édité chez Oracom Editions.

Ici je mélange un pied de page stylisé que je vais vous présenter avec le footer de PHPBoost. A chaque survol avec le pointeur de la souris, le statut du lien change ...

De plus en plus de site utilisent aujourd'hui cette partie pour diffuser d'autres types d'informations comme une liste de partenaires, d'articles, etc. Ces footers évolués permettent à un visiteur de consulter plus de pages et donc de trouver l'information plus facilement.

1/ La prévisualisation du footer

1/ Le footer.tpl

Allez dans le footer.tpl qui se trouve à la racine de votre thème dans le dossier "../templates/VOTRE_THEME/", et remplacez tout le code par celui-ci:

Code TPL :

 
</div>
# IF C_MENUS_BOTTOM_CENTRAL_CONTENT #
        <div id="bottom_contents">
{MENUS_BOTTOMCENTRAL_CONTENT}
</div>
# ENDIF #
</div>
# IF C_MENUS_TOP_FOOTER_CONTENT #
<div id="top_footer">
{MENUS_TOP_FOOTER_CONTENT}
<div class="spacer"></div>
</div>
# ENDIF #
<div id="pied">
<div class="bloc1_1">
<h1>Barre Social</h1>
<ul>
  <li><a href="#" title="">Google</a></li>
  <li><a href="#" title="">Flickr</a></li>
  <li><a href="#" title="">Yahoo</a></li>
  <li><a href="#" title="">Deezer</a></li>
  <li><a href="#" title="">Hotmail</a></li>
  <li><a href="#" title="">Facebook</a></li>
</ul>
</div>
 
<div class="bloc2_2">
  <h1>Nos partenaires</h1>
  <ul>
<li><a href="#" title="">Partenaire 1</a></li>
<li><a href="#" title="">Partenaire 2</a></li>
<li><a href="#" title="">Partenaire 3</a></li>
<li><a href="#" title="">Partenaire 4</a></li>
<li><a href="#" title="">Partenaire 5</a></li>
<li><a href="#" title="">Partenaire 6</a></li>
  </ul>
</div>
 
<div class="bloc3_3">
<h1>Autre Site</h1>
<ul>
  <li><a href="#" title="">Site 1</a></li>
  <li><a href="#" title="">Site 2</a></li>
  <li><a href="#" title="">Site 3</a></li>
  <li><a href="#" title="">Site 4</a></li>
  <li><a href="#" title="">Site 5</a></li>
  <li><a href="#" title="">Site 6</a></li>
</ul>
</div>
 
<div class="bloc4_4">
<p> CSS Julien Debove - Footer adpadté par Hight_tower | 
<a href="{PATH_TO_ROOT}/news/news.php" title="">Accueil</a> | 
<a href="#" title="">Services</a> | 
<a href="{PATH_TO_ROOT}/articles/articles.php" title="">Articles</a> | 
<a href="{PATH_TO_ROOT}/contact/contact.php" title="">Contact</a> | 
 
# IF C_MENUS_FOOTER_CONTENT #
{MENUS_FOOTER_CONTENT}
# ENDIF #
<span>
{L_POWERED_BY} <a style="font-size:10px" href="http://www.phpboost.com" title="PHPBoost">PHPBoost {PHPBOOST_VERSION}</a> {L_PHPBOOST_RIGHT}
</span>
# IF C_DISPLAY_BENCH #
<span>
&nbsp;|&nbsp;
{L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ}
</span>
# ENDIF #
# IF C_DISPLAY_AUTHOR_THEME #
# ENDIF #
</div>
</div>

3/ Le design.css

Ouvrez le design.css (à la ligne 164) et recherchez ceci :

Code CSS :

/* ##### Pied de page ###### */
div#footer {
height:30px;
clear:both;
    margin:auto;
    margin-top:0px;
    padding:0px;
    padding-top:36px;
    padding-right:20px;
    text-align:right;
background:#F5F4ED url(images/footer.png) repeat-x;
}
div#footer span {
    font-size:10px;
}
div#footer span a {
    color:#FFF;
    font-size:10px;
}

Et remplacez par :

Code CSS :

/* ##### Pied de page ###### */
#pied { 
  color:#686868;
  background:#000000;
  width:1000px;
  float:left;
  padding:20px 20px 5px 20px;
}
 
#pied .bloc1_1 {
  float:left;
}
 
#pied .bloc1_1 h1 {
  padding:0 0 0 58px;
  height:48px;
  line-height:48px;
  font-family:Georgia;
  margin:0 0 15px 0;
}
 
#pied .bloc1_1 ul {
  list-style:none;
  width:200px;
}
 
#pied .bloc1_1 ul li a{
  width:180px;
  height:30px;
  line-height:30px;
  color:#EEEEEE;
  padding:0 0 0 20px;
  text-decoration:none;
  background-color:#282828;
  margin:0 0 2px 0;
  float:left;
}
#pied .bloc1_1 ul li a:hover{
  background-color:#1c68c6;
}
 
#pied .bloc2_2 {
  float:left;
  margin:0 20px 0 20px;
}
 
#pied .bloc2_2 h1 {
  padding:0 0 0 58px;
  height:48px;
  line-height:48px;
  font-family:Georgia;
  margin:0 0 15px 0;
}
 
#pied .bloc2_2 ul {
  list-style:none;
  width:380px;
}
 
#pied .bloc2_2 ul li a{
  width:360px;
  height:30px;
  line-height:30px;
  color:#EEEEEE;
  padding:0 0 0 20px;
  text-decoration:none;
  background-color:#282828;
  margin:0 0 2px 0;
  float:left;
}
#pied .bloc2_2 ul li a:hover{
  background-color:#1c68c6;
}
 
#pied .bloc3_3 {
  float:left;
}
 
#pied .bloc3_3 h1 {
  padding:0 0 0 58px;
  height:48px;
  line-height:48px;
  font-family:Georgia;
  margin:0 0 15px 0;
}
 
#pied .bloc3_3 ul {
  list-style:none;
  width:380px;
}
 
#pied .bloc3_3 ul li a{
  width:360px;
  height:30px;
  line-height:30px;
  color:#EEEEEE;
  padding:0 0 0 20px;
  text-decoration:none;
  background-color:#282828;
  margin:0 0 2px 0;
  float:left;
}
#pied .bloc3_3 ul li a:hover{
  background-color:#e05f09;
}
 
#pied .bloc4_4 {
  height:40px;
  line-height:40px;
  width:100%;
  float:left;
}
 
#pied .bloc4_4 a {
  color:#EEEEEE;
  text-decoration:none;
}
#pied .bloc4_4 a:hover {
  text-decoration:underline;
}

Et voilà un footer rapide et très stylé ! A vous de modifier les liens interne et de vous l'approprier.

Conseils

Une fois fait tout ceci, et que vous avez un souci, n'oubliez pas de régénérer vos caches : celui de votre navigateur et celui de l'administration de votre site.

Si vous avez des questions ou alors que vous souhaitez de plus amples informations, le forum est à votre disposition

Tutoriel écrit et réalisé par Hight_tower | Revu par Swan