Mettre sa barre de navigation en haut du forum

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

  • 0

Tutoriel Mettre sa barre de navigation en haut du forum

Message par Anzu le Ven 8 Avr 2011 - 20:18

Mettre sa barre de navigation en haut du forum


Ce tutorial vous explique comment déplacer votre barre de navigation tout en haut du forum.
Les modifications se font via le template overall header & CSS.

Attention: Uniquement valable pour les forums Phpbb2 & Punbb

Rendu Final




Par où commencer ?

• Allez dans Panneau d'administration > Affichage > Templates > Général > Overall header > edit

Qu'est ce qui permet l'affichage de la barre de navigation sur le forum ?

• Repérez ceci dans votre template:
Code:

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>


On se concentrera uniquement sur cette variable: {GENERATED_NAV_BAR}
Inutile de s'arrêter sur les autres.
Vous l'avez donc compris, c'est cette variable qui renvoie à la barre de navigation.

•• Dans le code par défaut, cette barre se trouve juste après la bannière et la description.

Déplacer la barre - Etape 1


• Vous prenez donc ceci
Code:
{GENERATED_NAV_BAR}
et vous la mettez un peu plus haut dans le template juste après cette ligne de code
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Attention: N'oubliez pas de retirer cette partie
Code:

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>


Déplacer la barre - Etape 2

• On ne va pas laisser notre variable toute nue, on va donc la mettre dans une div avec une class qu'on a appelé ici "navig".
Ce qui nous donne:
Code:
<center><div class="navig">{GENERATED_NAV_BAR}</div></center>
.

Petite astuce: Vous pouvez également mettre ceci
Code:
<div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
=> Pour ceux qui ne sont pas très à l'aise avec le css ou les templates, cela vous sera très utile si à l'avenir, vous décidez de mettre votre barre à droite plutôt que centrée. Vous le faites directement dans le pa, sans toucher au CSS ou au template.


Modification du template pour Punbb

• Repérez cette partie :
Code:
   <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>

• Retirez la et mettez la entre le body et le begin:
Code:

<body>
   <!-- BEGIN hitskin_preview -->

• Vous obtenez ceci:

Code:

<body><div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>
   <!-- BEGIN hitskin_preview -->

• Remplacez par:

Code:
<div id="pun-navlinks"><ul class="clearfix">
                     <center><div class="navig">{GENERATED_NAV_BAR}</div></center></ul></div>






A présent, il ne vous reste plus que le code CSS !

CSS

• Allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Onglet Feuille CSS.

• Mettez ceci dans la css:

Code:
.navig {
position: absolute;
top: 0px;
width: 100%;
}

♣ Position: ici absolute. Pourquoi absolute ? Cette propriété permet à la barre de navigation de se positionner tout au dessus sans prendre en compte les autres éléments du forum. Elle sera donc bien positionnée.

♣ Top:0px => La barre se positionne donc à 0px du dessus.

♣ Width: 100% => La barre prend toute la largeur du forum

Le petit +: Esthétique de la barre de navigation.

• On va donc rajouter des éléments dans ce code:

Code:
.navig {
position: absolute;
top: 0px;
width: 100%;
}

Pour mettre un fond, on utilise ce code:

Code:
background-color: #000000;
#000000 => code couleur que vous pouvez modifier à souhait.

Pour mettre une bordure:

Code:
border: 3px solid #dedede;
♦ 3px => l'épaisseur, plus la valeur sera grande, plus le bord sera épais.
♦ solid => solid ou dotted ou dashed
#dedede => code couleur que vous pouvez modifier à souhait.

Astuces: Vous pouvez mettre une bordure uniquement en dessous, ou uniquement en haut, ou encore les deux.
Pour cela, utilisez ce code:

Pour le dessous:
Code:
border-bottom: 3px solid #a17a55;

Pour le dessus:
Code:
border-top: 3px solid #a17a55;


Pour retirer "l'image vide" générée par la barre.

Code:
a.mainmenu img{
display: none;
}

Pour tout ce qui concerne la police

Code:
a.mainmenu {
margin: 5px;
font-family: Arial;
font-size: 11px;
}

♦ Margin => permet de séparer les boutons
♦ font family => propriété pour la famille de police utilisée
♦ font size => taille de la police



Dernière édition par Anzu le Sam 9 Avr 2011 - 18:04, édité 6 fois

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu 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