Welcome Link Banner

theme-component
,
1
:discourse2: Summary Welcome Link Banner is a simple banner, similar to the one in use here on Meta, that allows you to add some custom text and 1-4 links.
:eyeglasses: Preview Preview on theme-creator.discourse.org
: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

Welcome Link Banner
Welcome Link Banner1187Ɨ373 29.3 KB

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

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

73 Likes
49

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:

Screen Shot 2022-10-11 at 5.31.37 PM
Screen Shot 2022-10-11 at 5.31.37 PM1419Ɨ622 69.5 KB

6 Likes
113

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

114

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.

2 Likes
115

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.

3 Likes
116

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
117

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

4 Likes
118

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
119

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
120

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
121

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.

3 Likes
123

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

2 Likes
124

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
125

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.

2 Likes
126

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.

3 Likes
127

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
128

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
129

@Moin

Thanks!

2 Likes
130

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