Category List with Banners

This component adds optional banners to the default category page styles Categories Only and Categories With Featured Topics:

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:

Screenshot from 2021-08-21 15-41-36

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]}

For example you could color-code your categories:

Or add background images:

:warning: 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.

:+1: Credits: The component was inspired by the look of the Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?


Thank Nolo Very cool! Your component has improved our community

1 Like

Nolo, I found another problem with switching the forum style to night mode. If you can fix it, it will be perfect!

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


Nolo, thanks, that helped!


Hello I love to see what you have managed to create. But it is allowed to give credit to me also and not only ripp me off and use some of my work……

Happy you l ike the component! Not sure why you accuse me for ripping you off by using your work though…?

Doing this component was inspired by this topic:

I had referred the op to your solution, but then got interested how to solve this without hard-coding the templates and by de-constructing values from a settings list within scss. So the component code is essentially all about this solution:

But in any case: if you feel I used some of your work and I missed to give credits, kindly let me know and I’ll update the first post :ok_hand:

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.

1 Like

@ 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?

1 Like

Yeah sure, you can style the banners using these classes:

If you want to overwrite existing declarations on the general class you’d need to use the !important property. E.g. for the styles you mentioned:

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;

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.

1 Like