1

I have 2 content editor's which are placed at top left and top right. Top left is only for navigation while top right is for pure contents. When I click print preview, it also show navigation. I would like the print preview to only show pure contents (which is at top right), rather than showing navigation too.

How can I do this?

enter image description here

enter image description here

1st picture: Top left for navigation & top right for contents

2nd picture: Print preview mode where it also shows navigation.

I do not want it to show the navigation part

1

You have to create separate .css for printing. In .css file you have to include @media print.

@media print 
{
    #DeltaPageStatusBar,#sideNavBox,#DeltaFormDigest,#s4-titlerow,#notificationArea,#s4-ribbonrow,#ms-cui-topBar2,#ms-cui-ribbonTopBars,#suiteBar{
        display:none !important;
    }
}

In comma separated class name also include the name of class applied to left column of page which shows the navigation.

To know more about .css for printing, you can refer this link.

Hope this helps.!!

| improve this answer | |
  • it works but it hide the only top part of the page which is the icons, navigation and 'check in' banner. The navigation is still visible. I create a div in navigation, and display: none. It work but then it still have white space, without any navigation in that area. – Zul Hazmi Nov 24 '15 at 5:48
  • I add #MSOZoneCell_WebPartWPQ2, #WebPartWPQ2 for the left column. it works! thank you. – Zul Hazmi Nov 24 '15 at 5:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.