Is there any way to make the banner links in the mobile version appear horizontally instead of vertically? Thanks!
Thank you very much, for some reason I didnât notice it. It works perfectly!
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
Is it possible to change the opacity of the banner box?
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)
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)
I believe this should work (though I havenât tested it):
rgba(--var(--secondary-rgb), 0.5)
It doesnât work. It just removes the colour entriely
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);
}
Awesome, that worked thanks!
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?
sure PRs are always welcome