Discourse Category Banners

It isn’t currently possible… but those seem like good reasonable requests… it will take some extra work because

  1. The Uncategorized description is stored differently, because it’s not a “real” category

  2. I’d have to add the ability to pull in a description from somewhere else for the Categories page, because it doesn’t have a description or anywhere to store one

I can look more closely at adding these options at some point (not sure when, unfortunately)… you’ll just have to keep an eye on this topic for updates.


My recommendation would be to turn off uncategorized and create a real category.

1 Like

What im aiming for is a banner on every page, not just categories. It looks rather strange from a design point of view to have it only appear on some screens. Just the title of the page would be enough - no need for a description if there isn’t one.

I guess the only way to do this would be to clone the component and set it up to run on all pages?

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.