Solved

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

JanelleG
Excursionist
31 0 11

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.

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

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

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36839 3635 11972

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
JanelleG
Excursionist
31 0 11

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
36839 3635 11972

@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
31 0 11

I tried and it did not work to change color

KetanKumar
Shopify Partner
36839 3635 11972

@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
31 0 11

not sure what this mean? Color is #677a3d

KetanKumar
Shopify Partner
36839 3635 11972

@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

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app