Versatile Banner

[Discourse]

	Summary	Versatile Banner adds a customizable banner to your site.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-versatile-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

This theme component is an evolution of previous banner efforts. The goal is to provide more ease and flexibility through the use of theme settings.

Below is a highlight of the features:

• Limit display to logged-in users or anonymous users
• Limit display to be exclusively mobile or desktop
• Limit display to specific pages
• Dismissible, expandable, and always visible options
• Full browser width option
• Color management
• Heading and column customization using HTML (see below for more)
• Persistent state option (see below for more)

Customizing your banner’s content

Banner content is broken up into the main heading and columns. You can have up to 4 columns on your banner, however, the recommended number is 3 or fewer due to width limitations. HTML templates are provided and can be customized to meet your individual needs. You can also control each column’s width and add whatever image or font awesome icon you want to the top of each column.

Using the persistent state option

The persistent state option will rely on up to two cookies. These cookies will contain a name for the banner and a true/false value that relates to the banner’s state. If you have any concerns with using cookies on your site, it’s best to avoid using this setting. Choosing a relative time option for the cookie_lifespan setting will make sure the banner remains closed/expanded/collapsed for that amount of time after the user presses the appropriate button. Without this setting, the banner resets with every full page load. If you make a change to the banner and want to ensure that all users see those changes, even those that had previously closed the banner, be sure to change the “cookie name.” It will essentially reset any persistent state, then allow user to close the banner once more

Settings

Name	Description
show for members	Display the banner for users logged into the forum
show for anon	Display the banner for anonymous users
display on mobile	Display the banner on mobile devices
display on desktop	Display the banner on desktop computers
display on homepage	Display the banner on the homepage
url must contain	Enter paths that should display the banner. Add * to the end of the path as a wildcard
dismissible	Allow the banner to be closed by users
collapsible	Allow the banner to be expanded and collapsed by users
default collapsed state	Default collapsed state when collapsible setting is enabled
cookie lifespan	The lifespan of the cookie used to remember if the banner has been closed, expanded, or collapsed. If set to “none”, NO cookies will be used with this component, and any previously created cookies related to the banner will be deleted the next time a user performs a full page load. The values are measured as a single unit, so setting “year” will be one year, “week” will be one week, etc.
cookie name	When important changes are made to the banner, you must change the cookie name to ensure all your users see the changes.
full width banner	Display the banner at full browser width
swap default positioning	If there is another banner-related component active, use this to swap its position with the Versatile Banner
plugin outlet	below-site-header puts it above the sidebar, above-main-container puts it above the content to the side of the sidebar
banner background image	The source url for your background image. Tip: You can upload an image to your main theme and use the url from that, but make sure that you do not use “Uploads” section of this component. Any uploads added to this component will be deleted whenever it is updated.
banner background image dark	The source url for your background image when system dark mode is detected.
background color	Used in place of a background image
background color dark	Used in place of a background image when system dark mode is detected.
primary text color	The main text color of the banner
primary text color dark	The main text color of the banner when system dark mode is detected
secondary text color	The text color of the icon and text headings, and the button background color.
secondary text color dark	The text color of the icon and text headings, and the button background color when system dark mode is detected.
link text color	The text color of links within the banner
link text color dark	The text color of links within the banner when system dark mode is detected.

Translation	Default
close.title	Close the banner
close.label	Close
toggle.title	Expand/Collapse the banner
toggle.collapse_label	Collapse
toggle.expand_label	Expand

Hosted by us? Theme components are available to use on our Standard, Business and Enterprise plans.

Last edited by @JammyDodger 2024-06-16T14:10:38Z

Check document

Perform check on document:

[Dhruvi_Butti]

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?

[tshenry (Taylor)]

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.

[Dhruvi_Butti]

This worked for me. Thank you so much.

[charlie788 (Charlie)]

Hello,

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

Thank you for your response.

[SidV]

@charlie788

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

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.

[Astra]

How can I adjust the height of the banner?

[LeCoyote (https://hec.fm)]

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 ?

[Astra]

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.

[tshenry (Taylor)]

@LeCoyote

when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.

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.

@Astra

How can I adjust the height of the banner?

@Astra

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.

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 Make CSS changes on Your Site for some tips.

[MrDavis97 (Miles Davis)]

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…

[augustinecicc]

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?

[tshenry (Taylor)]

I just pushed a small update to the component.

Fix show/hide on mobile/desktop behavior and remove ember selectors

@LeCoyote

when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.

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!

@augustinecicc

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.

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

@MrDavis97

I think I’m experiencing a bug on my site with regards to cookie lifespan in maintaining the expanded/collapsed state.

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.

[Dimitri_Nightmare (chris)]

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

[augustinecicc]

@tshenry

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

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

[tshenry (Taylor)]

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:

[mercury233]

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/.

[tshenry (Taylor)]

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.

[mercury233]

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

[gassim (Al-Gassim Sharaf Addin)]

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! (: