Discourse Category Banners

@awesomerobot , I hope you are okay with me sharing this here…

I’ve created a fork of this discourse-category-banners theme called


You can preview it here


It pretty much does the same thing but with some modifications:

  • The category banner box is displayed in-line above the main heading instead of full width at the top. This allows for display a banner theme at the top, for example the discourse-versatile-banner.

  • The category banner box is displayed in the same style as the native discourse subcategory boxes, which are a core component of discourse. These subcategory boxes are a display option in the discourse category settings Show subcategory list above topics in this category . This option displays the subcategory category name and description as a row or box above the topic list, using the category background colour as the left border.

  • If the category is a subcategory, the category name is displayed as breadcrumb as follows - Parent category name: Subcategory name

Demo screen shot of theme banner box for the category, above the native subcategory boxes.

Screen shot of the subcategory, showing the breadcrumb reference to the parent category.

This is my first attempt at a theme modification. I hope this is helpful?


I have refactored this adaption as a separate component - with many additional features including using the category logo image and background image in the header. This new component effectively replaces the standard Discourse category header, unlike the category banners, hence making it a new component. Please see:


Can you share a code with me? How can I add logo of the category as you did it?

1 Like

@awesomerobot, how can I add logo of the category to the top line of the banner?

1 Like

Hi Ed,
Its here


Mind you I haven’t been in here for a month and I see @Rhidian has produced a new component which might have more enhancements - I haven’t checked it yet.
Mine simply does this


Here is the link - plus screen shots - including how you can include and position the logo @Ed_Bobkov .


thanks for a quick reply!
is it possible to move logo to the top?

on wide screens logo doesn’t look good

1 Like

Yes you could simply edit the scss to make the background position top in which case it would appear behind the title, or also add a top margin to the title (around line 47 in the html where it is set to 0) to move the title below your standard height of logo.
Or calculate an appropriate margin depending on the logo height.

Personally I wanted to keep the header as narrow as possible as otherwise it becomes a massive waste of screen real estate and I quite liked having the logo away at the left (most of our forums don’t bother with their own logos)
We decided that the description should never be more than 2 lines of text so a logo height of 75px worked ok with one line without wasting space and the slight border with two lines also looked ok we thought.

NB it also assumes that the top bar is taking 60px - that could be different in different themes but it worked for us.


that is 100% I need! thank you!


We are looking to add HTML codes and customize a banner specifically to one category and let the others stay as they are. Can someone please guide us on best practice on doing this?

Thank you.

This isn’t working for us. I’ve tried both the category slug and the category ID, but the banner stays stubbornly there. Is this working for anyone else?


I just tried it and it works for me, it’s looking for the case-sensitive category name. In retrospect that was not the best way to implement it… I can probably improve that.


Ah - that sort is for me! And you do state ‘name’ in the guide above - I just didn’t read that.

Name isn’t very intuitive as we don’t really use it for anything else. But it is displayed a lot. Just making it more explicit in the settings would be fine I reckon.

1 Like

Instead of adding exceptions of what which categories will not show a given uploaded banner, can’t we just specify which category should show which banner?


Depends on the specific site and use-case I’m sure. My initial thought was that it would be more likely for a site to want it implemented everywhere, and if there were exceptions it would only be a few.

If you wanted to implement a banner for a small number of categories there might be a better theme component option that’s built to be a less generic cover-all, like Versatile Banner or customizing one of the options found in Banner themes (and instructions for customizing them)


Before the refactor, I used to be able to change the position of the banner via JS, is this still possible in the new version as well? I want to mount it above-main-container instead of below-site-header.

You used two times the same container

1 Like

Hah, thanks. I meant below-site-header.

1 Like

I think I can make it a site setting, makes sense to me. Will be above-main-container by default

1 Like

That would be wonderful, thank you!

1 Like