Matching Content Block Style to WP Show Posts

Hi Tim,

Are we talking about the gradient effect/read more button/category lists of the content template?

If so, can you remove the overlay effect on the current WPSP cards?

Add read more button to the card.

Then we can have a try with custom CSS.

Let me know.

Hi Ying, Thanks so much for the quick reply.

Yes, I'm trying to get as close as I can to the Content Template look and feel.
I just removed the overlay from WPSP, also the Read more button is there but get's lost a little at the moment.

Also regarding the images, looks like the Content Template uses a cover background approach vs the static dimensions I can asign in WPSP.

Thanks and best
-t

Try this CSS:

.wp-show-posts-inner .wpsp-content-wrap:before {
    content: "";
    background-image: linear-gradient(110deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.wpsp-read-more .wp-show-posts-read-more {
    color: var(--base-3) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    border-color: var(--base-3) !important;
}
.wpsp-read-more .wp-show-posts-read-more:hover {
    background-color: rgba(255, 255, 255, 0.75) !important;
    color: #000000 !important;
}
.wp-show-posts-entry-meta.wp-show-posts-entry-meta-below-post.post-meta-stack {
    order: -1;
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
}
h2.wp-show-posts-entry-title {
    text-align: left;
    padding-top: 10px;
}
.wpsp-card .wpsp-content-wrap {
    padding: 20px !important;
}
.wpsp-overlay .wp-show-posts-image, .wpsp-overlay .wp-show-posts-image img {
    height: calc(100% + 1.3em);
}

Hi Ying,
This is over the top!
Looks fantastic, thank you so much!!!

For the meta terms separator "/" I'm assuming I need to look at the functions for that?

Best
-t

Add this CSS as well:

span.wp-show-posts-terms.wp-show-posts-meta a:not(:first-child):before {
    content: "|";
    padding-right: 0.5em;
}

Mission accomplished!
Many thanks, I'm hitting the donate button.
This was super helpful and you saved me a lot of time today.
Thank thank you!
-tim

Thanks for the donation :)

We are happy to help, hopefully the merge will go smooth so you can skip all the trouble in the future!

Looking forward to what's next! Thank you again!

You are welcome :)