My blog has moved into Beta!

Please note that my blog has changed addresses! It's all new and improved. Hence this old friend of mine had to be left alone. You can visit me at The Last Word (beta). It's all warmed up for you! :)

« Home

Credibility of automationLockdown in Sector 4Expandable Posts Version 2.0The power of CSSBon Echo ImpressionsWindows - a victim of its own ambitionsGoogle too big for Google?Its a colour thingajaxWrite - what ticks me off! back with new features  »

This post stems from the discussion going over at Freshblog regarding how to make posts printable. The method being suggested there is a little bulky and seems a little slow for my liking, so I set to out to write my own bit of code, which now I'll explain to you. This method makes use of external stylesheets, which brings down page load times, as well as lines of code to execute for the script! :) So here it is.

Start off by making all your stylesheets external. It might take a while, or it might take one cut-paste, its upto your template. Now, link to them by using the <link> tags. The syntax for the tag is as follows:

<link rel="[1]" type="text/css" title="[2]" href="[3]">


[1]: either stylesheet or alternate stylesheet. The one holding the stylesheet value will be the default stylesheet.
[2]: the title of your stylesheet so that it can be called from the script.
[3]: the path to your stylesheet.

Now, put in this function in the head part of your template within <script></script> tags:

function change_css(title) {
   var i, a = document.getElementsByTagName("link"), b;
   for(i=0;i<a.length;i++) {
     if(a[i].getAttribute("rel").indexOf("style") != -1 && a[i].getAttribute("title")) {
       a[i].disabled = true;
       if(a[i].getAttribute("title") == title) a[i].disabled = false;

There! You're done with the hard part! Now, all you have to do is make links which will load in the different stylesheets! The link will look like this:

<a href="javascript:change_css('[4]')">Link Text</a>


[4]: the title of the stylesheet you want to load.
Hence, if there is a <link> tag with the title set to "Print" (for a printer friendly look), your link will look like this:

<a href="javascript:change_css('Print')">Print This</a>

Remember! The stylesheet is applied to the whole page. So if that link is executed on the main page, your entire main page will get styled accordingly. I'd suggest making those links appear only on your post pages using Blogger conditional tags. I don't know who might want to print out a while main page anyway :P

Simple? Good! This method can be used for many other things. In case you want to make several stylesheets for your viewers to pick from, the same method can be used. Let your imagination run wild! :)

Filed Under:


Why not use a media="print" attribute so that the print stylesheet is always applied when printing?

Aaah!... the idiosyncrasies of the overy trained mind! (:P)

I didn't think of the easier method, just went after the one which struck first! Yes, your method should do it perfectly, however the problem may come with browsers such as IE, which are not that CSS friendly yet (as far as I know). So I wouldn't depend on this method wholly yet! :) Plus, this method is not only for "Print" stylesheets, its just a general blueprint for anything which involves switching stylesheets! :)

nice for the b-navbar hide, but the sidebar is a lit-bit annoying..I'll try it..thanks

Leave your comment
You can use some HTML tags, such as <b>, <i>, <a>

Or you can sign in as a different user.


Latest Updated


Get My Blog In Your Mail!

Powered by Yutter

add this button to your site/blog as a link to this page! « link to me!
coComments my coComments
my claimID

subscribe to feed
Google Reader add to google The Last Word add to
Add to My Yahoo! add to yahoo!
Subscribe with Bloglines add to bloglines
add to msn
Add to netvibes add to Netvibes!
myFeedster add to feedster
Furl The Last Word add to furl

Archive Pages
January 2006 February 2006 March 2006 April 2006 May 2006 June 2006 July 2006 August 2006 October 2006 November 2006 December 2006


Song Of The Day:

Creative Commons License Widgetize!
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
Aditya Mukherjee © 2005-06 | Powered by Blogger