Wie teile ich die Kategorien mit Titeln in Abschnitte auf?

[Drew-ART (Drew)]

Ich habe das Gefühl, dass dies bereits jemand zuvor getan hat, aber ich kann es hier nirgends erwähnt finden. Ich hatte das Gefühl, dass wir drei Unterkategorien benötigen, und habe diese Korrektur vorgenommen, aber ehrlich gesagt lohnt es sich nicht angesichts der Fehler, die sie bei anderen Plugins verursacht.

Wir brauchen die dritte Ebene ohnehin nicht; wir benötigen lediglich eine Möglichkeit, die Kategorien-Listenseite in Abschnitte zu unterteilen, sodass jede Gruppierung klar von den anderen unterscheidbar ist und Nutzer sofort erkennen, was es ist. Offensichtlich habe ich sie bereits entsprechend farbcodiert, aber es gibt nichts, was den Nutzern erklärt, was jede Farbe bedeutet.

Ich möchte im Kategorien-Listenansicht einen Abstand zwischen den Kategorien einfügen und dort ein Wort als Titel platzieren. Zum Beispiel:

Projekte
| Kategorie 1 – Unter1
| Kategorie 2
| Kategorie 3 – Unter1+2

Lernen
| Kategorie 4 – Unter1
| Kategorie 5

Lokal
| Kategorie 6 – Unter1+2+3
| Kategorie 7

[manuel (Manuel Kostka)]

Sie können Kategorien mit ihren IDs auswählen und Ihre Titeltexze davor einfügen, z. B.:

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

Alternativ können Sie diese neue Komponente verwenden. Sie verfügt über Backend-Einstellungen, um Kategoriensektionen hinzuzufügen:

GitHub - discourse/discourse-minimal-category-boxes

[MattiaB (Mattia)]

Ich habe dieselbe CSS-Bearbeitung auf meinem Discourse-Forum vorgenommen, aber mit den neuesten Updates, die die Seitenleiste hinzugefügt haben, ist es jetzt etwas durcheinander:

Wie kann ich diese Bearbeitung nur auf den Hauptbereich anwenden und nicht auf die Seitenleiste?
Danke!

EDIT: Das passiert auch im Header-Dropdown:

[manuel (Manuel Kostka)]

@manuel

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

Sie müssen mit Ihrer Stildeklaration nur spezifischer sein. Der Codeausschnitt deklariert Stile für beliebige Elemente im Body. Um das zu ändern, inspizieren Sie das Element, das Sie anpassen möchten, mit den Werkzeugen Ihres Browsers und ersetzen Sie body durch eine spezifischere Deklaration, z. B.:

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