Thursday, February 02, 2006
« Getting Macromedia Flash to talk to Shar... | Main | Adding a hidden SharePoint Field in code... »

This entry was prompted by a question on a newsgroup about hiding screen elements so you can get the whole contents of a page fitting onto a printout without the top/left nav links.

Personally I don't like the printer friendly buttons you see on web pages mainly because you often find heaps of javascript dynamically altering DOM element's styles or the developer has coded a special version of the page just for the printer.
Sometimes that may be needed but I'd just recently done a website where this feature was requested and came across an aspect of css that I'd missed before. That was the media=print attribute. A few tweaks to the css file to hide navigation divs and margins and voila the printouts came out perfectly.

In CSS 2 you can specify different stylesheets for the different output devices the document may be rendered to, see http://www.w3.org/TR/REC-CSS2/media.html for the full details.
You can either reference a separate css file like this

<LINK rel="stylesheet" type="text/css" href="print.css" media="print">

or you can inline the style like this

@media print { .classname   {display :none; visibility:hidden } }

So to alter how a SharePoint page looks when printed we can either alter the css files that SharePoint uses : ows.css and sps.css with SP Portal : or inline the stylesheet in the page.
We can inline by adding a Content Editor Web Part and using its source edit button to add this text

<style type="text/css">
@media print
{
.ms-bannerframe   {display :none; visibility:hidden }
.ms-nav   {display :none; visibility:hidden }

}
</style>

Go to File-Print Preview and you should see that the top and left nav bars are now hidden.
On the Portal sites you probably need to add the ms-navframe style to the list above as that's used in the left nav bar.