Different Styling For Different Page Type

Previously I wrote about conditional tags and how to use them to target specific page or page type in a Blogger blog. I also wrote on how to add styling (CSS) code inside a static page conditional tag in order toprovide static pages a layout different from other pages.

In this tutorial I’ll explain how to do the same thing, except this time we don’t use conditional tags. However this approach is limited only to page types that are represented by the pageType data tag, namely index, post, archive and static pages.

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='"loading" + data:blog.mobileClass'>

and replace it with this:

<body expr:class='"loading" + data:blog.mobileClass + " " + 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!

bloggercontrol

Pages

Different Styling For Different Page Type

1. Assign class to body element

`2. Adding CSS rules`

No comments:

Post a Comment

Labels