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:
To add styles you can select the general class, as well as specific banners by category-id:
.category list .category-list-banner {
&.category-5 { [style a specific banner] }
&:after { [style the headings]}
}
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?
Thanks for the suggestion @lisandro_iaffar. Though this component is really just providing a lightweight solution that doesn’t change html templates. If you want to reference the sections you’d need to use an approach as offered by GitHub - discourse/discourse-minimal-category-boxes.
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 @nolo 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?
