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

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Sam 28 Fév 2015 - 22:50

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


Dernière édition par 1baptiste le Dim 1 Mar 2015 - 20:15, édité 3 fois

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Sam 28 Fév 2015 - 23:22

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 edit
- 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 ajout

=> ç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 ^^


Dernière édition par MlleAlys le Dim 1 Mar 2015 - 0:39, édité 2 fois

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Sam 28 Fév 2015 - 23:28

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 ?

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Sam 28 Fév 2015 - 23:42

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 ^^ :

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Sam 28 Fév 2015 - 23:55

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 ?

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Sam 28 Fév 2015 - 23:58

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 ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 0:29

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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Dim 1 Mar 2015 - 0:34

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}">

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 0:44

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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Dim 1 Mar 2015 - 0:50

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 ! ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 0:54

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 ?

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Dim 1 Mar 2015 - 0:55

quel genre "d'animation" souhaitez vous ?

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 0:59

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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Dim 1 Mar 2015 - 1:08

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


Dernière édition par MlleAlys le Dim 1 Mar 2015 - 2:33, édité 2 fois

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 1:26

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


Dernière édition par 1baptiste le Dim 1 Mar 2015 - 1:51, édité 1 fois (Raison : Modification car nouvelle question)

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 1:52

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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Dim 1 Mar 2015 - 2:24

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*/
}

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 20:10

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 ?

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par MlleAlys le Dim 1 Mar 2015 - 20:13

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%;
}

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire une barre de navigation du style du "Forum des Forum"

Message par horusbk le Dim 1 Mar 2015 - 20:15

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

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum