Branding a SharePoint Site Using Alternate CSS

Version: 1.0

Description

Customizing an intranet site with your company’s identity and branding can help create a more effective collaboration experience. SharePoint allows users to specify an alternate style sheet to override the out of the box look and feel and achieve this goal. In this lab, you’ll learn how to use the Internet Explorer Developer Tools to find styles to modify and construct and deploy and alternate set of styling to customize your SharePoint site.

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.