ThemeShaper Forums » Thematic


Category-specific CSS

(16 posts)
  • Started 7 years ago by EddieY
  • Latest reply from colfelt
  • This topic is resolved
  1. EddieY

    Any way to have posts from a specific category to have a different CSS?

    Posted 7 years ago #
  2. fwunder

    Dynamic Body Classes:

    Look at your page source, i.e.:

    <body class="single single-post postid-255 single-format-standard mac safari sf5">

    All kinds of fun stuff to target.

    Posted 7 years ago #
  3. EddieY

    Hmmm. Could you maybe expand a little bit for a noob? Not sure what I'm supposed to do with that code. Have a category Pics/Vids that I want to expand the content width to 615px.

    body.s-category-pics-vids #content {width:615px;}

    Am I way off?

    Posted 7 years ago #
  4. seems about right but could you give us a link to your site? Much easier to see it firsthand

    Posted 7 years ago #
  5. EddieY

    Sure. I'm trying to get the content (headline and text) to fill out the space left after I exclude widgets for certain categories using the conditional tags plugin.

    I have included the code, but it doesn't seem to be working.

    Posted 7 years ago #
  6. fwunder

    @EddieY, my bad for not reading your original request well.

    If you look at your <body class="...."> you will notice that there is no "category" reference. Hopefully, you are using firebug to see this stuff.

    I think you need to add (filter) body_class to grab the category and add it your body class. Something like this added to your functions.php:

    function add_category_to_single($c) {
    	if (is_single() ) {
    		global $post;
    		foreach((get_the_category($post->ID)) as $category) {
    			// add category slug to the $classes array
    			$c[] = $category->category_nicename;
    	// return the $classes array
    	return $c;

    This will add the categories to the body class for the post. Then, use the dynamic body classes stuff posted above.

    Not sure why 'body_class' works and 'thematic_body_class' doesn't?

    Posted 7 years ago #
  7. some of your CSS seems weird to me. particularly with some of your margins. but also, you have a widget area that is showing up in the source (#content-aside in the blank space on the left).... but there's nothing in it, so i don't know what is going on there. b/c it is there though you won't be able to get the site to take up that extra width.

    fwunder is correct, i think adding body classes is the way to go if you want to style posts individually according to their category. category actually IS in the post class already, but that's too late to really change the layout.

    @fwunder - to enable thematic_body_class you must define('THEMATIC_BODY_CLASS',true) I think. however, i'd start weening myself off of that as it is being deprecated. we decided it was too much hassle to maintain the dynamic class functions when WP already has them built in.

    Posted 7 years ago #
  8. fwunder

    @helgatheviking, thanks again for the deprecation tip.

    Could you splain a bit..." category actually IS in the post class already, but that's too late to really change the layout." I didn't follow that and I don't see category(s) in my current <body class="...">. I get: <body class="single single-post postid-555 single-format-standard..."> but no category(s). Thanks!

    Posted 7 years ago #
  9. EddieY

    Thanks fwunder. I've updated the function.php and it is now showing up in the body class.

    Kathy - The widget area on the left contains ads on all other posts. I wanted a specific category that would use the the full area. I used the conditional tags plugin to hide the widgets on posts from a certain category.

    From your answer I'm guessing it isn't possible to do this?

    Posted 7 years ago #
  10. @fwunder, i said it is in the post_class(). check the classes on the post div.. and not on the body.

    <div id="post-11327" class="post-11327 post type-post status-publish format-standard hentry category-pics-videos tag-minnesota-timberwolves tag-ricky-rubio">

    since that div is INSIDE the container, you can't really use that class to target the container or content width's which is what is needed here

    @eddie - i saw the ads on the other pages. if my memory serves didn't i build that sidebar? instead of the conditional widgets plugin, it'd be better to conditionally hide the entire sidebar. wordpress still thinks the sidebar is active. that way you can reclaim that white space.

    Posted 7 years ago #
  11. fwunder

    @helgatheviking, Oh. I get it now. Thanks!

    Posted 7 years ago #
  12. EddieY

    @helgaviking You did! I've got the conditional fixed to omit the widget on the pics-vids category but am still trying to figure out how to fix the width for the content area. My body class reads:

    body class="single single-post postid-11327 single-format-standard logged-in admin-bar pics-videos unknown-os chrome ch"

    and my CSS is:

    body.s-category-pics-vids #content {width:615px;}

    And it's still not fixing the width of the content area. Any ideas on what I'm doing wrong?

    Posted 7 years ago #
  13. prepare for facepalmage:

    the CSS class you are targeting


    isn't in your body class

    single single-post postid-11327 single-format-standard logged-in admin-bar pics-videos unknown-os chrome ch

    try this

    .pics-videos #content {
       width: 620px;
       margin: 0 auto;
    Posted 7 years ago #
  14. EddieY

    Doh! Thanks for the help @fwunder @helgatheviking!

    Posted 7 years ago #
  15. colfelt

    Hi guys, further to this... what if I DO want to add a category-specific class to the body tag on single posts?

    I want to put assign a unique background image to all posts in each category - i.e. a different background image for each category for the whole page (not just the post).

    The dynamic-classes.php file has some code in there that seems to say it should do it... line 92 has a comment which says "// Adds category classes for each category on single posts" - with some code below which would be exactly what I need. But when I firebug my body element on a single post within a category, the category class is not there.

    I tried fwunder's code above in my functions.php but it didn't work.

    I was thinking about writing a filter, but then started scratching my head about why it wasn't working as the code suggests it should in the first place.

    Any thoughts on how I could achieve this?

    Posted 7 years ago #
  16. colfelt

    Actually, sorry I think I've been looking at the screen too long. @fwunder's code did work after all...

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.