Tip #63:How to print SharePoint 2010 page without header and navigation

Rate this item
(1 Vote)

When you try to print the SharePoint 2010 page you will find that site header and navigation is printed with you content. Very often you don't need that service information and would like to see the page content only.  This can be easily done via the custom CSS  that turns off the unnecessary elements from the printing.

SharePoint 2010 made a step ahead in supporting the page printing, because you need to turn off the elements you don't want to see, and all content is rendered by default. SharePoint 2007 didn't show content in print preview by default, and you should use FireBug or IEDevToolbar to scrutinize the page and find the hidden elements.

The following CSS I created for my SharePoint 2010 project hides all navigation elements for the "Team Site" in SharePoint and change layout to have content aligned by left side. Moreover, I included the SharePoint 2007 styles to provide the same printing functionality without navigation controls, so when you migrate your SharePoint 2007 to SharePoint 2010 your printing preview won't change.

 

/* This CSS removes the header, navigation and other action elements from the print preview  */
/* To use this CSS for PrintPreview just add the <linl> to this CSS with the media="print"   */

@media print
{

/* SharePoint 2010 */

        /* Team Site */
        #s4-titlerow, #s4-statusbarcontainer, #s4-topheader2 { display:none; visibility: hidden; }

        #s4-leftpanel { display:none; visibility: hidden; }
        #MSO_ContentTable { margin: 0 0 0 0 }

 

/* SharePoint 2007 */


        /* CORE.CSS override */
        .ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,
        .ms-rightareacell,.ms-areaseparatorright, .ms-areaseparatorcorner,
        .ms-titlearealeft,.ms-titlearearight,.ms-searchform,.ms-banner,
        .ms-buttonheightwidth,.ms-buttonheightwidth2
        {
                display:block;
                visibility:visible;
        }        

        /* hide header * quick navigation */
        .ms-globalbreadcrumb { display:none; visibility: hidden; }
        .ms-globalTitleArea { display:none; visibility: hidden; }
        #nav-wrapper { display:none; visibility: hidden; }
        .ms-titlearealeft { display:none; visibility: hidden; }
        .ms-navframe { display:none; visibility: hidden; }
        .ms-nav { display:none; visibility: hidden; }
       
        /* move content to the left */
        .ms-bodyareacell, #above-main { margin: 0 0 0 0 }
       
        /* fonts normalization */
        .ms-formbody { font-size: xx-small}
       
        /* remove the actions buttons */
        .ms-toolbar { display:none; visibility: hidden; }

       /* expanding edit form controls on the width of the screen */

        #onetIDListForm  { width: 100%; } 
       .ms-formlabel { width:20% }
       .ms-formbody {  width: 80%; } 
       .ms-long { width: 100%; }
       .ms-rtelong { width: 100%; height: 400px; }
       .ms-rtetoolbarmenu { width: 100%; text-align: left; }
       TEXTAREA.ms-long { width: 100%; }
       .ms-formbody SPAN SPAN DIV { width: 100%; }

 }

 

 

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.