[Resolved] Page / Post / Category Specific CSS

Home Forums Support Page / Post / Category Specific CSS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #128957
    James Eichenberger

    Hello,

    I have three basic sections to my site and I would like to make the header image and body background image different for each of the three sections. I would like to add a background to pages by id number, and then also add backgrounds to posts based on category IDs. The page piece seems like it’s working, but the category piece isn’t.

    So here’s the home page: http://www.toddyounglawoffice.com/blog/

    The header and body background are controlled with these lines:

    .site-header {
        background-image: url(http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/pillar-header.jpg);
        background-size: cover;
    }
    body {
        background-image: url(http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/rock-bg.jpg);
      
    }

    So then when I want to control a certain page, for instance, page 26, I’m doing this:

    .page-id-26 header#masthead.site-header {
        background-image: url(http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/medical-header.jpg);
        background-size: cover;
    }
    body.page-id-26 {
        background-image: url(http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/medical-bg.jpg);
        background-size: cover;
    }

    So following roughly that same format, this is what I tried to do to make the category that goes with this page:

    .category-4 header#masthead.site-header {
        background-image: url(http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/medical-bg.jpg);
        background-size: cover;
        !important
    }
    body.category-4 {
        background-image: url(http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/medical-bg.jpg);
        background-size: cover;
      
    }

    This is NOT working, as I’m seeing the images from the first two lines of code on these pages.

    In a similar issue, I also would like to get the .entry-title section on my pages. I know that it’s not great for SEO, but my content (that I’m bringing over from another site) already has H1 tags in it, and so I’d like to get rid of the .entry-title section on the PAGES. However, I want this to be specific to pages as I still would like the sections on my posts.

    Thanks.

    #128961
    James Eichenberger

    Oops. Just to be clear, in that last sentence there, I meant to say:

    “I also would like to get RID OF the .entry-title section” Meaning, I’d like to set it to display:none; or position it off of the page or whatever. I do want this section on posts, just NOT on pages.

    Thanks

    #128964
    Tom
    Lead Developer
    Lead Developer

    And you’re sure that category-4 is the right class?

    This should work:

    .category-4 header#masthead.site-header {
        background-image: url('http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/medical-bg.jpg') !important;
        background-size: cover;
    }
    body.category-4 {
        background-image: url('http://www.toddyounglawoffice.com/blog/wp-content/uploads/2015/08/medical-bg.jpg') !important;
        background-size: cover;
      
    }

    As for removing page titles from pages, add this function: https://gist.github.com/generatepress/261aa39f5e594c243c02

    Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

    Then add this CSS:

    .page .entry-header {
          display: none;
    }
    #128983
    James Eichenberger

    OK thanks. So the entry header piece worked perfect, thank you very much.

    The category piece, you were right, I had the wrong class. I thought that you could just grab the category ID and run with it, but looking at the code showed me that the categories were named differently. So now when I go to my CATEGORY PAGES I see the topic-specific headers…wonderful. However, I thought this would trickle down to my posts that were of that same category…it doesn’t.

    Can you show me how to add code that would affect both the category page AND all posts that are under that category?

    #128986
    Tom
    Lead Developer
    Lead Developer

    Ah, WordPress doesn’t add the category class to the single post.

    However, you can: https://generatepress.com/forums/topic/change-header-background-for-category-or-pages/#post-120674

    Let me know if you need more info 🙂

    #135738
    Pete
    #137704
    Freshface

    Thanks PETE for recommending our plugin 🙂 Yes, the link PETE post would do the service for you

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