Accéder à la couleur de catégorie en SCSS

Soutien
1

Bonjour,

c’est ma première tentative de création d’un thème personnalisé, alors merci de votre indulgence.

Je cherche à personnaliser la page de liste des catégories, afin qu’elle ressemble à ceci :

image
image614×319 40.7 KB

L’idée est de supprimer la bordure gauche et d’ajouter des « pilules ».
Le SCSS pour ajouter ces pilules est assez simple :

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

Mais je n’arrive pas à accéder à la couleur de la catégorie, disponible ici : discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

Existe-t-il un moyen simple d’accéder à cette couleur depuis le CSS ?

3 « J'aime »
2

Pour le moment, il n’existe pas de méthode simple pour le faire.

Ce que nous pourrions faire, c’est déplacer ces couleurs vers des propriétés CSS personnalisées plutôt que de les définir en ligne, ce qui rendrait les couleurs facilement accessibles dans n’importe quel CSS/SCSS. Je ne sais pas quand nous pourrons nous en occuper, mais je le garderai sur ma liste de tâches à faire.

7 « J'aime »
3

Ce serait génial :slight_smile:
Au fait, existe-t-il une autre méthode pour obtenir l’affichage que je souhaite ?
J’ai lu qu’il est possible de remplacer des modèles pour certaines parties de Discourse. Quel fichier de modèle dois-je remplacer et comment procéder dans mon thème personnalisé ?

1 « J'aime »
4

Ma solution de contournement actuelle consiste à remplacer le modèle components/parent-category-row.
J’ajoute un élément div supplémentaire comme ceci :

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

image
image1153×653 49 KB

Je souhaiterais éviter de remplacer les modèles, car ils pourraient changer à l’avenir.

@awesomerobot une méthode intégrée pour accéder à la couleur de la catégorie serait géniale :slight_smile:

2 « J'aime »
5

@tjot,

Il est possible de faire un hack CSS avec la bordure du pseudo-élément ::after pour obtenir l’effet que vous souhaitez.

.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

Notez que j’ai appliqué le style directement à l’élément h3 du titre car il est enfant direct du td auquel le style en ligne a été appliqué. Donc, si le modèle s’en débarrasse un jour, vous devrez ajuster votre CSS.

Mais vous pouvez ignorer la surcharge de components/parent-category-row comme vous le souhaitiez.

3 « J'aime »