Accedi al colore della categoria in SCSS

Supporto
1

Ciao,

questo è il mio primo tentativo nel creare un tema personalizzato, quindi vi prego di essere comprensivi.

Sto cercando di personalizzare la pagina dell’elenco delle categorie, in modo che appaia così:

image
image614×319 40.7 KB

L’idea è rimuovere il bordo sinistro e aggiungere dei “pillole”.
Il codice SCSS per aggiungere le pillole è abbastanza semplice:

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

ma non riesco ad accedere al colore della categoria disponibile qui: https://github.com/discourse/discourse/blob/1472e07aae5bfdfb6fd9abfe89beb186c751f514/app/views/categories/index.html.erb#L13

image
image610×176 10.2 KB

Esiste un modo semplice per accedere a quel colore tramite CSS?

2

Al momento non esiste un modo semplice per farlo.

Potremmo spostare questi colori in proprietà CSS personalizzate invece di impostarli inline, il che renderebbe i colori facilmente accessibili in qualsiasi CSS/SCSS. Non so quando riusciremo a occuparcene, ma lo terrò nella mia lista di cose da fare.

3

Sarebbe fantastico :slight_smile:
A proposito, c’è un altro modo per ottenere la visualizzazione che desidero?
Ho letto che è possibile sovrascrivere i template per parti specifiche di Discourse. Quale file di template devo sovrascrivere e come posso farlo nel mio tema personalizzato?

4

La mia soluzione temporanea attuale è sovrascrivere il template components/parent-category-row. Sto aggiungendo un elemento div extra in questo modo:

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

image
image1153×653 49 KB

Vorrei evitare di sovrascrivere i template perché potrebbero cambiare in futuro.

@awesomerobot un modo integrato per accedere al colore della categoria sarebbe fantastico :slight_smile:

5

@tjot,

È possibile fare un CSS hack con il bordo dello pseudo-elemento ::after per ottenere l’effetto desiderato.

.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

Nota che ho applicato lo stile direttamente all’elemento h3 del titolo perché è un figlio diretto del td a cui è stato applicato lo stile inline. Quindi, se il template dovesse eliminarlo, dovrai modificare il tuo CSS.

Ma puoi evitare di sovrascrivere components/parent-category-row come desideravi.