Versatile Banner

I had the same problem with a theme toggle I had tried. I was getting black text on black backgrounds!

Right now I’m trying to leave just the one theme since it’s caused so many problems, but definitely something I will revisit if there’s not another way around it.

Thanks for the tip!

2 Likes

Since you’re on a hosted forum, in your Admin Dashboard go to Customize. Themes should be the first you see. Scroll down through the installed themes for a Dark Theme (Classic?). Click on that to begin the install process.

If you don’t see a dark theme, click on the Browse button to see those themes that are available. Color palettes let’s you define the colors used.

Just be sure to click save after making any changes and the theme will be available to you and your users.

Yeah, there should absolutely be some basic support for dark/light modes. It shouldn’t be too difficult to add. I will do my best to get to this by the end of the week.

4 Likes

That sounds amazing! Thank you so much :slight_smile:

2 Likes

No problem! It ended up being a little tricker than I expected since I want to do my best to ensure these changes don’t disrupt anyone’s current banner when they update. I’ll try to finalize testing and push the change early next week. Here’s a sneak peek of how it works with Discourse’s automatic dark mode while toggling my system preferences.

I’m afraid that is not achievable with the Versatile Banner.

5 Likes

Thanks for a great and truly versatile banner!

Mostly it is awesome, but our banner keeps disappearing.

Here’s how to replicate:

First case: the banner disappears

  1. Go to https://forum.ic.org/, see the banner on top
  2. Scroll down and click on a topic
  3. Click on the top left Forum logo to get back to the start page
  4. See that the banner is now gone from the start page

…if it is not gone, try repeating steps 2 & 3, going back and forth between the topic and start page. The banner always eventually disappears.

Second case: the banner does not disappear

  1. Go to https://forum.ic.org/, see the banner on top
  2. Click the ‘Browse tags’ link
  3. Click on the top left Forum logo to get back to the start page
  4. See that the banner is still there

Something to do with cookies?

See our settings below:


1 Like

I’m super sorry for lagging here. It’s been busy days :sweat_smile: I’m extremely hopeful I can wrap up the dark mode support and look into Osa’s issue next week. Thanks for your patience!

3 Likes

Hi, I installed the versatile banner and I love it. Is there a workaround to let the banner stop appearing after a logged-in user closed it?
It doesn’t reappear when the user works in one tab, but a lot of our userbases are used to working in multiple tabs, so the banner appears in all of those tabs.

Most ideal would be that the tab appears at first log-in and when the user closes the banner, it doesn’t appear until the user logs off and logs in again. Like a post that is pinned as a global banner.

1 Like

I believe that state is kept in a cookie, not by Discourse core. If they open the new tabs after they have closed it, it should stay closed, I think. I suspect that if they reload the other tabs after closing then it will be closed.

But I could be wrong.

3 Likes

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.

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

https://github.com/tshenry/discourse-versatile-banner/issues/13

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?