Come dividere le categorie in sezioni con titoli?

Sviluppatore
1

Sento che qualcuno abbia già fatto questo in passato, ma non riesco a trovarlo menzionato da nessuna parte qui. Ho ritenuto necessarie tre sottocategorie e ho apportato quella correzione, ma onestamente non ne vale la pena a causa dei bug che ha causato ad altri plugin.

In ogni caso, non abbiamo bisogno del terzo livello; ci serve solo un modo per suddividere la pagina dell’elenco delle categorie in sezioni, in modo che ogni gruppo sia chiaramente distinto dagli altri e gli utenti sappiano immediatamente di cosa si tratta. Ovviamente le ho già codificate a colori di conseguenza, ma non c’è nulla che spieghi agli utenti il significato di ciascun colore.

Voglio aggiungere uno spazio tra le categorie nella vista dell’elenco e inserire una parola di testo come titolo. Ad esempio:

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

Apprendimento
| categoria 4 - sub1
| categoria 5

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

2 Mi Piace
2

Puoi selezionare le categorie con i loro ID e inserire i tuoi titoli prima, ad esempio:

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

In alternativa, puoi utilizzare questo nuovo componente, che include impostazioni backend per aggiungere sezioni di categoria:

4 Mi Piace
3

Ho usato la stessa modifica CSS sul mio forum Discourse, ma con gli ultimi aggiornamenti che hanno aggiunto la barra laterale ora è un po’ rovinato:

image
image823×1257 54 KB

Come posso applicare questa modifica solo all’uscita principale e non alla barra laterale?
Grazie!

EDIT: Questo succede anche nel menu a discesa dell’intestazione:

image
image418×801 20.8 KB

1 Mi Piace
4

Devi solo essere più specifico con la tua dichiarazione di stile. Lo snippet di codice dichiara stili ovunque nell’elemento body. Per cambiarlo, ispeziona l’elemento che vuoi modificare con gli strumenti del tuo browser e sostituisci body con una dichiarazione più specifica, ad esempio:

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