Access category color in SCSS

Support

AI-generated summary

The discussion revolves around customizing the category list page in Discourse to add “pills” and remove the left border. The user, tjot, is trying to access the category color stored in a template file, but it’s not easily accessible from CSS. awesomerobot suggests moving the colors to CSS custom properties, making them accessible, but this is not currently implemented.

In the meantime, tjot has found a workaround by overriding the components/parent-category-row template. However, this approach may break if the template changes in the future.

An alternative solution is proposed by saquetim, who suggests using a CSS hack to achieve the desired effect without overriding templates. This approach applies the style directly to the h3 element of the title, which is a direct child of the td element with the inline style.

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
image614×319 40.7 KB

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/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

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

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.

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?

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:

5

@tjot,

It is possible to do a CSS hack with the border of the ::after pseudo-element to get the effect that you want.

.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

Note that I’ve applied the style directly to the h3 element of the title because it is a direct child from the td in which the inline style was applied. So if the template ever get rid of it you will have to tweak your CSS.

But you can skip overriding the components/parent-category-row as you wanted.