Printer-Friendly CSS and Print Preview in MOSS 2007
This post was driven by a request I recently received to add a Print Preview button on a SharePoint page. When clicked, the Print Preview button will popup a window without any SharePoint navigational elements.
I decided to create a separate CSS file (called PrintPreview.css) to overwrite the following MOSS CSS classes:
.ms-globalTitleArea {display:none;}
.ms-globalbreadcrumb {display:none;}
.ms-bannerContainer {display:none;}
/* Hide MOSS Page Title area */
.ms-TitleAreaFrame {display:none;}
.ms-titlearealeft {display:none;}
.ms-titlearea {display:none;}
.ms-pagetitle {display:none;}
/* Hide MOSS Bottom area */
.ms-pagebottommarginleft {display:none;}
.ms-pagebottommargin {display:none;}
.ms-bodyareapagemargin {display:none;}
.ms-pagebottommarginright {display:none;}
/* Hide MOSS quick launch area */
.ms-navframe {display:none;}
.ms-pagemargin {display:none;}
/* Hide MOSS Editor tool bar menu to prevent user from editing a comment*/
.ms-rtetoolbarmenu {display:none;}
/* Remove border from MOSS body area */
.ms-bodyareaframe {border:none 0px;}
Since the Print Preview button was going to be added to an existing User Control (wrapped in a Web Part), I then added the following JavaScript code to the markup page of each user control. Doing so will also allow you to hide specific elements you might not want to be displayed in the print preview window:
<script type=”text/javascript”>
//Function to print Web Part
function PrintPreview() {
var sUrl = window.location.href + ‘&PrintPreview=true’;
if (window.location.href.indexOf(’?') == -1) {
sUrl = window.location.href + ‘?PrintPreview=true’;
}
window.open(sUrl, “_blank”, “width=800,height=600,resizable=1,toolbar=1,status=1,titlebar=1,menubar=1″, true);
}
if (window.location.href.indexOf(”PrintPreview=true”) > -1) {
//This is where you can hide custom elements by ID or name
//For example here is the code to hide a command button with an ID of “button1″
document.getElementById(’button1′).style.display = ‘none’;
//Load PrintPreview CSS
SetPrinterFriendlyCSS();
}
function SetPrinterFriendlyCSS() {
document.write(’<link type=”text/css” href=”/_layouts/Customer/Application/PrintPreview.css” rel=”stylesheet” />’);
}
</script>
To hide specific custom elements on your page, you could also add a “noprint” class attribute to each element you do not want to be rendered in the print preview mode. The not print class will be added to the PrintPreview.css file:
.noprint {display:none;}
The last technique will be to overwrite the class attribute used by the element you are trying to hide:
.col_actions {display:none;}
About the Author
Gilles Uréna is an independent SharePoint Consultant. Gilles is the owner of SharePoint Global Services, an organization built from the ground up to provide consulting services on the SharePoint platform and surrounding technologies. You can contact Gilles at gilles.urena@sharepointglobalservices.com
Tags: CSS, Printer-Friendly, SharePoint
Uncategorized | Gilles Urena, 7 Feb 10 | 
Comments Off