Different styling for different page type

Here we go,

1. Assign class to body element

First we need to assign a class to the body element so that we can reference it from the stylesheet. And the class has to be somehow linked to the page type. We can achieve this by using pageType data as the class name. We only need to do this once. Here’s what to do:
Find this:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

and replace it with this:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass + &quot; &quot; + data:blog.pageType'>

In older and most third party templates you will find body tag without any attribute, like so:

<body>

If this is your case, replace it with:

<body expr:class='data:blog.pageType'>

2. Adding CSS rules

You can style a HTML element by adding a CSS rule in the stylesheet. For example, this is the rule for hiding post timestamp:

.post-timestamp {display: none;}

Normally, this rule applies the styling on ALL pages i.e.. hides the post timestamp across the entire blog. How then we specify a page type and make the code apply only on that particular page type? The answer is by adding the page type class name (and a space) in front of the selector. Refer to the table below.

Page type	Class name
Index pages	.index
Post pages	.item
Archive pages	.archive
Static pages	.static_page

Let say you want to hide the post timestamp only on static pages, then the code becomes:

.static_page .post-timestamp {display: none;}

To make sure the new rule “stick”, you need to add it at the end of the stylesheet. This can be done either by putting it before before ]]></b:skin> line in the template Design > Edit HTML or by adding it via Template Designer > Advanced > Add CSS.
With this method any more individual page type styling will be done entirely in CSS stylesheet. The result would be a cleaner, lighter and W3C compliant code. (If we use the conditional tag method, styling four individual page types, would require the addition of four conditional tags in HTML!).

Enjoy!

Pages