We're merging with GenerateBlocks! Learn more here.

[Support request] Customizing card overlay style with text background color

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Customizing card overlay style with text background color

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #27875
    Joon
    Participant

    Hello,

    I have set the current list to show a list with the overlay card style. Would it be possible to add a container with background behind the text, with some padding?

    Example
    https://pasteboard.co/JRXx4z0.jpg

    #27877
    Joon
    Participant

    Quick update I’ve almost got it now.

    Made the following css to the list. And it looks like this: https://pasteboard.co/JRXCAAb.png

    #wpsp-14012 .wp-show-posts-entry-title {
    background-color:#162b4e;
    padding: 10px;
    }
    #wpsp-14012.wpsp-card .wpsp-content-wrap {
    padding-left:0px !important;
    padding-right:50px !important;
    }

    But would it be possible for the text container to scale according to the length of the text? Some of the boxes have too much empty space on the right…
    I am really not a css expert…

    #27895
    elvin
    Moderator

    Hi there,

    You can specifically target the text element itself if you wish for its background to scale with it.

    Example:

    #wpsp-14012 .wp-show-posts-entry-title a {
    background-color:#162b4e;
    padding: 10px;
    }

    Note: This is assuming you have the default overlay elements (not disabling the link).

    #28089
    Joon
    Participant

    I achieved the look I was after. Thank you so much!

    #28122
    elvin
    Moderator

    Nice one! Glad you got it sorted. 🙂

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