Comment cibler les sujets non résolus avec CSS ?

[dandv (Dan Dascalescu)]

Quels seraient les sélecteurs CSS pour modifier le style des sujets non résolus ?

[Canapin (Coin-coin le Canapin)]

Salut Dan

Sur une liste de sujets, ce serait ceci :

.topic-list-item:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Sur une page de sujet, il n’y a pas de classe spécifique à cibler.

[dandv (Dan Dascalescu)]

Merci, ça a fonctionné !

Une mise en garde, similaire à ce problème, est que la recherche de l’absence de la classe status-solved signifie que les sujets des catégories qui n’ont pas la fonction “Résolu” activée seront également mis en évidence. Dans notre cas, j’ai ajouté une deuxième classe au sélecteur pour cibler uniquement la catégorie de support :

/* Mettre en évidence les sujets non résolus */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Existe-t-il une solution plus générale, par exemple si plus de catégories “Résolu” existent, plutôt que de répéter le sélecteur ?

[Lilly (Lillian Louis)]

J’ai essayé de trouver une condition générique pour n’importe quelle catégorie avec “résolu” activé, mais je n’ai pas pu. Cependant, vous pouvez combiner toutes les catégories pertinentes en un seul extrait de code :

 /* Mettre en surbrillance les sujets non résolus */

.topic-list-item.category-support,
.topic-list-item.category-another_category,
.topic-list-item.category-yet_another_category:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

ou l’on pourrait créer un composant de thème avec un réglage pour ajouter les catégories que vous souhaitez appliquer. Je soupçonne qu’il existe un moyen de cibler les catégories avec “résolu” activé, mais je n’arrive pas à le trouver.

[Canapin (Coin-coin le Canapin)]

Je ne suis pas sûr que nous puissions déterminer quels sujets appartiennent à une catégorie « résoluble » dans la liste des sujets.

Si vous n’allez pas modifier le paramètre de catégorie chaque semaine, vous pouvez modifier le code que vous et @Lilly avez écrit, mais ajouter une boucle et le rendre plus facile à lire et à maintenir. Il utilisera toujours les classes de catégorie.

Vous pouvez réutiliser la solution fournie ici pour cette intention :

How to enable reactions only for certain categories?

There is no such feature. A quick way to do it would be to hide the reactions selector with CSS, such as: .category-general-resources .discourse-reactions-picker { display: none; } If you want to iterate through multiple categories and make it easier to maintain, you can use a SCSS loop like this: $categories: 'general', 'site-feedback', 'staff'; @each $category in $categories { .category-#{$category} .discourse-reactions-picker { display: none; } } The category class is visible…

[Don]

Bonjour

J’ai créé un composant de thème pour ajouter la classe .solvable-topic aux sujets résolubles dans la liste des sujets.

GitHub - VaperinaDEV/add-solvable-topic-class: This theme component adds a class to topic list if...

Après avoir installé ce composant de thème, vous pouvez ajouter un simple CSS pour y parvenir.

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}