Avoir une barre de navigation verticale

par Matriochka Lun 8 Juil 2013 - 10:24

	Avant toute modification, assurez-vous que votre forum respecte les conditions suivantes : - Vous devez être le fondateur du forum pour avoir accès aux templates de celui-ci ; - Votre forum doit être en version PhpBB2.

Le tutoriel qui suit vous permettra d’obtenir une barre de navigation verticale sur votre forum Forumactif.

Voir illustration :

Modification du template overall_header

On place la variable qui génère la barre de navigation dans une div à laquelle on donne la class vertical_nav, afin de pouvoir la modifier depuis la feuille de styles CSS par la suite.

Une fois la modification faite, enregistrez-la puis publiez le template en cliquant sur le "Plus" vert dans le listing des templates.

Citation :: Panneau d'administration  Affichage  Templates  Général, overall_header

Editez le template overall_header en cliquant sur la roue crantée ;
Recherchez la partie (CTRL + F) :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
Remplacez-la par :

Code:

<div class="vertical_nav">{GENERATED_NAV_BAR}</div>

N’oubliez pas de publier le template en cliquant sur Ajout

.

Modification de la feuille de styles CSS

Citation :: Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS)

Collez le code suivant :

Code:: div.vertical_nav {
position:absolute;
top:50px;
left:5%;}

div.vertical_nav a.mainmenu {
display:list-item;
list-style:none;}

position:absolute : nous permet de placer l’ensemble de la barre de navigation comme un élément flottant. Si vous désirez que le bloc suive le défilement de la page, vous devez remplacer position:absolute; par position:fixed; ;
top:50px : nous permet de positionner notre bloc à 50 pixels du haut de la page ;
left:5% : nous permet de positionner notre bloc à 5% de la gauche de la page.
display:list-item : nous permet d’afficher les liens de la barre de navigation comme une liste de haut en bas ;
list-style:none : nous permet de supprimer le style initialement attribué aux listes (les puces : •).

Si vous désirez encadrer votre bloc comme sur la démonstration plus haut, pour cela rien de plus simple, il vous suffit d’ajouter du style sur l’élément div.vertical_nav :

background:#FFFFFF; : nous permet de coloriser le fond du bloc en blanc ;
border:1px solid #D0D0D0; : nous permet d’ajouter une bordure pleine, d’un pixel d’épaisseur et de couleur grise.

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder vos modifications.

Avoir une barre de navigation verticale

Vous et Forumactif...

Trucs et astuces