Versatile Banner

Can you try adding the following to the url must contain theme setting?

5 Likes

Yes, that works! Thanks :+1:

2 Likes

Great work @tshenry, works perfect.

For anyone else pursing a similiar setup, I turned it into a permanent banner/title card for the forum with links to each of the 3 major site components (and using the above script from @tshenry to create a new component theme for links).

Since forum categories are one of those as well, I also added a smooth scroll down to the categories (id tag is “main-outlet”).

<style>
html {
  scroll-behavior: smooth;
}
</style>

3 Likes

Hi, I have Versatile Banner and Knowledge Explorer installed. How do I prevent Versatile Banner from showing up on the Knowledge Explorer /docs page?

3 Likes

So this is actually a bug. It really shouldn’t be showing there by default. Instead, it should only show if /docs or / is added to the url must contain theme setting.

At the moment, the show on homepage setting is forcing the banner to show on all /something paths when enabled. I believe I have a fix, but I want to be as careful as possible with it since some sites may have come to rely on the bad behavior.

I’ll update here as soon the fix is ready and be sure to explain how things have changed.

3 Likes

:warning: Update

The behavior of the show on homepage and url must contain theme settings was not working as expected and has now been fixed (thanks @debryc for the report!).

Prior to this change, enabling the show on homepage theme setting would cause the banner to display on any single-level path (e.g. /admin, /review, /about, etc.). Now it will be limited to affecting the homepage (/) exclusively as intended.

The url must contain theme setting is now much more granular. Because of that, I’ve included new default values that I believe are a good starting point. You will want to review your site and this theme setting to ensure the banner is showing/not showing according to your preference.

If you have any questions or trouble adjusting to this change, let me know and I’ll be happy to help you sort things out!

PS - I still have every intention to do a substantial refactor and improvement run with this component, but time has been scarce lately, so I haven’t made a whole lot of progress :sweat_smile:

7 Likes

Hey people! I want to make all the text left-aligned but the CSS theme is not working for me. Can anyone tell me how exactly can we do it?

1 Like

Is this along the lines of what you are after?

If so, here’s some quick and dirty CSS that will hopefully get you started:

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

You’ll want to create a new component called “Versatile Banner Customizations” and add the above CSS to the Common section. Make sure you add the new component to any active themes that use the Versatile Banner to pick up the customization.

5 Likes

This worked for me. Thank you so much.

3 Likes

Hello,

Is it possible to transform the background image into a clickable image ?

Thank you for your response.

Can you give us an example?
Why will you do that?
I mean… all the background image will be a link?
If a user click everywhere on banner will be redirected to that link.
I can’t imagine the use.

1 Like

How can I adjust the height of the banner?

1 Like

Hi @tshenry I am using the Versatile Banner theme-component but it disappears when I uncheck “display on desktop”.
Indeed I would like to display the banner only on mobiles.

But when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.
Here is the site if you want to check : https://hec.fm

Did I miss something ?

1 Like

Is it possible to have the links displayed horizontally on mobile as well? I was a bit surprised to see them show up underneath each other in stead of horizontally.

1 Like

Thanks for reporting this! Sorry for the delayed response. I can reproduce what you describe. I’m pretty sure I know what’s going on. I’ll take a look later this week and get back to you.

The height of the banner is primarily dependent on its content, but you can adjust anything as needed with your own CSS. I’m not sure how well you will be able to fit three columns horizontally on mobile, but you can certainly try with custom CSS as well! Have a look at How to make CSS changes on your site for some tips.

4 Likes

I think I’m experiencing a bug on my site with regards to cookie lifespan in maintaining the expanded/collapsed state. What I want is for my site to remember when users collapse the banner and expand the banner, and keep it on whatever they have no matter what. And it works as expected when I stay on the home page or click on topics. However, as soon as I go to the admin panel, user settings, faq, about, tos, privacy, or docs, and then return to the home page, things get wacky, and sometimes the banner is the opposite of what it was set to, and sometimes even the chevron icon to indicate collapse or expand is in the incorrect orientation.

Here, the chevron icon is up:

But after clicking on docs, and then returning to the homepage, the chevron icon is in the opposite orientation.

This seems like pretty strange behavior…

2 Likes

Just discovered that the Versatile Banner isn’t appearing on the login page for our forum (it’s a private forum) like it used to.

‘Display the banner for anonymous users’ is checked in the component settings

Looking at the html there is a div with class ‘banner-box’ inside a nest of divs with classes ‘emberX’ but nothing inside the div with class ‘banner-box’ - unlike the html for logged in users.

Any idea what could be going wrong?

1 Like

I just pushed a small update to the component.

https://github.com/tshenry/discourse-versatile-banner/commit/1aae864760f40160755644a6bab72cf8a829ef3a

This should be fixed with the above. I’m really sorry it took so long to get a fix in place. Thanks again for your report!

You will need to add /login to the url must contain theme setting. See this post for more detail.

This has been reported once or twice in the past. Unfortunately I have never able to reproduce it. I’ll try again when I get a chance using your exact steps and see if I have any luck.

3 Likes

I’m using versatile banner and i try to turn the banner into a giant link that redirect to another website
how can i do that ?

try to change-it via un script : '“api.changeWidgetSetting(‘banner-content-widget’, ‘href’, '<site_adresse>” but the versatille banner stop working

1 Like

Thanks, that’s great. It’s working perfectly now! :pray:t2:

2 Likes