Is it possible to change the opacity of the banner box?
إعجابَين (2)
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)
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)
I believe this should work (though I haven’t tested it):
rgba(--var(--secondary-rgb), 0.5)
إعجاب واحد (1)
It doesn’t work. It just removes the colour entriely
إعجاب واحد (1)
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 إعجابات
Awesome, that worked thanks!
3 إعجابات
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.