Migrating Master Page from 2007 to 2010

When upgrading a SharePoint 2007 site – to SharePoint 2010 – the biggest change from a visual perspective is the ribbon – you’ll come to know it as “THAT DAMN RIBBON” !!!

It’s tricky to ‘style’ – and you can’t EDIT a page unless you you’ve included it.

The steps I’ve followed to get it working are :

  • Look at “v4.master” – and identify the tags you’ll need
  • Refer to this MSDN article : Upgrading an Existing Master Page to the SharePoint Foundation Master Page  (NB. some incorrect text, but a good guide)
  • Check your styles being used – and include “NO-DLG” where needed – for any dialog/modal popups
              • Upload document
              • New page
              • etc.
  • Include style class tags for sections to appear on System Pages also (using the same Master Page)

————————————————-

Styling for 2010 is an much bigger topic – for now, I’m just detailing how to ‘fix’ any pages being shown in a “modal dialog” (and “system pages).

Here’s an example of an upgraded Team Site – looking “alright” apart from some styling bits & pieces (still to do) :

image

The new AJAX style popup windows use the same Master Page – but you need some tweaking to avoid this (when clicking “UPLOAD”) :

image

You’ll notice that the ribbon, left-nav, top-nav and a few other elements should NOT be there. 

The basic fix is to include some CSS class tags – on the specific areas you DON’T want to show.

  • Include the class “s4-notdlg” for any TD or TR tags that you don’t want shown
  • Or, can wrap these tags in a <DIV class=’s4-notdlg’> tag set

This correlates to the DLGFRAME.CSS style sheet, located within _LAYOUTS/STYLES.

Here’s an example – with some screen shots to show the result.

1. Include DIV + H1

<div>
    <h1>This is a cool webpage</h1>
</div>

This shows in BOTH places – ie. the main page – AND – the popup dialog.

image

2. Include DIV + H1 + NOTDLG class

<div class="s4-notdlg">
    <h1>This is a cool webpage</h1>
</div>

This shows in the main page – but not the popup dialog.

image

3. System Pages – include DIV + H1 + NOTDLG class

On a system page – like the Site Settings page (_layoutssettings.aspx) you will see that the same text is begin shown – this operates just like the home master page.

As such, the NOTDLG tag only applies to modal popups (.ms-dialog) – this doesn’t have any impact.

<div class="s4-notdlg">
    <h1>This is a cool webpage</h1>
</div>

image

4. System Pages – include DIV + H1 + NOTDLG + SKIPRIBBON class

Through some fiddling & testing, I worked out that there’s a similar class tag that you can use to achieve the same result – for System Pages.

<div class="s4-notdlg s4-skipribbonshortcut">
    <h1>SharePoint is very cool</h1>
</div>

This class will have the same effect by hiding the DIV on any system pages – but still show on the HOME page :

image

Making use of these tags will allow you to switch on/off certain sections of the Master Page :

  • Publishing pages – ie. Site Master Page
  • System pages – ie. System Master Page – for all views and forms
  • Dialog / popup pages – all making use of the same Master Page (!!)

Hope this is a useful tip – I’ll re-visit some more related to styles for SharePoint 2010 – specifically related to the RIBBON – and how to display it, and have the site “use-able” !

Winking smile

Advertisements

2 thoughts on “Migrating Master Page from 2007 to 2010

  1. Pingback: SharePoint 2010 – Search Center Controls Missing « SharePointRoot

  2. hi rajesh…

    we are migrated sharepoint 2007 to 2010..and we did the visuval upgrade succusssfully..but the problem is..when ever we are adding the web part its not showing the ribbon means web part gallery..but we can see the site actions menu.its head over me..can u help me about the issue..

    thanks in advance
    god bless u..

    Like

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