Wie kann ich die Farbe des Kategorie-Icons auf eine einzige Farbe ändern?

Entwickler
1

Ich möchte nur, dass die Symbolfarbe der Unterkategorie sichtbar ist.
Die Hauptkategorie sollte keine Symbolfarbe haben.
Ich möchte nicht, dass es zweifarbig aussieht.

Wie kann ich das machen?

[image]

ert
ert905×371 27.8 KB

2

Ich bin mir nicht sicher, ob es dafür eine Einstellung gibt, aber ich kann dir zeigen, wie ich versuchen würde, es mit CSS zu ändern:

  1. Klicke mit der rechten Maustaste auf das Symbol und wähle „Untersuchen“.

    image
    image494×447 51.6 KB

  2. Dies öffnet die Browser-Entwicklertools. (Hinweis: Ich benutze hier Chrome, aber die meisten Browser können dasselbe tun!) Es gibt viel zu sehen, aber wir werden uns auf zwei Hauptbereiche konzentrieren: Elemente, die die Teile der Seite in einer verschachtelten Hierarchie zeigen, und Stile, die zeigen, welches CSS das ausgewählte Element beeinflusst.

    image
    image786×804 178 KB

  3. Mit Rechtsklick → Untersuchen kommen wir normalerweise ziemlich nah an das Element, das wir bearbeiten wollen, aber oft muss man ein wenig graben. In diesem Fall wurde ein <span>-Element ausgewählt, aber es sieht so aus, als ob das für das Symbol verantwortliche Element darin enthalten ist: ein ::before-Element.

    image
    image766×644 113 KB

  4. Eine Möglichkeit, das richtige Element zu finden, besteht darin, die Seite zu beobachten, während du mit der Maus über die Elemente im Elementefeld fährst. Als ich mit der Maus über ::before fuhr, wurde nur das Symbol hervorgehoben:
    image

  5. Im Stilbereich sehen wir, dass eine Deklaration den Hintergrund auf Rot setzt, aber sie wird durch eine andere Regel überschrieben, die ihn auf einen 2-farbigen Hintergrund setzt. (Hinweis: Du kannst jede CSS-Deklaration im Stilbereich bearbeiten, um zu experimentieren. Alle Änderungen sind vorübergehend und werden nach dem Aktualisieren der Seite rückgängig gemacht. Du kannst auch einzelne Deklarationen ein- und ausschalten, um ihre Auswirkungen zu sehen.)

    image
    image768×282 80.4 KB

  6. Wir können eine neue Regel erstellen, um sie erneut zu überschreiben, indem wir den Selektorteil der obersten Regel und die ursprüngliche Hintergrunddeklaration der untersten Regel kopieren.

    image
    image1139×504 106 KB

  7. Diese neue Regel würde in deinem benutzerdefinierten/Theme-CSS stehen und, wenn alles richtig funktioniert, sollten die Symbole einfarbig sein und die Unterkategorien darstellen!

.badge-category__wrapper .badge-category.--has-parent:before {
  background: var(--category-badge-color);
}
5 „Gefällt mir“
3

Vielen Dank für die detaillierte Erklärung

1 „Gefällt mir“
4

@Bryce_Huhtala Desktop hat funktioniert

Auf Mobilgeräten hat es nicht funktioniert

Welchen Code soll ich für Mobilgeräte eingeben?

5

Hmm, das ist seltsam. Wenn ich die mobile Ansicht auf meinem Computer verwende, werden dieselben CSS-Regeln angezeigt, daher bin ich mir nicht sicher, warum sie unterschiedlich dargestellt werden sollten. Das Einzige, woran ich denken kann, ist, sicherzustellen, dass der neue Code im Abschnitt Common.scss enthalten ist, damit er für beide verwendet wird.

2 „Gefällt mir“
6

Es ist alles meine Schuld

Es funktioniert einwandfrei, keine Probleme

7

Keine Sorge, freut mich, dass es funktioniert! :slight_smile:

2 „Gefällt mir“
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.