Possible to customize the Post and Page Grid block to have a card effect?

Hi @memerunner

It is possible to create a card effect for the Posts and Pages Grid block using CSS.

Here’s a general outline of how you can do this:

1. First, add a class name to the Posts and Pages Grid block. You can do this by going to the block’s “Advanced” tab in the block editor and adding a class name under the “Additional CSS Class(es)” field.

2. Next, you’ll need to add some CSS to your theme’s stylesheet or the Customizer’s “Additional CSS” section to target the block and create the card effect.

3. To create the card effect, you can use the following CSS code:

.my-custom-class .wp-block-latest-posts__post {
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.my-custom-class .wp-block-latest-posts__post-title {
  color: black;
}

Replace “my-custom-class” with the class name you added to the block. This will apply a white background, box shadow, and rounded corners to each post and make the post title text black.

To make the overall block background dark, you can add a background color to the block itself, like this:

.my-custom-class {
  background: black;
}

I hope this helps! Let me know if you have any questions.

Thanks @faisalahammad,

I tried that, and am using a Class name of ds-block-ppgrid, which I added the the Post and Page Grid block, but am not seeing any change in the page. And I don’t seem to have any conflicting Classes that I can see.

Any thoughts on what might be wrong?

• This reply was modified 2 years, 2 months ago by MemeRunner.

@faisalahammad I also tested the block by creating a new one, then adding the Additional CSS class ds-block-ppgrid, but still didn’t work.

In Inspect, in addition to seeing the new class in what appears to be the right location, I’m also seeing it down the page, in the section class gb-block-post-grid

Hi @memerunner
Where you’ve added your custom CSS?

If you go to

https://dougschumacher.com/blog/

click on a column in the Post and Grid block on the page, and select ‘Inspect’, then search ‘ds-block-ppgrid’, it will come up.

Here’s the code that’s been entered under style id wp-custom-css:

/* POST GRID */
.ds-block-ppgrid .wp-block-latest-posts__post {
  background: white;
	  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.ds-block-ppgrid .wp-block-latest-posts__post-title {
  color: black;
}

Hello @memerunner,
It appears that you have added an incorrect CSS selector, .wp-block-latest-posts__post, which does not exist on your page. I suggest following the CSS code block to achieve a layout similar to the screenshot.

screenshot: https://tinyurl.com/2g3gvreb

/* POST GRID */
.ds-block-ppgrid article {
  background: white;
	  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 15px;
}

Give it a try and let me know how that goes! ??

I see. Thanks so much, Faisal. That works great!

Hi @memerunner
Glad to hear that! If you encounter any issues in the future, feel free to open a new topic so that everyone can assist you. Have a wonderful day,