Notification Banners

:information_source: Summary The Notification Banners theme-component provides a customizable and flexible way to share messages on your site.
:hammer_and_wrench: Repository https://github.com/gormus/discourse-notification-banners
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

The Notification Banners theme-component provides a customizable and flexible way to share messages on your site.

Here are some key features:

  • Fully Customizable: Tailor each banner to suit your needs, including content, style, and behavior.
  • Flexible Display Options: Show banners stacked or as a rotating carousel for easy browsing.
  • Targeted Messaging: Display banners only to specific user groups, ensuring personalized communication.
  • Theme Support: Banners automatically adjust to light or dark themes, or you can set custom colors.
  • Markdown Support: Use Markdown to format your banner messages easily.
  • Carousel Powered by Splide: The carousel feature is powered by the Splide JavaScript library, with individual settings for each banner.
  • Scheduling: Set specific start and end dates for when banners should appear.
  • Easy Display Order: Control the order in which banners are shown with simple settings.

This component makes it easy to engage your audience with visually appealing, personalized, and well-organized notifications.

Installation

  1. Follow the official instructions to add this theme-component to your theme:
    https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#add-theme-components-to-a-theme-9

  2. Change theme authorized extensions setting to include css and js file extentions.

Features

Each notification banner may have the following features:

  • Title, optional, displayed as a H2 heading above the message
  • Message, 500 character long simple notification message. Markdown is supported.
  • Audience, select the user groups as audience for the notification.
  • Categories; select categories to display the banner on. Leave empty to display on all categories.
  • Background color, can be set to differantiate the banner from others.
  • Plugin outlet, set notifications above or below the site header, or use the top-notices outlet to display along with native topic banners.
  • Display in a carousel, when selected, all the banners in each outlet are displayed in a carousel. Requires minimum 2 banners to be selected for any outlet.
  • Dismissable, when selected, the users will be able to dismiss the banner, and it will be hidden for them.
  • Starting and Last dates, when defined, banner’s visibility obeys to those dates. So you can set a banner in advance, but it will become visible to selected audience only on set date and time; or similarly you can automatically remove the banner by the last date it should show.
  • Display order, define which banner should be displayed top, which should be at bottom.

The Carousel

The slideshow, or the carousel functionality is provided by Splide library; it is licensed under MIT.

Each carousel can be configured on the theme-component page using the Splide options.

Banner Colors

By default, the banners will use same colors as the banner-topic:

.notification-banner {
    background: var(--tertiary-low);
    color: var(--primary);
}

However, when a background color is defined in banner settings, depending on its luminosity, black or white is automatically selected as the foreground color.

Available CSS Classes

// Regular stacked banner.
.notification-banner {

  &.above-site-header,
  &.below-site-header,
  &.top-notices {
  }

  &__wrapper {
  }
  &__close {
  }
  &__header {
  }
  &__content {
  }
}

// Banner inside a carousel.
.splide {

  .notification-banner {

    &.above-site-header,
    &.below-site-header,
    &.top-notices {
    }

    &__wrapper {
    }
    &__close {
    }
    &__header {
    }
    &__content {
    }
  }
}
16 Likes

Wow! This looks amazing - and super flexible.

Have you considered being able to restrict it to a category / categories?

8 Likes

Thank you!

Actually I considered to include what I previously did with my Filtered Topic Lists theme-component; see the “Show on” section.

I was concerned it may make it more complicated, that’s why I didn’t include that option. Instead I opted in to use the user-groups as the audience for the banners.

But I’d be happy to include it if there would be a need for it.

5 Likes

Very nice @gormus, thanks for sharing this component with the community. :discourse: :clap:

2 Likes

Thanks @Lilly it’s my pleasure : )

3 Likes

when i click the X button to close this banner popup, is there any mode to make it show again? I have selected in banner background repeat: repeat; repeat-x; repeat-y but it doesn’t work?

2 Likes

Great! I’ll give it a real world whirl and see if it is actually needed or not before pestering you about it.

4 Likes

Currently not. I didn’t consider any user would like to restore a dismissed notification.
Do you think there should be an option for it?

Could you clarify what you mean?

2 Likes

I see what you mean, thank you!

3 Likes

I’d be interested in this feature also (available to specific Category(s) that is). Thank you for considering.

3 Likes

Categories are now supported as target audience. Single, or multiple categories can be selected per banner.

Please let me know what you think : )

4 Likes