Barre de navigation au-dessus de la bannière Ce tuto vous apprendra à mettre votre barre de navigation au-dessus de votre bannière, et de la personnaliser. (nécessite l'édition des templates et du css)
|
Introduction
Le tutoriel d'origine a été réalisé par Sthyx puis refait, avec une méthode plus simple, par 'Christa.
Voici deux aperçus de ce que vous serez capable de faire grâce à ce tutoriel
I. Placer la barre
Alors, avant toute chose ouvrez votre panneau d'administration » Onglet Affichage » templates » général » overall_header.
Maintenant cherchez ce morceau de code :
Code ▼ Sélectionner le code
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>C'est lui qui affiche votre barre de navigation. Coupez-le (ctrl+x) et copiez-le sur votre bloc-note pour le garder en mémoire (on ne sait jamais)
Cherchez ensuite le code suivant :
Code ▼ Sélectionner le code
{JAVASCRIPT}Code ▼ Sélectionner le code
<div class="barre-nav">{GENERATED_NAV_BAR}</div>Votre barre de navigation est maintenant en haut de votre forum, mais ce n'est pas encore ça. Il va maintenant vous falloir la personnaliser grâce à la formule magique moderne : les styles CSS !
II. Personnaliser la barre
Pour éditer les styles CSS de votre forum (sur ForumActif), rendez-vous sur votre panneau d'administration » Onglet Affichage » couleurs » feuille de style CSS. Dans le champ de texte, vous allez ajouter les classes correspondant à votre barre de navigation. Le code "simple" sera le suivant :
Code ▼ Sélectionner le code
.barre-nav {
text-align:center; /* pour centrer le contenu de la barre */
}
.mainmenu{
color:#COULEUR; /* donner une couleur aux liens */
}Maintenant, voyons comment personnaliser un peu ce code CSS pour obtenir des rendus intéressants comme sur les exemples donnés en début de tutoriel.
Donner un fond et une forme personnalisée à toute la barre
Par exemple pour obtenir cet effet :
Code ▼ Sélectionner le code
.barre-nav {
text-align:center; /* pour centrer le contenu de la barre */
background:#e8e6e6; /*fond de la barre de navigation*/
border: 1px dotted #37bcd9; /*bordure : épaisseur, style, couleur*/
text-shadow: 0px 0px 3px #8b2b5b; /*ombrage du texte*/
padding: 6px; /* marge interieure */
margin:4px; /* marge exterieure */
/*arrondir la bordure*/
-moz-border-radius: 15px; /* pour mozilla firefox */
-webkit-border-radius:15px; /* pour chrome et safari */
border-radius:15px; /* pour Internet Explorer 9, Firefox 4, Chrome 10 */
}
Donner un fond et une forme personnalisée aux liens
Pour cet exemple, vous n'avez besoin que de ces classes CSS :
a.mainmenu : l'apparence du lien de navigation normal (taille, police, décoration...).
a.mainmenu:hover : l'apparence du lien de navigation au survol.
Vous personnalisez alors à votre envie.
Par exemple pour obtenir cet effet :
Code ▼ Sélectionner le code
a.mainmenu {
font-size: 10px; /*taille de l'écriture*/
font-family: helvetica, sans serif; /*police d'écriture*/
padding: 3px; /*espace entre le texte et la bordure*/
border: 1px #000000 solid; /*bordure*/
text-decoration: none; /*lien non-souligné*/
color: #000000; /*couleur du texte*/
background-color: #a4865b; /*fond de la navigation*/
border-bottom: 1px #f600ff solid; /*bordure en bas*/
}
a.mainmenu:hover {
border: 1px #ffffff dotted; /*bordure*/
text-decoration: none; /*lien non-souligné*/
color: #ffffff; /*couleur du texte*/
background-color: #ff00e4; /*fond de la navigation*/
border-bottom: 1px #6e3a00 dashed; /*bordure en bas*/
}
III. Quelques personnalisations intéressantes
Garder le texte mais retirer les images ?
Vous aurez remarqué que sous ForumActif, vous pouvez choisir de n'afficher que des images, mais le contraire (n'afficher que du texte) n'est pas possible. Il existe fort heureusement une méthode pour ça, ajoutez dans votre code CSS le code suivant :
Code ▼ Sélectionner le code
a.mainmenu img {
display:none;
}Donner la même taille à tous les liens du menu ?
Il vous faudra rajouter quelques lignes à la personnalisation des liens, à savoir celles ci :
Code ▼ Sélectionner le code
a.mainmenu {
display:inline-block;
width:LARGEURpx;
height:HAUTEURpx;
/* Et vos autres personnalisations... */
}Et sous Xooit ?
Pour personnaliser les liens de navigation, c'est en général la même chose, sauf que pour vous, il vous faudra ajouter vos styles directement dans le template overall_header juste avant cette partie :
Code ▼ Sélectionner le code
-->
</style>Pour personnaliser la barre de navigation proprement dite, contrairement à ForumActif vous avez la possibilité d'en éditer chaque lien à votre guise, ce qui fait que le code à encadrer est beaucoup plus compliqué à "repérer", d'autant plus que les thèmes proposés par Xooit ont des templates différents (ça doit bien être là l'un des très rares avantages de Xooit par rapport à ForumActif : les thèmes tous faits avec des templates personnalisés). Bref, il vous faudra, comme souvent, demander un support personnalisé (sur l'Enae ou ailleurs) pour obtenir l'effet voulu.
