[Resolved] I like to make card box design for the grid posts

[Sabbir]

Hi,

I created home page with WPSP. link attached. now I like to make the each post card box for the grid post.

how can I do this, can you provide me CSS for this?

Thanks

[Ying]

Hi Sabbir,

now I like to make the each post card box for the grid post.

I’m not sure I understand your request, do you have an example that we can refer to?

And I would recommend using the Query loop block of GenerateBlocks plugin, as we’ve merged WPSP’s function with GenerateBlocks and stopped supporting WPSP plugin.

With query loop block, you should be able to create your desired layout without using CSS.

Let me know if you still need help!

[Sabbir]

I make this (https://prnt.sc/39nO8TdgQ7I8) card box design like this (https://prnt.sc/O7n0Mh_5GeGV)

for this website: https://deemixapk.com/

[Fernando]

Hi Sabbir,

Are you trying to add some padding and background color to the posts in your WPSP list?

If so, here’s a CSS code you may try adding through Appearance > Customize > Additional CSS:

.wp-show-posts:not(#wpsp-1684) .wp-show-posts-inner {
    background-color: #eeeeee77;
}

.wp-show-posts:not(#wpsp-1684) header.wp-show-posts-entry-header {
    padding-left: 20px;
    padding-right: 20px;
}

.wp-show-posts:not(#wpsp-1684) .wp-show-posts-entry-summary {
    padding-left: 13px;
    padding-right: 10px;
}

Hope this helps!

[Sabbir]

Perfect, I don’t need the CSS for this section (Rad marked): https://prnt.sc/lHl4v3Ifvjz8

How can I do this?

Thanks, Fernando

[Fernando]

I see.

I altered the code above. Can you try that instead?

[Sabbir]

Yes, the above code works perfectly on whole blocks. but I exclude the code for top right, which I marked in this screenshot: https://prnt.sc/lHl4v3Ifvjz8

[Sabbir]

this code not working

.#wpsp-1687 .wp-show-posts-inner {
background-color: #eeeeee77;
}

.#wpsp-1687 header.wp-show-posts-entry-header {
padding-left: 10px;
padding-right: 10px;
}

.#wpsp-1687 .wp-show-posts-entry-summary {
padding-left: 10px;
padding-right: 10px;
}

[Fernando]

I see.

I modified it again. Can you try the new one now.

That should exclude other WPSP lists.

Kindly let us know how it goes.

[Sabbir]

WOW, you are amazing! This one works perfectly.

Thank you!

[Fernando]

Glad that worked Sabbir! You’re welcome!

[Author]

Posts