Faire une barre de navigation du style du "Forum des Forum"

[horusbk]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://themazerunner-forum.fr/

Description du problème

Bonjour,
Comme vous l'avez compris dans le titre du sujet, je souhaite modifier l'apparence de ma barre de navigation actuelle barre une semblable à celle qui se trouve sur ce forum. Je trouve cette idée de faire bouger les titres des catégories géniales !

Mes deux souhaits :
- Avoir une barre de navigation avec les titres qui bougent comme sur ce forum
- Pouvoir mettre une bannière en arrière-plan de cette barre de navigation.

Je vous remercie par avance pour votre aide,
1baptiste

[MlleAlys]

Bonjour,
Pour cela, le mieux est de modifier le template de façon à pouvoir modifier facilement la barre de navigation.
Ensuite, il faut laisser seulement les liens et non pas les images, puis mettre en forme ces liens via css ^^


- Dans Affichage > templates > général > éditez le template overall_header
- Localisez ce passage (qui correspond à la barre de navigation) :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
    <tr>
        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
    </tr>
</table>

- Ajoutez l'identifiant id="navbar" dans la première balise table (pour qu'il s'applique à l'ensemble du tableau), ce qui donne :

Code:

<table id="navbar" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
    <tr>
        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
    </tr>
</table>

- Enregistrez le template
- Publiez le template

=> ça ne change rien en apparence, mais on pourra ensuite modifier facilement la mise en forme de la barre de navigation via la feuille de style css grâce à cet identifiant ^^

----------


- Dans Affichage > Page d'accueil > structure et hiérarchie, "Afficher seulement des images dans la barre des liens" : cochez NON ; Enregistrez.

- Dans Affichage > Gestion des images, supprimez les images de la barre de navigation ; Enregistrez.

=> Il ne reste que les liens "texte" de la navigation, qu'on peut mettre en forme via css :

---------


- Dans Affichage > Couleurs > onglet feuille de style css, vous pouvez ajouter et compléter les codes suivants (toutes les valeurs ne sont que des exemples et peuvent être modifiées hein ! ^^) :

-Pour ajouter une image de fond à l'ensemble de la barre de navigation :

Code:

#navbar {
    background:url(URL DE L'IMAGE);
}

- Pour modifier la mise en forme des liens en temps normal :

Code:

#navbar a {
    font-size: 13px; /*taille de la police*/
    color: red;  /*couleur des liens*/
    font-family: 'comic sans ms';  /*police*/
    font-variant: small-caps;  /*petites majuscules*/
}

- Pour modifier la mise en forme des liens au survol :

Code:

#navbar a:hover {
    color: yellow;  /*couleur des liens au survol*/
    font-size: 15px; /*taille des liens au survol*/
    font-weight: bold; /*lien en gras au survol*/
}

- Enregistrez votre feuille de style et actualisez votre page ^^

[horusbk]

Merci pour cette réponse rapide, je voudrais juste une précision, pour ce code :

Code:

        #navbar {
            background:url(URL DE L'IMAGE);
        }

URL DE L'IMAGE : j'imagine qu'il faut le modifier, mais avec quelle image ? En clair, que va changer ce code ?

[MlleAlys]

Ce code permet de mettre une image en fond du tableau qui contient la barre de navigation, donc en fond de la barre de navigation quoi x3
Et oui il faut modifier URL DE L'IMAGE par l'url de l'image voulue en fond ^^
Opeut mettre aussi une couleur en fond, par exemple :

Code:

#navbar {
    background:#FF0000;
}

(c'est du rouge ça xD)

et sur mon forum test ce bout de code donnerait ça ^^ :

[horusbk]

MERCI, et si je peux rajouter une remarque avant de commencer les modifications sur mon forum, vous me conseillez quoi comme taille de bannière pour le fond de la barre de navigation ?

[MlleAlys]

euh.... J'avoue que je n'en sais trop rien, il faut voir avec la taille de votre barre, après la taille de l'image de fond peut se régler aussi dans le css pour l'ajuster si besoin ^^

[horusbk]

Donc, j'ai effectué toutes les actions que vous m'avez indiquées mais ma barre de navigation reste statique.

Voyez-vous même : http://www.themazerunner-forum.fr/forum

[MlleAlys]

Vous semblez avoir mal modifié votre template, lorsque j'inspecte la page de votre forum, je vois ça :

Code:

<table cellspacing="navbar" cellpadding="0" border="0" align="{MENU_POSITION}">

Au lieu de ça :

Code:

<table id="navbar" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">

[horusbk]

Oui en effet, j'avais oublié de changer. Maintenant je n'est que le bouton "deconnexion Leader Blocards" qui bouge mais pas le reste

[MlleAlys]

Vous pouvez modifier les effets sur les liens en modifiant ou complétant les codes css donnés plus haut ^^
Par exemle :

Code:

#navbar a:hover {
    color: yellow; /*couleur des liens au survol*/
    font-weight: bold; /*liens en gras au survol*/
    font-size: 18px; /*taille des liens au survol*/
    transition: font-size 0.5s ease; /*effet de transition adoucie sur le changement de taille des liens*/
}

j'ai ajouté une modification de la taille au survol, ainsi qu'un effet de transition ^^

On peut aussi modifier l'espacement des lettres, ajouter un effet d'ombre, changer la police, mettre de grandes majuscules, et/ou toutes les autres propriétés possibles avec le css ! ^^

[horusbk]

Je vous remercie, car cela fonctionne désormais. Je voudrais juste savoir une dernière chose, y a-t-il des options d'animations ? et si oui lesquelles ?

[MlleAlys]

quel genre "d'animation" souhaitez vous ?

[horusbk]

C'était pour savoir si il y avait d'autres effets que "l'avancement" des titres.

[MlleAlys]

le css permet énormément d'effets, et donc de changements :
couleur, taille, police, style (gras, italique, souligné),
minuscules, majuscules, petites majuscules,
marges, positionnements, espacement des lettres, des mots,
bordures, fond, ombres, opacité,
rotations, déplacements, zoom, transitions,
etc...

dans notre cas c'est un simple changement de taille qui donne l'effet d'"avancement" ^^

Se renseigner sur le fonctionnement du css permet d'en découvrir l'étendu des possibilités que ça offre, moi même j'apprends encore à utiliser des nouveaux effets d'animations en 3D entièrement en css, les limites pour les effets les plus récents étant en fait que tous les navigateurs ne sont pas encore capable de les afficher...

Bref, faites votre choix, les combinaisons sont presque infinies ! x3

[horusbk]

Encore merci ! ce sujet est donc    (cf. EDIT) . J'espère qu'il pourra servir aux autres membres . 1baptiste

[horusbk]

Désolé de reprendre le sujet mais je me demandais pourquoi, sur mon forum, quand les textes de la barre de navigation bouge le reste de mon forum bouge aussi. Alors que ici ce n'est pas le cas. Merci

[MlleAlys]

Le forum bouge parce que comme la police est plus grosse, elle est légèrement plus haute, et donc la ligne est plus haute également, ce qui décale le forum légèrement vers le bas ^^
Pour fixer la hauteur de la barre de navigation, ajoutez ce code dans votre css :

Code:

#navbar {
    height: 28px; /*hauteur de la barre de navigation*/
}

[horusbk]

dernière petite chose, sur le FDF le fond de la barre de navigation occupe toute la largeur du forum contrairement à celle de mon forum : y a-t-il un code pour régler ça ?

[MlleAlys]

A votre code css :

Code:

#navbar {
    background: url(http://i38.servimg.com/u/f38/19/03/94/82/barre_15.png);
    height: 28px;
}

Ajoutez width:100%;
Ce qui donne :

Code:

#navbar {
    background: url(http://i38.servimg.com/u/f38/19/03/94/82/barre_15.png);
    height: 28px;
    width: 100%;
}

[horusbk]

Un très grand merci pour ton aide MlleAlys, cette fpos le sujet est