Bienvenue Bannière Link

Composant de thème
,
132

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

1 « J'aime »
133

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

3 « J'aime »
134

Good shout - will give it a look
Thanks

135

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 :frowning:

136

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

3 « J'aime »
137

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?

1 « J'aime »
138

@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?

5 « J'aime »
139

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

3 « J'aime »
140

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:

image
image440×115 2.45 KB

For example this one:

image

which seems to be free:

image
image158×161 1.37 KB

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.

1 « J'aime »
141

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.

2 « J'aime »
142

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! :slight_smile:

2 « J'aime »
143

Yes, that would be the easiest way.

2 « J'aime »
144

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.

:stop_sign: 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.

:magnifying_glass_tilted_left: 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.

:hammer_and_wrench: How I Resolved It:

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

  1. SSH into the server.

  2. Enter the app container:

    ./launcher enter app

  3. Open Rails console:

    RAILS_ENV=production rails c

  4. Disable the faulty theme:

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

  5. Exit Rails console.

  6. Clean all compiled assets:

    RAILS_ENV=production rake assets:clobber

  7. Rebuild the app:

    ./launcher rebuild app

After these steps, the forum was back online.

:light_bulb: 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.
1 « J'aime »
145

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

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

3 « J'aime »
146

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

1 « J'aime »
147

May conflict with another component I’m developing

2 « J'aime »
149

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:

IMG_1622
IMG_16221242×2208 207 KB

IMG_1623
IMG_16231242×2208 247 KB

IMG_1618
IMG_16181242×2208 235 KB

IMG_1620
IMG_16201242×2208 97 KB

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.

150

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

151

I did that:

image
image496×398 25 KB

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.

152

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:

  1. Open the Discourse site.

  2. Press F12 or right-click → Inspect to open Developer Tools.

  3. Go to the Console tab.

  4. Paste this and press Enter:

    localStorage.removeItem("discourse_dismissedWelcomeLinkBanner");

  5. 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”:

image

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. :raising_hands:

1 « J'aime »