Welcome Link Banner

[undasein (Andres Garrido)]

Is there any way to make the banner links in the mobile version appear horizontally instead of vertically? Thanks!

[Moin]

Third migration, once again for a niche forum (Volkswagen Campers vans)

Ooooh yes, absolutely! There is something “soothing” in this color scheme! Yes, I intend to share the feedback. After this future experience on vw-camper.fr, I also intend to extend it to uniyclist.com, where a chat feature has never been explicitly asked or wanted. Because of this, the experiment may be interesting: how the users will react? Positively or negatively? But since it’s kind of a two-step experience of several months each, It’s not for tomorrow… Sure. Be aware i…

[undasein (Andres Garrido)]

Thank you very much, for some reason I didn’t notice it. It works perfectly!

[Moin]

Third migration, once again for a niche forum (Volkswagen Campers vans)

I tweaked the code a tiny bit so there shouldn’t be any horizontal wrap on small screen by adding white-space: normal; on h3. Also, you can remove margin: 0 auto 0 !important; if you wish to keep a background image. It can look good. Example: [image]

[Canapin (Coin-coin le Canapin)]

Here’s an example code of how you can customize the banner to look less tall on small screens:
Put this in the mobile tab of your theme customization!

// Makes the welcome banner adapted to small screen sizes
.below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-image: url($mobile-banner-bg);
        background-size: cover;
        .welcome-wrapper {
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                &>div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 0.75em;
                        white-space: normal;
                    }
                }
            }
        }
    }
}

To be tweaked regarding your needs (that’s why there are “empty” SCSS nests).

As it is, it looks like this on my current project:

---

edit: @Moin was faster than me to mention my own tweaks… Bravo

[JamesDb (James)]

Is it possible to change the opacity of the banner box?

[keegan (Keegan George)]

@JamesDb

Using the theme setting banner_box_background_color you can enter an rgba() value. You can use a generator like this one and copy and paste the RGBA value for that setting.

Alternatively, you can instead add some custom CSS to your theme to apply the opacity property:

.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    opacity: 0.5; // use a value between 0 and 1
}

Though the above CSS approach will change the opacity for contents too (making the text opacity reduced)

[JamesDb (James)]

@keegan

Using the theme setting banner_box_background_color you can enter an rgba() value. You can use a generator like this one and copy and paste the RGBA value for that setting.

Is there a way I can keep the variable eg var(--secondary) but add an opacity to that?

Because I want it to adapt to light and dark mode

Edit: I already tried rgba(var(--secondary), 0.5)

[keegan (Keegan George)]

I believe this should work (though I haven’t tested it):

rgba(--var(--secondary-rgb), 0.5)

[JamesDb (James)]

It doesn’t work. It just removes the colour entriely

[keegan (Keegan George)]

Hmm, I see why. The code needs to be using the background-color property to support that but it uses background.

If you add this to your theme CSS it should work:

.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    background-color: rgba(var(--secondary-rgb), 0.5);
}

[JamesDb (James)]

@keegan

rgba(--var(--secondary-rgb), 0.5)

Awesome, that worked thanks!

[nathankershaw]

@Canapin

Here’s an example code of how you can customize the banner to look less tall on small screens:
Put this in the mobile tab of your theme customization!

This is a vast improvement in the mobile appearance of the Welcome Banner. Just yesterday I watched a new user sign up to my site via mobile, and they tripped up on the large size of the banner; basically they didn’t realise that they had to scroll down to see the action. Hence I’ve been hunting for something better, and that snippet of CSS is brilliant.

I had to trim out background-image: url($mobile-banner-bg); as it is clear you lifted that from a forked TC.

@awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component?

[awesomerobot (Kris)]

@nathankershaw

@awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component?

sure PRs are always welcome

[Victor_Ashiedu]

This just saved me loads of time. Thank you so much, @Canapin!

[davidkingham]

I have a small request that might be too obscure. I would like to see the addition of min trust level. My use case is that I want to install the component twice so I can show a banner for TL0 an TL1 to help get them onboarded, then show a different banner for TL2 and above that is more general information or updates. Thoughts?

[pfaffman (Jay Pfaffman)]

I Think you’ll need to fork it to install it twice. so make your change in the fork.

[Kuro22]

@Canapin

Here’s an example code of how you can customize the banner to look less tall on small screens:
Put this in the mobile tab of your theme customization!

@awesomerobot

@nathankershaw

@awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component?

sure PRs are always welcome

Hi @awesomerobot, given that I haven’t seen a PR for that so far, I just created a PR to add the enhancement made by @Canapin, and added two locales.

[Rhod]

Thanks, its a great component.
Its posible add a “dismiss” button or “close” button (x).

[nathankershaw]

I took a look and saw that you removed the Locale changes as requested by @team. However, the PR was closed so I opened a new one for you:

Adapt the banner to mobile screens