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

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Assistance With Altering Overlay Appearance / Move Title Text

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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! 🙂

    #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.

    #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!

    • This reply was modified 1 month ago by Marty.
    #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

    • This reply was modified 1 month ago by elvin.
    #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] ).

    • This reply was modified 1 month ago by Marty. Reason: More detail
    #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. 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.