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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024