Discourse Category Banners

Oh right, that’s a bit different… so you’d also want topics to have titles in the same banner style too?


I didn’t consider that, but actually that would look quite nice from a theming point of view. I’m looking at it from the end users point of view - they probably don’t know the difference between a category, topic, home page etc…

My goal is to create a consistent UX. I set the banner to be transparent and use the background as the banner itself… In future I’m looking to change the page background as a way to define the category instead.

Here’s what it currently looks like (and how I ideally want every page to look) :slight_smile:

Without a banner for every page though, it looks inconsistent with the main overflow moved up the page (actually off the screen which is how the default discourse theme does it which I don’t want).


I think it’s great that the category banners now render the content in HTML

Is there any way to display emoji’s there? In my case I added three important links: Anfänger - Cannabisanbauen.net Forum

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Cannabisanbauen.net Forum

1 Like

Is it possible to get this to fire on tag-pages too?


I’ve built a similar component for tag banners

Unfortunately tags don’t have descriptions or colors, so it’s less feature-rich at the moment.


@danyalamriben @syl Kris has made tag banners which we can explore using in the platform. Thanks Kris, this is awesome.


That is exactly the same I have thought.

It would be great to display de category logo at the left of the title and desciption.

And if there is a background image, to use it to render only de background of the banner instead of the default behaviour of redering the image in the bacground of the whole window.

The default category logo should be hidden by this component, as having both requires too much space, or at least give the option to hide it without tweaking the theme.


I started setting up a new forum using Discourse; I noticed that if you use the slug “meta” for a category, the category banner will not display. Not sure if that’s intentional or not, but renaming the slug allows me to show the banner again. Renaming it back to meta will then remove the banner, so this can be reproduced.


Came here to post the exact same issue! Paging @awesomerobot

Seems the issue is that this component adds an un-prefixed class with the category name to the category banner div. So if the category is meta it has classes: category-title-header meta. However the file lightbox.scss also has a rule targeting the class meta, and that’s clobbering the styling for the category banner if it also has that name.

I think a very simple fix though! Should be able to just make that selector in lightbox.scss more specifically targeted so it’s something like .lightbox .meta rather than just .meta



Following up on this again :slight_smile:

1 Like

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…


I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

1 Like

Hi, @awesomerobot

Just now added this Category Banners to my forum. looks great.

I have an issue, the category banners was not appearing for few categories.




Please suggest.

1 Like

Hmm, I think it must have something to do with the category description. Both of those don’t have a description set. If you look at the theme component (admin > customize > themes) is the Hide if no description box checked? You may need to uncheck that.


Thank you. Its working now.

1 Like

any progress with getting the category logo/icon added as a float:left div?
This would make it really useful component.
Also using the background image in place of the colour?

Hi @awesomerobot
It turned out to be quite simple to add the category logo if it is defined.
Just add it as a background image to the main div with appropriate css settings.
I have never understood how GitHub works so if you would like me to send you the modified files just @ me with your email address.

I’ve also reduce the padding and increased the width available for the description so that the banner takes minimum space - 75px with a title and one line description.
Logo is fixed to 75px height so a border appears if there are two or more lines of description. Margin for the description takes account of the width of logo to avoid overwriting it.
You also must hide the default dysfunctional Discourse banner which appears if a logo is defined :
.category-heading {display: none;}
as mentioned above. You might as well include this anyway as it does no harm.

4 additional lines of css, and two minimal functions plus one amended line in the Header html.


Hello, and thank you for this theme component!

I just tried installing it, following this tutorial (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesn’t make it work? The only explanation I see is that the “bootstrap” warning blocks it?

1 Like

By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the “Hide banners if category description not set” checkbox.

Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. We’ll look into what is going on.


Thank you for your answer. I have checked and confirm that each category on the forum has a description. The “Hide banners…” option is now unchecked just to make sure but nothing changes.

As you can see on the images, everything looks normal in the settings :

No idea if it could have anything to do with the issue but just informing you it’s a Discourse installation on a Yunohost instance.

1 Like