Changing overlay on collection header

Solved
zamandanoel
Tourist
5 0 3

Hi, I want to change the overlay color of the title area on my collection pages, but not change the overlay on the collection grid on the home page. 

I was able to accomplish this for the home page overlay with this


div#shopify-section-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

 

But can't figure out the collection listing page. 

I have tried these in theme.css - 

 

div#shopify-section-collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}


div#Hero-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

div#collection-hero .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
div#collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

https://fat-beet-farm-kitchen-bakery.myshopify.com/collections/full-meals

password - aurtau

 

Screen Shot 2021-11-05 at 12.07.24 PM.png

 

thank you!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24947 2501 9043

This is an accepted solution.

@zamandanoel 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.collection-hero__title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #416b52;
    opacity: .9;
}

 

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 5 (5)
KetanKumar
Shopify Partner
24947 2501 9043

@zamandanoel 

please confirm this ok?

KetanKumar_0-1636142571617.png

 

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
zamandanoel
Tourist
5 0 3

Yes, I'll make it green but that's the color overlay i want to change. 

KetanKumar
Shopify Partner
24947 2501 9043

This is an accepted solution.

@zamandanoel 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.collection-hero__title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #416b52;
    opacity: .9;
}

 

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

zamandanoel
Tourist
5 0 3

That worked perfectly, thank you! 

KetanKumar
Shopify Partner
24947 2501 9043

@zamandanoel 

its my pleasure to help us

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