¿Cómo dividir las categorías en secciones con títulos?

Desarrollador
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 Me gusta
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 Me gusta
3

He usado la misma edición CSS en mi foro de Discourse, pero con las últimas actualizaciones que añaden la barra lateral, ahora está un poco desordenada:

image
image823×1257 54 KB

¿Cómo puedo aplicar esta edición solo en la salida principal y no en la barra lateral?
¡Gracias!

EDIT: Esto también sucede en el menú desplegable del encabezado:

image
image418×801 20.8 KB

1 me gusta
4

Solo necesitas ser más específico con tu declaración de estilo. El fragmento de código declara estilos en cualquier parte del elemento body. Para cambiar eso, inspecciona el elemento que deseas ajustar con las herramientas de tu navegador y reemplaza body con una declaración más específica, por ejemplo:

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