Vérifier ses messages







Partagez
 

 [Forumactif] Mettre la barre de navigation en haut du forum

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Urbanspirit
Nain Posteur
Urbanspirit

Masculin
Nombre de messages : 26629
Age : 36
Team/ Alliance : NbK
Jeux : League of legends / CSGO
Date d'inscription : 16/12/2005

[Forumactif] Mettre la barre de navigation en haut du forum Empty
MessageSujet: [Forumactif] Mettre la barre de navigation en haut du forum   [Forumactif] Mettre la barre de navigation en haut du forum Icon_minitimeMar 13 Nov 2012, 18:28

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 forum


Bref 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 Very Happy)
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 Smile) 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 Very Happy


Bref vous avez tout pour personnaliser votre barre de navigation!
Revenir en haut Aller en bas
http://www.team-naheulbeuk.com
 

[Forumactif] Mettre la barre de navigation en haut du forum

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [Forumactif] Fonctionnement de la Toolbar.
» [WoT] L'artillerie haut tiers
» [WoT] Le haut de l'arbre : chars moyens français
» [Counter strike] Mettre un tag perso:
» [Steam] Mettre un skin a steam

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Team NaheulbeuK :: Accueil public :: Tutoriaux-