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 </head> tag: 

<style>
.banner__box.content-container {
    background-color: #00000000 !important;
}
</style>

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 😍

[GACSTOP]

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

[BSSCommerce-HDL · Accepted solution]

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.

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

[Aubi]

Amazing! 
Thank you so much!

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

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  </head> or </body>:

<style>
  .banner--mobile-bottom .banner__box {
    background: transparent !important;
  }
</style>

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  </head> or </body>:

<style>
   .hbspt-form {
    padding-left: 30px !important;
}
</style>

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!