Removing Left Navigation Bar in SharePoint 2013 Master Page

Posted on April 11, 2013 by Andy Dixon — Leave a comment

When using PerformancePoint 2010 and 2013, you are given the option to create a dashboard which stores reports and filters. Another option that you are given is the option of assigning the dashboard to use a specific master page. This is a terrific feature in PerformancePoint. For example, you may find yourself loving your typical master page used on your site but the spacing and margins will squeeze all of the reports for your dashboard.

That’s where this blog posting comes in. The steps below will outline how to manipulate the current default master page (seattle) to remove the left navigation bar and the title bar that contains the search control. As a result, it will remove all of the default spacing on the left and at the top to provide more space to see the reports on the dashboard!

Disclaimer

I’m using in-line style changes for this solution that will override the CSS styles that are applied to the divs outlined below. Typically this is bad practice but this is a quick way to get a BI master page up and running the fastest way possible.

Also, this shouldn’t impact things moving forward. However, if you plan on using this in an organization or enterprise production environment, it is best to make a copy of the default CSS file used in the seattle master page and make the necessary changes in the CSS file instead of in line styles. I won’t be covering the CSS file in my example but my changes should be easily found in the CSS file as long as you understand why we are making the changes.

Steps

Hide Title Row

I wanted to hide the title bar on my master page including images and the search control. To do that I had to set the div with ID “s4-titlerow” to “display: none”.

Hide Side Nav Bar

The next thing I wanted to do was remove the left navigation bar. There is a div box with ID “sideNavBox”. I want to set the display property to none for the div box.

Change the margin for the Content Area

You will notice that we still have quite a bit of margin to the left. This is no good for our dashboards. We want to adjust this area so we aren’t loosing so much space for our reports.

To do this, we need to adjust the div with ID “contentBox”. This has a default margin-left property set to 220px. The margin is the reason there is so much space. In order to do this, let’s change the margin-left property to 20px instead of 220px.

And there ya go. Those are the properties that need changed in the seattle master page. Open it up in SharePoint Designer 2013 and change the mark up.

Title Row

SideNavBox

Content Box

Setting a dashboard to a new Master Page

Now that you have created the master page, chances are you want to use it. From my previous example, I created the master page at the root web for my site collection. However, I have a sub site that is using the BI Center site template which is where I want to use my master page. So I still want to use the default Dashboards library to store my dashboards but I want to use my master page. What’s the solution? First I’ll show you the problem.

So I open up PerformancePoint Dashboard Designer.

Next, I go to the dashboard I want to use the custom master page. Then I right click on the dashboard and click “Deploy to SharePoint…”

A pop up window will display. It will let you navigate to any subsites. For me, I have a BI Center subsite with a dashboards library where I want to put my dashboard. When I click the dropdown location you will see I don’t have my BI master page. Its because I created it at the root of the site collection and not the sub site level. If I click “Site Pages”, I’ll find my master page.

Solution to the Issue

The solution is to add the master page to the sub site. So the first step is to open up the Master Pages library in SharePoint Designer 2013 and Export File the master page somewhere locally.

The next step is to open up the sub site in SharePoint Designer 2013. Select the Master Pages library.

Click on the Import Files button. Click Add File from the pop up window and browse to the local copy of the master page you just exported in the step above. Then click OK.