SharePoint 2010 Visual Upgrade: adding ribbon to MOSS 2007 Master Page

Recently I was trying to migrate a site collection from MOSS 2007 to SharePoint 2010 in our UAT enviroment. By following a technet article, I was able to have my site collection in SharePoint 2010.   Then I followed the next step to perform visual upgrade otherwise we would have a MOSS 2007 looks and feels in SP 2010.  So grabbed one of the 2010 master page, in this case v4.master from  {hive14}\TEMPLATE\GLOBAL.

Next I created a blank masterpage using SharePoint Designer, copied and pasted the content of MOSS 2007 masterpage to the new blank masterpage then modifed it to have ribbon and v4 css & javascripts. Finally I used this master page on one of the site in the site collection, but gosh, it just looked awful, and off course no ribbon appeared and the worse was the CssLink version 4 wasn’t rendered. So basically the new masterpage didn’t have the the css reference to core.css.

After trial and error and reading some blogs and technet, I was be able to have a nice ribbon to my new masterpage. Below is the steps I did.

1. Create a new Master Page

Create a blank master page in SharePoint Designer and copy the content of the MOSS 2007 master page into it.

2. Add ribbon component the new master page.

These are the steps you need to do to add and make the ribbon work:

Open SharePoint 2010 master page either v4.master in {hive14}\TEMPLATE\GLOBAL or any v4 publishing master page in {hive14}\TEMPLATE\FEATURES\PublishingLayouts\MasterPages such as nightandday.master.

On the new master page modify the Assembly version of the Register SharePoint namespace to Version 14.0.0.0,

Copy any register controls, and any tags underneath <head runat=”server”> from nightandday.master or v4.master. and paste them at the appropriate location in the new master page

Very Important step to follow markup guideline from microsoft, this guideline contains all mandatory elements (css and div’s) for ribbon to work properly. Based on the guideline below are my steps.
First step is modifying the body so the body tag will be<body onload=”….” scroll=”no” class=”customv4″>, my customv4 class will be

body.customv4 {
height: 100%;
width: 100%;
overflow: hidden;
}

I copy  <div id=”s4-ribbonrow” class=”s4-pr s4-ribbonrowhidetitle”> and everything in it from v4.master, the div contains ribbon controls and its components such as Site Actions, Pop-out control, etc. And paste it in the the location where I want the ribbon sit, in my case under the global navigation. Having pasted this one I need to remove the following controls and contentPlaceHolders from the MOSS 2007 masterpage as they are now in the ribbon.

  • Controls: SiteActions, Welcome, DelegateControls (ControlId=GlobalSiteLink0 & PublishingConsole)
  • ContentPlaceHolders:  PlaceHolderGlobalNavigation, PlaceHolderGlobalNavigationSiteMap, SPNavigation

I changed the asp:menu to the one from v4.master.

Then next step is to enclose any content under the ribbon where I want the browser scroll bar displayed with this div <div id=”s4-workspace”> <div id=”s4-bodyContainer”> … </div></div>.

As I applied the master page to any form pages, the pop-up dialog on new/display/edit forms would include top banner & top navigation. To remove the unwanted parts in the pop-up, the parts should be enclosed with <div class=”s4-notdlg>.

Finally I put my custom css to overwrite the ribbon background color: body #s4-ribbonrow{background-color:#94969C}

3. Perform Visual Upgrade.

This steps is required otherwise the CSSLink version 4 won’t be rendered. The visual upgrade will set the UIVersion property of the SPWeb to 4. The easiest way to do visual upgrade is from Site Settings -> Title, Description, And Icon or go to SiteUrl/_layouts/prjsetng.aspx, there is a new section on that application page to perform visual upgrade, choose either Preview the updated user interface or Update the user interface. Having chosen the preview we can switch back the old interfaces later on.

This technet article has more explanation and techniques to perform visual upgrade.

Or create a feature to perform the upgrade as I shown in this post.

4 Use the new Master Page to the current site

The easiest way is change this from site settings or SiteUrl/_Layouts/ChangeSiteMasterPage.aspx.

Here is my master page looks like,

Before visual upgrade

After visual upgrade (using the ribbon from v4.master).

Conclusion

Having a ribbon in the migrated master page is one of the important task of the visual upgrade. This post shows you the simplest steps to put the ribbon to upgraded master page by following the markup guideline and performing visual upgrade.

One thought on “SharePoint 2010 Visual Upgrade: adding ribbon to MOSS 2007 Master Page

  1. Pingback: Microsoft…what else? – Office 365 migration – SharePoint Online 2010 Master Pages

Leave a Reply

Your email address will not be published. Required fields are marked *


5 × six =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">