[Resolved] Add border and shadow to WP Show posts

[Henk]

Hi,

I’m using WP Show post to show the last three post on the front page.
To make them more appealig I tried to add some CSS to them, but somehow I miss something.

Can you find what I’m missing? Below is a simple CSS statement, the end result contains shadow, ease-in, -out, etc.
If you have an example on this forum, that would also be fine.

article.wp-show-posts-single {
    border: 2px;
    border-color: grey;

}

Thanks, Henk.

[David]

Hi there,

you could do:

/* add some padding a border and radius */
.wp-show-posts-columns .wp-show-posts-inner {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: all 0.3s ease-in;
}

/* offset padding around image so it fills width of post */
.wp-show-posts-columns .wp-show-posts-single .wp-show-posts-image {
    margin-left: -15px;
    width: calc( 100% + 30px );
}

/* add hover effect */
.wp-show-posts-columns .wp-show-posts-inner:hover {
    box-shadow: 0 6px 6px 2px rgba(0,0,0,0.2);
}

[Henk]

Nice David!
I’m learning more and more nice things about CSS 🙂

[Henk]

Just a question, more off-topic.
I can find most things by using Inspect Element in Chrome to find the right selectors.
But is there something of a library of CSS examples especially for GP?

This gives me some more examples to learn.

Thanks Henk.

[Leo]

But is there something of a library of CSS examples especially for GP?

Unfortunately not as there are simply too many selectors to list out.

Using the browser inspector tool is the best way to go.

Our support team is always happy to help with identifying any theme CSS selectors in this forum as well 🙂

[Author]

Posts