Wir werden unser Farbschema neu gestalten. Die Kopfzeile wird grün sein, mit einem weißen Logo in der Kopfzeile.
Ich habe Schwierigkeiten herauszufinden, wie man die Farben des Lupensymbols und des Hamburger-Menü-Icons in der Kopfzeile ändert. Derzeit sind sie grau, was auf einem grünen Hintergrund sehr schlecht aussehen würde. Die weißen Icons würden auch besser zum neuen Kopfzeilen-Logo passen.
Ich habe im Themen-Menü nachgeschaut und dort eine Option namens „Header primary" gefunden, deren Beschreibung besagt, dass sie Text und Icons in der Kopfzeile der Website ändert. Ich habe sie jedoch bereits auf Weiß gesetzt, und es hat sich nichts geändert. Gibt es eine andere Möglichkeit, die Farbe dieser beiden Icons zu ändern?
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.
Hey, seit deinem Vorschlag hat sich etwas geändert. Ich bin mir nicht sicher warum, aber bei mir funktioniert es auch nicht. Das CSS-Sheet sieht so aus:
Ich poste dies für den Fall, dass jemand auf dasselbe Problem stößt wie ich. Je nach der Kombination der Farben, die du für deine Kopfzeile und deine Symbole verwendest (meine Kopfzeile ist dunkel), habe ich mit dem von dir bereitgestellten Code die richtigen Farbkombinationen für meine Symbole erzielt:
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
Jedes Mal, wenn ich jedoch auf die Symbole in der Kopfzeile geklickt habe und den Mauszeiger wieder weg bewegt habe, kehrte der Hintergrund zu einem einfarbigen Weiß zurück, was bei meinem dunklen Header und den weißen Symbolen nicht funktionierte. Beim Wegbewegen des Mauszeigers (nach einem Klick) erschienen sie also als ein einfarbiges weißes Rechteck. Um das zu beheben, musste ich lediglich auch den Zustand für „a
Ich habe einige benutzerdefinierte SVG-Icons hinzugefügt, kann ihre Farbe aber mit CSS nicht ändern. Sie sind immer schwarz. Ich kann die Deckkraft, die Größe … ändern, aber nie die Farbe.
Ich habe die obigen Beispiele ausprobiert, aber keines hat das erwartete Ergebnis geliefert.
Solche sehr spezifischen CSS-Selektoren funktionieren zwar, werden aber selten verwendet, da es normalerweise nicht notwendig ist, so spezifisch zu sein:
svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
/* dein cooler CSS-Code hier */
}
In der Praxis sollte jedoch dieser einfache Selektor völlig ausreichen:
svg.d-icon-bolt{
/* dein cooler CSS-Code hier */
}
Ich habe die gleiche Situation wie Sentinelrv. Ich habe die Primärfarbe des Headers auf Weiß eingestellt und auch den empfohlenen benutzerdefinierten CSS-Code auf jedes meiner Themes angewendet, aber die Lupe und das Hamburger-Menü bleiben weiterhin grau.
Ich kann die Farben des Hamburger-/Balkenmenüs ebenfalls nicht ändern, das Such-/Find-Symbol hat sich geändert – ich habe alle oben genannten Tipps und mehr ausprobiert, indem ich Dinge im Webbrowser inspiziert habe, aber (da ich kein Webentwickler bin) bin ich gescheitert. Hat das jemand herausgefunden?
<header icons color>, <hamburger icons color>, <header icon hover color>, <hamburger icon hover color> = Hex, Farbname oder Theme-Farbvariablen. Sie können auch background-color angeben, wenn Sie die Icon-Hintergrundfarbe ändern möchten.
Hinweis: Wenn Sie den Hamburger-Dropdown-Modus anstelle der Seitenleiste verwenden, enthält der erste Ausschnitt für die Header-Icons auf der rechten Seite auch das Hamburger-Icon.
