[RÉGLÉ] Changement de couleur du menu au clic de l'onglet

[bb83]

Bonjour,

Je suis en train de faire en local un site pour une association avec Joomla5 et Cassiopeia comme template. Mon menu est sur fond blanc avec les titres des différents onglets en noir et lorsque la souris survole un onglet, il se met en bordeaux avec l'écriture en blanc. Je n'arrive pas à trouver comment modifier mon template pour que que cela reste ainsi au clic (lorsque l'onglet est activé) ... Dès que la souris sort de la zone, tout le menu se remet en noir et blanc . Voici ce que j'ai mis dans mon fichier user.css pour le survol :

/* Pour avoir le menu écrit en noir */
.container-header .mod-menu {
color: black;
}

/* au survol le fond passe en Bordeaux et l'écriture en blanc */
.container-header .mod-menu a:hover {
background-color: #950935;
color: white
}

Mon niveau n'étant pas très élevé, je n'arrive toujours pas à faire ce que je voulais. Pourtant, je m'aide en permanence des tutos et tips sur Cassiopeia/J5 pour avancer (Web-eau.net, Marc Dechèvre...) . J'ai même acheté un livre sur Joomla4 (en attendant le J5). Auriez vous une idée ?
Merci d'avance pour votre aide

[ManuelVoileux]

Bonjour , mon niveau n'est pas très élevé non plus Je ne fais que du copié collé, avec l'aide les membres de la communauté. Merci à tous.

voici un site qui vous permet de générer un user.css avec les couleurs que vous souhaitez : https://colours.joomla.com/
voici ce que j'ai pour changer les couleur de menu.

.metismenu.mod-menu .metismenu-item > ul {
background-color: var(--main-background); /* background color of your dropdown menu */
border: 1px solid var(--border-color); /* border color of your dropdown menu */
}
.metismenu.mod-menu .metismenu-item > ul a {
color: var(--dark-color); /* text color of your dropdown menu links */
}
​

border-color, main-background, dark color et light color sont définies au début des couleurs. la couleur test permet d'identifier facilement l'élément modifié.

/*!
 * changer les couleurs de cassiopeia
*  http://colours.joomla.com/
 */
.perso{
--test: #ff0000;
--dark-color: #000055;
--light-color: #000099;
--main-background: #dbe5ef;
--border-color: #8aa4bf;
--card-header-background: #b7ccd2;
--card-background:#dbe5ef;
--selection-background: #ffcc70;
--text-light: #e0e5ef;
--text-dark : #001f3f;
--cassiopeia-color-primary: var(--dark-color);
--link-color: var(--dark-color);
--cassiopeia-color-hover: var(--light-color) !important;
--cassiopeia-color-gradient-end: var(--dark-color);
--cassiopeia-color-gradient-start: var(--light-color);
}​

[bb83]

Bonjour Manuel,
Merci beaucoup pour votre réponse et le lien pour le choix des couleurs qui est très intéressant !
En ce qui concerne le code, je viens de l'essayer mais cela ne fonctionne pas chez moi...
En fait, ce que je veux c'est que le menu concernant la page active reste de la même couleur que lorsque je le survole avec la souris (hover) et ceci tant que je ne change pas de page.



Actuellement , ma page active reste identique aux autres pages (noire sur fond gris) si je ne laisse pas la souris dessus



Je n'ai pas de menu déroulant que des onglets simples (niveau 1) . J'avais essayé de remplacer a:hover par a:active sans succès.

[Helloo]

Bonjour,

Par exemple avec ce code:

.metismenu-item.level-1.current.active {
  background-color: #950935;
  padding: 5px 15px 5px 15px;
  border-radius: 0px 0px 6px 6px;
}​

[bb83]

Bonjour Helloo,

Merci pour cette solution que j'ai testée et qui fonctionne très bien ! Seule bizarrerie .... la partie du menu colorée en bordeaux est différente au survol (Plans)

et au clic (Présentation) . En soi, cela peut être sympa de le garder ainsi car cela permet de faire la différence entre les deux ...


Une petite idée d'où cela peut provenir ??

[Helloo]

Comme je n’ai pas de lien au site pour contrôler la couleur exacte, j’ai choisi une couleur approximative, que tu peux adapter.

Tu prends simplement la même couleur que pour le « hover » et tu adaptes la couleur hex de mon code :

----> background-color: #950935;

et aussi adapter le padding

----> padding: 5px 15px 5px 15px;

[bb83]

Bonjour Helloo,

Oui , je suis désolée mais mon site est en local. Pour les couleurs, c'était exactement celle que j'ai utilisée. En fait ma remarque concernait la hauteur du rectangle bordeaux qui n'est pas identique au survol et au clic. Ce n'est pas le padding car j'avais mis le même au deux et je viens de recontrôler à l'instant. D'ailleurs, si j'enlève le padding aux deux (hover et active) dans mon user.css, j'ai toujours la même chose. Je vais donc les supprimer vu qu'il ne servent à rien en attendant d'avoir une solution.... Je ne suis pas à l'aise avec l'inspecteur (F12) : je n'arrive donc pas à trouver ce qui régit ces paramètres pour éventuellement les changer. Je vais encore chercher ....
Merci pour ton aide

[Helloo]

Bonjour bb83,

As-tu bien supprimé le cache du navigateur avant de voir les modifications ?

[bb83]

oui oui ... Bon ce n'est pas grave . Je vais laisser comme cela pour l'instant. Je reviendrai dessus si cela ne convient pas .....
Je passe le sujet en réglé et encore merci Helloo d'avoir trouvé une solution pour mon menu et merci également à Manuel
Bon Réveillon !!!