Zugriff auf die Kategorie-Farbe in SCSS

Unterstützung
1

Hallo,

das ist mein erster Versuch, ein benutzerdefiniertes Theme zu erstellen. Bitte habe also etwas Verständnis.

Ich möchte die Kategorie-Listenseite anpassen, sodass sie so aussieht:

image
image614×319 40.7 KB

Die Idee ist, den linken Rand zu entfernen und „Pillen" hinzuzufügen.

SCSS für das Hinzufügen der Pillen ist ziemlich einfach:

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    &::after {
        content: "";
        width: 20px;
        height: 80%;
        position: absolute;
        background-color: red;
        border-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
}

Aber ich kann nicht auf die Kategorienfarbe zugreifen, die hier verfügbar ist: discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

Gibt es eine einfache Möglichkeit, diese Farbe per CSS abzurufen?

2

Im Moment gibt es keine einfache Möglichkeit, dies zu tun.

Was wir tun könnten, ist, diese Farben in benutzerdefinierte CSS-Eigenschaften zu verschieben, anstatt sie inline zu setzen. Dadurch wären die Farben in jedem CSS/SCSS leicht zugänglich. Ich weiß nicht, wann wir das umsetzen können, aber ich werde es auf meine To-Do-Liste setzen.

3

Das wäre großartig :slight_smile:
Übrigens, gibt es noch eine andere Möglichkeit, die gewünschte Ansicht zu erreichen?
Ich habe gelesen, dass man Vorlagen für bestimmte Bereiche von Discourse überschreiben kann. Welche Vorlagendatei muss ich überschreiben und wie gehe ich in meinem benutzerdefinierten Theme vor?

4

Mein aktueller Workaround besteht darin, die Vorlage components/parent-category-row zu überschreiben.
Ich füge ein zusätzliches div-Element wie folgt hinzu:

{{#unless noCategoryStyle}}
<div class="pill" style="background-color:#{{category.color}}"></div>
{{/unless}}

image
image1153×653 49 KB

Ich möchte jedoch vermeiden, Vorlagen zu überschreiben, da sie sich in Zukunft ändern könnten.

@awesomerobot Eine eingebaute Möglichkeit, auf die Kategorienfarbe zuzugreifen, wäre toll :slight_smile:

5

@tjot,

Es ist möglich, einen CSS-Hack mit dem Rand des ::after-Pseudo-Elements durchzuführen, um den gewünschten Effekt zu erzielen.

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    > h3:first-child {
        border-width: 0;
        border-style: solid;
        border-color: inherit;

        &::after {
            content: "";
            width: 0px;
            height: 70%;
            position: absolute;
            border-radius: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: inherit;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }
    }
}

image
image1080×738 130 KB

Beachten Sie, dass ich den Stil direkt auf das h3-Element des Titels angewendet habe, da es ein direktes Kind des td ist, auf das der Inline-Stil angewendet wurde. Wenn die Vorlage dies jemals entfernt, müssen Sie Ihr CSS anpassen.

Aber Sie können das Überschreiben von components/parent-category-row überspringen, wie Sie es wollten.