Como dividir as categorias em seções com títulos?

Dev
1

Sinto que alguém já deve ter feito isso anteriormente, mas não consigo encontrar nenhuma menção disso aqui. Achei que precisávamos de três subcategorias, então fiz essa correção, mas, honestamente, não vale a pena devido aos bugs que isso causou em outros plugins.

De qualquer forma, não precisamos da terceira camada; só precisamos de uma maneira de dividir a página de lista de categorias em seções, para que cada grupo seja claramente distinto dos outros e os usuários saibam imediatamente do que se trata. Obviamente, já apliquei codificação de cores correspondente, mas não há nada que explique aos usuários o que cada cor significa.

Quero adicionar um espaço entre as categorias na visualização da lista de categorias e inserir um texto como título nesse espaço. Por exemplo:

Projetos
| categoria 1 - sub1
| categoria 2
| categoria 3 - sub1+2

Aprendizado
| categoria 4 - sub1
| categoria 5

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

2

Você pode selecionar categorias com seus IDs e inserir seus textos de título antes, por exemplo:

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

Alternativamente, você pode usar este novo componente, que vem com configurações de backend para adicionar seções de categoria:

3

Usei a mesma edição de CSS no meu fórum Discourse, mas com as últimas atualizações que adicionaram a barra lateral, agora está um pouco bagunçado:

image
image823×1257 54 KB

Como posso aplicar esta edição apenas na área principal e não na barra lateral?
Obrigado!

EDIT: Isso também acontece no menu suspenso do cabeçalho:

image
image418×801 20.8 KB

4

Você só precisa ser mais específico com sua declaração de estilo. O trecho de código declara estilos em qualquer lugar no elemento body. Para mudar isso, inspecione o elemento que você quer ajustar com as ferramentas do seu navegador e substitua body por uma declaração mais específica, por exemplo:

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