Versatile Banner

Yes, simply refreshing the other tabs should close the banner for those.

2 Likes

@pfaffman @JimPas

Thanks for the replies.

You are right, when reloading the page, the banner will close. The main complaint is that the banner not only appears on the homepage but on every single page they open, so posts and PMs also.
Most of them open a post or a pm from the homepage in a new tab, so the banner can be very persistent.

I disabled it for now, but I do hope this can be changed in the future. I want to use it to get new members’ attention to find their way on the forum.

2 Likes

You could disable it for logged in users.

But I think you might want to turn on the on home page setting and in the required string setting include “banana pants” so it won’t match any urls, making it on the home page only. That’s what I just did on my forum.

4 Likes

Thank you for the tip! I will try that one.

1 Like

Ok @Tara_Walton dark mode support has been added with the following!

Please go ahead and try updating the component and let me know what you think.

:warning: In testing this, I did find that there might be a weird quirk when changing the theme settings. I’m not immediately sure if it’s the browser or discourse cache causing the issue, but if you find a setting isn’t taking when you first change it, add a space to the end of the setting, save it, then remove the space and save again. Also note that the page must be hard refreshed to see the changes.

If anyone gets an error when updating, adding/removing the component from your main theme should clear things up. There are apparently a couple little theme quirks to investigate a some point.


I think I can see what’s going on here @IT_Director.

You have added a CSS rule somewhere in your theme:

[class*="category-"] .banner-themes {
  display: none;
}

When I click on one of the featured topics then navigate back to the home page, it looks like the category- class that was added when visiting the topic is not removed from the body element. This might be a little bug somewhere in the routing that happens with the Homepage Feature Component component.

Can you try removing that CSS rule and instead leverage the url must contain theme setting? I think if you remove the /c/* and /t/* entries, that should have a similar effect and will hopefully handle things a little better than pure CSS.

4 Likes

@tshenry This is everything I hoped for!
Thank you for taking the suggestion and the time to make it happen. I absolutely love how when I toggle between light and dark now, my light banner isn’t blinding on dark mode :smiley:

I didn’t have too much trouble. I did have to clear my cache on my browser, but I find that’s the case for a lot of changes I make and consider it normal operating procedure for the most part.

Thank you again for your hard work!

3 Likes

A few of us are having some issues @tshenry :confused:

Issue logged on GitHub by @craigconstantine

2 Likes

I note that @tshenry did something [he explained, but it went over my head] to one of my discourse installs (hosted by discourse.org) and the error is gone on that install at this time…

2 Likes

There is a bug in core Discourse that is misinterpreting the SASS site setting variable. For some reason it thinks the variable name has dashes instead of underscores. We are going to try to get the issue fixed.

In the mean time if you make any change to a theme setting, the error should clear. For example, I added a space to one of the column content theme settings, saved it, removed the space and saved again.

Let me know if you find anything isn’t working after trying that.

4 Likes

I was about a week behind latest, updated Discourse this morning and the warnings have gone away :thinking:

2 Likes

The Versatile Banner says this:

Customize the content of the banner with HTML. If you need to style your custom content with CSS, create a separate theme component.

Can somebdy explain or show pointers to what needs to be done for me to add CSS here?

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.

4 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