Creating a Fixed Width SharePoint 2010 Masterpage (Updated)

Many are curious to find out how to style a SharePoint 2010 Masterpage the correct way when going for a fixed width site design. After all, Microsoft hasn’t given us an out of the box example like they did with in MOSS 2007 when they conveniently gave us the bluetabs.master and many of the other fixed width Masterpages.

This post will give us steps on how create a fixed width masterpage without removing any default SharePoint Class ID’s or Class Names that are actually needed to control many SharePoint Elements that you might not see at first glance, but down the road you could come across a broken page or a SharePoint Control that no longer works simply because you removed a needed ID. We will learn how to prevent that issue and explain what is occurring behind the scenes that can keep you from creating a fully functional fixed width SharePoint 2010 Masterpage.

Naturally the preferred method to creating a masterpage would be to use a SharePoint Solution. I have also included a wsp file that will provide a working fixed width masterpage that will help you begin customizing your own fixed width masterpages. The steps below are intended as a guide for styling the masterpage and not creating a Project Solution. I will post a follow up guide to creating a SharePoint Masterpage Solution in Visual Studio 2010.

For this example we will be using the v4.master masterpage for our fixed width masterpage, but my suggestion is to never style or modify the v4.master masterpage. Make a copy of it first, rename it and use the new file for branding your SharePoint 2010 Site. I’ve titled my Masterpage fixedwidth.master and you will find it located in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURES\SharePoint.Masterpage.Fixedwidth\Masterpage directory of your SharePoint Server if you used the attached wsp file. You will notice that in all of my steps and examples to get the fixed width masterpage we want, I will not change existing style properties from existing style id’s and class names. I will simply add a duplicate id or class name to the bottom of my style sheet. By having it at the bottom of your style sheet we can isolate and potential issues that come about when customizing the masterpage look and feel as well as telling your web page what style property it needs to use. Remember, the last thing your site sees in the style sheet is the style property your site will use. Unless, of course, you have used an overwrite method in your styling.

The v4.master Masterpage uses the corev4.css Style Sheet for its styling attributes and properties. Let’s start by making a copy of the corev4.css file in the 14 hive, and then renaming our copied corev4.css file to a new name that we want to refer to in our masterpage. In my example I will be calling the newly created file “fixedwidth.css” and will reference it in our new masterpage before the closing </head> tag as shown below: The included wsp file will automatically map the fixedwidth.css file to the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES directory on your SharePoint Server.

<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/fixedwidth.css” />
</head>

The first style change we will add is an additional style class called “#s4-bodyContainer” and give it a fixed width style attribute as followed:

#s4-bodyContainer {
width: 980px !important;
margin-left:auto;
margin-right:auto;
}

This will allow the content area below the ribbon to position itself in the middle of our page as shown in the example below:

(Note: I gave this site a dark background color so that we can see our changes.)

Next we will need to center our ribbon area to keep the page aligned correctly, especially when using a widescreen monitor. To do so add the following additional style class called .ms-cui-ribbonTopBars to the style sheet with the following style properties:

.ms-cui-ribbonTopBars {
width: 980px !important;
margin-left:auto;
margin-right:auto;
}

This will make the ribbon move to the center of your page as shown in the example below:

You might have noticed a line at the top right of page underneath the ribbon as shown in this zoomed in example:

To remove this line we will add the following additional style class name called “.ms-cui-ribbonTopBars” to the style sheet with the following style properties:

.ms-cui-topBar2{
border-bottom:solid 1px transparent !important;
}

(Note: The !important property allows the style to overwrite all style properties previously used for the style class name. So the “.ms-cui-topBar2″ class name had a style properties of “border-bottom:1px solid #cad2db;” and now we changed the border to always have a “transparent” border property.)

Next we need to make our content area white as to hide the background color or image that you might be using on your site. You can skip this section if you are not using either of these things.

To give our content a white background we will add the following class id called “#s4-mainarea” to the style sheet with the following style properties:

#s4-mainarea{
background-color:#ffffff;
}

The end result being:

Now, many of your end users like adding a lot of content to their sites and why shouldn’t they? SharePoint was built to handle a lot of end user content. The problem is the content doesn’t want to stay inside of your master page and the end result might throw people off. As seen below, the last column gets cut off short and the list runs wider than the masterpage.

To fix this we will need to add the following script to your masterpage as well as a reference to JQuery somewhere in one of your libraries. I am using JQuery 1.6.1 and my file name is jquery-1.6.1.js. We need to have the jquery file in order to run our script to correct the master page cutting off. These files will be mapped to the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\jquery directory on your SharePoint Server if your are using the attached wsp file. Now we will create our own Javascript file and add the following code to it. Open up a blank text document and add:

$(document).ready(function(){
//Elements with the potential to be too wide.
elements = $(“.ms-bodyareacell > div > *, .main-container > div > *”);
leftPanelWidth = $(“#s4-leftpanel”).width();
//For each Elements
$(elements).each(function(){
//if it’s wider than the side width
if($(this).width() > ($(“#s4-bodyContainer”).width() – leftPanelWidth ))
{
//Calculate the new width taking the left nav into account
newWidth = leftPanelWidth + $(this).width();
//Set the width!
$(“#s4-bodyContainer”).attr(“style”,”width:”+newWidth +”px!important”)
}
});
});

Save it as a .js file and you can either add it to the 14 hive of your SharePoint Server or a document library on your site. I usually take the 14 hive approach so I can use this on multiple site collections and web applications. We need to make a reference to the JQuery file and our new javascript file before the ending </head> tag on our Masterpage as shown below:

<script type=”text/javascript” src=”/_layouts/jquery/jquery-1.6.1.js”></script>
<script type=”text/javascript” src=”/_layouts/jquery/fixedwidth.js”></script>
</head>

One problem that you might find troubling and the root of most users fixed width masterpage frustrations, is that when you go to your site and hit refresh, the site widens correctly, but a second later that site returns 980px and our content on the page gets cut off again. The culprit? A Div called “s4-workspace”, this div controls many things, the positioning of the ribbon, the pop-up dialogue box you get when you add new items, the gantt view and can play havoc on your wiki pages if not styled correctly or left alone. One thing is for certain, don’t remove it. I have seen time and time again suggestions that if you remove this Class ID your site will look the way you want it to look. If removed, your page might look great upon refresh, but many bugs are waiting down below. Such as the gantt view no longer working. Your pop-up boxes not scrolling correctly and links in your wiki site no longer functioning correctly. The Ribbon also relies on the Class ID being there as well.

The fix? Search for the Div called “s4-workspace” in your masterpage and add the class name “s4-nosetwidth” to your div as shown below:

<div id=”s4-workspace” class=”s4-nosetwidth”>

Now you have a fixed width masterpage done with minimal effort and did not use styling that could have potentially plagued your SharePoint site with many issues beyond the look and feel of the site. The site should now have a fixed width masterpage that adjusts its size based on the amount of content used on the site.

Link to Fixed Width SharePoint MasterPage Solution wsp file.