# Welcome Link Banner

**URL:** https://meta.discourse.org/t/welcome-link-banner/218743
**Category:** Theme component
**Tags:** official, welcome-link-banner
**Created:** [February 18, 2022, 10:21pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743 "2022-02-18T22:21:47Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [February 18, 2022, 10:21pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/1 "2022-02-18T22:21:48Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Welcome Link Banner** is a simple banner that allows you to add custom text and 1-4 links. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/welcome-link-banner) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-welcome-link-banner](https://github.com/discourse/discourse-welcome-link-banner) |
| 📖 | **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

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=welcome-link-banner "Ask for support on configuring and using Welcome Link Banner") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=welcome-link-banner "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=welcome-link-banner "Discussion about the user interface of Welcome Link Banner, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=welcome-link-banner "Discussion about how existing Welcome Link Banner features can be improved or enhanced, and how proposed new features could work")

### Features

 ![Welcome Link Banner](https://global.discourse-cdn.com/meta/original/3X/f/2/f25ed853484963a61ea1ab14327a3d34d799f65f.png)

### 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](https://fontawesome.com/) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)) |
| 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.

> Last edited by @Lilly 2025-09-17T20:21:57Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [October 11, 2022, 9:32pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/49 "2022-10-11T21:32:54Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/0/5/2/052ab28aaa7edb61791374a2781071f197bdfb95.png)

[https://github.com/discourse/discourse-welcome-link-banner/pull/7](https://github.com/discourse/discourse-welcome-link-banner/pull/7)

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 16, 2023, 4:56am UTC](https://meta.discourse.org/t/welcome-link-banner/218743/113 "2023-09-16T04:56:29Z")

</div>

10 posts were split to a new topic: [Welcome Link Banner no longer showing on my site?](https://meta.discourse.org/t/welcome-link-banner-no-longer-showing-on-my-site/279207)

---

<div class="post-metadata">

### Author: ![jaileleu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jaileleu/32/343769_2.png) [@jaileleu](https://meta.discourse.org/u/jaileleu)
#### Post date: [December 5, 2023, 10:06pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/114 "2023-12-05T22:06:21Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 5, 2023, 10:19pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/115 "2023-12-05T22:19:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [December 7, 2023, 1:12am UTC](https://meta.discourse.org/t/welcome-link-banner/218743/116 "2023-12-07T01:12:02Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 7, 2023, 1:28am UTC](https://meta.discourse.org/t/welcome-link-banner/218743/117 "2023-12-07T01:28:27Z")

</div>

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

> [@CSS Classes for Current User's Groups](https://meta.discourse.org/t/css-classes-for-current-users-groups/226068):
>
> discourse2Summary CSS Classes for Current User’s Groups adds the groups that a member is a part of as CSS classes on the \<body\> tag.eyeglassesPreview [Preview on theme-creator.discourse.org](https://discourse.theme-creator.io/theme/Johani/user-groups-css-classes)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-groups-css-classes-in-body](https://github.com/discourse/discourse-groups-css-classes-in-body)open_bookNew 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 Before: [image] After: [image] Discourse only adds the current us…

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [December 10, 2023, 3:30pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/118 "2023-12-10T15:30:12Z")

</div>

> [@Lilly](#):
>
> Hi @martyn_thomas 👋 If you install this theme component you should be able to use CSS to achieve what you want
> 
> > [@](#):
> >
> > discourse2 Summary CSS Classes for Current User’s Groups adds the groups that a member is a part of as CSS classes on the tag. eyeglasses Preview [Preview on theme-creator.discourse.org](https://discourse.theme-creator.io/theme/Johani/user-groups-css-classes) hammer\_and\_wrench Repository Link [GitHub - discourse/discourse-groups-css-classes-in-body · GitHub](https://github.com/discourse/discourse-groups-css-classes-in-body) open\_book 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 Before: [image] After: [[image]](https://global.discourse-cdn.com/meta/original/4X/4/a/0/4a00e001260d4ba7966a30a2b036c1a016dcd986.png) Discourse only adds the current u…

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 🙏

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 10, 2023, 4:05pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/119 "2023-12-10T16:05:21Z")

</div>

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

[https://github.com/discourse/discourse-groups-css-classes-in-body?tab=readme-ov-file#usage](https://github.com/discourse/discourse-groups-css-classes-in-body?tab=readme-ov-file#usage)

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

```

replace “`(group name here)`” with the group you want to hide banner for.

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [December 10, 2023, 4:20pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/120 "2023-12-10T16:20:41Z")

</div>

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(

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 10, 2023, 4:23pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/121 "2023-12-10T16:23:53Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [December 10, 2023, 4:41pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/123 "2023-12-10T16:41:55Z")

</div>

> [@Lilly](#):
>
> different CSS to show rather than hide.

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

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 10, 2023, 4:54pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/124 "2023-12-10T16:54:23Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)
#### Post date: [December 10, 2023, 7:18pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/125 "2023-12-10T19:18:34Z")

</div>

Allow me to offer some clarifications.

> [@Lilly](#):
>
> if you want different banners, that is going to required more than one copy of the welcome link banner component

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.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 10, 2023, 8:20pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/126 "2023-12-10T20:20:22Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![nujabes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nujabes/32/135752_2.png) [@nujabes](https://meta.discourse.org/u/nujabes)
#### Post date: [December 18, 2023, 1:14pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/127 "2023-12-18T13:14:28Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [December 18, 2023, 1:25pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/128 "2023-12-18T13:25:31Z")

</div>

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](https://discourse.theme-creator.io/my/themes)

---

<div class="post-metadata">

### Author: ![nujabes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nujabes/32/135752_2.png) [@nujabes](https://meta.discourse.org/u/nujabes)
#### Post date: [December 18, 2023, 1:40pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/129 "2023-12-18T13:40:11Z")

</div>

@Moin

Thanks!

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [February 10, 2024, 5:38pm UTC](https://meta.discourse.org/t/welcome-link-banner/218743/130 "2024-02-10T17:38:47Z")

</div>

3 posts were split to a new topic: [What icons can I add the Welcome Link Banner?](https://meta.discourse.org/t/what-icons-can-i-add-the-welcome-link-banner/294955)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 24, 2024, 1:00am UTC](https://meta.discourse.org/t/welcome-link-banner/218743/131 "2024-05-24T01:00:28Z")

</div>

3 posts were split to a new topic: [Show Welcome Link Banner for specific Categories](https://meta.discourse.org/t/show-welcome-link-banner-for-specific-categories/309234)

[Next page](https://meta.discourse.org/t/welcome-link-banner/218743.md?page=2)
