phpBB2 : Avoir une barre de navigation verticale

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

  • 0

Tutoriel phpBB2 : Avoir une barre de navigation verticale

Message par Matriochka le Lun 8 Juil 2013 - 10:24

Avoir une barre de navigation verticale

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

Démonstration : Barre de navigation verticale

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



Modification du template overall_header

Rendez-vous dans Panneau d’administration → Affichage → Templates → Général et ouvrez le template intitulé overall_header à l’aide du rouage orange.

Localisez cette partie du template, comprenant la variable {GENERATED_NAVBAR} :
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>

Explications :
On place la variable qui génère la barre de navigation dans une div à laquelle on donne le nom 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.


Modification de la feuille de styles CSS

Rendez-vous dans Panneau d’administration → Affichage → Couleurs → Onglet "Feuille de styles CSS".

Collez le premier paragraphe qui suit :
Code:
div.vertical_nav {
position:absolute;
top:50px;
left:5%;}
Explications :
position:absolute; nous permet de placer l’ensemble de la barre de navigation comme un élément flottant
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

Note : Si vous désirez que le bloc suive le défilement de la page, vous devez remplacer position:absolute; par position:fixed;

Pour terminer la modification, collez ce dernier paragraphe :
Code:
div.vertical_nav a.mainmenu {
display:list-item;
list-style:none;}
Explications :
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 :
Code:
div.vertical_nav {
background:#FFFFFF;
border:1px solid #D0D0D0;}
Explications :
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 d’enregistrer votre modification et surtout, soyez créatifs ! Wink


Lectures complémentaires

- Tutoriel sur le HTML
- Tutoriel sur le CSS
- Explications sur les variables des templates

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka 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