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.
Salut, quelque chose a changé depuis ta suggestion. Je ne sais pas pourquoi, mais ça ne fonctionne pas non plus pour moi. La feuille de style CSS ressemble à ceci :
Les icônes et l’effet au survol ressemblent à ceci — quelle que soit la couleur que j’attribue aux icônes ou à l’effet au survol, cela ne semble pas s’appliquer :
Je poste ceci au cas où quelqu’un rencontrerait le même problème que moi. Selon la combinaison de couleurs que vous utilisez pour votre en-tête et vos icônes (mon en-tête est de couleur sombre), j’obtenais les bonnes combinaisons de couleurs pour mes icônes avec le code fourni :
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
Cependant, chaque fois que je cliquais sur les icônes de l’en-tête et que je sortais du survol, l’arrière-plan repassait à un blanc uni, ce qui ne fonctionnait pas car mon en-tête est sombre et mes icônes sont définies en blanc. Ainsi, en sortant du survol (après un clic), elles s’affichaient comme un rectangle blanc uni. Pour corriger cela, il m’a suffi de définir également l’état pour « a », et pas seulement « a:hover » comme dans les messages précédents (#93bb54 étant la même couleur que mon en-tête) :
.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;
}
J’ai ajouté quelques icônes personnalisées en SVG, mais je ne parviens pas à modifier leur couleur avec CSS. Elles restent toujours noires. Je peux changer l’opacité, la taille… mais jamais la couleur.
J’ai essayé d’utiliser les exemples ci-dessus, mais aucun n’a donné le résultat attendu.
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.
