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 Pro, Business and Enterprise plans.

77 Likes
How is the Banner at meta.discourse.org created?
How to Set a Closable Banner at the Top of site?
Banner text customization for Subscriptions plugin
Do the team have plan to release the banner as a theme component?
How is the "Welcome to Discourse Meta!" div being hid on forum posts?
Christmas Decoration Component :christmas_tree:
How do I add category groups and category group groups on my site? Just like Epic Forums
How to add sub header similar to "Welcome to Discourse Meta!"?
How to apply CSS code only in the discourse home page?
Adding icons for the Welcome Link Banner
How do I create a welcome banner like the one on this site?
How do I remove this sticky event/announcement banner?
Setup custom Welcome banner on the homepage
Can I create two new topic butons on my home page?
My Wiki of useful Meta (and other) links
What's with this official theme navigation?
Your own banner with a link
How to add a directory of people/businesses to my theme?
How to add title and buttons naturally above forum topics?
Name of component discourse top forum
How to show a piece of content to *only* non-logged in users
What are good plugins or theme components for a forum emphasizing pictures?
What are good plugins or theme components for a forum emphasizing pictures?
Questions about subcategories displaying in wiki sidebar
Creating a banner to display at the top of your site
Welcome Banner inspired by the discourse hiring banner
Horizon Theme
What Are Some Good Welcome Banner Designs?
Handlebars template conditional for trust level
Feng Shui (Simplifying the UI for new users)
Call to action - encourage new users to participate
Showing a Warning to Non-Registered Users
Can the new About page be more visible?
Call to Action - Top Header (Like meta.discourse.org)
Third migration, once again for a niche forum (Volkswagen Campers vans)
How can I make these two banners?
Fancy site header: how do I get it & what made it go away?
What is this component?
Customizing your site with existing theme components
Add Discourse-style top banner to my forum
Dismissible banner on meta
How to put sidebar on "top" like it is on meta.discourse
Require users to join at least one group at sign-up
Design and elements like on meta.discourse.org
Versatile Banner
Can the new About page be more visible?

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.

5 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