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

Dev
1

I feel someone must have done this previously but i can’t find it mentioned anywhere here. I felt we needed three sub-categories so i made that fix, but honestly its not worth it with the bugs caused to other plugins.

We don’t need the third layer anyway, we just need a way to break the categories list page up into sections so each grouping is clearly different from the others and users instantly know what it is. Obviously i’ve already colour coded them accordingly, but there is nothing to explain to users what each colour means.

I want to add a space between categories in the category list view, and put a word of text in it as a title. For example:

Projects
| category 1 - sub1
| category 2
| category 3 - sub1+2

Learning
| category 4 - sub1
| category 5

Local
| category 6 - sub1+2+3
| category 7

2 « J'aime »
2

You can select categories with their ids and inject your title texts before, e.g.:

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

Alternatively, you could use this new component, it comes with backend settings to add category sections:

4 « J'aime »
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

1 « J'aime »
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";
  }
}
1 « J'aime »