Solved

Dawn Theme (14.0.0) - Image Banner Box (Transparent) and Text (Visible)

erickah_thao
Visitor
3 0 3

Store address: animeemporium.net

PW: Test

 

Currently working on a shift with my store's website. I've been messing around with what css coding I could find to try and make the Image Banner Box be transparent and have the text to be VISIBLE and NOT transparent with the box. These are the codes I've found to work, but it makes the box and text both transparent when I need it to only be the box.

 

Code #1

.banner__box {
  opacity: 0.8; /* Adjust the value between 0 (fully transparent) and 1 (fully opaque) */
}

Code #2

.banner__box {
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the values for color and transparency */
}

 

Current code I'm using in my base.css is code #1. I've tried both and they've done what I've needed them to do for box transparency, but the text also becomes transparent and that's not what I've needed. Any extra coding or help would be greatly appreciated.

 

 

Something else to add regarding the "button". I haven't made it that far yet, but what kind of coding would need to be done in order for me to be able to adjust the opacity to be visible too. I've included a picture below to help what it looks like currently with the adjustments I'm using.

 

Here's a list of what I need:

  • CSS Coding for Transparent Box (Banner Box)
  • CSS Coding for Visible Test (Banner Box)
  • CSS Coding for Visible Button (Banner Box)

 

erickah_thao_2-1714403461173.png

 

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

Hi @erickah_thao 

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__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
  background: transparent;
}

 

And Save. 

Result:

Made4uoRibe_0-1714408974426.png

Note: Please, remove the opacity that you add. Thanks!

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

Hi @erickah_thao 

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__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
  background: transparent;
}

 

And Save. 

Result:

Made4uoRibe_0-1714408974426.png

Note: Please, remove the opacity that you add. Thanks!

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


erickah_thao
Visitor
3 0 3

Thank you so much! It did match your result! Because of that and with the information I've found, I did only 1 minor adjustment with the rgba coding. I've included the whole code with my adjustment. I went from yours 0.5 to 0.0 and that gave me what I needed!

 

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.0);
}

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
  background: transparent;
}

 

Made4uo-Ribe
Shopify Partner
6035 1449 1787

Good to hear that, would you mind to hit like also.Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


takeoverapparel
New Member
5 0 0

Hello I'm trying to do the same thing for my store but I want my image banner button to be transparent like the outline and just the text to be white how can i do that?

 

Made4uo-Ribe
Shopify Partner
6035 1449 1787

Hi @takeoverapparel 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com