Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
Membre actif

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