Versatile Banner

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

If you have any ideas for improvement, or issues to report please don’t hesitate to share.

Install this theme component

81 Likes

Very nice.

Would it be possible to add the ability to toggle the visibility of the banner based on category (or only show if not in a category) or even have customizable banners per category?

6 Likes

Thanks for the feedback! I’ll see what I can do about providing a way for an admin to customize the banner based on category when I get a chance. I have an idea of how that might work, but I can’t promise anything.

In the mean time, you can create a new empty theme component and add the necessary CSS to hide the banner where you want it hidden. Some examples of hiding the banner based on categories:

// Hide the banner in the following categories
.category-CATEGORY-ONE-SLUG,
.category-CATEGORY-TWO-SLUG,
.category-CATEGORY-THREE-SLUG {
    .banner-themes {
        display: none;
    }
}
// Hide the banner in all categories
[class*="category-"] .banner-themes {
    display: none;
}
// Hide the banner by default
.banner-themes {
    display: none;
}

// Only show the banner in the following categories
.category-CATEGORY-ONE-SLUG,
.category-CATEGORY-TWO-SLUG,
.category-CATEGORY-THREE-SLUG {
    .banner-themes {
        display: block;
    }
}

You would replace CATEGORY-ONE-SLUG etc, with the slug in your category’s URL. For example, this category’s URL is https://meta.discourse.org/c/theme and the slug is theme.

14 Likes

Thanks, I’ll give that test and see how it works.

For the category specific stuff, if it helps the Discourse Category Sidebar theme component does something along those lines.

5 Likes

My first post here so… :crossed_fingers: I don’t sound like an idiot

So I tried implementing the code to remove the banner theme on pages with categories, however there are some strange interactions between it and other theme components (Header Submenus).

// Hide the banner in all categories
[class*="category-"] .banner-themes {
    display: none;
}

The funny thing is when I put that code in the Versatile Banner css instead of it’s own component there’s no interaction. However, there is still weird loading behavior going between pages with categories:

(example where the code is in the versatile banner component css)

Is there a way to make sure the Banner doesn’t open at all on Category pages, or that switching between other pages it doesn’t re-appear again? You can see this behavior happens in both videos. Is it because the page has to load those classes before it tells the component not to load the banner, but at this point it is already loaded in? Is there a way to fix this? I’d really like to get both Versatile Banner and Category headers working, but I don’t want to have this weird behavior.

I really appreciate this theme component though and all the work you’ve done on it! Any help is appreciated :slight_smile:

5 Likes

Hey, great first post @yellowbird!

I hadn’t done a whole lot of testing of this in combination with other theme components, so thank you for the very clear report :heart_eyes:

I will definitely look into making the banner play nice with header submenus. I’m also hoping to get a solution in place where the banner will not render at all under certain conditions rather than just trying to hide it conditionally with CSS. As you stated, those classes load a little too slow for the CSS to catch it.

I will post in this topic as soon as I have news about an update!

11 Likes

Jumping on the first post train :train2:

It seems that when the banner is made collapsible the default state is to be collapsed. Is there an easy way to reverse this? I would really like to have the banner be open when new users show up, and I don’t want to make it dismissible because I think it looks cool :sunglasses:

5 Likes

There’s no way to reverse the default state at this point, but that’s a perfectly reasonable feature request. I’ll add it to the list :slightly_smiling_face:

10 Likes

Ok, I have a few bugfixes! Please update the component.

  • Navigation dropdown will no longer be cropped on mobile when on the activity page.
  • The banner should no longer sit right on top of the admin panel buttons (please confirm as I was having a hard time reproducing this)
  • The banner will play nice with the Category Banners component
  • Merged a PR from @Grover that fixes the expand/collapse state persistence. Thanks!

Below are the features that I am still actively looking into adding as time permits. I can’t promise I’ll get them all added, but I will do my best.

  • Add expanded by default option (right now it always starts collapsed if enabled)
  • Rendering the banner only on set sections of the site (I think I’m getting close to a solution for this that isn’t jumpy due to CSS)
  • Allow different banners based on sections of the site, anon/logged-in
  • Ability to add more complex content (like a carousel) using a separate theme component
  • Add option for text buttons instead of font awesome icons

If I’m missing anything let me know :slight_smile:

16 Likes

Does this cover @Jennifer_Poole’s request above?

1 Like

I tested the release and it definitely fixed most of the previous issues. But now there’s a small new issue, when in full width mode, the cross button doesn’t show on mobile. But if full width mode is not enabled then the cross button does show.

1 Like

Yes, that’s included in what I’ll be looking into. Multiple different banners will almost surely require additional components, but I’m still trying to figure out how exactly this should be handled.

Thanks, I’ll see if I can reproduce this and fix sometime today.

EDIT: Some fixes/changes for the day:

  • Fixed button placement on mobile @thegurjyot
  • Added default collapsed state setting so you can choose to have it start expanded or collapsed @Grover
  • The divs that contain the column icons will no longer be rendered if the column icon settings are left empty.
10 Likes

I think trying to handle this all in one component is going to get very difficult! How about just adding this functionality:

And then people can install multiple copies of the theme component for each new banner?

10 Likes

Good component but I have a request. When we switch between dark and light themes it would be better if it has different color settings for each theme.

Might work like this:

1 Like

What would be the best practice, if I want to have several instances of that banner, but in different form and on different pages? Would I need to make a copy of that component and change all variable names? And would it affect performance? Thanks!

Multiple variations and page specific banners seem to be a common request. I’m still trying to figure out the right way to do it. I’ve had to put this down a few times in hopes of having fresh ideas when I pick it back up. I’ll do another pass on it soon.

Keep an eye on this topic for an update. Until then, thanks for the patience!

10 Likes

:warning: Please read this entire reply before updating the component

It took longer than I had hoped it would, but I have a substantial update :tada:

Thank you for your patience everyone!

Notes

In addition to a major refactor of the code, I’ve added the following features:

  • Better compatibility with Discourse Category Banners
  • New settings to control where the banner should display. You can use parts of the URL to specify where the banner should display. It defaults to use /c/ for categories and /t/ for topics. But you can add things like /admin to display the banner on the admin pages or /u/ for user profiles. Including the / will help ensure it targets that specific page archetype. Displaying the banner on the homepage is its own setting.
  • @Jeff_C You have text button options now! You can style the text or hide the icons so it’s just text with some additional CSS in a separate component. If you need help with this let me know. For everyone else, you simply need to remove the text at the very bottom of the settings under the “Theme Translations” section.
  • Cookies have been reworked to use relative time. So, for example, if you change the setting to “month,” it will remember that a user closed the banner for a month, then the banner will reappear. When the user closes it again, it will remain closed for another month, unless you have changed the cookie lifespan setting. You can reset the cookies by changing the cookie name, or disable them entirely by selecting “none” on the cookie lifespan setting.

Now that the refactor is complete, I think we are getting much closer to multiple unique banners for specific areas of the site. I will update this topic when I have news!

Suggested steps for updating

Since this update will change the appearance and some of the settings of your banner, it is recommended that you follow these steps to ensure there’s nothing broken shown to your users.

  1. Rename your current Versatile Banner component to Versatile Banner (Old).
  2. Install the component again using the GitHub link
  3. Change the settings on the new component to match the one that you labeled “(Old)”
  4. Preview the new component using the button at the bottom of the component’s page
  5. Once everything looks good, remove the Versatile Banner (Old) component from your main themes and then add the new component
  6. If all looks good, you can delete Versatile Banner (Old)

Let me know if you have any questions!

17 Likes

Why there isn’t an option for users to close the banner permanently?

Well, when creating a non-session cookie, you have to explicitly specify an expiration date. For that reason there is no inherent permanent option. Though, I suppose I could add a 10 year option (there’s very little chance a user would hang onto the same cookie for 10 years…), or a “forever” option that rewrites the cookie with a new future date each time the cookie is accessed.

Is having a user close the banner once a year a major issue? If so, I can work on implementing one of the above solutions, but I really want to confirm this is a serious issue before I spend more time on it.

Also to be clear, cookies are browser-specific, so a user will see the banner any time they open the site in a new browser. The only way to avoid that would be to store something specific to the banner on the server, which is not possible with theme components.

4 Likes

Thank you for clarification.

We use this component to show notices about rules and once an user read it banner’s job is done. As you know rules doesn’t change often, for this reason I find it short. If it was 10 year max then it would be fine for me.