[Resolved] .category-ID CSS not working for background color (Dark theme on specific posts)

[Joey]

I need help changing the background color of my “images” category to black. This doesn’t work:

.category-images {
background-color: #000;
color:#000;
}

I found a previous thread with this solution using Simple CSS:

.single.separate-containers .inside-article, .page.separate-containers .inside-article {
background-color: #000;
}

body.single, body.page {
background-color: #000;
}

However, if I try to put, for example .category-images in front of that code in my child theme files or additional CSS, it does not work. For example, this does not work.

.category-images .single.separate-containers .inside-article, .page.separate-containers .inside-article {
background-color: #000;
}

I am just trying to create a “dark theme” on certain posts that have a lot of photos. I known I’m missing something simple. Thank you.

[Leo]

Hi there,

Any chance you can guide me to the specific post you are referring to?

[Joey]

Hi, I’m getting closer. The post is https://simipress.com/lady-pink-hip-hop-and-painting-trains/

I don’t know why it wasn’t working but now this code is now working to make white text and a black background:

.category-images {
background-color: #000;
color:#FFFFFF;
}

However, it is only making the immediate background black. I want the content and body to be black as well (everything on the page) What code can I add to the above to make the rest of the page black?

Also, when I do the code above it also changes the background color of the excerpt in the blog feed (archives). See the link: https://simipress.com/home/page/2/ How can I keep the excerpt background white, but change it to black once the post is opened?

[Leo]

I want the content and body to be black as well (everything on the page) What code can I add to the above to make the rest of the page black?

Remove your own CSS and try this instead:

body.postid-734, body.postid-734.one-container .container {
    background-color: #000000;
}

[Joey]

I get the same effect without “body”, and adding color:#FFFFFF; to get white text:

.postid-734, .postid-734.one-container .container {
background-color: #000000;
color:#FFFFFF;
}

However, this only gives me a dark theme for this particular post. I want it to be applied to all posts labeled with the category “images”.

The idea is that I can just click on “images” for the category if I want a particular post to have a dark theme. Doing it with a tag would work too. I don’t know if there is a better way to do this, but the above code does not work if I replace “.postid-734” with “.category-images”

[David]

Hi there,

try adding this PHP Snippet to add a category-nicename class to your single post body tag:

add_filter('body_class','db_single_body_add_category_class',10,2);
function db_single_body_add_category_class($classes, $class) {
    if (is_single() ) {
        global $post;
        foreach((get_the_category($post->ID)) as $category) {
            $classes[] = 'category-'.$category->category_nicename;
        }
    }
    return $classes;
}

[Joey]

David, could you guide me through doing it with the PHP?

I pasted your PHP into my functions.php so far it has no effect. I tried replacing “nicename” with “images”. It doesn’t change the effect of this code:

.category-images, .category-images.one-container .container {
background-color: #000000;
color:#FFFFFF;
}

How can I apply this snippet to the images category?

Would this work with custom fields?

[Leo]

Don’t modify David’s code. Simply copy and paste it first.

[Joey]

Done, it is now in its original form in my functions.php.

I tried this code in style.CCS :

.category-nicename, .category-nicename.one-container .container {
background-color: #000000;
color:#FFFFFF;
}

No effect. If I create the category “nicename” in the wordpress editor and add it to the post I am trying to modify, it is as before: the immediate container is black but the background body is white like the rest of the theme.

[Leo]

I updated David’s code a bit as there were some wrong quotation marks:
https://generatepress.com/forums/topic/category-id-css-not-working-for-background-color-dark-theme-on-specific-posts/#post-1337166

The code simply adds the name of your category.

So if the name of your category is images and you are trying to change the body background, then the CSS would be

body.single.category-images {
    background-color: #000;
}

[Joey]

It worked. You guys are awesome, thank you so much. One last question, the text color needs to be white. I can use this code:

.category-images {
color: white;
}

But when I do that it also turns my text white in the excerpt from the archives of the blog, rendering it invisible. How can I can add “color: white” into the following code so that it won’t affect the excerpt?

body.single.category-images {
background-color: #000;
}

[David]

Use Leo’s full CSS ie>

body.single.category-images {
    background-color: #000;
    color: white;
}

This will apply to just the single post

[Joey]

I did that, but when I put “color: white;” within the code as such, it doesn’t show up (the letters in the post remain black).

Leo’s PostID specific code, by the way, did work with white letters and black background, but with the addition of the PHP the white letters won’t work with ID specific nor category specific, unless I add it separately. Does that make sense?

[Leo]

Can you disable the maintenance mode and guide us to the page in question with the CSS here applied?
https://generatepress.com/forums/topic/category-id-css-not-working-for-background-color-dark-theme-on-specific-posts/#post-1339916

[Joey]

Sorry, I just saw this message. The maintenance mode is now off, I’ll leave it off all day tomorrow as well. I changed the dark theme category from “images” to “photography” and adjusted the CSS so it has the same effect. Check either of these two pages:

https://simipress.com/lady-pink-hip-hop-and-painting-trains/

https://simipress.com/the-art-of-kahlil-gibran/

The (half-working) code is:

body.single.category-photography {
background-color: #000;
color: white;
}

[Author]

Posts