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.
Powered by: newtelligence dasBlog 2.0.7226.0
Disclaimer The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.
© Copyright 2008, Colin Byrne
E-mail