Latest posts Border

Hi Troyw,

The structure of your plugin is different. The text in each element of this Event plugin is wrapped in a div which allows it to have a border for itself solely.

You would need to replicate a structure like this to achieve that. I believe with a Latest Posts block, you would probably need custom code(JS or CSS).

With a Query Loop block, here is an example of how it would look like: https://share.getcloudapp.com/KouYoGgj

In any case, here is a CSS that covers an instance of a related post:

ul.wp-block-latest-posts__list > li {
    border: 1px solid #a5683f;
}

Hope this helps! :)

Hey Fernando, that will probably do the trick. It's not identical but should work. I have got the text to center by adding text-align: center; but I cannot seem to increase the size of the text or get it to site more central in height. I have tried all the usual CSS, but none see to be affecting it. Here is what I have done;

ul.wp-block-latest-posts__list > li {
    border: 2px solid #ffffff;
	text-align: center;
text-size-adjust: 50%;
	text-height: 1.6;
}

The size and height are not taking any affect?
Thanks

The div of the featured image has a bottom margin. To center this text, what we can do is remove this margin. Then we can also increase the line height or font size to add spacing. Specifically, we could create a CSS specific to the text and apply line height instead of font height.

Font size approach:

ul.wp-block-latest-posts__list > li > a {
    font-size: 20px;
}

ul.wp-block-latest-posts__list > li > div.wp-block-latest-posts__featured-image {
    margin-bottom: 0;
}

Line height approach:

ul.wp-block-latest-posts__list > li > a {
    line-height:3em;
}

ul.wp-block-latest-posts__list > li > div.wp-block-latest-posts__featured-image {
    margin-bottom: 0;
}

Kindly see what works best for you.

Hope this helps! :)

Thanks Fernando, that has worked perfectly with a bit of adjustment.

You’re welcome Troyw! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)