change opacity of colored box behind text in newsletter section in Debut

Solved
JanelleG
Excursionist
26 0 9

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.

KetanKumar
Shopify Partner
22296 2268 8342

This is an accepted solution.

@JanelleG 

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;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dmwwebartisan
Shopify Partner
8353 1963 2642

@JanelleG 

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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
JanelleG
Excursionist
26 0 9

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.

KetanKumar
Shopify Partner
22296 2268 8342

@JanelleG 

yes U have change RGB color 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JanelleG
Excursionist
26 0 9

I tried and it did not work to change color

KetanKumar
Shopify Partner
22296 2268 8342

@JanelleG 

can you please share color RGB

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JanelleG
Excursionist
26 0 9

not sure what this mean? Color is #677a3d

KetanKumar
Shopify Partner
22296 2268 8342

@JanelleG 

yes please add this code 

background: rgba(103,122,61,.7);
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing