Versatile Banner

theme-component
(Taylor) #1

This theme component is an evolution of the very popular Banner themes (and instructions for customizing them). The goal is to provide more ease and flexibility through the use of theme settings.

Preview at Discourse Theme Creator

Below is a highlight of the features:

  • Limit display to logged-in users or anonymous users
  • Limit display to be exclusively mobile or desktop
  • 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 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. Setting the expiration date of the cookies will activate the feature. What this will do is make sure the banner remains closed until the end of that date for any user that had clicked on the close button, or until a user clears the cookies for your site. 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.

Installation

Repository Link
https://github.com/tshenry/discourse-versatile-banner

If you are unfamiliar with theme components and how to install them, check out the theme installation guide . And if you’d like to learn more about Discourse themes, take a look at this guide .

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

44 Likes

Banner themes (and instructions for customizing them)
Discourse Theme Creation
How to add link or text message below navigation bar?
Showing two banners: one to anonymous users, and one for logged-in members
(Will) #2

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?

2 Likes

(Taylor) #3

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.

6 Likes

(Will) #4

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.

3 Likes

(Gurjyot Singh) #5

It’s a great feature that you provided us here and I have some nice plans how to use it. But I also wanna ask, can this banner be used as Sliding image Carousel like in Amazon? As they say, an image says a thousand words so, it would be great if we could add 3 or 4 wide images which can tell everything about the website.

0 Likes

(Bhanu Sharma) #6

That’s not possible by default but nothing is stopping you from tweaking it :wink:

1 Like

(Gurjyot Singh) #8

Seriously it’s one of the best theme components available for Discourse and something similar I designed for my previous website and now it’s all pre-designed for us. And even the cookies worked perfect for us (you just need to know your timezone perfectly as I goofed up there).
A small feature request, since we can limit the use of this banner for either logged-in or for anonymous users, can we have two banners in this theme component? One banner would have information to attract anonymous users to signup and the other banner would help logged in users to get started with the website.

One small issue of this theme component with used with category banner is that, on a category page first shows the category banner, then a wide gap and then the versatile banner. I think that gap is to accommodate header on most pages but, when category banner comes then it becomes a problem.
Then the question becomes, how to make versatile banner with category banner?

3 Likes

(Taylor) #9

Thanks for all of the feedback @thegurjyot!

I have some ideas in mind to make the banner even more versatile! I’m hoping to eventually provide an easier way for you and other Discourse admins to add custom features like an image carousel. Your feature request for two separate banners for anon/logged-in users should be achievable as well once I get around to proving out the concept.

Are you referring to Discourse Category Banners? If so, the two currently look like this when both are in use:

Can you elaborate on what you’d like to see different? A screenshot would be awesome as well.

6 Likes

(Gurjyot Singh) #10

Alright, I just rechecked the issue and it only occurs when we have clicked the “full browser width option”. Otherwise, it looks perfect and just as you shown in the image.

1 Like

(Taylor) #11

I see what you are talking about. The gap is definitely too large when both are in place. So in your opinion, do you think it would be best to include a small gap or no gap between the category banner and versatile banner when the “full browser width option” option is enabled. Here’s what no gap would look like:

5 Likes

(Gurjyot Singh) #12

I think it looks good the way you have shown. Even a small gap would be good, as long as the gap is only present when both the banners are in play.

1 Like

(Taylor) #13

Ok, I will likely make the screenshot I posted the default for this scenario in the next update, but if you need this for your site right now, the CSS would be:

// No gap between category banner and versatile banner
.category-title-header {
    margin-bottom: -60px;
}

You can adjust it if you do want some amount of gap.

5 Likes

(Gurjyot Singh) #14

Thank you so much, I’ll apply this CSS. :slight_smile:

1 Like

(Sarah) #15

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:

2 Likes

(Taylor) #16

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!

7 Likes

(Joe Grover) #17

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:

4 Likes

(Taylor) #18

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:

8 Likes

(Jeff C) #19

It’d be great to be able to customize the expand collapse button with text rather than just the ‘arrows’ :blush:

2 Likes

(Jennifer Poole) #20

Hello! I love the Versatile Banner and I’d like to add my vote to the requests to be able to make different versions of it for different categories. Thank you!

1 Like

#21

You can already do that by installing the component multiple times (one for each category) and using CSS to isolate it to the appropriate category as per: Versatile Banner

10 Likes