Different Color of Text for Multiple Image Overlays

Highlighted
Tourist
11 0 1

Hello! 

 

I have two "rich text" sections in my website, one in the beginning and one at the end. I would like the first rich text section to have white text with the background image of 50% opacity, and the second rich text section to have burgundy text with the background image of 90% opacity. When I go into theme settings > colors > image overlays, the setting chosen effects both sections. How can I adjust the settings separately?

And I just noticed it also effects my collection list images on my home page. HELP please!

Thank you in advance!!  

Olivia

0 Likes
Highlighted
Shopify Partner
902 133 148

Hi Olivia!

Would you mind sharing your store's URL so we can provide the code for that? Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
11 0 1

Please see below: 

https://alyasboutique.com/

Password: ShopNow

0 Likes
Highlighted
Tourist
11 0 1

Hi! Just wanted to touch base on this to see if there was a solution. Thank you in advance!

0 Likes
Highlighted
Shopify Partner
902 133 148

Is the "Fashion that Fights for Freedom" section the second rich Text section? Just making sure so I don't give you the incorrect answer

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
11 0 1

Yes. 

0 Likes
Highlighted
Shopify Partner
902 133 148

Add the following to your theme.scss.css file:

div#Hero-hero-1 {
    opacity: 0.5;
}

div#Hero-hero-2 {
    opacity: 0.9;
}


/*Text Hero 2*/
#Hero-hero-2 > div > div > h2
{
    color: #8C001A;
}

#Hero-hero-2 > div > div > div > p:nth-child(1) {
    color: #8C001A;
}

#Hero-hero-2 > div > div > div > p:nth-child(5) > strong
{
    color: #8C001A;
}

#Hero-hero-2 > div > div > div > p:nth-child(3)
{
color:#8C001A;
}
- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
11 0 1

Thank you! How can I change the color of the text in "Fashion that Fights for Freedom" to white?

0 Likes
Highlighted
Shopify Partner
902 133 148
#Hero-hero-2 > div > div > h2
{
    color: white;
}


The code was already added above, just change the value to white for this element. 

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes