CSS Skin Enhancements

With most folks on weblogs.asp.net now skinning their blogs using CSS, I finally added mine to the list, plus updated the script to include a separate CSS for printing.  This way, if by chance someone actually wants to print a blog, they don’t have to get all the extra navigation elements too.  Here’s the new script:

// Disable all stylesheets
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
  if(a.getAttribute("rel").indexOf("style") != -1)
  a.disabled = true;

// Add new screen stylesheet
var h = document.getElementsByTagName("head");
var ss = document.createElement("link");
ss.setAttribute("rel", "stylesheet");
ss.setAttribute("type", "text/css");
ss.setAttribute("href", "http://www.yoursite.com/css/blog.css");
ss.setAttribute("media","screen");

if (h[0] != null) h[0].appendChild(ss);

// Add new print stylesheet
ss = document.createElement("link");
ss.setAttribute("rel", "stylesheet");
ss.setAttribute("type", "text/css");
ss.setAttribute("href", "http://www.yoursite.com/css/blogprint.css");
ss.setAttribute("media","print");
if (h[0] != null) h[0].appendChild(ss);

All I did is add the media attribute to the original script and set it to “screen”, and then added a second CSS, with a media attribute set to “print”.  In the second CSS, you want to set the display CSS attribute to none for things like leftcontent, rightcontent, leftcolumn, rightcolumn.  You will also want to set the margin-left attribute for centercontent and centercolumn to 0em (or whatever units you are using).

DonXML

[Listening to: Hello From The Gutter - Overkill ]