Dawn theme - Image Banner - making the text box more transparent

Store Design
1

Hi All,

Wondering if anyone knows how to make the black text box on my Image Banner less opaque/more transparent. I would like the background image to be partially visible without compromising the legibility of the white text in the text box.

Preview: https://eaoz1b83k81muggb-15517073.shopifypreview.com

Thank you!

2

hi @Myellagroup go to edit theme and open base.css and paste this line in the bottom!

.banner__box {
opacity: 0.5;
}
2 Likes
3

Try adding this code to the bottom of base.css. You can adjust the opacity values to your preference.

.banner__box.color-inverse {
  opacity: 70%;
}
1 Like
4

Hi @Ecommpremium @Nick_Marketing

Both worked!

However, when I try to decrease the opacity to 0.3 or 30%, the opacity of the text decreases too making it hard to read. So, is there a way just to reduce box opacity without affecting the text?

Also, in a different scenario, is there a way to make the text black, if I completely get rid of the text box? :slightly_smiling_face:

Thanks!

5

Here is a workaround of decreasing opacity to a minimum, while keeping the text relatively visible. To change background opacity, adjust the current background value of ‘0.2’

.banner__box.color-inverse {
    opacity: unset;
    background: rgba(60, 60, 60, 0.2);
}

.banner__box.color-inverse .banner__heading.h0, .banner__text, .button.button--secondary{
    color: #fff;
}
2 Likes
6

Hi @Nick_Marketing

Thanks!

Could you also help me out with changing the text colour into black please?

Thanks

7

It’s important to mention that you ALSO have to set the “Color scheme” in the image banner configuration to “Inverse” for this to work..

1 Like
8

@mktaha

okay thanks!

9

This worked perfectly for me but how do you make it so the text is still on the photo when on a mobile device?