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='"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!
15 comments to "Different styling for different page type"
Thank you for your generous efforts in constructing this blog & sharing with everyone…
@Shirshak Bajgain
Use Blogger's default readmore.
Last but useful :)
blogazine style?
Can I just Hide the Right Side Bar in one of my pages?
@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.
Nice Post. Thanks for sharing this information.
@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
Thanks' for this Nice Tips. This done my page.
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.
@sunil
Go here:
Adding widgets on both sides of Blogger header
hiding with css won't stop it from being loaded, right?
@Mahroof Ali
Yes that's correct.
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.