Shopify themes, liquid, logos, and UX
site is blackcoyotejewelry.com
I have an image set as the background for my newsletter section, which makes it difficult to see the text. I've already figured out how to change the text color to white and added black boxes behind the text.
I cannot figure out how to change the opacity of just the black color. Everything I've tried so far also makes the text semi transparent.
this is the code I'm using for the background image addition:
.index-section--newsletter-background {
background: url(https://cdn.shopify.com/s/files/1/0056/5562/5846/files/red-clay-horizontal.jpg?v=1627850727);
background-repeat: no-repeat;
background-size: cover;
}
And this is the code I'm using for the white text and black boxes:
.newsletter-section.index-section--newsletter-background h2 {
color: #ffffff;
background: #000000;
}
.newsletter-section.index-section--newsletter-background p {
color: #ffffff;
background: #000000;
}
both inserted at the bottom of theme.scss.liquid
p.s. I also have a newsletter signup in the footer, and do not want anything there (or any other page) to change, just add colored boxes in the newsletter section only.
Solved! Go to the solution
This is an accepted solution.
sorry for that issue can you please try this
.newsletter-section.index-section--newsletter-background .h2, .newsletter-section.index-section--newsletter-background h2 {
color: #fff;
background: rgba(0,0,0, 0.5);
padding: 20px;
}
.newsletter-section.index-section--newsletter-background p {
color: #fff;
background: rgba(0,0,0, 0.5);
padding: 15px;
}
This is an accepted solution.
sorry for that issue can you please try this
.newsletter-section.index-section--newsletter-background .h2, .newsletter-section.index-section--newsletter-background h2 {
color: #fff;
background: rgba(0,0,0, 0.5);
padding: 20px;
}
.newsletter-section.index-section--newsletter-background p {
color: #fff;
background: rgba(0,0,0, 0.5);
padding: 15px;
}
Thank you! It worked and I've updated it as the solution.
If I were to want to change the box color in the future, how would I do that? I tried to change the color by replacing the rgba with a hex code and it did not work.
yes U have change RGB color
I tried and it did not work to change color
can you please share color RGB
not sure what this mean? Color is #677a3d
yes please add this code
background: rgba(103,122,61,.7);
Please add code your css file .
#shopify-section-16275692687ff67b52 .newsletter-section.index-section--newsletter-background .h2{
color: #fff;
background: rgba(0,0,0, 0.5);
padding: 20px;
}
#shopify-section-16275692687ff67b52 .newsletter-section.index-section--newsletter-background p {
color: #fff;
background: rgba(0,0,0, 0.5);
padding: 15px;
}
Thanks!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025