[Support request] How can i make css only count for posts in category x

Home Forums Support [Support request] How can i make css only count for posts in category x

Home Forums Support How can i make css only count for posts in category x

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1484580
    Yves

    Basically, i want posts to have different layouts depending on the category. How can i make my post css only count for certain categories?

    Thanks

    #1484606
    David
    Staff
    Customer Support

    Hi there,

    is this for the Category Archive ? The Single Post or Both ?

    #1484660
    Yves

    For the posts IN category X. Not the category itself.

    #1484803
    David
    Staff
    Customer Support

    If its to style elements within the post content then you can target the category-slug class that is added to the main content. For example:

    .single-post .category-your_slug p {
        color: red;
    }

    This would change the content text color of any post with category-your_slug …. change your_slug to match you category.

    If you want to apply CSS to the entire page, you would need to add a little PHP to include the category-slug in the body tag. I provide that PHP Snippet here:

    https://generatepress.com/forums/topic/change-header-background-for-category-or-pages/page/2/#post-1460013

    #1485140
    Yves

    Sorry i dont get it. I put the code in functions.php.

    My website:
    User: closte
    pw: closte
    https://app-5f75b7a3c1ac190fbc571742.closte.com/birkenpech-herstellen/

    What i want to do is use this css, but only for posts in certain catregories. How would i select that?


    @media
    (min-width: 1025px) {
    body.single .entry-content {
    padding: 0px 150px 0px 150px;
    }
    }


    @media
    (min-width: 1025px) {
    body.single .entry-header {
    padding: 0px 150px 0px 150px;
    }
    }

    #1485271
    David
    Staff
    Customer Support

    To apply the CSS just to that category you would use this:

    .category-survival.single .entry-content {
        padding: 0px 150px 0px 150px;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.