Barre de navigation au-dessus de la bannière
Niveau:
Facile | Par:
Sthyx | Validé par:
Kaiji | En date du:
03/07/10Bonjour !
Voici deux aperçus de ce que vous serez capable de faire grâce à ce tutoriel :
APERÇU 1
APERÇU 2
Alors, avant toute chose ouvrez votre
panneau d'administration => affichage => templates => général => overall_header.
Maintenant cherchez ce morceau de code :
- 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.
Bien, juste au-dessus se trouve ce code :
- Code:
-
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DEscriptION}
</span>
</td>
<!-- END switch_logo_left -->
<!-- BEGIN switch_logo_center -->
<td align="center" width="100%" valign="middle">
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DEscriptION}</span>
</td>
<!-- END switch_logo_center -->
<!-- BEGIN switch_logo_right -->
<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DEscriptION}
</span>
</td>
<td>
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
</td>
<!-- END switch_logo_right -->
</tr>
</table>
C'est lui qui affiche votre bannière. N'y touchez pas.
Vous allez reprendre le code de votre barre de navigation et vous le collez comme ceci :
- Code:
-
<td class="bodyline">
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
Si vous souhaitez avoir un saut de ligne entre la barre et le logo, rajoutez < br > ici :
- Code:
-
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table><br>
Enregistrez et publiez votre template. Maintenant votre barre est placée au-dessus de la bannière.
II. Personnaliser la barre
Si votre barre n'est pas en images, vous pouvez suivre ce tutoriel par Gigi. Mais les liens auront une séparation différente comme sur le deuxième aperçu.
Pour faire comme dans le premier aperçu voici la marche à suivre :
Revenez dans votre template
overall_headerRemplacer ce morceau de code :
- Code:
-
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table><br>
Par celui-ci :
- Code:
-
<td align="{MENU_POSITION}"{MENU_NOWRAP}><span class="navi">{GENERATED_NAV_BAR}</span></td>
</tr>
</table><br>
Vous pouvez bien entendu modifier le nom de la class.
Enregistrez et publiez votre template.
Allez maintenant dans :
panneau d'administration => affichage => couleurs => feuille de style CSS.
Et créez une nouvelle class :
- Code:
-
.navi {
vos propriétés;
}
Par exemple :
- Code:
-
.navi {
background-color: #4ba291; /*FOND*/
border: 1px solid #37bcd9;
text-shadow: 0px 0px 3px #000000; /*OMBRAGE*/
padding: 3px; /*ESPACER DES BORDS*/
-moz-border-radius: 5px; /*ARRONDIR LES COINS*/
}
ENJOY !
Créé d'après cette demande.
Lun 03 Juin 2024, 17:20 par 
