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

Home Forums Support .category-ID CSS not working for background color (Dark theme on specific posts)

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #1335261
    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.

    #1335675
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1336126
    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?

    #1336595
    Leo
    Staff
    Customer Support

    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;
    }
    #1337023
    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”

    #1337166
    David
    Staff
    Customer Support

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

    #1338141
    Leo
    Staff
    Customer Support

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

    #1338212
    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.

    #1338220
    Leo
    Staff
    Customer Support

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

    #1339916
    David
    Staff
    Customer Support

    Use Leo’s full CSS ie>

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

    This will apply to just the single post

    #1340862
    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?

    #1340890
    Leo
    Staff
    Customer Support
    #1340940
    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;
    }

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