[Resolved] Styling category pages

Home Forums Support Styling category pages

  • This topic has 20 replies, 4 voices, and was last updated 1 year ago by Tom.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #993121
    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!

    #993169
    Leo
    Staff
    Customer Support

    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/

    #993180
    Liran

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

    #993183
    Leo
    Staff
    Customer Support

    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 🙂

    #993184
    Liran

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

    There you go.

    #993188
    Leo
    Staff
    Customer Support

    What’s the padding issue you are referring to?

    #993218
    Liran

    There’s no white space anywhere.

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

    #993233
    Liran

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

    #993299
    Leo
    Staff
    Customer Support

    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.

    #993305
    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 🙂)

    #993313
    Leo
    Staff
    Customer Support

    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);
    }
    #993319
    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?

    #993576
    David
    Staff
    Customer Support

    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.

    #993650
    Liran

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

    #993652
    David
    Staff
    Customer Support

    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

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.