Extended Body Classes – Revisited

May11
by on May 11, 2010 at 12:01 am
Posted In: Wordpress
Pages: 1 2 3

Examples of Use

Since the body classes are dynamically generated, which means they only appear if certain events or situations are in place, you can specify things to happen for just certain people or groups of people or whatever is set to change. There are also quite a few more available in WordPress 3.0.

For the sake of example, let’s just change backgrounds to explain how this works, say for example a ‘guest’, someone who is not registered or logged on views a page, the <body class will generate the tag .user-guest so let’s use that class:

body.user-guest {
    background: url('guestbackground.jpg') repeat;
}

What this will do is for *only* .user-guest people, those who are not logged on and/or do not have user accounts it will display that particular background specified, cool huh? imagine the possibilities.

Let’s do something fun with the time of day body classes.

body.midnight {
    background: url('midnightbackground.jpg') repeat;
}

What this will do is at 11:30pm to 12:30am every day (hosted server time) will change the background to that particular background. Neat easter egg for your user’s yea? I think so too.

But, that’s not all … say we want to cover the whole ‘night hours’.

body.evening, body.midnight, body.night {
    background: url('nighttimebackground.jpg') repeat;
}

What this will do will cover all the nighttime classes and make the background specific for just the the times night is involved.

Okay, so what else is there? Yes I know ComicPress Companion will allow you to set browser specific CSS but … not everyone uses that for their theme. Let’s talk about IE problems for a second. Say something looks *really* good in FireFox but it looks like crap in IE? .. yeah we’ve seen that happen a lot. We’ve got an image that just needs an extra 5px in IE but doesnt in FireFox, what we can do is use the Body Class Browser classes to fix that a little.

If the user logs on with Internet Explorer the dynamically generated <body class=” will add an “ie” class to it, we can now use that for those browsers.

.ie .somewrapper {
    padding-right: 5px;
}

What the above will do is, if the browser is Internet Explorer add 5px to the padding to the right. This will *only* effect the users who have the Internet Explorer Browser when viewing the page.

With extended body classes you can even change CSS based on the post itself in what category it is in.

.category-random-thoughts .post {
	background: #ccc;
}

Also specify individual pages:

.page-id-3422 .post-title {
       background: url('imagestoposttitle.jpg') top center no-repeat;
       height: 20px;
       width: 400px;
       text-indent: -9999px;
}

To summarize. There are *alot* of things you can accomplish with these extended classes (design wise) that you never could of or even thought of doing before.

Please post cool idea’s and ways to use the extended body classes below, or comments and questions on how to use them.

– Phil (Frumph)

└ Tags: ,