Goal is to make the yellow text NOT transparent, not sure where to adjust that. Tried many different codes and none worked. (this didn’t work either)
Can you please help? Thank you!
Site: hayatigoods.com
PW: uflawb
Topic summary
A user needed to remove transparency from yellow text on a homepage image banner in Shopify.
Root Cause Identified:
A CSS selector in the theme.liquid file was applying 75% opacity (0.75) to the banner heading color.
Solutions Provided:
- Change the opacity value from 0.75 to 1 in the theme.liquid color scheme settings
- Add custom CSS targeting
.banner__heading colorwithcolor: RGB(var(--color-foreground)) - Use the theme customizer: Navigate to Online Store → Themes → Customize → Image banner, then add custom CSS code replacing the color value
- Remove “#DAA250” reference that was causing weird transparency behavior around line 265 in base.css
Resolution:
The issue was resolved by replacing “0.75” with “1” in the CSS, removing the transparency effect from the text.
Hey @yasmineb ,
This Css Selector is causing the color to have a opacity of 75%. This css selectors are created inside you Theme.liquid. But as i see you already have overwritten it in your mainContent with !importan and in you h2 here:
remove the DAA520 and make it rgb(–color-foreground) Then the color is set to the color of your settings without the opacity of 0.75, If you want to change it in your theme.liquid color scheme change the 0.75 to 1.
1 Like
@yasmineb Add a custom-css setting with this style
.banner__heading color {
color: RGB(var(--color-foreground));
}
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Note: it looks like “DAA520” was attempted to be added to base.css around line 265 for the color rule which causes some wierd behavior resulting in transparency it seems.
You may want to compare the themes base.css to a fresh theme install to see how the code should originally work.
@yasmineb Please follow below steps to make the text not transparent. Let me know whether it is helpful for you.
- From admin go to “Online Store” → “Themes”.
- Click “Customize” button from the current theme.
- Click “Image banner”.
- Then scroll down and paste the below code in the “Custom CSS” field and save changes.
.banner__heading {
color: #DAA520;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
1 Like
This worked, I just replaced “0.75” with 1!