Welcome Link Banner

martyn_thomas · November 18, 2024, 2:37pm

I’m doing some testing (over months…don’t ask).

Coming back to it - it looks like since an update, the welcome bar now only appears when the user is logged out.

Is there a way to have the bar appear for everyone - regardless of log in status?

Thanks

Martyn

awesomerobot · November 18, 2024, 3:21pm

I just tested it a bit and don’t see this issue, is it possible you’ve dismissed the banner by clicking the x in the corner? if that’s the case you’d have to clear your browser’s localStorage to see it again

martyn_thomas · November 18, 2024, 3:23pm

Good shout - will give it a look
Thanks

martyn_thomas · November 18, 2024, 3:42pm

Tried clearing localstorage - tried clearing browser data - tried on Edge (I’m going to be trying to scrub myself clean for weeks!) … still no joy

Moin · November 18, 2024, 3:51pm

How did you configure the max trust level and hide for staff settings?
Did you try with a new user created for testing?

Aurora · February 9, 2025, 10:21am

I would like to make different banners visible for registered and unregistered users or should not all links of the banner be visible for unregistered users. Is that possible?

Arkshine · February 9, 2025, 3:46pm

@Aurora

One way would be to create links for logged-in users and follow the links for logged-out users (in order, so you have two groups of links).

Then, with some CSS, you hide one group or another.
There is a CSS anon class you could use.

For example, let’s say you have two links for logged-in users and 3 for logged-out users:

logged-in link 1
logged-in link 2
logged-out link 1
logged-out link 2
logged-out link 3

In CSS, you can do:

/* Logged-out users: Hides the first two links */
html.anon .featured-banner-link > div:nth-child(-n+2) {
    display: none !important;
}

/* Logged-in users: Hides the last three links */
html:not(.anon) .featured-banner-link > div:nth-last-child(-n+3) {
    display: none !important;
}

Would that work with you?

Aurora · February 9, 2025, 10:00pm

Yes! Thank you very much! That’s really helpful!

alltiagocom · March 27, 2025, 4:40pm

In the links area, on the icon field, wouldn’t it be possible to have it autocomplete to make it easier to find the icon we want?

If not, at least including a direct link to the FontAwesome website would make it more obvious that that’s the icon provider, as well as directing the person directly to the source.

For example, I downloaded the component and installed, then when I was creating the link I had to go back to this topic to read about it again to then know that it’s FontAwesome. Just a suggestion to make it faster and easier to add icons.

EDIT: I used the name on their website, but it doesn’t add the icons:

For example this one:

which seems to be free:

So which ones are we supposed to use?

I also noticed an issue with the Summary here on this topic. It says Welcome Link Banner is a simple banner that allows you to add custom text and 1-4 links, but it actually lets me add more links. I was able to add 6 (and if I keep clicking it keeps adding more links).

If 4 is indeed the goal, then I believe it would be better if after adding the 4th link, the + banner link disappeared or got grayed out.

Arkshine · March 27, 2025, 5:01pm

I agree that it would be handy. This is not specific to this TC, though. Some input types are unavailable in TC compared to core/plugins.

I will see if I can PR to improve the description.

You might also need to add icons that aren’t included in Discourse by default to the svg_icons setting

This should be your issue.

Yes, you can add as much as you want. There is no limit.
It implies that it’s designed to work best with 1-4 links.

alltiagocom · March 27, 2025, 5:08pm

thanks

Oh, I didn’t know that it doesn’t load all available icons. I thought it was reading from the FA website directly. I added an icon that wasn’t loading and it’s visible now. Thank you so much.
How can I see which ones are available? Is there a list or is it like adding, seeing if it doesn’t show, and then add it?

I see. I think it’s the wording then. Maybe something along the lines of
Welcome Link Banner is a simple banner that allows you to add custom text and links (recommended: up to 4 links). or something like that.

Thank you so much for your help. Glad that the icons are now visible!

Arkshine · March 27, 2025, 5:13pm

Yes, that would be the easiest way.

huynhthai824 · April 21, 2025, 4:01pm

Updating “Welcome Link Banner” theme caused SCSS compilation error and site crash

Hello,

I recently encountered a critical issue when updating the “Welcome Link Banner” theme on my Discourse forum.

Issue Summary:

After updating the theme, the site immediately crashed.
Safe mode (/safe-mode) was also inaccessible.
The error logged was:

CssSyntaxError: Missed semicolon in common.scss (MiniRacer::RuntimeError)

This SCSS error prevented Discourse from compiling assets, causing the frontend to fail completely.

Root Cause:

The updated common.scss file inside the “Welcome Link Banner” theme had a syntax error (missing ; semicolon).
As a result, asset compilation broke, and Discourse couldn’t serve even the basic UI.

How I Resolved It:

Since I couldn’t access the web interface (even Safe Mode), I had to fix it manually:

SSH into the server.
Enter the app container:
```
./launcher enter app
```
Open Rails console:
```
RAILS_ENV=production rails c
```

Disable the faulty theme:

Theme.where(name: "Welcome Link Banner").update_all(enabled: false)

Exit Rails console.

Clean all compiled assets:

RAILS_ENV=production rake assets:clobber

Rebuild the app:
```
./launcher rebuild app
```

After these steps, the forum was back online.

Suggestion:

Maybe add an extra SCSS syntax check during theme upload/update, before applying the theme to production sites.
This could help avoid full site crashes caused by minor CSS mistakes.

Arkshine · April 21, 2025, 5:38pm

That’s odd. There is no missing semicolon in the CSS for this component.
I don’t see a change in history as well.

On a side note, if /safe-mode doesn’t work, you can try appending directly ?safe_mode=no_themes to the URL.

awesomerobot · April 22, 2025, 3:20pm

Hmm I also checked and don’t see this issue, was the component customized? or perhaps something went wrong in the update process?

huynhthai824 · April 23, 2025, 2:43am

May conflict with another component I’m developing

alltiagocom · July 7, 2025, 11:14am

1 - I dismissed the banner, but I want to test a few things so I need to bring it back. How to?
2 - I noticed that at least on mobile, when I’m in the Channels page, the banner completely disrupts the whole layout:

3 - Is it possible to exclude the banner from certain pages, other than using CSS? I’m aware that there’s the dropdown menu with homepage,discovery,all, but that’s too limited.

NateDhaliwal · July 7, 2025, 2:05pm

I think clearing the cache may help, because it’s stored in localStorage:

github.com/discourse/discourse-welcome-link-banner

javascripts/discourse/components/welcome-link-banner.gjs

317b051ab


      
              this.showHere
            );
          }
          
          @action
          dismiss() {
            if (!settings.can_be_dismissed) {
              return;
            }
            this.dismissed = true;
            return localStorage.setItem("discourse_dismissedWelcomeLinkBanner", true);
          }
          
          <template>
            {{#if this.shouldShow}}
              <div class="welcome-link-banner-wrapper">
                <div class="wrap welcome-link-banner">
                  <div class="welcome-wrapper">
                    <div class="welcome-content">
                      <h2>{{htmlSafe (i18n (themePrefix "meta_banner.welcome"))}}</h2>
                      <p>{{htmlSafe (i18n (themePrefix "meta_banner.subtitle"))}}</p>

alltiagocom · July 7, 2025, 3:03pm

I did that:

but it didn’t work. I’m using Cloudflare and I’ve had issues with their cache, Should I wait a little longer, or since it’s localstorage, it’s not related?

I’m no expert when it comes to that. Just guessing…

Is there a way to remove that via the Developer Tools window? I remember deleting some stuff there at one point when I was working with a website I was working on.

alltiagocom · July 7, 2025, 3:14pm

Update: I asked ChatGPT to help me according to your reply and I got this:

Clearing the browser cache doesn’t affect localStorage, which is where the dismissal state is stored. You need to manually remove the item from localStorage.

Do this:

Open the Discourse site.
Press F12 or right-click → Inspect to open Developer Tools.
Go to the Console tab.

Paste this and press Enter:

localStorage.removeItem("discourse_dismissedWelcomeLinkBanner");

Refresh the page.

This will reset the dismissed state, and the Welcome Banner Link should appear again.

Then I asked if I could also do it manually, and yes, I can, by going to the Application tab, then on the sidebar going to Storage > Localstorage and deleting the “entry”:

Let me thank you for pointing me in the right direction!

So now my question is: if this is how I do it on my desktop, how can I do it on mobile? ChatGPT said I could add this to the address bar and “run” it, but it didn’t help:

javascript:localStorage.removeItem("discourse_dismissedWelcomeLinkBanner");

EDIT: it worked! I was doing it wrong. ChatGPT made it clear now that I needed to open the forum, then on that same tab, run javascript:localStorage.removeItem("discourse_dismissedWelcomeLinkBanner");, not on a new tab, which is what I was doing.

Again, thank you for your reply, because it definitely helped narrowing things down.

Topic		Replies	Views
Versatile Banner Theme component official , versatile-banner	95	42429	June 13, 2025
Category Banners Theme component official , category-banners	84	47049	June 27, 2025
Setup custom Welcome banner on the homepage Support	2	710	August 31, 2023
Advanced Search Banner Theme component official , advanced-search-banner	38	21586	June 30, 2025
Banner Featured Links Theme component	18	611	June 25, 2025