Salut tout le monde!
Aujourd'hui je vais vous parler d'une astuces pour mettre sa barre de navigation tout en haut de son forum comme sur notre site actuellement
La manipulation en elle même n'est pas très compliquée vu qu'il ne s'agit là que de jongler entre les templates en HTML de ForumActifs et le Code CSS de ce dernier.
Il faut tout d'abord localiser ou se trouve la barre de menu.
• Allez dans
Panneau d'administration > Affichage > Templates > Général > Overal_ header Le template Overall_header est un template permettant l'affichage du haut de fotre forum (sous-entendu tout ce qui est Balise Meta / barre de menu logo et j'en oublis)Vous remarquerez notamment dans ce dernier beaucoup de choses dans ce style là: - Code:
-
{NOM-DE-VAR}
Vous n'avez pas à vous en préoccupé mais retenez que ce sont des variables Propres à FormActifs et qu'elles génèrent des parties ou des blocs du forumBref revenons en à nos moutons!
Donc vous avez ouvert votre Template. Il vous faut trouver les lignes affichant la barre de navigation. Recherchez cela:
- Code:
-
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
On se concentrera uniquement sur la variable {GENERATED_NAV_BAR} Inutile de prêter attention aux autres.
Cette variable renvoi donc notre barre de navigation, celle que l'on crée et modifie dans la partie
Affichage du panneau d'administration
Vous prenez donc ceci
- Code:
-
{GENERATED_NAV_BAR}
et retirer le reste affiché plus haut. Enfin vous la mettez un peu plus haut dans le template juste après le Body. Pourquoi? Et biens pour ceux qui ne s'y connaissements pas en HTML, sachez que le
body contient le corps du document html, c'est à dire toutes les informations visibles par l'internaute.
On a actuellement notre variable qui génère la barre de navigation le but étant de la placer la où on veut.Il faut donc la mettre dans une div avec une class qu'on a appeler ici "navig". (très original
)
Ce qui donne dans le code du Template
Overall_Header:
- Code:
-
<div class="navig">{GENERATED_NAV_BAR}</div>
De plus vous pouvez rajouter sa:
- Code:
-
<div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
En effet {MENU_POSITION} est géré par ForumActif et détermine l'alignement que vous avez choisi pour la barre dans votre Panneau d'administration. Ce qui vous évitera d'aller vous balader dans votre code html ou CSS pour changer l'alignement de la barre.ET Non! ce n'est pas terminé! vous pensiez que cette manipulation allait mettre la barre en haut de votre forum? Et bien non!
En effet il va falloir mettre ne place le code CSS pour pouvoir mettre votre Barre en haut du forum (vous pouvez aussi la mettre tout en bas c'est comme vous le souhaiter
) et de personnaliser cette dernière.
• Allez dans
Panneau d'administration > Affichage > Images et couleurs > Couleurs > Onglet Feuille CSS. et mettez ceci dans votre CSS:
- Code:
-
.navig {
position: absolute;
margin-top: 0px;
width: 100%;
}
Je ne m'étendrais pas sur le CSS en lui même car il y a plein de tutoriel à ce sujet sur le net. Je vais juste vous expliquer les fonctions de ce dernier:
- Position: ici absolute. Pourquoi absolute ? Cette propriété permet à la barre de navigation de se positionner tout au dessus sans prendre en compte les autres éléments du forum. Elle sera donc bien positionnée.
- margin-top:0px => La barre se positionne donc à 0px du dessus.
- Width: 100% => La barre prend toute la largeur du forum
Et voila vôtre barre se trouve en haut de votre forum! Comment sa elle est moche? Bah oui on a pas encore personnalisé cette dernière. Et pour faire cela rien de plus simple que d'apprendre le CSS! Comment sa la flemme? Ok ok je vous donne quelques indices et quelques astuces utiles:
- Code:
-
background-color: #000000;
Permet de changer la couleur du fond de la barre.
- Code:
-
border: 3px solid #dedede;
Rajoute une bordure à cette barre
- Code:
-
background-image:url(images/image_de_fond.png);
Permet de mettre une image en fond de barre comme sur ce forum
Bref vous avez tout pour personnaliser votre barre de navigation!