Discourse Persistent banner

[NateDhaliwal]

	Summary	A persistent banner is shown at the top of every page that can only be hidden by Admins.
	Preview	Theme Creator
	Repository	GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.
	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

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!

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

I find it quite similar to the theme components “Notification banners” and it has more customization.

[NateDhaliwal]

Yes, but this way, the banner stays there (people have asked how to make the banner come back after closing it).

[Lilly]

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:

[NateDhaliwal]

@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.

[NateDhaliwal]

@Lilly

textarea-true

@Lilly Just to check, do I add this in settings.yml?

[Lilly]

yes, you can see it here in the versatile banner component:

discourse/discourse-versatile-banner/blob/8e9e9573354f0267e97c5f6afaa36a59686339ab/settings.yml#L88-L88C17

result in component settings:

[NateDhaliwal]

@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?

[Lilly]

@NateDhaliwal

I think it’s fixed. Could you try it on your side?

Assigned to Lilly ​

this is definitely fixed. nice work.

screenshot from my widescreen desktop view

[NateDhaliwal]

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.