Zugriff auf die Kategorie-Farbe in SCSS

Unterstützung
1

Hi there,

this is my first try at creating a custom theme, so please be understanding.

I’m trying to customize the category list page, so it should look like this:

image

The idea is to remove the left border and to add “pills”.
SCSS for adding pills is quite easy:

.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;
    }
}

but I’m unable to access the category color that is available here: discourse/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
image

is there an easy way to access that color from CSS?

3 „Gefällt mir“
2

At the moment there’s not an easy way to do this.

What we could do is move these colors to CSS custom properties instead of setting them inline, which would make the colors easily accessible in any CSS/SCSS. I don’t know when we’ll be able to get to that, but I’ll keep it on my list of to-dos.

7 „Gefällt mir“
3

That would be awesome :slight_smile:
BTW is there any other way to achieve the view I want?
I’ve read that I can override templates for specific parts of Discourse, which template file I must override and how should I do that in my custom theme?

1 „Gefällt mir“
4

My current workaround is to override components/parent-category-row template.
I’m adding extra div element like this:

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

image
image1153×653 49 KB

I’d like to avoid overriding templates because they might change in the future.

@awesomerobot a build-in way to access category color would be awesome :slight_smile:

2 „Gefällt mir“
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.

3 „Gefällt mir“