post design help

Hi there,

You'll definitely need some CSS/PHP. Are you wanting to do this with the GP posts or within WPSP?

Hi Tom,

Within WPSP.

Thank You!

Hi there,

do you have a live site with an example of the WPSP lists ? I can then look at whats required - let me know

Hi David, I've linked the site. Here's the reference site: thespruce.com
Thank You!

In the Show Posts settings, can you set the "Terms location" to "Below title"?

Then we should be able to tweak it with some CSS.

Hi Tom, I've set them to below title.

Thank You!

Lets give this CSS a shot - currently it will only apply to the first post list after the grid hero:

#wpsp-1275 .wpsp-content-wrap {
    padding: 10px;
    text-align: center;
    position: relative;
}

#wpsp-1275 .wp-show-posts-inner {
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.09);
}

#wpsp-1275 .wp-show-posts-entry-title {
    font-size: 16px;
}

#wpsp-1275 .wp-show-posts-entry-meta-below-title {
    position: absolute;
    font-size: 0.75em;
    text-transform: uppercase;
    padding: 0.25em;
    top: -2.4em;
    left: 50%;
    transform: translatex(-50%);
    background-color: #ddd;
}

#wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms {
    position: relative;
    font-size: 1em;
}

#wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:before,
#wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:after {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-color: #ddd;
    position: absolute;
    top: -1px;
    transform: rotate(45deg);
    z-index: -1;
}

#wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:before {
    left: -1em;
}

#wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:after {
    right: -1em;
}

#wpsp-1275 .wp-show-posts-image img {
    width: 100%;
}

If that works correctly and we want to apply it elsewhere will need to make some adjustments to your HTML and the CSS.

Hi David, it works perfectly fine! So how would I go about applying it to all my wpsp list?

And are there any CSS that I can delete to free up some space?

Thank You So Much!

It will only work on the lists that have that same layout - so the first list and the Breeds list for example. So you can't just 'apply to all' - instead we need to be selective.

If you have WPSP Pro you can edit the List and there is a Custom Classes field. Within you could add a class e.g category-list

Then in the code above you would replace #wpsp-1275 with category-list

If you only have the WPSP Free then you would need to add a HTML container around each list eg.

<div class="category-list">
Add you WPSP Shortcode here
</div>

Then in the code above you would replace #wpsp-1275 with .category-list .wp-show-posts

Hi David, Thank You! I'll give it a try.

Also, is there any default theme CSS I'm able to delete if I decide to add the above CSS? Trying to free up some space.

Thanks once again!

If you mean the CSS in Customizer > Additional CSS ( which was installed with the Dispatch Site ) - not really its as lean as it can be.

The Theme CSS cannot be edited simply.

Its not something i would be concerned about the Theme plus the Sites CSS is super minimal anyway

Hi David, so if I make all my wpsp list the same layout, do I still have to add HTML container around each list?

If so how do I do that?

Where do I add the code

Thank You!

In the block editor add a HTML Block, then add this HTML, with your Shortcodes in place of the text:

<div class="category-list">
Add you WPSP Shortcode here
</div> 

Hi David, I was able to do it! Thank You!

I have 2 quick questions.

How can I change the hexagon background shape that's behind the term title into a rectangle?

How do I change font color/style of the term and author?

I played around with the CSS but with no luck.

Thanks once again!