[RÉGLÉ] changement couleur bouton menu

[darlingtonn]

Bonsoir,

J'écris ce premier post sur le forum car je cherche depuis plusieurs jours à travers mon nouveau site et internet comment changer la couleur d'un bouton... ça peut sembler trivial et pourtant je ne met pas la main sur le bout de code nécessaire.

J'ai recherché sur toutes les pages css de mon template la couleur qui correspondait:
#0088CC
0,136,204
rgba(0,136,204,0.5)
ou juste "blue"
etc mais rien nul part.

voici une capture d'écran de mes recherches jusqu'à ce que j'arrête : http://www.hostingpics.net/viewer.ph...8Sanstitre.png
Voilà le lien du site : http://testwebclub49.url.ph/

Auriez vous une idée pour résoudre le problème ou pallier le problème?

Merci d'avance,

Cordialement

[Rajoz]

Re : changement couleur bouton menu

Bonjour darlingtonn,

En regardant l'image de l'Inspecteur d'élément, à droite l'onglet est sur l'onglet Com****d. En allant sur l'onglet Style, il s'affiche pour le bouton de menu 'Accueil' :

bootstrap.css : 4103 
.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
    color: #ffffff;
    background-color: #0088cc;
}

La couleur de fond du bouton de menu 'Accueil' est donc définie dans bootstrap.css à la ligne 4103.

Bootstrap est le framework qui permet à Joomla! et à de très nombreux templates d'être "responsive" (de s'adapter à la dimension de l'écran). Tu as utilisé la classe Bootstrap nav-pills pour ton menu.

Le fichier bootstrap.css se trouve à /media/jui/css/bootstrap.css

Il ne faut pas modifier directement ce fichier car la modification pourrait être écrasée lors d'une prochaine mise à jour de Joomla!.

Pour faire la modification de couleur, il peut y avoir la possibilité dans ton template d'avoir un fichier de personnalisation du CSS (souvent nommé custom.css), sinon il faut ajouter ton code à la fin d'un des fichiers CSS de ton template.

Amicalement,
Rajoz

[darlingtonn]

Re : changement couleur bouton menu

Bonjour Rajoz,

Merci pour cette rapidité et cette efficacité! Effectivement en changeant cette ligne ça marche!
Si je ne souhaite pas mettre à jour Joomla! je peux laisser cette ligne de code tel quel?

Sinon je n'ai pas de custom.css mais le fichier template.css a la même forme. (exemple --> )
ul.pagenav li {
list-style:none outside none;
background-image: none;
margin:0;
padding:0;
}

Quel type de code dois-je rentrer à la fin d'un fichier? Est-ce le même que le bootstrap?
.nav-pills > .active > a:focus {
color: #ffffff;
background-color: #ff0000;
}

Bonne journée.

Amicalement,
Darlington

[lefabdu51]

Re : changement couleur bouton menu

Si je ne souhaite pas mettre à jour Joomla! je peux laisser cette ligne de code tel quel?

erreur fatale conduisant à un piratage du site non à jour.

.nav-pills > .active > a:focus {
color: #ffffff;
background-color: #ff0000;
}

ceci est à copier en bas du fichier template.css.

Si cela ne fonctionne pas transformer ces regles en :

.nav-pills > .active > a:focus {
color: #ffffff !important;
background-color: #ff0000 !important;
}

[darlingtonn]

Re : changement couleur bouton menu

Bonjour lefab,

Merci pour cette piqûre de rappel.
J'ai rentré ces lignes de codes :

/* modif perso pour bouton ---------------------------------*/
.nav-pills > .active > a:focus {
color: #ffffff !important;
background-color: #ff0000 !important;
}

sur chacune de mes pages css de mon template mais rien n'y fait :/
As-tu une idée?

Merci pour ton aide!

[Rajoz]

Re : changement couleur bouton menu

Bonjour darlingtonn,

Le code à copier à la fin de template.css est :

[COLOR=#3E3E3E]/* modif perso pour bouton ---------------------------------*/
[/COLOR].nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus
{
    color: #ffffff;
    background-color: #ff0000;
}

Amicalement,
Rajoz

[darlingtonn]

Re : changement couleur bouton menu

Ah c'est super merci beaucoup!!

Merci pour votre aide.

Bonne journée.

Amicalement,
Darlington