Assistance With Altering Overlay Appearance / Move Title Text

Tagged: customize grid overlay title

This topic has 5 replies, 2 voices, and was last updated 2 years, 8 months ago by elvin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
January 17, 2021 at 6:56 pm #25602

Marty
Participant

Hey guys, I’m replacing Elementor with WP Show Posts to pass Pagespeed Insights Web Vitals. I’m so happy to have found it and I have the Pro version along with GP Premium as well.

In replacing Elementor’s Post Grids element, I’m using a 2×2 post grid w/Overlay option but I need to alter it. The title text seems to remain at the top no matter what I try, plus I’d like to only use the overlay for the area behind the text (not 100% of the image). So I need to move the title text to the bottom + reduce the overlay size.

I have this: https://paste.pics/93681b10076b4bced757e363e1d185cc

And this is basically what I’m after: https://paste.pics/a935f29499859319e16d6e0d16331e62

Thank you! 🙂

January 19, 2021 at 1:10 am #25677

elvin
Moderator

Hi,

Any chance you could link us to the page in question? So we could check for the selectors to use for the CSS writeup to achieve the desired look.

Let us know.

January 21, 2021 at 9:00 am #25777

Marty
Participant

Hey there, I’m very sorry as I didn’t get notice of your reply.

Sure thing, here you go. Here’s an example on my home page: https://soundcertified.com

I found some code here to move the title and it’s working but not sure if it’s correct. Haven’t been able to resolve the overlay item.

Thanks, Elvin!

January 21, 2021 at 11:48 pm #25818
elvin
Moderator
Before we start, let’s remove the potential gap that would appear when we add the overlay color.

To remove the gap on the overlay to it goes full width of its container, change the padding value of this CSS you’ve manually:
```
#wpsp-9610.wpsp-card .wpsp-content-wrap {
    padding: 8px;
}
```
Change it’s padding to 0px and this add this CSS:
```
#wpsp-9610.wpsp-card header.wp-show-posts-entry-header {
    padding: 8px;
    background-color: rgba(24,25,26,0.5);
}
```
this is how it would look like: https://share.getcloudapp.com/nOuDA4kl

Just change the background-color’s rgba value to your preference.

You can pick the color here and it should automatically generate an rgba() value for you. https://www.hexcolortool.com/#541fd1,0.27
January 22, 2021 at 11:10 am #25838

Marty
Participant

Awesome, that did it! I applied it to that site and my others as well. Thank you so much! I wish you guys had a “Buy us a beer” button or something! (⌐■_■)

FYI for anyone looking for the same solution, when Elvin wrote:

To remove the gap on the overlay to it goes full width of its container, change the padding value of this CSS you’ve manually:

#wpsp-9610.wpsp-card .wpsp-content-wrap {
padding: 8px;
}

This was in the settings (List item [edit] > Columns > Padding > [change to 0px] ).

January 24, 2021 at 8:57 pm #25892

elvin
Moderator

This was in the settings (List item [edit] > Columns > Padding > [change to 0px] ).

Ah yes that’s right, I completely missed this one.

Nice one. Glad it’s working well for you. 🙂
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Resolved] Assistance With Altering Overlay Appearance / Move Title Text