Customize a Post – WP Show Posts

This topic has 5 replies, 2 voices, and was last updated 3 years, 6 months ago by Tom.

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

Author

Posts
November 19, 2019 at 8:14 am #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/

November 19, 2019 at 6:15 pm #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 🙂

November 20, 2019 at 1:30 am #11969

Andreas
Participant

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

Thanks in advance

November 20, 2019 at 4:31 pm #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;
}
```
November 21, 2019 at 1:06 am #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

November 21, 2019 at 6:33 pm #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;
}
```
Author

Posts

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

You must be logged in to reply to this topic.

[Support request] Customize a Post