Removing Left Navigation Bar in SharePoint 2013 Master Page

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”.

 Find Title in Firebug

Inline Style to Remove Title in Firebug

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.

Find Left Navigation in Firebug

Remove Left Navigation in Firebug

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.

Show Extra Space in Left Navigation

Change Left Navigation Margin in Firebug

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

Edit Title Row in Master Page in SharePoint Designer

SideNavBox

Edit Side Nav in Master Page in SharePoint Designer

Content Box

Edit Content Box in Master Page in SharePoint Designer

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.

Open SharePoint 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…

Deploy to SharePoint in SharePoint Designer

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.

Deploy to SharePoint in SharePoint Designer Pop Up

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.

Export File from SharePoint Designer

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

Select Sub Site in SharePoint Designer

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.

Add local copy of Master Page

The master page is now added.

Add Master Page in SharePoint Designer

Try deploying the dashboard to SharePoint again and now, you will see the BI master page we created before as a master page to use now.

Use Master page in SharePoint Designer

Now there is no left navigation (quick navigation) or title row and the report can now stretch across the page.

Master Page without Left Nav and Title

Advertisements
Tagged with: , , ,
Posted in CSS, HTML, SharePoint

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: