Notification Banners

[gormus (Osman Gormus)]

	Summary	The Notification Banners theme-component provides a customizable and flexible way to share messages on your site.
	Repository	https://github.com/gormus/discourse-notification-banners
	Install Guide	How to install a theme or theme component
	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 extensions.

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 {
    }
  }
}

[nathank (Nathan Kershaw)]

Wow! This looks amazing - and super flexible.

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

[gormus (Osman Gormus)]

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.

[Lilly]

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

[gormus (Osman Gormus)]

Thanks @Lilly it’s my pleasure : )

[toanvoc (Toan Nguyen)]

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?

[nathank (Nathan Kershaw)]

@gormus

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

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

[gormus (Osman Gormus)]

@toanvoc

when i click the X button to close this banner popup, is there any mode to make it show again?

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?

@toanvoc

I have selected in banner background repeat: repeat; repeat-x; repeat-y but it doesn’t work?

Could you clarify what you mean?

[toanvoc (Toan Nguyen)]

@gormus

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?

I see what you mean, thank you!

[ked (Kenny DuBose)]

@gormus

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

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

[gormus (Osman Gormus)]

@nathank

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

@ked

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

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

Please let me know what you think : )

[hoangphuctran93 (Hoàng Phúc Trần)]

Currently my discourse page is running ver 3.4.0.beta3-dev and has an error that does not display the page when installing the banner. You can check again and have early updates for the community. Thank you for your sharing.

[gormus (Osman Gormus)]

Hi @hoangphuctran93,

Thanks for reporting the issue, I was able to confirm it via a clean install of Notification Banners on a Discourse 3.4.0.beta3-dev (d3f09f8f61)

I just pushed a fix, please update the instance on your site, hard refresh the page if necessary.

[hoangphuctran93 (Hoàng Phúc Trần)]

thank you, they worked well, looking forward to your new ideas and updates. i have some suggestions as follows.

1. Expand the input box
2. allow quick selection of images besides designing with html.
3. Add a data field to name the banner instead of using it with the title, this helps to categorize and manage when multiple banners are applied.

This is the result of the application on our discourse page.

[Beth]

@gormus

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

I’m having trouble with this part - the link is broken here. How can I authorize those extensions on my site?

Thanks!

[Moin]

You need to replace meta.discourse.org with the URL of your forum. You cannot access the admin area here.
https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions

Or you can navigate to your site settings and search for theme authorized extensions

[Beth]

Ah yes, thank you

[Beth]

Another question here - when you say scheduling, is there a way to have the banner appear the same time every week? We have weekly recurring office hours that I would like this banner to display during those times, so anyone on the site can see office hours is currently happening and join if they want to

[gormus (Osman Gormus)]

You can enable a banner to start showing at a defined date and time, and removed at another.

So you can only have one schedule for starting and ending date and time.

What you are asking requires a more elaborate scheduling feature which Notification Banners doesn’t provide.

However you may still achieve what you need by creating copies of the same banner using different starting and ending dates.

I’d strongly recommend you to test this scenario before going live on production though.

And remember, regardless which time zone you are in, the datetime values must be entered in UTC, and must match the format seen in field descriptions.

[Beth]

Thanks for the input!

Was hoping for a more automated solution here, as we have 3 different office hour sessions a week, every week, so would be quite a bit of manual work to make duplicate banners for all of these sessions.

I looked at the Automations plugin as another option, but the banner automation also only allows for “point in time”. and not “recurring” actions.