[Problème] changer la couleur de la position nav dans le template favourite

[ledawa]

Bonjour
je suis nouveau sur le forum et nouveau avec Joomla.
j'ai choisi pour mon site le theme Favourite. j'ai fait quelques modifications mais je souhaiterais modifier la couleur de la position Nav celle où le menu est. comment je peux le faire?
merci

[jisse03]

Re : changer la couleur de la position nav dans le template favourite

Bonjour,

et bienvenue sur le forum. Pour les templates de FavThemes, tout se gère dans l'administration du template.

Dans ce cas, il faut appliquer une variation personnalisée http://www.favthemes.com/tutorials-p...ariations.html sur le module en position nav.

[ledawa]

Re : changer la couleur de la position nav dans le template favourite

merci de ta reponse.
mais je n'ai pas l'onglet variation.

[jisse03]

Re : changer la couleur de la position nav dans le template favourite

Ah oui, les variations ne sont disponibles qu'avec la version pro.

[ledawa]

Re : changer la couleur de la position nav dans le template favourite

ok je vois et comment on fait dans ce cas?

[marie-louise]

Re : changer la couleur de la position nav dans le template favourite

Bonsoir,

En modifiant direct le CSS, cela doit être possible sur tout les templates je suppose, un lien vers le site ?

[jisse03]

Re : changer la couleur de la position nav dans le template favourite

Oui, c'est possible.
Il faut aller dans le style choisi, par exemple style1.css, repérer la section nav et la surcharger dans custom.css

Les templates pro de favthemes incluent ces "variations" (surcharges) directement dans la gestion du template.

[ledawa]

Re : changer la couleur de la position nav dans le template favourite

/// main navigation
///
/*/

.favnav .navigation .nav-pills a,
.favnav .navigation .menunav-pills a,
.favnav .navigation .nav-pills > li > a,
.favnav .navigation .menunav-pills > li > a,
.favnav .navigation ul.nav.menu li span.nav-header {
margin-top: 21px;
margin-bottom: 20px;
padding: 15px 16px 13px;
}
.favnav .navigation .nav-pills .nav-child,
.favnav .navigation .menunav-pills .nav-child {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.favnav .navigation li a[class^="fa-"]::before,
.favnav .navigation li a[class*=" fa-"]::before,
.favnav .navigation li span.nav-header[class^="fa-"]::before,
.favnav .navigation li span.nav-header[class*=" fa-"]::before {
padding-right: 8px;
}
.favnav .navigation li a[class^="fa-"]::before,
.favnav .navigation li a[class*=" fa-"]::before,
.favnav .navigation li span.nav-header[class^="fa-"]::before,
.favnav .navigation li span.nav-header[class*=" fa-"]::before {
font-weight: normal;
}

voilà le contenu de la section navigation. que dois je y faire?
non le site n'est pas encore en ligne

[jisse03]

Re : changer la couleur de la position nav dans le template favourite

ça c'est le fichier style.css... Dans le dossier styles, tu as style1.css à style10.css, et c'est ça qu'il faut surcharger (ne pas modifier directement ces fichiers, mais copier la partie à modifier dans custom.css, et apporter les modifications dans cette copie.

Ne prends pas n'importe quel stylexx.css, mais le même que celui de ton style choisi, puisque c'est ce fichier qui gère les couleurs.

Pour info, ces styles de 1 à 10 sont eux-mêmes des surcharges des styles Bootstrap de base.

[ledawa]

Re : changer la couleur de la position nav dans le template favourite

/*
//////////////////////////////////////////////////

1.5. navigation

//////////////////////////////////////////////////
*/

/*
/// navigation style
*/

ul.nav.menu li span.nav-header {
color: #0099ff;
}
.favnav .navigation .nav-pills > .active > a,
.favnav .navigation .nav-pills > li > a:hover,
.favnav .navigation .nav-pills > li > a:focus,
.favnav .navigation .menunav-pills > .active > a,
.favnav .navigation .menunav-pills > li > a:hover,
.favnav .navigation .menunav-pills > li > a:focus,
.favnav .navigation li.active span.nav-header,
.favnav .navigation li span.nav-header:hover,
.favnav .navigation li span.nav-header:focus {
background-color: #0099ff;
color: #fff !important;
}
.favnav .navigation .nav-pills .nav-child > .active > a,
.favnav .navigation .nav-pills .nav-child > li > a:hover,
.favnav .navigation .nav-pills .nav-child > li > a:focus,
.favnav .navigation .menunav-pills .nav-child > .active > a,
.favnav .navigation .menunav-pills .nav-child > li > a:hover,
.favnav .navigation .menunav-pills .nav-child > li > a:focus,
.favnav .navigation .nav-pills .nav-child > li.active > span.nav-header,
.favnav .navigation .nav-pills .nav-child > li > span.nav-header:hover,
.favnav .navigation .nav-pills .nav-child > li > span.nav-header:focus,
.favnav .navigation .menunav-pills .nav-child > li.active > span.nav-header,
.favnav .navigation .menunav-pills .nav-child > li > span.nav-header:hover,
.favnav .navigation .menunav-pills .nav-child > li > span.nav-header:focus {
background-color: #fff;
color: #0099ff !important;
}
.favnav .navigation .nav-pills .nav-child > li > span.nav-header {
background-color: #fff;
color: inherit !important;
}
.favnav .navigation li a[class^="fa-"]:before,
.favnav .navigation li a[class*=" fa-"]:before,
.favnav .navigation li span.nav-header[class^="fa-"]:before,
.favnav .navigation li span.nav-header[class*=" fa-"]:before {
color: #0099ff;
}
.favnav .navigation li a[class^="fa-"]:hover:before,
.favnav .navigation li a[class*=" fa-"]:hover:before,
.favnav .navigation li a[class^="fa-"]:focus:before,
.favnav .navigation li a[class*=" fa-"]:focus:before,
.favnav .navigation li.active a[class^="fa-"]:before,
.favnav .navigation li.active a[class*=" fa-"]:before,
.favnav .navigation li span.nav-header[class^="fa-"]:hover:before,
.favnav .navigation li span.nav-header[class*=" fa-"]:hover:before,
.favnav .navigation li span.nav-header[class^="fa-"]:focus:before,
.favnav .navigation li span.nav-header[class*=" fa-"]:focus:before,
.favnav .navigation li.active span.nav-header[class^="fa-"]:before,
.favnav .navigation li.active span.nav-header[class*=" fa-"]:before {
color: #fff !important;
}
.favnav .navigation ul.nav-child li a[class^="fa-"]:before,
.favnav .navigation ul.nav-child li a[class*=" fa-"]:before,
.favnav .navigation ul.nav-child li span.nav-header[class^="fa-"]:before,
.favnav .navigation ul.nav-child li span.nav-header[class*=" fa-"]:before,
.favnav .navigation ul.nav-child li a[class^="fa-"]:before,
.favnav .navigation ul.nav-child li a[class*=" fa-"]:before,
.favnav .navigation ul.nav-child li span.nav-header[class^="fa-"]:before,
.favnav .navigation ul.nav-child li span.nav-header[class*=" fa-"]:before,
.favnav .navigation ul.nav-child li a[class^="fa-"]:hover:before,
.favnav .navigation ul.nav-child li a[class*=" fa-"]:hover:before,
.favnav .navigation ul.nav-child li a[class^="fa-"]:focus:before,
.favnav .navigation ul.nav-child li a[class*=" fa-"]:focus:before,
.favnav .navigation ul.nav-child li.active a[class^="fa-"]:before,
.favnav .navigation ul.nav-child li.active a[class*=" fa-"]:before,
.favnav .navigation ul.nav-child li span.nav-header[class^="fa-"]:hover:before,
.favnav .navigation ul.nav-child li span.nav-header[class*=" fa-"]:hover:before,
.favnav .navigation ul.nav-child li span.nav-header[class^="fa-"]:focus:before,
.favnav .navigation ul.nav-child li span.nav-header[class*=" fa-"]:focus:before,
.favnav .navigation ul.nav-child li.active span.nav-header[class^="fa-"]:before,
.favnav .navigation ul.nav-child li.active span.nav-header[class*=" fa-"]:before {
color: #0099ff !important;
}

/*
/// vertical menus
*/

ul.nav.menu li span.nav-header {
color: #0099ff;
}
ul.menubasic li a:hover,
ul.menubasic li a:focus,
ul.menubasic li.current a,
ul.menubasic li.current ul a:hover,
ul.menubasic li.current ul a:focus,
ul.menubasic li span.nav-header:hover,
ul.menubasic li span.nav-header:focus {
color: #fff;
background-color: #0099ff;
}
ul.menuarrow li a:hover,
ul.menuarrow li a:focus,
ul.menuarrow li.current a,
ul.menuarrow li.current ul a:hover,
ul.menuarrow li.current ul a:focus,
ul.menuarrow li span.nav-header:hover,
ul.menuarrow li span.nav-header:focus {
color: #0099ff;
background-color: transparent;
}
ul.menuarrow li a:hover:before,
ul.menuarrow li a:focus:before,
ul.menuarrow li.current a:before,
ul.menuarrow li.current ul a:hover:before,
ul.menuarrow li.current ul a:focus:before,
ul.menuarrow li span.nav-header:hover:before,
ul.menuarrow li span.nav-header:focus:before {
color: #0099ff;
}
ul.menuside li a:hover,
ul.menuside li a:focus,
ul.menuside li.current a,
ul.menuside li.current ul a:hover,
ul.menuside li.current ul a:focus,
ul.menuside li span.nav-header:hover,
ul.menuside li span.nav-header:focus {
color: #0099ff;
border-left: 5px solid #0099ff;
background-color: transparent;
}
ul.menuline li a:hover,
ul.menuline li a:focus,
ul.menuline li.current a,
ul.menuline li.current ul a:hover,
ul.menuline li.current ul a:focus,
ul.menuline li span.nav-header:hover,
ul.menuline li span.nav-header:focus {
color: #444;
border-bottom: 1px solid #0099ff;
background-color: transparent;
}
ul.menuline li a:hover:before,
ul.menuline li a:focus:before,
ul.menuline li.current a:before,
ul.menuline li.current ul a:hover:before,
ul.menuline li.current ul a:focus:before,
ul.menuline li span.nav-header:hover:before,
ul.menuline li span.nav-header:focus:before {
color: #0099ff;
}
ul.menuline.menu-clear li a:hover,
ul.menuline.menu-clear li a:focus,
ul.menuline.menu-clear li span.nav-header:hover,
ul.menuline.menu-clear li span.nav-header:focus {
color: #fff;
border-bottom: 1px solid #0099ff;
}
ul.menuline.menu-dark li a:hover,
ul.menuline.menu-dark li a:focus,
ul.menuline.menu-dark li span.nav-header:hover,
ul.menuline.menu-dark li span.nav-header:focus {
color: #fff!important;
border-bottom: 1px solid #0099ff;
}

/*
/// horizontal menus
*/

ul.menuhorizontal li.active a,
ul.menuhorizontal li a:hover,
ul.menuhorizontal li a:focus,
ul.menuhorizontal li:hover a,
ul.menuhorizontal li:focus a,
ul.menuhorizontal li.active span.nav-header,
ul.menuhorizontal li span.nav-header:hover,
ul.menuhorizontal li span.nav-header:focus,
ul.menuhorizontal li:hover span.nav-header,
ul.menuhorizontal li:focus span.nav-header,
ul.menuhorizontal li span.nav-header:hover,
ul.menuhorizontal li span.nav-header:focus {
color: #0099ff;
background-color: transparent;
}
ul.menuhorizontal.menu-clear li a,
ul.menuhorizontal.menu-clear li span.nav-header {
color: #fff!important;
}
ul.menuhorizontal.menu-clear li.active a,
ul.menuhorizontal.menu-clear li a:hover,
ul.menuhorizontal.menu-clear li a:focus,
ul.menuhorizontal.menu-clear li:hover a,
ul.menuhorizontal.menu-clear li:focus a,
ul.menuhorizontal.menu-clear li.active span.nav-header,
ul.menuhorizontal.menu-clear li span.nav-header:hover,
ul.menuhorizontal.menu-clear li span.nav-header:focus,
ul.menuhorizontal.menu-clear li:hover span.nav-header,
ul.menuhorizontal.menu-clear li:focus span.nav-header,
ul.menuhorizontal.menu-clear li span.nav-header:hover,
ul.menuhorizontal.menu-clear li span.nav-header:focus {
color: #0099ff !important;
}
ul.menuhorizontal.menu-clear li a:before,
ul.menuhorizontal.menu-clear li span.nav-header:before {
color: #fff;
}
ul.menuhorizontal.menu-clear li.active a:before,
ul.menuhorizontal.menu-clear li a:hover:before,
ul.menuhorizontal.menu-clear li a:focus:before,
ul.menuhorizontal.menu-clear li:hover a:before,
ul.menuhorizontal.menu-clear li:focus a:before,
ul.menuhorizontal.menu-clear li.active span.nav-header:before,
ul.menuhorizontal.menu-clear li span.nav-header:hover:before,
ul.menuhorizontal.menu-clear li span.nav-header:focus:before,
ul.menuhorizontal.menu-clear li:hover span.nav-header:before,
ul.menuhorizontal.menu-clear li:focus span.nav-header:before,
ul.menuhorizontal.menu-clear li span.nav-header:hover:before,
ul.menuhorizontal.menu-clear li span.nav-header:focus:before {
color: #0099ff !important;
}
ul.menuhorizontal.menu-dark li a,
ul.menuhorizontal.menu-dark li span.nav-header {
color: #eee !important;
}
ul.menuhorizontal.menu-dark li.active a,
ul.menuhorizontal.menu-dark li a:hover,
ul.menuhorizontal.menu-dark li a:focus,
ul.menuhorizontal.menu-dark li:hover a,
ul.menuhorizontal.menu-dark li:focus a,
ul.menuhorizontal.menu-dark li.active span.nav-header,
ul.menuhorizontal.menu-dark li span.nav-header:hover,
ul.menuhorizontal.menu-dark li span.nav-header:focus,
ul.menuhorizontal.menu-dark li:hover span.nav-header,
ul.menuhorizontal.menu-dark li:focus span.nav-header,
ul.menuhorizontal.menu-dark li span.nav-header:hover,
ul.menuhorizontal.menu-dark li span.nav-header:focus {
color: #0099ff !important;
}
ul.menuhorizontal.menu-dark li a:before,
ul.menuhorizontal.menu-dark li span.nav-header:before {
color: #eee;
}
ul.menuhorizontal.menu-dark li.active a:before,
ul.menuhorizontal.menu-dark li a:hover:before,
ul.menuhorizontal.menu-dark li a:focus:before,
ul.menuhorizontal.menu-dark li:hover a:before,
ul.menuhorizontal.menu-dark li:focus a:before,
ul.menuhorizontal.menu-dark li.active span.nav-header:before,
ul.menuhorizontal.menu-dark li span.nav-header:hover:before,
ul.menuhorizontal.menu-dark li span.nav-header:focus:before,
ul.menuhorizontal.menu-dark li:hover span.nav-header:before,
ul.menuhorizontal.menu-dark li:focus span.nav-header:before,
ul.menuhorizontal.menu-dark li span.nav-header:hover:before,
ul.menuhorizontal.menu-dark li span.nav-header:focus:before {
color: #0099ff!important;
}
ul.menuhorizontal.pull-right li.active a,
ul.menuhorizontal.pull-right li a:hover,
ul.menuhorizontal.pull-right li a:focus,
ul.menuhorizontal.pull-right li:hover a,
ul.menuhorizontal.pull-right li:focus a,
ul.menuhorizontal.pull-right li.active span.nav-header,
ul.menuhorizontal.pull-right li span.nav-header:hover,
ul.menuhorizontal.pull-right li span.nav-header:focus,
ul.menuhorizontal.pull-right li:hover span.nav-header,
ul.menuhorizontal.pull-right li:focus span.nav-header,
ul.menuhorizontal.pull-right li span.nav-header:hover,
ul.menuhorizontal.pull-right li span.nav-header:focus {
color: #0099ff;
background-color: transparent;
}

voila ce que j'ai dans le style1.css.
je n'arrive pas à savoir la ligne a corriger

[jisse03]

Re : changer la couleur de la position nav dans le template favourite

Il n'y a pas de ligne à "corriger", le template étant cohérent dans sa gestion des couleurs. Et je le répète, ne pas modifier les classes CSS directement dans le fichier stylexx.css, mais les surcharger dans custom.css.

Pour changer la couleur de fond de la navigation, ce sont les déclarations background-color qui doivent être ajustées, et pour les textes, c'est color, tout simplement.

Ne pas confondre non plus, le nevmenu (pills bootstrap) et les menus verticaux (qui seront ans des modules).

L'inspecteur d'éléments de ton navigateur devrait te permettre, en fonction du résultat voulu, de cibler la (les) classe(s) CSS à surcharger.