How can I adjust the opacity of text on my image banner?

Store Design
, , ,
1

On my home page, the text on the image banner is opaque. I don’t want that, I need it to be solid. How can I change that? I am using dawn

Thank you!

I’d also like to change the colour of the button & the text on it

2 Likes
2

Hi @polly5 ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Change Opacity Of Text On Image Banner, let’s try this solution:

Online Store ->Theme ->Edit code->theme.liquid

PageFlyTheodor_0-1701019675832.png
PageFlyTheodor_0-1701019675832.png1896×555 220 KB

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

3

Hi @polly5 Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.banner__text.subtitle {
    opacity: solid;
    background: black;
}

a.button.button--primary {
    color: blue;
    background: red;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Please Note: You can change the colors according to your needs.

Result:

sahilsharma9515_0-1701019847454.png
sahilsharma9515_0-1701019847454.png1819×801 283 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

4

Hi @polly5

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.banner__text.subtitle span {
     opacity: 1 !important;
    color: white !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like