Versatile Banner

Create a theme component as described at Beginners’ guide to using Theme Creator and Theme CLI to start building a Discourse theme, Developer’s guide to Discourse Themes or any of several other topics you can find by searching “theme developer”.

If that’s not helpful then you’ll need to say more about what you are trying to do.

5 Likes

Hi, is it possible to convert the text from the Versatile Banner through different locales ? I’d be interested in translating the UI from french to german depending on the locale

2 Likes

I don’t know. But Adding localizable strings to themes and theme components might offer some clues. I think that you need to fork the theme component, but I’m not sure and haven’t looked at the code lately to know if I’m right.

2 Likes

Sadly the theme theme translations feature Jay mentioned came out right before this component was created and I don’t think the documentation was posted until I had started working on it. It would be very difficult to update it to support multiple translations at this stage without breaking existing Versatile Banners out there :frowning: The fork approach is probably your best bet.

My hope is that at some point we’ll get a “Versatile Banner 2” out there that can address some of the missing features and requests that have come in through the years.

3 Likes

Is there a way to show banner on topics under a single category? Versatile banner uses URL and wildcards, but discourse does not contain category name on URL. Or is there a way to add category to topic URL?

1 Like

You can add it to a specific category by adding a link like eg. /c/support/* to the url must contain setting.

2 Likes

I know that, that’s why I wrote “topics under a single category”. Topics have a url like /t/* that does not contain category name. So if you add /c/support/* it shows only on the topic list page not the topics under that category.

2 Likes

Sorry, I totally misread that. :slight_smile: I’m afraid that I do not know.

3 Likes

The category is added as a class to the <body> tag, so you could write CSS that shows or hides the banner depending on the category. For example:

/* Hide banner by default */
.custom-banner-outlet {
    display: none;
}

/* Display banner in "General" category */
body.category-general .custom-banner-outlet {
    display: block;
}
3 Likes

I’m excited about being able to use this banner but I need to limit its visibility to only certain groups of our users. We use discourse to host an LMS - I am hoping to have this visible to our current students, but not alumni. Is this possible, or is there another way to achieve this?
Thanks so much for any advice.

1 Like

I think that should be possible using the CSS Classes for Current User's Groups theme component and adding a little display: none; for the relevant group you wish to hide it from. :+1:

3 Likes

Thanks so much. This feels tantilisingly close to what I’m after but sadly I’m completely out of my depth with css. Appreciate the suggestion though!

1 Like

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:

4 Likes

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.

2 Likes
  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!

3 Likes

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.

3 Likes

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?

2 Likes

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?