Styling category pages

[Liran]

Hey,

What CSS should I add so that the category pages will look something like this? https://upjourney.com/category/gifts

Also, can I achieve that style with WP Show Posts? https://momcurls.com/makeup/

Thanks!

[Leo]

Hi there,

Try this:

.blog.separate-containers .inside-article, .archive.separate-containers .inside-article {
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    transition: all .25s;
}
.blog.separate-containers .inside-article:hover, .archive.separate-containers .inside-article:hover {
    -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liran]

Thank you, Leo. But it seems there are some padding issues.

[Leo]

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liran]

Any chance you can link us to the site in question?

There you go.

[Leo]

What’s the padding issue you are referring to?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liran]

There’s no white space anywhere.

Have you looked at the examples I linked to? That kind of structure would be ideal.

[Liran]

I’ve managed to add padding to everything inside the box. However, I want to exclude the featured image. Any ideas?

[Leo]

Sorry still not quite sure if we are looking at the same issue.

There is no padding around the featured image as far as I can tell.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liran]

No, the code you gave me has only affected the category pages. You can find them on the menu.

(BTW, please remove the image when we’re done 🙂)

[Leo]

Try adding this as well:

.wp-show-posts-inner {
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    transition: all .25s;
}
.wp-show-posts-inner:hover {
    -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liran]

That looks great. But the main question is — how do I add padding to the title and the text without affecting the featured image?

[David]

Hi there,

make sure you have the Blog Module activated. In Customizer > Layout > Blog –> Featured Images ( Archive Tab ) you can remove the padding from images.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Liran]

I don’t want the images to have padding, only the content.

[David]

Yes – follow these steps:

1. Set you padding in the Customizer > Layout > Container. You can also set the layout to separate containers and adjust the separating space between containers.

2. Customizer > Layout > Blog –> Featured Images ( Archive Tab ) and UNCHECK the Display padding around images

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts