The discussion centers on the Category List with Banners theme component, created by manuel, which allows administrators to add customizable banners to the default category page styles. The component supports color-coded categories, background images, and specific styling via CSS classes, drawing inspiration from the Cfx.re Community and an original solution by godgutten.
Early in the thread, tot and tot provided positive feedback and reported an issue with night mode compatibility. manuel clarified that hex colors remain static across themes and suggested using CSS custom properties (e.g., var(--secondary-high)) for dynamic dark mode support, a solution tot confirmed worked. A brief conflict arose when godgutten accused manuel of plagiarism. manuel explained the component was inspired by godgutten’s work but implemented differently using settings lists, offering to add credits if needed. godgutten accepted the explanation and requested attribution.
Users Cozdabuch and lisandro_iaffar requested features for left-aligned text, resized headers, and URL-referenced sections for navigation. manuel provided CSS overrides using !important for styling adjustments but noted that URL referencing is outside the component’s lightweight scope, suggesting discourse-category-group-boxes as an alternative. Arkshine later provided a concrete CSS example for adding background images.
The discussion concluded with maintenance updates. Orioni reported a deprecation warning regarding the .hbs file extension. manuel initially tagged the component as deprecated, citing its hacky nature, but subsequently merged a community PR to migrate the code to .gjs. Despite the fix, manuel kept the component tagged as unmaintained pending further style polish.
You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
That looks like expected behavior.. The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.
If you actually don’t want a background color, you should state none or transparent.
If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in
Yes please would love to get at least some kind of creds. But it’s up to you tho. Other than that it looks good and I’m going to recommend this theme component in my post since this makes it easier for new users.
@ Nolo
Is there a way in the TC, or with CSS in the theme to left align the Heading text, just like your second example).
also is there a way (if not using a banner image) to resize the header to just the thickness of a line of text.
And if so, can you resize the text so it’s not quite as large?
That’s because the styles are actually declared on the specific banners. Guess I could improve that on the component, but for now you’d need to overwrite with important.
Thank you so much for this component!! I’m developing a political forum, and being able to apply this kind of separation is critical.
While it’s already a huge improvement for my forum, It would be a world of a difference if the headers could be referenced by URL, because that would allow to create buttons at the top of the forum from which the user could be able to easily navigate in the same page. That would be extremely agile functionality if the forum (hopefully) gets a lot larger. Is it currently possible?
I’m excited to try this as I have created a bit too many categories and being able o organize them in groups will be a big help.
I will know when I try, this too then could be a way to leave old, lesser used categories off the front page, right? They would still be available via the new sidebar.
Yes, sure Actually I almost always make selections of categories on different page elements (sidebar, header, navbar, category page,..) It’s like the site structure of a website. It’s important that it’s well organized, but it doesn’t need to determine your ui presentation.
Hello @manuel I would like to know if this wonderful component still works after the speech updates, I installed it and it doesn’t work for me, thanks advanced
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?
