Versatile Banner

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

You might be able to do something like:

<script type="text/discourse-plugin" version="0.10.0">
  // Add the link to the heading
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // Add the link to the rest of the content
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

And add a CSS rule to adjust the link color

.banner-box a {
    color: var(--primary);
}

Unless there’s specific functionality you need that the Versatile Banner offers, I wonder if you would be better off just making your own simple HTML banner in a new component. Rough example:

Add the following to the Common “After Header” section:

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>This is a customer banner!</h2>
  </div>
</a>

and the following to the Common “CSS” section:

 .custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

That would give you a simple banner that’s fully clickable:

3 Likes

I’m installing this component from git, but it seems that I didn’t got the latest codes, FIX: Work with new sticky header and move away from deprecated $.cookie · tshenry/discourse-versatile-banner@0939120 · GitHub wasn’t updated in my site https://ygobbs.com/.

1 Like

This is because you are running Discourse version 2.6.0.beta2. The commit you linked to requires 2.6.0.beta3 and above. You’ll notice that the commit you linked to has added a discourse-compatibility file to ensure you don’t update to a commit that is incompatible with your Discourse version.

5 Likes

wow it is amazing that discourse will find elder version for me instead of preventing me to install the component. Thank you!

3 Likes

Hi @tshenry
I want to install the component more than once so that I can use each component to give different categories different banners; therefore, I disabled the show on homepage and used the URL must contain, but this stops the main one which I use to display it in the homepage only. Would you either give me a different solution or is this a bug? Thanks! (:

1 Like

I’m afraid installing this component multiple times will not work. Your best option at this point is likely to pay someone to build you a custom solution via the #marketplace

I have only had time to address bug reports on this component for the past while, but in the next year or two, I plan to do a major overhaul that will hopefully facilitate even more versatility.

4 Likes

I’m using the component settings to only show the banner on specific pages. I came across two glitches in the css:

  • the banner adds a top margin on pages where it’s not supposed to be shown
  • the banner is displayed unstyled while the page is loading

To supress both I have to declare .banner-box {display: none;} and then add display declarations for the specific pages where it’s supposed to show.

2 Likes

hello @tshenry
is it possible to make the icons bigger?

1 Like

I feel like this may be a more general FAQ but I’m wondering how to deliver different graphics for desktop and mobile users?

1 Like

Where are you hoping to have these graphics appear? There are definitely ways you can conditionally display things based on desktop/mobile status, but the approach to take will depend on what you are trying to do.

1 Like

I’m using versatile banner to deliver a christmas message, including a graphic, so I want to be able to do this within the context of versatile banner.

1 Like

Hmm, in that case you might be able to add something like the following to one of the Versatile Banner’s “content” settings:

<div class="xmas-banner-image"></div>

And then add some CSS to your main theme or a new component. Here’s an example where you can replace LINK_TO_MOBILE_IMAGE with the actual image link:

.mobile-view .xmas-banner-image {
  background-image: url("LINK_TO_MOBILE_IMAGE");
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.desktop-view .xmas-banner-image {
  background-image: url("LINK_TO_DESKTOP_IMAGE");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

You’ll have to tinker with the CSS, but hopefully that gets you started.

3 Likes

Very good. I had feeling that it was going to need a CSS solution. Thanks for taking the time to provide a starting point.

3 Likes

I’d like to use this to specifically target “/latest?assigned=”, to be used in conjunction with the Discourse Assign plugin, so that I can add a button for topics that are assigned to All, Me and Nobody.

However, this doesn’t work - I assume it is the “?”, since “/latest” works. Any suggestions on how to get this banner to only show for these pages/views?

Also, even with only “/latest” selected, the banner is showing on the home page as well. How can I prevent this from happening? I didnt see the checkbox to display on homepage in the settings.

Finally, is there a way to make the icon clickable? It seems like only the text below the icon is.

1 Like

These would be more complex customizations you would need to add to a separate component. There’s an example on how to reopen one of the widgets and adjust the behavior here: Versatile Banner - #158 by tshenry

For the icons, I guess you could also try hacking together a CSS solution. You could potentially add an anchor element to the column content settings and style it to overlap the image.

3 Likes

Thanks very much! I’m sure I can figure it out from here.

2 Likes