Création d’un tableau de liens

Révision infoking1 du 08/11/2010


Création d’un tableau de liens



Preview



Introduction



Basé sur le footer.tpl du thème "base". "Un tableau de liens personnalisables avec vos propres liens.

Avant de faire la manipulation, veuillez faire une sauvegarde du footer.tpl que vous allez modifier

Insertion du code



Commencez par éditer le templatesVotre-thèmefooter.tpl, et trouvez cette partie de code:

Code TPL :
<div id="footer">
# 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 #
<span>
| {L_THEME} {L_THEME_NAME} {L_BY} <a href="{U_THEME_AUTHOR_LINK}" style="font-size:10px;">{L_THEME_AUTHOR}</a>
</span>
# ENDIF #
</div>
 


Pour ceux connaissant bien le html et le css, sélectionnez le div complet de l'id footer

Vous allez remplacer/insérer ce code :

Code TPL :
<div id="footer">
# IF C_MENUS_FOOTER_CONTENT #
{MENUS_FOOTER_CONTENT}
# ENDIF #
 <div class="floatcop"> <br /><h1><strong _moz-rs-heading=""> Liens </strong></h1>
<p style="font-size: 12px; text-align: left; color: rgb(255, 255, 255);">
<strong>
<a href="/pages/#">Accueil</a><br /> 
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
</strong></p>
</div>
<div class="floatcop"><br /><h1><strong _moz-rs-heading=""> Liens </strong></h1>
<p style="font-size: 12px; text-align: left; color: rgb(255, 255, 255);">
<strong>
<a>A venir...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br /> 
</strong></p>
</div>
<div class="floatcop"><br /><h1><strong _moz-rs-heading=""> Liens </strong></h1>
<p style="font-size: 12px; text-align: left; color: rgb(255, 255, 255);">
<strong>
<a>A venir...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br /> 
</strong></p>
</div>
<div class="floatcop"><br /><h1><strong _moz-rs-heading=""> Liens </strong></h1>
<p style="font-size: 12px; text-align: left; color: rgb(255, 255, 255);">
<strong>
<a>A venir...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br />
<a href="/pages/#">...</a><br /> 
</strong></p>
</div>
<div id="footer_auteur">
<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 #
<span>
 {L_THEME} {L_THEME_NAME} {L_BY} <a href="{U_THEME_AUTHOR_LINK}" style="font-size:10px;">{L_THEME_AUTHOR}</a>
</span>
</div>
</div>


Le code CSS



Éditez maintenant le "design.css" qui se trouve dans le dossier "templatesVotre-thèmetheme", et copiez ce code en dessous de la dernière ligne:

Code CSS :
/* #######################################*/
/*       liens flottant du footer         */
/* #######################################*/
.floatcop {
background:transparent url(images/separation.png) no-repeat scroll left center;
float:left;
height:180px;
margin:auto auto auto 0;
padding-left:10px;
width:150px; /* régler la largeur du menu */
}
.floatcop  a{
color:#f8e882; /* changer la couleur du lien*/
font-size:10px;
text-align:left;
}
.floatcop a:hover{
color:#ffa500;/* changer la couleur du survol du lien*/
font-size:10px;
text-align:left;
}
.floatcop h1{
color:#ffffff;/* changer la couleur des titres*/
font-size:21px;
text-align:left;
}
div#floatcop .float {
float:left;
margin-left:5px;
margin-right:8px;
}



:!: Maintenant vous allez chercher dans ce même fichier css, le :

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;
}


Que vous allez remplacer par :

Code CSS :
/* ##### Pied de page ###### */
div#footer {
background:none repeat scroll 0 0 #2F2F2E; /* changer la couleur du fond*/
border-top:2px ridge #CCCCCC; /* changer la couleur du border*/
clear:both;
height:200px;
margin:auto;
padding:1px;
text-align:right;
width:951px; /* A régler selon la largeur du site en px ou en 100%*/
}
div#footer_auteur {
background:none repeat scroll 0 0 #2F2F2E; /* changer la couleur du fond*/
clear:both;
height:20px;
text-align:right;
width:951px; /* A régler selon la largeur du site en px ou en 100%*/
}
div#footer span {
    color:#FFF; /* changer la couleur du texte*/
    font-size:10px; /* changer la taille du texte */
}
div#footer span a {
    color:#FFF; /* changer la couleur du lien*/
    font-size:10px; /* changer la taille du lien */
}
 


Enregistrez et fermez.

L'image



On a presque fini, il ne vous reste plus qu'a enregistrer cette image dans le dossier "templatesVotre-thèmethemeimages":


Dézippez la sur votre bureau avant ;)
separation.zip



Pour finir



Régénérez les caches PBt et navigateur. Par là suite, si vous avez des questions, posez les sur le forum , il est là pour vous aider.

Si ce tutoriel vous a plu, il serait aimable de votre part, de laisser un petit commentaire, merci :)
Cette page a été consultée 2785 fois