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

Solved
Myellagroup
Excursionist
24 0 2

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!

Accepted Solution (1)

Accepted Solutions
Nick_Marketing
Shopify Partner
817 193 244

This is an accepted solution.

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;
}

 

 

 

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.

View solution in original post

Replies 7 (7)
Ecommpremium
Shopify Partner
269 22 52

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

.banner__box {
opacity: 0.5;
}

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@ecommpremium.com
- SKYPE: ahsanaliawan
- shopifyexperts
Nick_Marketing
Shopify Partner
817 193 244

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%;
}

 

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.
Myellagroup
Excursionist
24 0 2

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?

Thanks!

Nick_Marketing
Shopify Partner
817 193 244

This is an accepted solution.

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;
}

 

 

 

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.

View solution in original post

Myellagroup
Excursionist
24 0 2

Hi @Nick_Marketing 

Thanks!

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

Thanks

mktaha
New Member
2 0 0

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..