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 to provide 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='&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!

15 comments to "Different styling for different page type"

Anonymous,  August 22, 2011 at 8:37 PM    
This comment has been removed by the author.
Custom Essay Writing Service August 24, 2011 at 1:04 PM    

Thank you for your generous efforts in constructing this blog & sharing with everyone…

Greenlava August 26, 2011 at 9:31 PM    

@Shirshak Bajgain
Use Blogger's default readmore.

Duy Pham September 9, 2011 at 10:04 PM    

Last but useful :)

Anonymous,  September 18, 2011 at 5:11 PM    

blogazine style?

Bernard September 29, 2011 at 12:35 AM    

Can I just Hide the Right Side Bar in one of my pages?

Greenlava September 29, 2011 at 10:13 AM    

@Bernard
Yes you can.
Just follow the second link provided at the beginning of this tutorial. However you need to replace the conditional tag to target the page's URL. You can find the appropriate conditional tag in the first link.

Pankaj Saraf October 4, 2011 at 3:02 PM    

Nice Post. Thanks for sharing this information.

Mike Ritter November 4, 2011 at 12:33 AM    

@bernard, be sure you accommodate for the space left by not having the sidebar. you might consider an if for having no sidebar with the main content div spanning the container then an else for others that display the main content div smaller width to accommodate the sidebar

Md Shaiful islam Talukder January 10, 2012 at 12:21 AM    

Thanks' for this Nice Tips. This done my page.

sunil April 26, 2012 at 12:14 AM    

Thank you very much for this..actually I want divide header gadget to two parts i mean I want to add my feed icon and share buttons near page title.please help me.

Greenlava April 29, 2012 at 10:58 AM    

@sunil
Go here:
Adding widgets on both sides of Blogger header

Anonymous,  July 10, 2012 at 9:02 PM    

hiding with css won't stop it from being loaded, right?

Greenlava July 11, 2012 at 12:02 PM    

@Mahroof Ali
Yes that's correct.

wiyono February 3, 2013 at 6:15 AM    

brilliant tutorial, thank you

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.