# Notification Banners **URL:** https://meta.discourse.org/t/notification-banners/325279 **Category:** Theme component **Created:** [September 6, 2024, 8:47am UTC](https://meta.discourse.org/t/notification-banners/325279 "2024-09-06T08:47:28Z") **Posts on this page:** 1 **Showing post:** 1
### Author: ![gormus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gormus/32/428592_2.png) [@gormus](https://meta.discourse.org/u/gormus) #### Post date: [September 6, 2024, 8:47am UTC](https://meta.discourse.org/t/notification-banners/325279/1 "2024-09-06T08:47:28Z")
| | | | | --- | --- | --- | | ℹ | **Summary** | The Notification Banners theme-component provides a customizable and flexible way to share messages on your site. | | 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/gormus/notification-banners) | | 🛠 | **Repository** | [https://github.com/gormus/discourse-notification-banners](https://github.com/gormus/discourse-notification-banners) | | ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | Install this theme component The Notification Banners theme-component provides a customizable and flexible way to share messages on your site. ![Demonstrating Notification Banners in all available regions; stacked and in carousel mode with various background colors](https://global.discourse-cdn.com/meta/original/4X/2/a/5/2a569052d567ea995cf6422b6af14dac9eb04041.jpeg) ![Settings of an individual notification banner](https://global.discourse-cdn.com/meta/original/4X/4/6/7/46744d0909ef450b726e743b670cb1ea68b4551c.png) 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](https://splidejs.com/) 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](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#add-theme-components-to-a-theme-9) 2. Change [`theme authorized extensions`](https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions) 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. As of v1.3.0, using the native [re-ordering](https://meta.discourse.org/t/objects-type-for-theme-setting/305009/30) buttons. ## The Carousel The slideshow, or the carousel functionality is provided by [Splide](https://splidejs.com/) library; it is licensed under [MIT](https://github.com/Splidejs/splide/blob/d7e1f08e6b4f4b02a7c6ccbfbeb2d569d85715e6/LICENSE). Each carousel can be configured on the theme-component page using the [Splide options](https://splidejs.com/guides/options/). ## Banner Colors By default, the banners will use same colors as the banner-topic: ```scss .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 ```scss .notification-banners--above-site-header, .notification-banners--below-site-header, .notification-banners--top-notices { .notification-banner { &__wrapper { } &__close { } &__header { } &__content { } } &.splide { .notification-banner { } } } .notification-banners--top-notices { .notification-banner { &__content { } } } ``` ## v1.3.0 has breaking changes (for some) Don’t forget to test the changes, and check your customizations before updating your production sites. > [@Notification Banners](https://meta.discourse.org/t/notification-banners/325279/32): > > I’ve been considering this idea to better target an audience using the Trust Levels: I think I have something for you all to check out. Though, I recommend testing this on a non-production environment first as it introduces a breaking change. To install this version, use the staging branch of [Notification Banners](https://github.com/gormus/discourse-notification-banners): Breaking change When the banner visibility is evaluated using the Audience field values, all the trust\_level\_\* roles of … --- _[View the full topic](https://meta.discourse.org/t/notification-banners/325279)._