Versatile Banner

That’s okay. :slightly_smiling_face: If you let us know the group name that you want to hide the banner from we can tweak the code to suit your needs and show you where to put it. :+1:

For example:

.group-alumni {
.custom-banner-outlet {
    display: none;
Extra details on how to add it to your site
  • Go to /admin/customize/themes
  • Click on install and then create new
  • Give it a name, and select ‘component’.
  • Create
  • Add it to your theme
  • Click on the Edit CSS/HTML button and paste the code into the Common tab
  • And save. :+1:


How do we preview the theme without enabling it? I want to be able to experiment without messing up the user experience. We’re on Discourse hosted plan, so we don’t have the ability to run test instances.

I’m hoping that there is a switch or setting that I’ve overlooked.

  1. You can add another Theme (probably a clone of your ‘normal’ one) - call it Test or something.
    • Keep your normal one as the ‘default’.
  2. Make sure you include the exact same Theme Components
  3. Select this one for your admin user

You can then muck about with this one as much as you like. Others can (in theory) select the Theme but they are very unlikely to unless signposted to it clearly.

Just remember to select the ‘normal’ one when you are done!


I’m thinking it might not be feasible but it can’t hurt to ask.

In a long topic when you start from the bottom and scroll up, the banner will make a brief appearance while the post stream loads in older posts. After the posts are loaded, there is a visual “jump” as the banner gets pushed above the post stream. I find it a bit jarring and it does not appear there long enough to interact with.

Ideally, I would only like to see the banner above the title of a topic and not mid-stream. I think this is not a trivial request though because I’m going to assume the banner uses the below-site-header outlet so it’s behavior is based on the outlet and therefore this “jump” is expected behavior.

Is there a simple way to know if you’re at the top of the page?

1 Like

This is great advice. It worked perfectly for me.

I discovered that the cloned theme does not need to be active. It can be previewed when it is inactive, so there is no need to worry about users discovering it.

I read that with amusement. That was my thinking when I started exploring themes. I wanted to experiment and loaded a few different themes. The forum members found them very quickly.

To be doubly sure that your users do not get to see what you’re experimenting with, leave the “Theme can be selected by users” option unchecked. Users will be unable to choose the theme even if it is active.


Is there a way to only display this to specific trust levels?

This way instead of using a cookie to remember the users setting to show/hide it, all users will see it until the reach a specific trust level?

1 Like

This banner component doesn’t currently, but the Welcome Link Banner does if that’s a good alternative?


I want to use this banner so that every week someone from my country is honored in my forum, which will have a photo of the honored person and a text, but I want to grant access to the plugins to my moderators, because not every week I will be available, there is how to grant access to this plugin to my moderators so that they can also put photo and text?

You can’t. You would need to make them an admin.


Do you know of any other component where moderators can change banner photo?

1 Like

No. Moderators cannot change themes.

It would be possible to create a theme that would, say, make the banner a photo in a topic with a certain tag or category (or the newest topic with that tag or category). You could then limit access to that tag or category to members of a certain group. I wrote a plugin once that took its data from the most recent reply to a topic.

So, without looking at the code, I think you could fork the theme and do something like that.


A post was split to a new topic: How to translate the configured HTML?

Today we’ve merged a refactor of this component that moves it from our custom widget system to a modern Ember component.

This is necessary as we plan on removing our widget system within the next year. All the functionality of the banner should remain the same, but let us know if you encounter any new issues!

One thing to note that has changed is that since this is no longer comprised of widgets, so you won’t be able to do something like this to override its functionality:

This kind of customization has always been a little fragile (if the theme changes, it could break the override, and in turn the entire component) so this is a pattern we’re moving away from when developing extensions for Discourse.


Thanks for the update! Just a heads up - on stable, there seems to be a new issue when when having the columns empty/hidden. Before, setting ‘first/second/third/fourth column content’ fields to empty would hide those columns if I recall correctly. But after the upgrade, the columns will take up empty space if left blank, it’s more significantly noticeable on mobile.


Good point! I hide the containers if there’s no content in a new update here:


HI I have a problem with the banner on firefox mobile. Im using 3 columns and the first two show all the content and third is cut off. Samsung S23 Ultra I can see it on brave fine. On firefox both logged in and logged out its missing.

I checked iphone 14 pro and safari is fine.

1 Like


I don’t think I’ve seen my issue elsewhere in this thread, but apologies if a solution has already been provided. I’m wanting to implement this banner on my community, and after extensive customization, I’ve realized that it seems like this component is extending the right side of the main container over past normal. I’m going to provide some screenshots below of what I mean (everything in the banner is currently in default settings).

This is with the banner enabled:

The side over by new topic is extended past my profile picture.

However, with the theme component disabled, everything looks normal.

As you can see, the right side is in line with my profile picture.

I am using other theme components, and so it is possible that those could be interfering. I’ll provide a list of components below:

  • Dark-Light Toggle
  • DiscoTOC
  • Discourse Clickable Topic
  • Discourse Gifs
  • Discourse Header Search
  • Hamburger Theme Selector
  • Custom Header Links
  • Header Submenus
  • Versatile Banner

Any idea whats going on?

Thank You


When I change the text en the cookie name the banner not show on discourse app…

maybe a bug ?

1 Like

Looks like this theme component has the functionality to only display on certain pages, and I want to do something similar. How was this functionality achieved?


The component checks the setting against the currentURL here: