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•••
https://i.servimg.com/u/f23/11/73/76/86/photo11.pngPar où commencer ?• Allez dans Panneau d'administration > Affichage > Templates > Général > Overall header >
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
Sujet: Mettre sa barre de navig en haut du forum 
Mer 31 Aoû - 1:12