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
  • March 10, 2021 at 4:35 am #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

    March 10, 2021 at 4:51 am #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…

    March 10, 2021 at 6:53 pm #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).

    March 16, 2021 at 1:38 am #28089
    Joon
    Participant

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

    March 16, 2021 at 9:53 pm #28122
    elvin
    Moderator

    Nice one! Glad you got it sorted. 🙂

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