We're merging with GenerateBlocks! Learn more here.

[Support request] Customize a Post

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Customize a Post

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #11954
    Andreas
    Participant

    Hi Tom again , there is a chance i can do something like this one ? https://ibb.co/LNqbq2R

    i have created three posts and add them in my homepage but when i add padding the text goes behind the image and i also need to add some rgba color like the image on the text

    site link https://pharmasept.bee.backtobuzz.com/

    #11968
    Tom
    Keymaster

    Hi there,

    The best way to achieve something like that is to use one of our cards: https://demos.wpshowposts.com/cards/

    That way we have the overlay working, then it’s just some simple CSS tweaking to achieve that same look I think 🙂

    #11969
    Andreas
    Participant

    Hey Tom Thank you , so i did it with overlay , can we fix it as the picture ?

    Thanks in advance

    #11977
    Tom
    Keymaster

    You can try:

    1. Setting your column gutter to 0
    2. Setting your padding to 0
    3. Adding this CSS:

    #wpsp-86.wpsp-card .wp-show-posts-single .wp-show-posts-image:after {
        content: "";
        box-shadow: inset 20px 0px 25px -11px rgba(0,0,0,0.3);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    
    #wpsp-86.wpsp-card .wp-show-posts-entry-header {
        background: rgba(255,255,255,0.3);
        padding: 50px;
    }
    #11987
    Andreas
    Participant

    Hey Tom thanks for your quick response , i did it as you told me and it looks good but now the posts are not clickable

    #12008
    Tom
    Keymaster

    Ah, you may need to use javascript to make the entire post clickable.

    For example:

    jQuery( document ).ready( function( $ ) {
        #( '#wpsp-86 article' ).on( 'click', function( e ) {
            var _this = $( this ),
                url = _this.find( 'a' ).attr( 'href' );
    
            if ( url ) {
                window.location.href = url;
            }
        } );
    } );

    Then add this CSS:

    #wpsp-86 article {
        cursor: pointer;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.