Thursday, March 24, 2011

Customise SharePoint v4 Master Page to Add Footer

The following are steps of creating a custom master page to add a footer by using SharePoint Designer 2010.

  • Open your site in SharePoint Designer 2010 and click the Master Pages link in the Navigation pane.
  • Right click v4.master and select Copy.

image

  • Right click and paste another copy of the file into the Master Pages gallery.
  • From the Master Pages gallery, click next to the filename for the master page that was just
    created. From the ribbon, click the Rename button. Rename the file SharePointMalayaFooter.master.

image

  • Select the file SharePointMalayaFooter.master and then, from the ribbon, click the Edit File button.
  • Ensure that either the Split or Code view is showing. Near line 624, after <SharePoint:DeveloperDashboard runat=“server”/>, add the following code snippet:

<div class="s4-notdlg" style="clear: both; background-color:#FEAD30; padding: 10px;">&copy; Copyright 2011 SharePoint Malaya</div>

image

  • After you’ve made the change, save the fi le by clicking the Save icon in the upper left-hand corner of the screen. You will get a dialog that warns you that you are about to customize the file from the site definition. Click Yes to continue.

image

  • Click the Master Page link again from the Navigation pane on the left to return to the Master Pages gallery.
  • To apply the changes to the site, select SharePointMalayaFooter.master and then, from the ribbon, click the Set as Default button.
  • Now open your site in the web browser, you’ll see that a footer has been applied to your site, as shown below:

image

5 comments:

Anonymous said...

Hi Mohd,
Thank you for your post. It was what I was looking for but I have a problem. I don't have s4-notdlg class in my css. Could you tell me the code please?
Thank you,
Dario.

Mohd Sukri said...

Hi Anonymous (5:01 PM),
If you use Ctrl+Click to follow s4-notdlg class hyper link, you will get no where because s4-notdlg class is internal to SharePoint.

s4-notdlg class is use on whatever element you don't want to show in the dialog box. For more information, see this post: http://blog.drisgill.com/2009/11/sp2010-branding-tip-2-custom-master.html

Glazing said...

Thanks for the help to insert a footer, I was wondering how would I add web parts in this footer which other people can also add to? I need links to be displayed in the footer and I know how to write it in to the code on Designer but I need it so people other then me can add and edit them.

Jacob said...

Very nice post - much simpler than the JQuery solutions I've been finding all over the place. Thank you for typing this up.

Oliman said...

Thanks, this saved my time!