Comment diviser les catégories en sections avec des titres ?

Dev
1

Je pense que quelqu’un a déjà fait cela auparavant, mais je ne trouve aucune mention à ce sujet ici. J’estimais que nous avions besoin de trois sous-catégories, alors j’ai apporté cette correction, mais honnêtement, cela ne vaut pas la peine étant donné les bugs provoqués chez d’autres plugins.

De toute façon, nous n’avons pas besoin de cette troisième couche ; il nous suffit de pouvoir diviser la page de liste des catégories en sections afin que chaque groupe soit clairement distinct des autres et que les utilisateurs comprennent immédiatement de quoi il s’agit. Évidemment, j’ai déjà appliqué un code couleur correspondant, mais rien n’explique aux utilisateurs la signification de chaque couleur.

Je souhaite ajouter un espace entre les catégories dans la vue de la liste des catégories et y insérer un mot ou un texte servant de titre. Par exemple :

Projets
| catégorie 1 - sous1
| catégorie 2
| catégorie 3 - sous1+2

Apprentissage
| catégorie 4 - sous1
| catégorie 5

Local
| catégorie 6 - sous1+2+3
| catégorie 7

2

Vous pouvez sélectionner des catégories avec leurs identifiants et insérer vos titres au préalable, par exemple :

body [data-category-id="1"]:before {
    content: "Projets";
}

Sinon, vous pouvez utiliser ce nouveau composant, qui inclut des paramètres backend pour ajouter des sections de catégories :

3

J’ai appliqué la même modification CSS sur mon forum Discourse, mais avec les dernières mises à jour qui ont ajouté la barre latérale, c’est maintenant un peu gâché :

image
image823×1257 54 KB

Comment puis-je appliquer cette modification uniquement sur le flux principal et non sur la barre latérale ?
Merci !

EDIT : Cela se produit également dans le menu déroulant de l’en-tête :

image
image418×801 20.8 KB

4

Il vous suffit d’être plus spécifique avec votre déclaration de style. L’extrait de code déclare des styles n’importe où sur l’élément body. Pour changer cela, inspectez l’élément que vous souhaitez ajuster avec les outils de votre navigateur et remplacez body par une déclaration plus spécifique, par exemple :

#main-outlet .category-list {
  [data-category-id="1"]:before {
     content: "Projects";
  }
}