Welcome link banner

theme
#23

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

Captura de pantalla 2022-03-30 a las 9.42.30
Captura de pantalla 2022-03-30 a las 9.42.30295×521 21.9 KB

2 Likes
#24
3 Likes
#25

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

3 Likes
#27
4 Likes
#28

Here’s an example code of how you can customize the banner to look less tall on small screens:
:warning: 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:

image
image375×667 91.8 KB

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

5 Likes
#29

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

1 Like
#30

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

1 Like
#31

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)

1 Like
#32

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

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

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

#34

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);
}
2 Likes
#35

Awesome, that worked thanks!

2 Likes
#36

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?

4 Likes
#37

sure PRs are always welcome

2 Likes
#38

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

2 Likes