How to show/hide ribbon and quick launch in SharePoint 2010?

Environment: Project Server / SharePoint 2010

Issue:

In one of my clients, we are using BI Center as a part of PWA (Project Server 2010) environment to create few dashboards for our executives. We want to show those dashboards on Executive site using Pager Viewer web part. The issue started when it showed the ribbon and quick launch on the Page viewer web part (See Fig – A). The goal was showing only the dashboard contents using excel, performance Point, SSRS and Visio services.

                                                                 Fig-A

Solution:

Please use the following steps to hide both the ribbon and quick launch bar.

1. Put the following script into a text file using notepad.

Script:

<style type="text/css">

#s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, #s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content {display:none !important;}

.s4-ca{margin-left:0px !important; margin-right:0px !important;}

</style>

2. Upload it to any document library (accessible via the All Site Content page).

3. Add a Content Editor Web part on the page where you want to hide the ribbon and quick launch bar

3. Go to Content Editor Properties
4. Point to the correct URL of the file on the Content Editor Web part – Content link text.

5. To hide the Web part from normal view, under Layout Section Tick the Hidden Check box and Click OK.

After following the above steps, you will see the following page without Ribbon and Quick Launch

                                                                      Fig-B

Note:

At this stage, you can’t edit the page in normal fashion as all the Ribbon options have been hidden. In case you want to edit existing web parts or add a new web part, you can put the following script on the URL address to open this page on ‘Edit page’ mode.

javascript:MSOLayout_ToggleLayoutMode()

How to hide only Quick Launch in a SharePoint page?

Please use the same instructions as mentioned above except the script. Please use the following script to accomplish this task and in result, only quick launch will be hidden as shown in Fig- 3 below

Script:

<style>

#s4-leftpanel{

display:none

}

.s4-ca{

margin-left:0px

}

</style>

 

                                                               Fig -3