[Resolved] Page / Post / Category Specific CSS

[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.

[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

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pete]

https://wordpress.org/plugins/custom-css-editor/

[Freshface]

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

[Author]

Posts