Versatile Banner

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

Is there a way to preview a versatile banner without first enabling the theme? :thinking:

I would like to see how it looks before unveiling it to the world (and then finding an embarrassing mistake) :slight_smile:

2 Likes

I keep a development droplet for changes. $5 a month and can see if anything messes up before I break something lol.

I assume can do the same on localhost. that said Im going to make a vm for that and save the $5 a month lol

5 Likes

Hmm, I didn’t think of that :thinking:

And further to today’s announcement I might just do that very thing, but on a Raspberry Pi :smiley:

5 Likes

Has anyone been able to get this banner to work on top of the search bar component?

So far I have only been able to get this under the search bar :sneezing_face:

1 Like

I have both installed on my test site, and I can swop the position by ticking the swap default positioning setting in Versatile Banners. Could that work for you too?

2 Likes

Hmmm… this is weird… maybe you think it’s a setting for the search bar component… i do have below-site-header checked for my search bar.

What are your searchbar settings?

1 Like

With below-site-header for the Search Banner, I can toggle the Versatile Banner above or below using the swap default positioning setting.

If I have the plug-in outlet of the Search Banner set to above-main-container then the Versatile Banner is always on top, whether I tick swop or not.

(Changes show on a page refresh)

4 Likes

I just launched my forum and I’m still on the hosted plan.
I love this banner, I just have one question…

I would love to have a dark mode and a light mode (ie, different color schemes and different background image/color) - is there a setting I’m missing or a way to accomplish this?

4 Likes

I installed the theme component twice, and named one Light and the other Dark, and then attached the Light one to my Light theme, and the Dark one to my Dark. :+1:

Though the Light one doesn’t swop colour palette when the default dark mode color scheme id is set, so it’s not 100% perfect.

1 Like