Branding a Sharepoint Site Using a Custom Master Page

Hands-On Lab

Branding a SharePoint Site Using a Custom Master Page

Lab version: 1.0

Last updated: 5/17/2011

Contents

Overview 3

System Requirements 3

Setup 3

Task 1 – Ensure SharePoint Server Publishing Feature is Enabled in On-Premise Site 3

Task 2 – Ensure SharePoint Server Publishing Feature is Enabled in SharePoint Online Site 4

Task 3 – Prepare Code Snippets 4

Task 4 – Create Visual Studio Toolbox Snippets 5

Exercise 1: Creating a Custom Master Page 5

Task 1 – Start a New Master Page Based on v4.master 5

Task 2 – Customize the Master Page 7

Task 3 – Create a Custom Style Sheet 10

Task 4 – Add a Feature Receiver to Enable the Custom Master Page 11

Task 5 – Build and Deploy the Project 14

Exercise 2: Test the Branding Solution on a SharePoint Online Site 15

Task 1 – Deploy the Solution Package to SharePoint Online 15

Task 2 – Revert the Style of the SharePoint Online Site 17

Summary 17

Overview

Lab Time: 30 minutes

Lab Folder: C:\%Office365TrainingKit%\Labs\8.2

Lab Overview: Customizing an intranet site with your company’s identity and branding can help create a more effective collaboration experience. In some cases, style changes using Themes or alternate CSS are not enough to brand a site. SharePoint uses Master Pages to provide the structure, layout and navigation for pages and define what style sheets are referenced and used to style a site. Designers and developers can create and specify a custom Master Page, giving them full control to customize the look and feel of the site.

Each branding project will of course have its own style and design. In this lab, you will learn how to construct and deploy a Master Page to customize your SharePoint site. The customizations are meant to demonstrate some of the typical changes made when branding a site.

System Requirements

You must have the following items to complete this lab:

· SharePoint 2010

· Visual Studio 2010

· SharePoint Online

◦ Note: You will need administrator access to an SPO site collection to perform the steps in this lab.

Setup

Note: Unlike other labs in this toolkit, you will not create a sub-site for this lab. A branding solution will likely be deployed at the site collection level and be inherited by all sites in the site collection. In addition, Master Pages should only be deployed to the Master Page gallery at the top-level site. The lab was modeled with this in mind. If, however, you do not wish to apply branding to your top-level site, you can skip the steps that set up an event receiver to apply the Master Page and manually do so via the Site Settings >> Master Page setting page of a sub-site.

Task 1 – Ensure SharePoint Server Publishing Feature is Enabled in On-Premise Site

1. Navigate to your top-level SharePoint site; e.g.: http://intranet.contoso.com.

2. From Site Actions, choose Site Settings.

3. Under the Site Collection Administration section, click Site collection features.

4. Ensure that the SharePoint Server Publishing Infrastructure feature is activated.

a. This feature enables the ability to specify a Master Page for the site.

5. From Site Actions, choose Site Settings.

6. Under the Site Actions section, click Manage site features.

7. Ensure that the SharePoint Server Publishing feature is activated.

a. This feature enables the ability to specify a Master Page for the site.

Task 2 – Ensure SharePoint Server Publishing Feature is Enabled in SharePoint Online Site

1. Navigate to your top-level SharePoint Online site, e.g., https://contoso.sharepoint.com.

2. From Site Actions, choose Site Settings.

3. Under the Site Collection Administration section, click Site collection features.

4. Ensure that the SharePoint Server Publishing Infrastructure feature is activated.

a. This feature enables the ability to specify Alternate CSS for the site.

5. From Site Actions, choose Site Settings.

6. Under the Site Actions section, click Manage site features.

7. Ensure that the SharePoint Server Publishing feature is activated.

a. This feature enables the ability to specify a Master Page for the site.

Task 3 – Prepare Code Snippets

This lab contains code snippets that you will use to complete the solution. You can either copy the snippets from the lab manual itself or install the code snippets so that you can access them directly from Visual Studio 2010.

1. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets\CSharp.

2. Select all the files in this directory and copy them to your clipboard by pressing [Ctrl]+[a] and then [Ctrl]+[c].

3. Browse to ..\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets

4. Press [Ctrl]+[v] to paste the code snippet files into this directory.

5. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets\XML.

6. Select all the files in this directory and copy them to your clipboard by pressing [Ctrl]+[a] and then [Ctrl]+[c].

7. Browse to ..\Documents\Visual Studio 2010\Code Snippets\XML\My Xml Snippets.

8. Press [Ctrl]+[v] to paste the code snippet files into this directory.

Note: To reduce typing, you can right-click where you want to insert source code, select Insert Snippet, select My Code Snippets and then select the entry matching the current exercise step.

Task 4 – Create Visual Studio Toolbox Snippets

Some code snippets that are used in this lab can’t be formatted as Visual Studio snippets. Instead you will create them as text snippets in the Visual Studio Toolbox.

1. Open Visual Studio 2010.

2. Click View >> Toolbox to open the Toolbox.

3. If not already present, add a tab called Lab08.

4. Open C:\%Office365TrainingKit%\Assets\Code Snippets\Demo8_2_2.txt and select all its contents.

5. Drag the contents into the Lab08 tab.

6. Rename the item to 8.2.2.

7. Repeat this process for the following text files:

a. Demo8_2_3.txt

b. Demo8_2_4.txt

c. Demo8_2_5.txt

d. Demo8_2_6.txt

e. Demo8_2_7.txt

f. Demo8_2_8.txt

g. Demo8_2_9.txt

h. Demo8_2_14.txt

Exercise 1: Creating a Custom Master Page

Task 1 – Start a New Master Page Based on v4.master

In this task, you will download one of the built in SharePoint Master Pages to use as a starting point for your custom Master Page.

1. Launch Internet Explorer.

2. Navigate to your top-level SharePoint site, e.g., http://intranet.contoso.com.

3. Click Site Actions >> Site Settings.

4. Under Galleries click Master pages and page layouts link.

5. Select v4.master and click Download a Copy in the Ribbon.

Note: SharePoint 2010 has several built-in Master Pages. For the purpose of branding an Intranet site, the v4.master file is likely the best starting point. It is the default master for team sites and includes a site logo, bread crumbs, Global (top) and Quick Launch (left) navigation.

6. Save the file to your Desktop.

Note: There are multiple ways to create a new Master Page. Developers can download Starter Master Pages from CodePlex. Using SharePoint Designer 2010, developers and designers can copy and existing Master Page to edit or create a new one using the From Content Type or Blank Master Page buttons. It is a best practice to not directly edit the existing Master Pages so you can roll back to an existing master in the case of branding issues.

7. Launch Visual Studio 2010 and open the lab project by clicking File >> Open >> Project/Solution...

8. Browse to C:\%Office365TrainingKit%\Labs\8.2\Source\Before\BrandingWithCustomMasterPage.sln and open the solution.

9. In the Solution Explorer, click on the BrandingWithCustomMasterPage project and press F4 to view the Properties window.

10. Set the Site URL property to match your top-level SharePoint site, e.g., http://intranet.contoso.com.

11. Right-click on the BrandingWithCustomMasterPage project and choose Add >> New Item…

12. In the Installed Templates section, select Visual C# >> SharePoint >> 2010 and choose Module.

13. Name the Module “MasterPage” and click Add.

14. Under the MasterPage module, right-click on the Sample.txt file that was added to the project with the module and select Delete.

15. Click OK to the delete confirmation dialog.

16. Right-click on the new MasterPage module and choose Add >> Existing Item…

17. Browse to the Desktop and select the v4.master file downloaded in previous steps.

18. In Solution Explorer, rename v4.master to “ContosoBranding.master.”

19. Open the Elements.xml file that is under the MasterPage module and replace the contents of the file with the following xml. This will configure the ContosoBranding.master file to be deployed to the Master Page gallery. It will also set its description and content type and indicate it is meant for the 2010 user interface.

Note: The UIVersion property is used to differentiate between Master Pages designed for the new SharePoint 2010 user interface (4) and those designed for the older user interface of Office SharePoint Server 2007 and a Visual Upgrade scenario (3). For more information on Visual Upgrade process, see the MSDN article Understanding Visual Upgrade in SharePoint 2010.

(Code snippet 8.2.1)

XML

<?xml version="1.0" encoding="utf-8"?>

</File>

</Module>

</Elements>

20. Save and close the Elements.xml file.

Task 2 – Customize the Master Page

In this task, you will customize the Master Page, branding it with the Contoso Corporate Intranet look and feel.

1. In Visual Studio 2010, right-click on the ContosoBranding.master file and select View Markup.

Note: Master Pages can be edited in Visual Studio 2010 or SharePoint Designer 2010. Each developer or designer will need to figure out which tools work best for them. When using SharePoint designer, the Master Page should ultimately be saved and packaged with a solution for reusability.

2. Press Ctrl+F and find the SharePoint:CssLink control around Line 19.

3. Paste the following code after SharePoint:CssLink element to add a link to the custom Contoso style sheet that will be deployed with this solution. It uses tokens to ensure the url will be relative to the site collection and the language code (i.e. “en-us”) will be used. It also ensures this style sheet is loaded after the SharePoint corev4.css style sheet.

(Toolbox code snippet 8.2.2)

ASP.NET

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/~language/ContosoBranding/contoso.css%>" After="corev4.css" runat="server" ID="CssRegistrationContoso" />

4. Press Ctrl+F and find the </script> tag around Line 26.

5. Paste the following code after the </script> tag to create a JavaScript function that will be called by an element added in later in the lab. The function will simulate contacting the Help Desk using the SharePoint client-side notification API.

(Toolbox code snippet 8.2.3)

ASP.NET

function showHelpDeskNotification()

{

SP.UI.Notify.addNotification('The Help Desk will contact you soon!');

}

</script>

6. Press Ctrl+F and find the SharePoint:SPShortcutIcon control around Line 38.

7. Replace this line with the following code. This will link to the custom favicon for the site which browsers will use to help identify the site in the address bar or Favorites.

(Toolbox code snippet 8.2.4)

ASP.NET

Note: The link element is used in place of the SPShortcutIcon control to allow for use of the site collection and language replacement tokens since the SPShortcutIcon.IconUrl property is of type Uri, not string.

8. Press Ctrl+F and find the div with id s4-workspace around Line 297.

9. Replace the opening div element with the following code to add a comment and the s4-nosetwidth class to enable a fixed width design that prevents SharePoint from dynamically setting the width based on the size of the browser.

(Toolbox code snippet 8.2.5)

ASP.NET

10. Press Ctrl+F and find the SharePoint:SiteLogoImage control around Line 308.

11. Replace the SharePoint:SiteLogoImage control with the following code to link to the custom logo, again using the server-side tokens to ensure the url is relative to the site collection and comes from the proper language folder.

(Toolbox code snippet 8.2.6)

ASP.NET

<SharePoint:SiteLogoImage name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="<% $SPUrl:~SiteCollection/Style Library/~language/ContosoBranding/contosoCorporateLogo.png%>" runat="server"/>

12. Press Ctrl+F and find the </div> directly above the SharePoint:DeveloperDashboard control around Line 656.

13. Insert the following code above the </div> to add a custom footer to your Master Page that consists of a simple copyright and a link to call the help desk function added earlier.

(Toolbox code snippet 8.2.7)

ASP.NET

</div>

<a href="javascript:showHelpDeskNotification();">Request Help Desk Support</a>

</div>

The markup should now look like this:

ASP.NET

<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server">

</asp:ContentPlaceHolder>

</div>

</div>

<a href="javascript:showHelpDeskNotification();">Request Help Desk Support</a>

</div>

<SharePoint:DeveloperDashboard runat="server" />

14. Save and close the ContosoBranding.master file.

Task 3 – Create a Custom Style Sheet

In this task, you will edit a custom style sheet, defining styles that will brand the new Master Page. The style sheet has already been started and added to the lab solution.

Note: To see steps on how to add a style sheet to a module, see Lab 8.1.

1. In Visual Studio 2010, expand the Style Library module to display the full folder structure.

Note: The en-us folder is for localized English resources in the United States. If your target site was created with a different language, or if you were supporting multiple languages, then you would change the folder structure to include the proper language folders.

2. Double-click the Style Library\en-us\ContosoBranding\contoso.css file to open it for editing.

3. Review the style rules that have been set up to work with the Master Page. Comments have been added to note what each style rule does.

4. Find the /* TODO: Hide breadcrumbs */ comment and paste the following code in its place. This code will hide the breadcrumb navigation. In this case it has been decided to show a custom banner image and not give users the breadcrumb navigation.

(Toolbox code snippet 8.2.8)

CSS

/* Hide breadcrumbs */

.s4-titletext{

visibility:hidden;

}

5. Paste the following code at the bottom of the file. This will add custom style rules for the footer, defining the size and positioning, adding a background image, and setting the font color to white. The clear:both style rule is added to ensure content doesn’t wrap below the footer.