In a discussion about organizing categories into titled sections on a Discourse forum, Drew-ART explains the need to visually group categories with section titles (like ‘Projects’, ‘Learning’, ‘Local’) rather than adding a third category layer, which causes plugin conflicts. manuel suggests using CSS to inject titles before categories via data-category-id, or recommends a plugin: discourse-category-group-boxes. MattiaB reports that the CSS method breaks layout in the sidebar and header dropdown after recent updates, sharing screenshots. In response, manuel advises targeting only the main outlet by refining the CSS selector — replacing body with #main-outlet .category-list — to avoid affecting sidebars and dropdowns. The thread highlights a common UX need for visual category grouping and offers both CSS and plugin-based solutions, with guidance on scoping styles to prevent layout issues.
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:
You just need to be more specific with your style declaration. The code snippet declares styles anywhere on the body element. To change that, inspect the element you want to adjust with your browser tools and replace body with a more specific declaration, e.g:
