Apparence de la barre de navigation

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

Résolu Apparence de la barre de navigation

Message par Calinepowa le Sam 28 Jan 2017 - 19:19

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,

Ma question va paraître très probablement stupide mais impossible de trouver. J'ai fouillé sur le pannel et sur internet mais rien. Je ne voudrai savoir où l'on peut trouver des barres de navigation déjà faites...

Merci d'avance.


Dernière édition par Calinepowa le Sam 28 Jan 2017 - 21:35, édité 1 fois
avatar

Calinepowa
Nouveau membre

Messages : 12
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par Ajesto le Sam 28 Jan 2017 - 19:22

Bonjour,

Je vous présente quelques barres de navigation "Flat" :

Barre de navigation noire:



Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: #1d1d1d; height: 40px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar ul.linklist li a { color: white; height: 40px; display: inline-block; line-height: 38px; padding-left: 10px; padding-right: 10px; text-decoration: none !important; font-size: 11px;} /* Liens */
.navbar ul.linklist li a:hover { background-color: #3a3a3a; text-decoration: none !important; } /* Liens lors du passage de la souris*/

Barre de navigation grise:



Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: #cacaca; height: 40px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar ul.linklist li a { color: #292929; height: 40px; display: inline-block; line-height: 38px; padding-left: 10px; padding-right: 10px; text-decoration: none !important; font-size: 11px;} /* Liens */
.navbar ul.linklist li a:hover { background-color: #dadada; text-decoration: none !important; } /* Liens lors du passage de la souris*/

Barre de navigation bleue:



Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: #048be6; height: 40px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar ul.linklist li a { color: #f3f3f3; height: 40px; display: inline-block; line-height: 38px; padding-left: 10px; padding-right: 10px; text-decoration: none !important; font-size: 11px;} /* Liens */
.navbar ul.linklist li a:hover { background-color: #007bce; text-decoration: none !important; } /* Liens lors du passage de la souris*/

Barre de navigation verte:



Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: #61d469; height: 40px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar ul.linklist li a { color: #f3f3f3; height: 40px; display: inline-block; line-height: 38px; padding-left: 10px; padding-right: 10px; text-decoration: none !important; font-size: 11px;} /* Liens */
.navbar ul.linklist li a:hover { background-color: #53b55a; text-decoration: none !important; } /* Liens lors du passage de la souris*/

Barre de navigation rose:



Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: #d07dce; height: 40px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar ul.linklist li a { color: #f3f3f3; height: 40px; display: inline-block; line-height: 38px; padding-left: 10px; padding-right: 10px; text-decoration: none !important; font-size: 11px;} /* Liens */
.navbar ul.linklist li a:hover { background-color: #bb71b9; text-decoration: none !important; } /* Liens lors du passage de la souris*/

Barre de navigation rouge:



Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: #e25c5c; height: 40px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar ul.linklist li a { color: #f3f3f3; height: 40px; display: inline-block; line-height: 38px; padding-left: 10px; padding-right: 10px; text-decoration: none !important; font-size: 11px;} /* Liens */
.navbar ul.linklist li a:hover { background-color: #cc5252; text-decoration: none !important; } /* Liens lors du passage de la souris*/

La barre de navigation a été créer sous un forum vierge en phpbb3.
Aucune modification des templates.
Aucun autre CSS appart celui de ces thèmes.
Le bouton Messagerie représente le passage de la souris sur un lien.
Cela provient de mon forum (Lien du topic)

2ème thème :

Barre de navigation:


Et le CSS :

Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: transparent; height: 35px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar li a.mainmenu { font-size: 12px; background-image: url(https://i37.servimg.com/u/f37/19/60/40/75/245310.png); color: white; height: 35px; display: inline-block; line-height: 33px; padding-left: 5px; padding-right: 5px; border-left: 1px solid #525252; border-right: 1px solid #404040; } /* Liens */

3ème thème :

Barre de navigation:


Et le CSS :

Code:
.navbar .corners-top, .navbar .corners-bottom { display: none; } /* J'enlève les corners */
.navbar { background-color: transparent; height: 30px; } /* Fond de la barre de navigation */
.navbar ul.linklist.navlinks { text-align: center; border: 0; font-size: 0; } /* Je centre les liens, enlève l'espace entre les liens */
#search-box { display: none; } /* J'enlève la barre de recherche */
.navbar ul.linklist li img { display: none; } /* J'enlève les images de la barre de navigation */
.navbar li a.mainmenu { background-image: url(https://i37.servimg.com/u/f37/19/60/40/75/ml10.png); border-left: 1px solid #525252; border-right: 1px solid #8e8e8e; color: #fff; display: inline-block; font-size: 12px; height: 31px; line-height: 30px; padding-left: 5px; padding-right: 5px; text-shadow: 2px 2px 2px rgb(41, 41, 41); } /* Liens */

Bien à vous,
Laiorm
avatar

Ajesto
****

Masculin
Messages : 309
Inscrit(e) le : 17/09/2016

http://codage-actif.forumactif.com/
Ajesto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par Calinepowa le Sam 28 Jan 2017 - 19:29

Merci, je ne vois pas les écritures, est-ce normal ?

Je crois que mon soucis vient des " icônes".
avatar

Calinepowa
Nouveau membre

Messages : 12
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par Ajesto le Sam 28 Jan 2017 - 20:24

Si dans votre PA > Affichage > Page d'accueil > En-tête et navigation
L'option "Afficher seulement des images dans la barre des liens" doit-être cochée sur "Non"
Normalement après sa devrait fonctionner.

Laiorm
avatar

Ajesto
****

Masculin
Messages : 309
Inscrit(e) le : 17/09/2016

http://codage-actif.forumactif.com/
Ajesto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par Calinepowa le Sam 28 Jan 2017 - 21:35

Ah merci beaucoup !
avatar

Calinepowa
Nouveau membre

Messages : 12
Inscrit(e) le : 14/04/2014

http://veilleurs.pro-forum.fr/
Calinepowa 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