[Resolved] post design help

[William]

Hi there,

I was wondering if it is possible to have a similar post design like the website I linked. They have the featured image on top, then category in middle and post title bottom all centered in a container. Do I need CSS combined with wpsp?

Thanks in advance!

[Tom]

Hi there,

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

[William]

Hi Tom,

Within WPSP.

Thank You!

[David]

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

[William]

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

[Tom]

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.

[William]

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

Thank You!

[David]

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.

[William]

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!

[David]

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

[William]

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!

[David]

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

[William]

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!

[David]

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> 

[William]

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!

[Author]

Posts