SharePoint Global Services Blog » SharePoint http://blog.sharepointglobalservices.com Providing consulting services one customer at a time Fri, 01 Oct 2010 13:29:15 +0000 en hourly 1 http://wordpress.org/?v=3.0 Printer-Friendly CSS and Print Preview in MOSS 2007 http://blog.sharepointglobalservices.com/2010/02/07/printer-friendly-css-and-print-preview-in-moss-2007/ http://blog.sharepointglobalservices.com/2010/02/07/printer-friendly-css-and-print-preview-in-moss-2007/#comments Sun, 07 Feb 2010 14:09:37 +0000 Gilles Urena http://blog.sharepointglobalservices.com/?p=88 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:

/* Hide MOSS Globa Links, title, banner and Top Nav area */
.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:

/* Add NoPrint class to the original markup */
.noprint {display:none;}


The last technique will be to overwrite the class attribute used by the element you are trying to hide:

/* Hide right column to hide custom action buttons in CustomXXX.ascx*/
.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

]]> http://blog.sharepointglobalservices.com/2010/02/07/printer-friendly-css-and-print-preview-in-moss-2007/feed/ 0