Welcome Link Banner

:discourse2: Summary Welcome Link Banner is a simple banner that allows you to add custom text and 1-4 links.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-welcome-link-banner
:open_book: New to Discourse Themes? Beginnerā€™s guide to using Discourse Themes

Install this theme component

Features

Settings

This component comes with a variety of settings!

Name Description
show on Choose to show your banner on the homepage, topic lists, or all pages
banner links Add 1-4 links with font awesome icons and text (you might also need to add icons that arenā€™t included in Discourse by default to the svg_icons setting)
max trust level Only show the banner to users at specific trust levels
hide for staff
hide on mobile
layout Text-left (default) or text-top
plugin outlet allows you to change where the banner is rendered, if youā€™re using the sidebar try above-main-container
hide for anon Hides the banner from logged-out users
can be dismissed Allows users to click an x to hide the banner
banner background image Choose an image to display behind the banner
banner background repeat Configure background image repeat behavior
banner background size Adjust your background image size using CSS (more info)
banner background color No background image? Use a solid color!
banner box background color
banner text color
banner icon color
banner link color
Translations Default
meta_banner.welcome Welcome to our community!
meta_banner.subtitle Join the conversation, and remember to be kind.

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business and Enterprise plans.

Last edited by @Southpaw 2024-07-19T20:05:57Z

Check documentPerform check on document:
74 Likes

If youā€™re using the experimental sidebar, Iā€™ve added a setting (plugin outlet) that will make the welcome banner appear above the content but not above the sidebar. Just change that setting to above-main-container.

Changing that setting will make the banner appear to the right of the sidebar, as our banner does here on Meta:

6 Likes

10 posts were split to a new topic: Welcome Link Banner no longer showing on my site?

Question: when a user (me ^^) has closed the banner, how can he recover it ?
I do ctrl+F5 but it wonā€™t come back, and I closed it just for test.

3 Likes

On desktop, you can clear the localstorage item here, discourse_dismissedWelcomeLinkBanner.

You hit F12 to open the browser console ā†’ go to Application tab ā†’ In the left panel, click on Local Storage then your website ā†’ Look for the discourse_dismissedWelcomeLinkBanner key and delete it.

Thatā€™s it! You can refresh, and the banner should appear again.

4 Likes

Is there a way to display the banner if a user is in, or not in a group? rather than based on trust levels?

2 Likes

Hi @martyn_thomas :wave: If you install this theme component you should be able to use CSS to achieve what you want

4 Likes

My question may seem stupid, but Iā€™m not a programmer. I installed the CSS Classes for Current User's Groups component. If I want to display 3 banner options for three different groups, should I install three copies of the Welcome Link Banner component? Then how should I style the CSS if I want to:
For group A, banner-A was displayed, for group B, banner-B was displayed, and for group C, banner-C was displayed? Could you give an example?
Thanks in advance for your answer :pray:

2 Likes

Only install one copy of the component. See here for how to use

body.group-(group name here) .welcome-link-banner-wrapper {
    display: none;
}

replace ā€œ(group name here)ā€ with the group you want to hide banner for.

4 Likes

Thanks, this works if I want to hide a banner for a specific group, but I donā€™t know how to display different banners with different content for different groups(

2 Likes

if you want different banners, that is going to required more than one copy of the welcome link banner component (not the css group component). You may also want to do different CSS to show rather than hide.

4 Likes

I understand this, but I donā€™t know how to implement such CSS. I need a rough CSS example

2 Likes

you may want to hide it for everyone first, then use display: block for select groups. What you are wanting can likely be achieved more than one way - hiding for all then showing for some, or hiding for some.

1 Like

Allow me to offer some clarifications.

If I have several copies of a component, how should I write the class name. For example,

body.group-name1 .welcome-link-banner-wrapper 1{
display: none;
}
body.group- name1 .welcome-link-banner-wrapper 2 {
display: none
}
body.group-name2 .welcome-link-banner-wrapper 1{
display: block;
}
body.group-name2 .welcome-link-banner-wrapper 2{
display: none
}
body.group-name3 .welcome-link-banner-wrapper 2{
display: block
}

Something similar to?
I canā€™t figure out what .welcome-link-banner-wrapper will be called for each component instance.

3 Likes

You may have to fork the banner component for each use? probably best to learn some basic CSS and theme component dev for this sort of out of scope use case.

4 Likes

I would like to use this banner because it is simple and clean. Is it OK to use it to promote my companyā€™s app rather than as a welcome banner?

Iā€™m thinking of setting the link to a URL that can be downloaded from the App Store. Is there any problem with this as well?

Can I change the ā€œWelcome to our community!ā€ part?

2 Likes

Yes you can customize all the texts, choose the icons and add whatever links you want to add.
You can also try the theme on theme creator

4 Likes

@Moin

Thanks!

2 Likes

3 posts were split to a new topic: What icons can I add the Welcome Link Banner?

3 posts were split to a new topic: Show Welcome Link Banner for specific Categories