Nous allons rebrandir notre palette de couleurs. L’en-tête sera vert avec un logo d’en-tête blanc.
Je rencontre des difficultés pour savoir comment modifier les couleurs de la loupe et de l’icône du menu hamburger dans l’en-tête. Elles sont actuellement grises, ce qui donnera un aspect affreux sur un en-tête vert. Les icônes blanches correspondront également au nouveau logo de l’en-tête.
J’ai consulté le menu du thème et j’ai vu une option appelée « header primary », dont la description indique qu’elle modifie le texte et les icônes dans l’en-tête du site. Cependant, je l’ai déjà définie sur blanc et rien n’a changé. Existe-t-il une autre méthode pour modifier la couleur de ces deux icônes ?
The icons are a bit transparent, which might be throwing you off (that’s why they look grey instead of white when the header_primary color is set to white).
However, perhaps as we are now on one of the latest releases, now the home, search, and menu icons are greyed out. Can you explain how to make these icons white with opacity of 1? Did any of the selectors change?
Yes, these selectors are a little more specific now and we removed the opacity entirely in favor of using a solid color (there was a bug in Safari where SVG icons were clipped slightly because of the opacity).
You can remove anything you have related to opacity, and do this
I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.
I tried this
and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:
So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.
I’m posting this in case someone runs into the same issue as me, but depending on the combination of colors you are using for your header and your icons (my header is a dark color), I was getting the right color combinations for my icons with the code you provided:
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
However, whenever I clicked on the header icons and hovered out of them, the background reverted to a solid white color, which did not work as my header is dark and my icons are set to white. So on hovering out of them (after a click), they would show as a solid white rectangle). To fix this, all I had to do was also set the state for “a”, not just “a:hover” as in the above posts (#93bb54 being the same color as my header):
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}
I added some custom icons in SVG, but I can’t change their color using CSS. They are always black. I can change the opacity, size … but never the color.
I tried using the above examples, but none returned the expected result.
Ce genre de sélecteurs CSS très spécifiques devrait fonctionner, mais il est rarement utilisé car il n’est généralement pas nécessaire d’être aussi précis :
Je rencontre la même situation que Sentinelrv. J’ai réglé l’en-tête principal sur blanc et j’ai également appliqué le CSS personnalisé recommandé à chacun de mes thèmes, mais la loupe et le menu hamburger restent gris.
Moi aussi, je ne peux pas changer les couleurs du menu hamburger/barre, l’icône de recherche/trouver a changé - j’ai essayé tous les conseils susmentionnés et plus encore en inspectant les éléments dans le navigateur web mais (n’étant pas un développeur web) j’ai échoué. Quelqu’un a-t-il trouvé une solution ?
Pour les icônes d’en-tête sur le côté droit, dans le CSS commun d’un thème ou d’un composant de thème :
.d-header .d-header-icons .d-icon {
color: <couleur des icônes d'en-tête> !important;
&:hover {
color: <couleur au survol des icônes d'en-tête> !important;
}
}
Pour l’icône hamburger en mode menu latéral :
.d-header .header-sidebar-toggle button .d-icon {
color: <couleur de l'icône hamburger> !important;
&:hover {
color: <couleur au survol de l'icône hamburger> !important;
}
}
<couleur des icônes d'en-tête, <couleur de l'icône hamburger, <couleur au survol de l'icône d'en-tête, <couleur au survol de l'icône hamburger> = hexadécimal, nom de couleur ou variables de couleur du thème. Vous pouvez également spécifier background-color si vous souhaitez modifier la couleur d’arrière-plan de l’icône.
Remarque : Si vous utilisez le mode déroulant hamburger au lieu du menu latéral, le premier extrait pour les icônes d’en-tête du côté droit inclura également l’icône hamburger.
