Hands-On Lab
Branding a SharePoint Site Using Alternate
CSS
Lab version: 1.0
Last updated: 11/21/2011
CONTENTS
OVERVIEW .................................................................................................................................................. 3
System Requirements................................................................................................................................ 3
SETUP ........................................................................................................................................................... 3
Task 1 – Ensure SharePoint Server Publishing Feature is Enabled in On-Premise Site ....................... 4
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: USING INTERNET EXPLORER DEVELOPER TOOLS TO IDENTIFY SHAREPOINT
STYLES......................................................................................................................................................... 5
Task 1 – Identify Top Banner Style Using IE Developer Tools ........................................................... 5
Task 2 – Identify and Change Left Navigation Style Using IE Developer Tools ................................. 8
EXERCISE 2: CREATING ALTERNATE STYLES TO BRAND SHAREPOINT 2010 ................................ 9
Task 1 – Create a Style Sheet for Branding .......................................................................................... 9
Task 2 – Add a Feature Receiver to Enable Alternate CSS ................................................................ 11
Task 3 – Build and Deploy the Project ............................................................................................... 13
Task 4 – Add Theming Support .......................................................................................................... 13
EXERCISE 3: TEST THE BRANDING SOLUTION ON A SHAREPOINT ONLINE SITE........................ 16
Task 1 – Deploy the Solution Package to SharePoint Online ............................................................. 16
Task 2 – Revert the Style of the SharePoint Online Site .................................................................... 17
SUMMARY ................................................................................................................................................. 17
Overview
Lab Time: 30 minutes
Lab Folder: C:\%Office365TrainingKit%\Labs\8.1
Lab Overview: Customizing an intranet site with your company’s identity and branding can help create a
more effective collaboration experience for your users. SharePoint 2010 relies heavily on Cascading
Style Sheets (CSS) to apply a default style to a site. Theses style rules in CSS select elements of a page
and set their fonts, colors, size and positioning. When multiple rules apply to the same element, CSS
applies the styles based on the order and specificity of the rules defined. SharePoint takes advantage of
this cascading aspect of CSS, allowing designers and developers to specify an alternate style sheet to
override the out of the box look and feel and apply their own branding to a site.
In this lab, you will first learn how to use the Internet Explorer Developer Tools to identify what styles to
modify. You will see how you can use these tools to quickly and easily experiment with changes. You
will then learn how to construct and package a custom style sheet and related assets for use in
SharePoint. Finally, you will learn how to deploy this alternate set of styles to your SharePoint site to
apply your custom branding.
System Requirements
You must have the following items to complete this lab:
Internet Explorer 8 or 9
◦ These versions have the Developer Tools installed.
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. 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 alternate style 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 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 Alternate CSS 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 Alternate CSS 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. Add a tab called Lab08.
4. Open C:\%Office365TrainingKit%\Assets\Code Snippets\Demo8_1_1.txt and select all its
contents.
5. Drag the contents into the Lab08 tab.
6. Rename the item to 8.1.1.
7. Open C:\%Office365TrainingKit%\Assets\Code Snippets\Demo8_1_3.txt and select all its
contents.
8. Drag the contents into the Lab08 tab.
9. Rename the item to 8.1.3.
Exercise 1: Using Internet Explorer
Developer Tools to Identify SharePoint
Styles
Task 1 – Identify Top Banner Style Using IE Developer Tools
In this task, you will use the Internet Explorer Developer Tools to view the source of a web page in your
SharePoint site and identify the appropriate CSS style to override to set a new banner background
image.
1. Launch Internet Explorer.
2. Navigate to your top-level SharePoint site, e.g., http://intranet.contoso.com.
3. Press F12 to open the Developer Tools window.
Note: The IE Developer Tools allow you to inspect and debug web pages. This includes viewing
and editing the HTML and CSS source, profiling and debugging JavaScript and more. For full
details on the IE Developer Tools see the MSDN article Discovering Internet Explorer Developer
Tools.
4. If the Developer Tools open in a separate window, click the Pin button in the top right corner
of the window to pin the tools to the bottom of the Internet Explorer window.
5. See that the source for the page has been loaded in the HTML tab of the Developer Tools
window. Expand the nodes of the document tree to see the page structure.
6. Click on the CSS tab and open the dropdown. This shows you the different style sheets that
have been loaded for the page including the main SharePoint style sheet, corev4.css.
Selecting a style sheet in the dropdown will show the styles defined.
7. The Developer Tools allow you quickly find the page source that corresponds to the area you
to click in the browser. The element hovered over by the mouse will be outlined in blue as
you move the mouse and clicking will select the element and its source. To do this in the
Developer Tools window, click Find >> Select Element by Click.
8. To identify the area that makes up the banner, in Internet Explorer, position your mouse to
the left of the site logo and click when the blue box outlines the header banner area.
9. Note that the div element with the class s4-title in the HTML tab of the Developer Tools
window is now selected. This div makes up the banner area that we want to restyle.
10. Note that in the Style window you can see that the background url image is set to
/_layouts/images/bgximg.png and that this style was defined in corev4.css. In the next
exercise, you will override this style to set a new background image.
Task 2 – Identify and Change Left Navigation Style Using IE Developer Tools
In this task, you will find the appropriate style to override to set a new background color for the left
navigation and change the color using the IE Developer Tools.
1. In the Developer Tools window, enter “s4-leftpanel-content” into the Search HTML box and
click the Search button.
2. The div element with the id s4-leftpanel-content will be selected in the HTML Tab of the
Developer Tools window and the left navigation will be outlined in blue.
3. See that the background-color is set to #fcfcfc in the Style window. The div is styled using
the selector BODY #s4-leftpanel-content in corev4.css. You will override this style in the
next exercise.
4. To experiment with modifying this style, click the value to right of the background-color in
the Style window, change the value to #e8e8e8 and press Enter. This will change the
background to be the gray we ultimately want.
Note: This type of experimentation with styles will be helpful in determining what changes are
needed. It will also improve productivity by quickly making changes without having to
redeploy to see the results.
Exercise 2: Creating Alternate Styles to
Brand SharePoint 2010
Task 1 – Create a Style Sheet for Branding
In this task, you will create a style sheet to customize the look of your SharePoint 2010 site collection.
1. Launch Visual Studio 2010 and open the lab project by clicking File >> Open >>
Project/Solution...
2. Browse to
C:\%Office365TrainingKit%\Labs\8.1\Source\Before\BrandingWithAlternateCSS.sln and
open the solution.
3. In the Solution Explorer, click on the BrandingWithAlternateCSS project and press F4 to
view the Properties window.
4. Set the Site URL property to match your top-level SharePoint site, e.g.,
http://intranet.contoso.com.
5. In the Solution Explorer, click on the BrandingWithAlternateCSS project to expand the
project and expand the Style Library Module.
Note: The en-us folder is used 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.
6. Right-click on the Style Library\en-us\ContosoAlternateStyle folder and choose Add >> New
Item…
7. In the Installed Templates section, select Visual C# >> Web and choose Style Sheet.
8. In the Name: textbox, enter contosoAlternateStyle.css and click Add. Visual Studio will add
the file to the project and update the Elements.xml file to include it in the package.
9. In the Elements.xml file for the module, add the Type="GhostableInLibrary" attribute to the
contosoAlternateStyle.css File node in the same way it is added for the other File nodes.
This indicates the file should be treated as uncustomized. The code should now look like
this:
XML
10. Save and close the Elements.xml file.
11. Open the contosoAlternateStyle.css file and replace the contents with the following CSS to
define the styles for the top banner and left navigation. These styles will be used to override
the default SharePoint styles that were identified in the previous Exercise.
(Toolbox code snippet 8.1.1)
CSS
/* Place the header logo behind Ribbon */
.s4-title {
background: url(headerGradient.png) repeat scroll 0 0;
}
/* Set the background color for the left navigation area */
BODY #s4-leftpanel-content {
background-color:#e8e8e8;
}
12. Save and close the contosoAlternateStyle.css file.
Task 2 – Add a Feature Receiver to Enable Alternate CSS
In this task, you will create a Feature Receiver that will apply the alternate style sheet created in
the previous Task and a site logo to your site collection.
1. Right-click Feature1 and choose Add Event Receiver.
2. Open Feature1.EventReceiver.cs and add the following code to the existing using
statements. This is required to use the SPUtility class.
(Code snippet 8.1.2)
C#
using Microsoft.SharePoint.Utilities;
3. Add the following code to the beginning of the Feature1EventReceiver class to create a
helper method to return the path to the style library.
(Code snippet 8.1.3)
C#
// Set constant for folder so only have to maintain in one place
public const string CONTOSO_ALT_STYLE_FOLDER = @"Style Library/en-
us/ContosoAlternateStyle";
///
/// Helper method to create a url to a style asset
///
///
///
///
private string CreateAlternateStyleUrl(SPWeb web, string styleAsset)
{
string path = SPUtility.ConcatUrls(CONTOSO_ALT_STYLE_FOLDER, styleAsset);
return SPUtility.ConcatUrls(web.ServerRelativeUrl, path);
}
4. Replace the commented out FeatureActivated method with the code below to open the
root web, check in all the included style assets and update the SPWeb object to save the
changes.
(Code snippet 8.1.4)
C#
///
/// Custom code that runs after the feature is activated
///
///
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
using (SPSite site = (SPSite)properties.Feature.Parent)
{
using (SPWeb web = site.RootWeb)
{
// Check in all files so that they will be applied properly
SPFolder altStyleFolder = web.GetFolder(CONTOSO_ALT_STYLE_FOLDER);
foreach (SPFile styleFile in altStyleFolder.Files)
{
if (styleFile.CheckOutType != SPFile.SPCheckOutType.None)
{
styleFile.CheckIn("Checked in via feature activation.",
SPCheckinType.MajorCheckIn);
}
}
// Set alternate CSS and site logo
web.AlternateCssUrl = CreateAlternateStyleUrl(web,
"contosoAlternateStyle.css");
web.SiteLogoUrl = CreateAlternateStyleUrl(web, "contosoLogo.png");
web.Update();
}
}
}
5. Replace the commented out FeatureDeactivating method with the code below to undo the
modifications made when the feature was activated by clearing out the alternate css and site
logo before returning to the original branding.
(Code snippet 8.1.5)
C#
///
/// Custom code that runs before the feature is deactivated
///
///
public override void FeatureDeactivating(SPFeatureReceiverProperties
properties)
{
using (SPSite site = (SPSite)properties.Feature.Parent)
{
using (SPWeb web = site.RootWeb)
{
// Reset the alternate CSS and site logo
web.AlternateCssUrl = string.Empty;
web.SiteLogoUrl = string.Empty;
web.Update();
}
}
}
6. Save and close the Feature1.EventReceiver.cs file.
Note: Feature Receivers can be extremely beneficial, but just like any other code they may
require debugging from time to time which involves a slightly different process than debugging
other SharePoint code. For information on debugging Event Receivers see this MSDN article.
Task 3 – Build and Deploy the Project
In this task, you will test your branding solution against your on-premise site.
1. Press F5 to deploy the package to your local SharePoint 2010 instance and debug the
project.
a. Visual Studio 2010 will compile and deploy the project, activate the feature and open
the specified SharePoint site in a browser window.
b. Your site should now have a Contoso logo, a blue gradient header background image,
and the left navigation will have a gray background.
2. In Visual Studio 2010, stop debugging.
a. Your site should return to its previous style.
Task 4 – Add Theming Support
In this task, you will modify your styles to support Theming. Theming in SharePoint 2010 allows sites to
be easily customized with a set of colors and fonts. Custom CSS styles can take advantage of these
themes fonts and colors or even manipulate images to fit in better with the selected theme of a site.
1. In Solution Explorer, right-click on the en-us folder and select Add >> New Folder.
2. Name the folder “Themable.”
3. Move the ContosoAlternateStyle folder into the Themable folder by dragging it in the
Solution Explorer.
a. Your folder structure should now look like this:
4. Open the contosoAlternateStyle.css file.
5. Replace the contents of the file with the following code. This will add Theme comments to
the existing styles that will tint the background image and change the left navigation color
based on the theme applied.
Note: The use of theme comments is not a CSS standard, but instead is a convention used by
the SharePoint 2010 theme engine to designate what elements will be affected by changes in
the theme.
(Toolbox code snippet 8.1.3)
CSS
/* Place the header logo behind Ribbon */
.s4-title {
/* [RecolorImage(themeColor:"Accent1",method:"Tinting")] */ background:
url(headerGradient.png) repeat scroll 0 0;
}
/* Set the background color for the left navigation area */
BODY #s4-leftpanel-content {
/* [ReplaceColor(themeColor:"Accent1")] */ background-color:#e8e8e8;
}
6. Open Feature1.EventReceiver.cs and replace the constant that sets the path the alternate
style with the following code which will now use the updated files in the Themable folder.
(Code snippet 8.1.6)
C#
public const string CONTOSO_ALT_STYLE_FOLDER = @"Style Library/en-
us/Themable/ContosoAlternateStyle";
7. Press F5 to deploy the package to your local SharePoint 2010 instance and debug the
project.
a. Visual Studio 2010 will compile and deploy the project, activate the feature and open
the specified SharePoint site in a browser window.
b. Your site should now have a Contoso logo, a blue gradient header background image,
and the left navigation will have a gray background.
8. From Site Actions, choose Site Settings.
9. Under the Look and Feel section, click Site theme.
10. From the list of Themes, select Grapello.
a. Note that Accent Color 1 is now purple.
11. Scroll to the bottom of the page and click Apply.
a. Your site should now have a Contoso logo, but the gradient header background image is
now tinted purple, and the left navigation will be purple.
Note: If you view the source of the page using the IE Developer Tools, the link to your
style sheet will now reference a generated “themed” url like
"/_catalogs/theme/Themed/846EAEF7/contosoAlternateStyle-5FF9C8BD.css?ctag=51"
12. From Site Actions, choose Site Settings.
13. Under the Look and Feel section, click Site theme.
14. From the list of Themes, select Default (no theme).
15. Scroll to the bottom of the page and click Apply.
16. In Visual Studio 2010, stop debugging.
a. Your site should return to its previous style.
Exercise 3: Test the Branding Solution on
a SharePoint Online Site
Task 1 – Deploy the Solution Package to SharePoint Online
In this task, you will deploy the solution package to SharePoint online to confirm that it works as
expected.
1. In the Solution Explorer, right-click on the BrandingWithAlternateCSS project and select
Package to package the project.
2. Open Internet Explorer and navigate to your SharePoint Online site.
3. Click Site Actions and then select Site Settings.
4. Click the Solutions link in the Galleries section to view the site collection’s solution gallery.
5. Click on the Solutions tab in the ribbon and click the Upload Solution button.
6. Browse to the solution package at
C:\%Office365TrainingKit%\Labs\8.1\Source\Before\BrandingWithAlternateCSS\bin\Debu
g\BrandingWithAlternateCSS.wsp and click Open.
7. Click the Activate button.
8. From Site Actions, choose Site Settings.
9. Under the Look and Feel section, click Site theme.
10. From the list of Themes, select Grapello.
11. Scroll to the bottom of the page and click Apply.
a. Your site should now have a Contoso logo, a gradient header background image tinted
purple, and the left navigation with a purple background.
Task 2 – Revert the Style of the SharePoint Online Site
In this task, you will deactivate your solution to revert they style of your site to its previous style.
1. From Site Actions, choose Site Settings.
2. Under the Look and Feel section, click Site theme.
3. From the list of Themes, select Default (no theme).
4. Scroll to the bottom of the page and click Apply.
5. Click Site Actions and then select Site Settings.
6. Click the Solutions link in the Galleries section to view the site collection’s solution gallery.
7. Check the BrandingWithAlternateCSS solution and click Deactivate.
8. Click Deactivate on the dialog.
9. Your site should return to its previous style.
10. Close Internet Explorer.
Summary
SharePoint Online allows you to customize the branding using alternate style sheets. In this lab you
learned how to use the Internet Explorer Developer Tools identify the styles to override and test
changes on the fly. You learned how to create a custom style sheet to override SharePoint default styles
and also how to make those styles work with the new SharePoint 2010 theme engine. You also learned
how to use Visual Studio 2010 to build a solution to package and deploy your style assets to your
SharePoint site and apply your custom branding.