Changing Overlay for a Single Row


#1

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


#2

Hi,


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


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


#3

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.


#4

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


#5

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.


#6

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?


#7

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


#8

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.


#9

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


#10

Looks like it’s working now.


#11

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:


#12

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

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


#13

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.


#14

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: