Changing Overlay for a Single Row

Hello!

I have searched the forums and cannot find an answer to my question. I want to use a background image in my first row (http://kristismithyoga.com - “KSY News and Blog”), but I don’t want the overlay.

I like the overlay effect in the other rows that have background images, though, so I don’t want to add css that will deactivate everything.

Can you tell me what the custom css would be for:

  1. Deactivating the row overlay for just the “KSY News and Blog” row; AND
  2. Changing the color and opacity of the row overlay for just that one row

Thank you!

Kristi

Hi,


#pg-8-4 .overlay {
    display: none;
}


#pg-8-4 .overlay {
    opacity: 0.7;
    background-color: #fff;
}

It didn’t work…when I copy and paste the code, the #pg-8-4 turns red, so I’m wondering if there is supposed to be something immediately preceding the #? Thanks, Vlad.

Leave the code on your site please so I can see what’s happening. It has no reason to turn red.

I meant that the code itself turns red - sorry for the confusion. The “KSY News and Updates” section just has the same overlay that I’m trying to eliminate (just for that section, per my original post).

Thank you.

Where does it turn red? In your plugin?
The code is correct and it works for sure. Can you show me a screenshot from the place you pasted it?

This is going to sound dumb, but I can’t figure out how to either paste or attach the screenshot as a file. So, here’s a link to the screenshot (sorry!). Thanks.

https://docs.google.com/document/d/1vcx65YtqreJRIcjP5-etZU6GR0DeF_VP9MJfYqc-zF0/edit?usp=sharing

Your custom code looks fine and without errors.
The problem (which is not actually a problem) comes from either autoptimize or the caching plugin you’re using. Clear them both and recheck please.

I cleared the caching plugin, autoptimize, and even the optimize database. It still looks the same…

Looks like it’s working now.

I had to scroll down to see what you were referencing because the problem remains…

The code you gave me removed the overlay to a different row. Cool! But it’s not the right row. I want to remove it in the first row beneath the header. I couldn’t tell from the code you provided what the change would be.

Almost there… :slight_smile:

Nevermind - I got it! Swapping a 0 for the 4 did it. Thanks, Vlad!

#pg-8-0 .overlay {
display: none;
}

Well, that’s embarrassing. In my defense, this is my 14th hour of work for today.

It’s #pg-8-0 instead of #pg-8-4. So this would do it:


#pg-8-0 .overlay {
    display: none;
}

You’ll probably have to go through the whole caching plugin thing again.

Haha…I hope that you get off work soon, then! No worries - it’s cool for me to exercise my brain a bit. Thanks again, Vlad :slight_smile: