Me voici avec un tutoriel vous permettant de complètement modifier votre barre de navigation.
IMPORTANT :Tout d'abord, remercions l'auteur original du tutoriel : Miettes de School of Progress.
Lien vers son tutoriel : ici
Par respect pour son travail, j'utiliserai mes propres codes pour ce tutoriel, afin d'obtenir ce résultat.
- Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
L'étape suivante est de choisir l'emplacement de votre barre de navigation. Pour ma part, il s'agit d'une barre fixe située en haut de la page. Je vais donc mettre mon code après la ligne 201 :
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
- Code:
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
Ensuite, il suffit de recréer les liens de la manière suivante :
- Code:
<a href="URL DE VOTRE FORUM" alt="NOM DU LIEN"><img src="VOTRE IMAGE" /></a>
Portail : url de votre forum/
Accueil (Index) : /forum
Calendrier : /calendar
Galerie : /gallery/index.htm
FAQ : /faq
Rechercher : /search
Membres : /memberlist
Groupes : /groups
Profil : /profile?mode=editprofile
Messagerie : /privmsg?folder=inbox
Inscription : /register
Connexion : /login
Déconnexion : /login?logout pour déconnecter directement et /login.forum?logout=true pour accéder à la page de déconnexion
- Code:
<!-- BEGIN switch_user_logged_in -->
Vos liens (MP et Déconnexion normalement, mais plus si vous voulez)
<!-- END switch_user_logged_in -->
Utilisateur déconnecté :
- Code:
<!-- BEGIN switch_user_logged_out -->
Vos liens (Inscription et Connexion)
<!-- END switch_user_logged_out -->
- Code:
<a href="URL/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>
- Code:
<!-- BARRE NAVIGATION -->
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
<div id="bar_nav">
<div id="bar_nav_standard">
<a href="/forum" alt="Accueil"><img src="URL" /></a>
<a href="/faq" alt="F.A.Q."><img src="URL" /></a>
<a href="/search" alt="Rechercher"><img src="URL" /></a>
<a href="/memberlist" alt="Membres"><img src="URL" /></a>
<a href="/groups" alt="Groupes"><img src="URL" /></a>
<a href="/profile?mode=editprofile" alt="Profil"><img src="URL" /></a>
</div>
<div id="bar_nav_modul">
<!-- BEGIN switch_user_logged_in -->
<a href="/login?logout" alt="Déconnexion"><img src="URL" /></a><br />
<a href="/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/login" alt="Connexion"><img src="URL" /></a><br />
<a href="/register" alt="S'inscrire"><img src="URL" /></a>
<!-- END switch_user_logged_out -->
</div>
</div>
<!-- BARRE NAVIGATION -->
2- Partie CSS
- Code:
/* BARRE NAVIGATION */
#bar_nav {
position: fixed;
z-index: 999;
width: 100%;
top: 0px;
left: 0px;
right: 0px;
background:url('URL DE L'IMAGE') repeat-x;
}
#bar_nav_standard {
float: left;
}
#bar_nav_modul {
float: right;
}
3- Nouveau MP : JQuery
- Code:
jQuery().ready(function(){
var newmp = $("#i_icon_mini_new_message");
if(!newmp.length) return;
$("#mp").attr('src','URL DE L'IMAGE');
});
Validez, et votre barre de navigation marche sans problème !
Merci de penser à un petit remerciement à Never Utopia ET School of Pub si vous utilisez ce tutoriel pour votre forum !