Thursday, June 2, 2011

Migrating Master Page From Moss 2007 to Sharepoint 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 :

  • 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) :

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

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.

    <h1>This is a cool webpage</h1>
This shows in BOTH places – ie. the main page – AND – the popup dialog.

2. Include DIV + H1 + NOTDLG class

<div class="s4-notdlg">
    <h1>This is a cool webpage</h1>
This shows in the main page – but not the popup dialog.

3. System Pages – include DIV + H1 + NOTDLG class
On a system page – like the Site Settings page (\_layouts\settings.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>

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>

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

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

No comments:

Post a Comment