# Discourse Persistent banner
**URL:** https://meta.discourse.org/t/discourse-persistent-banner/330575
**Category:** Theme component
**Created:** [October 12, 2024, 1:41pm UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575 "2024-10-12T13:41:56Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 12, 2024, 1:41pm UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/1 "2024-10-12T13:41:56Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | A persistent banner is shown at the top of every page that can only be hidden by Admins. |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/NateDhaliwal/persistent-banner) |
| 🛠 | **Repository** | [GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user. · GitHub](https://github.com/NateDhaliwal/discourse-persistent-banner) |
| ❓ | **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
This component displays a banner at the top of every page. Any valid CSS colours can be used. If you are planning to use discourse theme variables, wrap them in `var()`, so you’ll get something like `var(--tertiary-very-low)`.
There are 7 settings to control the banner.
1. `banner_background_color` changes the background color of the banner.
2. `banner_text_color` changes the text color of the banner.
3. `banner_border_color` changes the border color of the banner.
4. `banner_border_thickness` changes the border thickness of the banner.
5. `banner_text_content` changes the text of the banner. The text will wrap in the banner if it is longer than 1 line.
6. `banner_visible` changes the visibility of the banner. `show` to show the banner, `hide` hides the banner.
7. `banner_location` places the banner at 1 of the 4 outlets given: `above-site-header`, `below-site-header`, `above-main-container` and `before-topic-list`.
Special thanks to @Lilly for helping out to sort out the files!
---
### Author:  [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [October 12, 2024, 2:32pm UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/2 "2024-10-12T14:32:58Z")
I find it quite similar to the theme components “[Notification banners](https://meta.discourse.org/t/notification-banners/325279)” and it has more customization.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 13, 2024, 1:27am UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/3 "2024-10-13T01:27:10Z")
Yes, but this way, the banner stays there (people have asked how to make the banner come back after closing it).
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 13, 2024, 3:30am UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/4 "2024-10-13T03:30:58Z")
Nice work Nate. 👏 🙂
I like the simplicity
I don’t think the theme creator preview is working. 🤔
A few suggestions for you to think about:
- there is a bit of an issue of placement on desktop mode, especially if one is using a wide / full screen.
- it would be nice to control that border size and color.
- perhaps options for placement with different plugin outlets, like `below-site-header` and `above-main-containter`?
- while the use of enum list vs text input for color choices is convenient, it also limits admins from using the color pallet variables that work with dark / light modes, or for being more granular with hex color values.
- I would suggest making the banner string text input setting with the `textarea: true` property, then you will get a multi-line textbox that the user can expand. Then it’s easier to do this:
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 13, 2024, 3:36am UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/5 "2024-10-13T03:36:58Z")
> [@Lilly](#):
>
> there is a bit of an issue of placement on desktop mode, especially if one is using a wide / full screen
I’ll play around with the placings of the banner, and try to get this working.
> [@Lilly](#):
>
> it would be nice to control that border size and color.
Shouldn’t be to much of a problem, I’ll add this.
> [@Lilly](#):
>
> perhaps options for placement with different plugin outlets, like `below-site-header` and `above-main-containter`?
Got it. I have some sort of an idea on how to implement this.
> [@Lilly](#):
>
> while the use of enum list vs text input for color choices is convenient, it also limits admins from using the color pallet variables that work with dark / light modes, or for being more granular with hex color values.
I think I can implement this.
> [@Lilly](#):
>
> I would suggest making the banner string text input setting with the `textarea-true` property, then you will get a multi-line textbox that the user can expand.
Got it, I’ll add this.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 13, 2024, 3:39am UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/6 "2024-10-13T03:39:28Z")
> [@Lilly](#):
>
> textarea-true
@Lilly Just to check, do I add this in `settings.yml`?
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 13, 2024, 3:45am UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/7 "2024-10-13T03:45:50Z")
yes, you can see it here in the versatile banner component:
>
result in component settings:
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 14, 2024, 3:02am UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/8 "2024-10-14T03:02:46Z")
> [@Lilly](#):
>
> perhaps options for placement with different plugin outlets, like `below-site-header` and `above-main-containter`?
Implemented.
> [@Lilly](#):
>
> it would be nice to control that border size and color.
Done.
> [@Lilly](#):
>
> it also limits admins from using the color pallet variables that work with dark / light modes, or for being more granular with hex color values.
You can now use hex values (include the #), valid CSS colours or theme variables (var(–var-name)).
> [@Lilly](#):
>
> I would suggest making the banner string text input setting with the `textarea: true`
Also done.
> [@Lilly](#):
>
> there is a bit of an issue of placement on desktop mode, especially if one is using a wide / full screen.
I think it’s fixed. Could you try it on your side?
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 18, 2024, 6:27pm UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/10 "2024-10-18T18:27:50Z")
> [@NateDhaliwal](#):
>
> I think it’s fixed. Could you try it on your side?
>
> Assigned to [Lilly](https://meta.discourse.org/u/Lilly/activity/assigned)
this is definitely fixed. nice work. 😃 :discourse:
> **screenshot from my widescreen desktop view**
>
> 
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [October 20, 2024, 8:42am UTC](https://meta.discourse.org/t/discourse-persistent-banner/330575/12 "2024-10-20T08:42:56Z")
UPDATE:
I have simplified the `.gjs` file by moving the `if` statements of checking if the banner text is empty and the visibility of the banner to the `.scss` file.