Archived topic

Creating & Customizing Related Post Block

4 replies · Started by Matthew on April 30, 2021

Viewing posts 1–5 of 5

April 30, 2021 at 4:14 am #1757297

Hi,

I'm using Generate Blocks Pro and WP Show Posts Pro.

I have the posts inside a container (see image below). But I want to add extra CSS to the cards to customize them beyond the options available in the plugin. Specifically, I want to change the font of the post titles, the font weight, and add some shadow to the cards.

I tried using the following CSS to achieve what I am looking for:

.wp-show-posts-entry-title {
font-family: Merriweather, serif;
font-weight: 700;
}

.wp-show-posts-inner {
box-shadow: 0px 0px 8px #d6d6d6;
}

This worked. But the problem is that it affects all instances of WP Show Posts on my site, and I don't want the same customizations being applied sitewide.

Is there a way that I can just apply the changes to the block I am working on?

And is it possible for me to save this as a template and then have the CSS apply to the template everywhere it's used? So that I can change the posts that are shown in different locations.

Thanks

April 30, 2021 at 6:52 am #1757665

Hi there,

if you have the WPSP shortcode inside a GB Container. Then select the Container Block, in Advanced > Additional CSS Class(es) add a custom CSS selector eg. custom-post-block

Then add you include that class in your CSS Selector eg.

.custom-post-block .wp-show-posts-entry-title {
    /* Styles here */
}
.custom-post-block .wp-show-posts-inner {
    /* Styles here */
}

With GB Pro you can create a Local Template that can then be added your site wherever you need it.

April 30, 2021 at 8:02 am #1757823

Thanks.

For some reason, this isn't working.

This is what I'm using to create the related posts block:

Container

Grid> Paragraph

Grid> Classic Editor> WP Show Posts

I've added the following in the Additional CSS class(es):

related-posts-container

And added the following CSS:

.related-posts-container .wp-show-posts-entry-title {
font-family: Merriweather, serif;
font-weight: 700;
}
.related-posts-container .wp-show-posts-inner {
box-shadow: 0px 0px 8px #d6d6d6;
}

Have I taken a wrong step here?

April 30, 2021 at 10:09 am #1758026

I've sorted it out, thanks.

April 30, 2021 at 4:46 pm #1758385

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.