Stiamo per rinnovare la nostra palette di colori. L’intestazione diventerà verde con un logo bianco.
Ho difficoltà a capire come cambiare i colori della lente d’ingrandimento e dell’icona del menu hamburger nell’intestazione. Attualmente sono grigie, il che risulterebbe pessimo su uno sfondo verde. Le icone bianche si abbinerebbero anche al nuovo logo dell’intestazione.
Ho controllato nel menu del tema e ho visto un’opzione chiamata “header primary”, che nella descrizione indica che modifica testo e icone nell’intestazione del sito. Tuttavia, l’ho già impostata su bianco e non è cambiato nulla. Esiste un altro modo per cambiare il colore di queste due icone?
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.
Pubblico questo nel caso in cui qualcuno incontri lo stesso problema che ho incontrato io. A seconda della combinazione di colori che stai utilizzando per l’intestazione e le tue icone (la mia intestazione è di un colore scuro), con il codice che hai fornito ottenevo le combinazioni di colori giuste per le mie icone:
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
Tuttavia, ogni volta che cliccavo sulle icone dell’intestazione e uscivo dall’effetto hover, lo sfondo tornava a un bianco solido, il che non funzionava poiché la mia intestazione è scura e le mie icone sono impostate su bianco. Quindi, uscendo dall’effetto hover (dopo un clic), apparivano come un rettangolo bianco solido. Per risolvere il problema, ho dovuto impostare anche lo stato per “a”, non solo per “a:hover” come nei post precedenti (#93bb54 è lo stesso colore della mia intestazione):
.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;
}
Ho aggiunto alcune icone personalizzate in SVG, ma non riesco a cambiarne il colore tramite CSS. Rimangono sempre nere. Posso modificare l’opacità, le dimensioni… ma mai il colore.
Ho provato a usare gli esempi sopra riportati, ma nessuno ha restituito il risultato atteso.
Ho la stessa situazione di Sentinelrv. Ho impostato header_primary su bianco e ho anche applicato il CSS personalizzato consigliato a ciascuno dei miei temi, ma la lente d’ingrandimento e il menu hamburger rimangono ancora grigi.
Anche io non riesco a cambiare i colori del menu hamburger/barra, l’icona di ricerca/trova è cambiata - ho provato tutti i suggerimenti menzionati e altro ancora ispezionando gli elementi nel browser web ma (non essendo uno sviluppatore web) ho fallito. Qualcuno ha capito come fare?
<colore icone intestazione>, <colore icone hamburger>, <colore hover icona intestazione>, <colore hover icona hamburger> = esadecimale, nome colore o variabili colore del tema. Puoi anche specificare background-color se desideri cambiare il colore di sfondo dell’icona.
Nota: se stai utilizzando la modalità a discesa hamburger anziché quella laterale, il primo snippet per le icone dell’intestazione sul lato destro includerà anche l’icona hamburger.
