Change the opacity of the banner box?

Dev
1

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

2 Likes
2

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

2 Likes
3

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)

2 Likes
4

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

rgba(--var(--secondary-rgb), 0.5)
1 Like
5

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

1 Like
6

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);
}
3 Likes
7

Awesome, that worked thanks!

3 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.