Dawn 15.0.0 Image banner container Transparent Opacity Change

[GACSTOP]

Hello,

My website is currently running in Dawn theme 15.0.0. I used the following code in the base.css,

.banner__box {

opacity: 0.2;

}

to make my banner container transparency opacity on the older version. It worked like a magic. But all of a sudden the code stopped working once I upgraded to the Dawn 15.0.0 version, it’s a solid block.

This is what it looks like currently.

Please advise.

Thank you

[BSSCommerce-HDL]

HI @GACSTOP ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[BSS-TekLabs]

Hi @GACSTOP ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.banner__box {
    /* You can adjust this value according to your preference */
    background-color: rgba(0, 0, 0, 0.2);
}

.banner__box .banner__text {
    color: #fff;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[BSS-TekLabs]

• Here is the solution for you @GACSTOP
• Please follow these steps:

• Then find the base.css or theme.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

.banner--mobile-bottom .banner__box {
    background: transparent !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[BSSCommerce-B2B]

Hi @GACSTOP ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file theme.liquid and add this script before the end of tag or :

Step 3: Save and reload page.

The result will be:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[BSSCommerce-B2B]

Hi @TheBrandAudit ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file theme.liquid and add this script before the end of tag or :

In this step, you can change the value of padding-left as you want to fix the form position.

In my example, I choose : 30px.

Step 3: Save and reload page.

The result will be ok in both mobile and desktop view:

#Mobile

#desktop:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[GACSTOP]

Thank you for your input. Not a coding person here, I meant not 100% transparent, I want transparency opacity adjustable.

[BSSCommerce-HDL]

Hi @GACSTOP , If you leave the opacity attribute it will affect your text in the banner and fade out as well.

[GACSTOP]

Thank you. I added rgba color line with adjustable opacity, and now the container is transparent. I appreciated it.

[Aubi]

Amazing!
Thank you so much!

Now, how I can make all the text in white color?

Thank you!