Print Styles for MovableType Blogs

One of my main reasons for using MovableType (MT) for blogging is that most of the blogs I read that seemed well designed, structurally and graphically, had MT under the hood. And the pages produced are clean HTML, even XHTML validat-able, and the templates use CSS sensibly too (as opposed to osme other blogs that are still publishing cruft table-laden HTML, full of extraneous divitis, font tags, etc).

But while they look great on screen, full of nice colors, MT blogs do not print well, especially if you opt for the cool grey background/white text style sheet (e.g. “stormy”).

Ironic isn’t it? An appication named “MovableType” is missing a key element to make it printable. Sadly, it is a fact, that despite our “modern” digital age, a lot of web pages are printed.

So in this post, I will describe how to add a print style sheet to your MT blog so that when the pretty pages are printed, they come out readable. And this is without needing a “print friendly” icon, just the brawn and power of CSS.

This came into play when I ran the workshop yesterday, our the “blogshop”, as I wanted to provide paper handouts for the step-by-step instruction sections…

This is all frightfully simple. By adding a print style sheet, edting two lines in some templates, we can have screens that appear full color glory on the computer:

View image of how it appears on screen, or see the actual web page.

But simply by clicking the browser “print” button, the new style sheet can generate a readable page, removing link underlines, and un-needed sidebars:

View image or how it appears in printed form or see a PDF version of the entire printed content.

So how is it done? Easy as pie! If you are not very familiar with CSS, find someone who is, or if you know a little (that is my category), you may want to review this nice write-up from mediatinker that is an illustrated guide to the MT style-sheets.

(1) We start by using a base your regular style sheet template. Go to your MT control center, click “templates”, then click the “Stylesheet” template. Use your mouse to highlight and copy all the content from your style sheet.

(2) Return to the templates list, and create a new MT index template (click link “Create new index template”, pretty easy, eh?). Call it what you like, but I named miine “Stylesheet for Print”. The file name can be anything, but let’s make it easy, and call it “print.css”. Now paste in the regular style sheet that you copied from step 1.

(3) Now is where it gets a bit trickier. You will need to move through the different sections of the style sheet, and look for things that have colored backgrounds. I changed most of mine to white “color:#fff”, or maybe to distinguish a header, make it light grey “color:#ddd”. The task is to take any element that is colored, text, borders, etc, and make them black, grey or white.

I made all of my text black “color:#000”, and some borders grey, “color:#666”.

(4) You also may want to hide any underline effects on links as there is no need in print to denote a link (after all, you cannot click it!), so change any links classes to “text-decoration:none”, e.g.:

A       { color: #000; text-decoration: none; font-weight:normal; } 

  A:link    { color: #000; text-decoration: none; } 

  A:visited  { color: #000; text-decoration: none; }

(5) Hide elements you do not need to see in the printed version. I did not see it necessary to print the stuff on the side bars, so in one fell swoop, they are hidden by:

  #links {

    display:none;

}

Likewise, I hid the comments form, the comments, the comments header, and the individual post menu links:

  .comments-post, .comments-body, .comments-head, #menu {

    display:none;

Finally, since I am not printing the side-bar links, I can maximize the print width space, by removing or commetning out the float and width styles for the “#content” class:



  #content {

    /*float:left; */

    position:relative;

    /*width:90%; */

    background:#FFF;

    margin-right:15px;

    margin-bottom:20px;

    border:1px dotted #333;  

    }

(6) I did mine rather hastily yesterday and there is more I could condense or streamline (another day). You can peek at the print style I whipped up:
http://jade.mcli.dist.maricopa.edu/blogshop/print.css

The best way to edit and test this is ot first create a text file version of this new css file on your desktop computer. Then go to one of your blog pages, and use the File -Save As… menu to save a copy of the page as a local file (html source), and save it in the same directory as the “print.css” file. I called miine rather brilliantly, “temp.html”.

next, open “text.html” in a text editor, and modify the line in the <head> section that reads:

&lt;link rel="stylesheet" href="http://jade.mcli.dist.maricopa.edu/blogshop/styles-site.css" type="text/css" /&gt;

to read

&lt;!--link rel="stylesheet" href="http://jade.mcli.dist.maricopa.edu/blogshop/styles-site.css" type="text/css" /--&gt;

&lt;link rel="stylesheet" href="print.css" type="text/css" /&gt;

I simply commented out the regular link to the style sheet so it would not be used, and in stead used the local print.css style sheet. Now you can iteratively edit the print.css styles and view the local “temp.html” until it appears as you would like to see it printed (note for Internet Explorer users, the browser tends to cache style sheets, so I usually open another browser window. load the *.css file in there, and do a SHIFT-REFRESH to update the style sheet changes).

(7) Once that you have the style sheet doing what you want in a printable format, simpley copy/paste the style sheet content to your MT “Stylesheet for Print” template.

(8) The last step is editing your other MT templates to use this new style sheet for printing only. This would likely by your “Main Index”, “Category Archive”, and “Individual Entry Archive” templates.

Again, in the <head> section of these templates, change the line that reads:



&lt;link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" /&gt;

to now read:



&lt;link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" media="screen" /&gt;

&lt;link rel="stylesheet" href="<$MTBlogURL$>print.css" media="print" /&gt;

<9>And of course, you will have to Rebuild the site to update all the pages that use these templates.

Now the browser will use your normal display style sheet “styles-site.css” for the screen view and will use “print-css” when the HTML is sent to the printer.

Most people may not need this function, but if you perceive that there is a need to print blog pages, you might as well make it print friendly.