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

**URL:** https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560
**Category:** Development
**Tags:** css
**Created:** [5. April 2024 um 09:47 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560 "2024-04-05T09:47:13Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Ahmed26](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmed26/32/347069_2.png) [@Ahmed26](https://meta.discourse.org/u/Ahmed26)
#### Post date: [5. April 2024 um 09:47 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/1 "2024-04-05T09:47:13Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/b/1/c/b1c5842fa66c748ccd49ad111f0f34c5fa455328.png)

---

<div class="post-metadata">

### Author: ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [5. April 2024 um 13:22 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/2 "2024-04-05T13:22:20Z")

</div>

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“.  

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.  

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.  

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](https://global.discourse-cdn.com/meta/original/4X/5/0/0/500039e60b32eb0e0b80e64920a280eb4fcff2db.png)

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.)_  

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.  

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!

```css
.badge-category__wrapper .badge-category.--has-parent:before {
  background: var(--category-badge-color);
}

```

---

<div class="post-metadata">

### Author: ![Ahmed26](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmed26/32/347069_2.png) [@Ahmed26](https://meta.discourse.org/u/Ahmed26)
#### Post date: [5. April 2024 um 13:30 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/3 "2024-04-05T13:30:19Z")

</div>

Vielen Dank für die detaillierte Erklärung

---

<div class="post-metadata">

### Author: ![Ahmed26](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmed26/32/347069_2.png) [@Ahmed26](https://meta.discourse.org/u/Ahmed26)
#### Post date: [5. April 2024 um 13:38 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/4 "2024-04-05T13:38:26Z")

</div>

@Bryce_Huhtala Desktop hat funktioniert

Auf Mobilgeräten hat es nicht funktioniert

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

---

<div class="post-metadata">

### Author: ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [5. April 2024 um 13:53 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/5 "2024-04-05T13:53:16Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Ahmed26](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmed26/32/347069_2.png) [@Ahmed26](https://meta.discourse.org/u/Ahmed26)
#### Post date: [5. April 2024 um 14:11 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/6 "2024-04-05T14:11:40Z")

</div>

Es ist alles meine Schuld

Es funktioniert einwandfrei, keine Probleme

---

<div class="post-metadata">

### Author: ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [5. April 2024 um 14:45 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/7 "2024-04-05T14:45:38Z")

</div>

Keine Sorge, freut mich, dass es funktioniert! 🙂

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [5. Mai 2024 um 14:46 UTC](https://meta.discourse.org/t/how-can-i-make-the-category-icon-color-single-color/302560/8 "2024-05-05T14:46:23Z")

</div>

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