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

[Drew-ART (Drew)]

Siento que alguien ya debe haber hecho esto anteriormente, pero no puedo encontrarlo mencionado en ningún lugar aquí. Sentí que necesitábamos tres subcategorías, así que hice esa corrección, pero honestamente no vale la pena debido a los errores que causó en otros plugins.

De todos modos, no necesitamos la tercera capa; solo necesitamos una forma de dividir la página de la lista de categorías en secciones para que cada agrupación sea claramente diferente de las demás y los usuarios sepan instantáneamente qué es. Obviamente, ya las he codificado por colores en consecuencia, pero no hay nada que explique a los usuarios qué significa cada color.

Quiero agregar un espacio entre las categorías en la vista de la lista de categorías y colocar una palabra de texto en él como título. Por ejemplo:

Proyectos
| categoría 1 - sub1
| categoría 2
| categoría 3 - sub1+2

Aprendizaje
| categoría 4 - sub1
| categoría 5

Local
| categoría 6 - sub1+2+3
| categoría 7

[manuel (Manuel Kostka)]

Puedes seleccionar categorías con sus IDs e inyectar tus textos de título antes, por ejemplo:

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

Alternativamente, puedes usar este nuevo componente, que incluye configuraciones de backend para agregar secciones de categorías:

GitHub - discourse/discourse-minimal-category-boxes

[MattiaB (Mattia)]

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:

¿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:

[manuel (Manuel Kostka)]

@manuel

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

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