Branding SharePoint 2007

Branding Overview

Today I am going to give a high level overview of branding SharePoint 2007.  First, I will give a short description of each of the core elements of a SharePoint brand, and then I will briefly outline how to create a consistent brand across a SharePoint website. 

Custom branding SharePoint is an undertaking that will require significant time and resources to plan, design, develop, and implement.  For our purposes, a basic/core SharePoint brand is composed of Master Pages, Layout Pages, Cascading Style Sheets (CSS), Item Styles, Themes, and Features.  Several factors including the website’s scope, best practices, amount of customization required, and maintainability should be considered when planning how best to design and implement a SharePoint brand.  Below is a brief explanation of each part of a SharePoint brand:

• The Master Page is a container that defines the overall site structure, determines the site layout, holds various interface components, and provides a consistent look and feel across the website.
• Layout Pages reside within master pages, and determine where content, fields, and web parts will be displayed.  The type of site created will determine the default page layout for that site; but each page layout can be modified in SharePoint designer to create a custom look and feel.
• Item Styles define the way that individual components such as web parts will display content.  Custom item styles are often used in conjunction with the content query web part.
• Cascading Style Sheets contain the styles that are applied to the site.
• Themes are stand alone packages that consist of cascading style sheets and images to give individual sites a different look than the rest of the website.
• As far as branding goes, Features help apply the site brand to site collections like MySites and administrative sections of SharePoint.

Branding a SharePoint Website

This overview will outline the steps required to create a very basic, custom SharePoint brand.  I will not be going into many of the details of how to actually create most of these components, but if you are interested, Heather Solomon has a great blog with examples and articles that can help you with each step along the way (http://www.heathersolomon.com).

Branding a SharePoint website often requires using SharePoint Designer to either create a new master page from scratch, or modify one of the out of the box SharePoint master pages.  Once your newly created master page has been created, apply it to SharePoint under “Site Actions --> Master Page”.  Make sure that the “System Master Page” and the “Site Master Page” point to your custom master page file.  Apply the master page to all sub sites, and most of SharePoint will now use your custom master page (it really is that simple). 

However, application master pages (any .aspx with /_layouts/ preceding it in the URL) will not use your custom master page as the layouts for these pages are totally different than the core SharePoint site.  To apply your brand to these pages, you may have to create a custom application master page.  To apply a custom application master page, a HTTP Redirect Module/Feature must either be installed or created.  This feature will force SharePoint to use the custom application master page when appropriate.  Stephen Kaye has provided a sample solution and explanation of how to use a feature like this at his blog site: http://stephenkaye.blogspot.com/2008/03/how-to-customise-applicationmaster-file.html.

Next, it is time to create a custom style sheet within SharePoint Designer that will provide a unique look and feel to the website.  Once completed, place this file in the style library.  Any images used should be placed in a new sub directory of the default hive images folder. In SharePoint, navigate to “Site Actions --> Master Page” and specify the “Alternate CSS URL” to use the newly created style sheet.  Be sure to have all sub sites inherit this CSS.

At this point the entire base SharePoint site will have a consistent, custom brand.

Other Considerations:

Themes

The way the SharePoint inheritance model works in regards to themes is as follows:

1. SharePoint “CORE” CSS styles are applied 
2. Styles from Themes are applied
3. The Alternative CSS styles selected from “Site Actions --> Modify All Site Settings --> Master Page” are applied
4. Inline styles, and styles defined in the .aspx pages are applied

This means that any style defined in a custom Theme that overrides the core CSS, and is not overridden by styles defined in the “Alternate CSS” will be applied to the site.  For this reason, and to prevent anyone from changing the look and feel of the site, all non default themes can be disabled in “SPTHEMES.XML.”

MySites

MySites will not inherit the branding from the base SharePoint website.  The best practice to branding MySites is to develop a feature stapler/staplee that will dynamically brand each MySite as it is created.  Implementing the MySites brand through a feature will go a long way to ensuring your site stays in a maintainable state.  Alternatively, a developer can quickly force MySites to inherit a CSS file by modifying the global master page file, but this is not recommended as it could leave the site in an un-maintainable state if something like a new service pack is released.  This blog outlines out to create and deploy a feature stapler/staplee:

 http://blogs.msdn.com/sharepoint/archive/2007/03/22/customizing-moss-2007-my-sites-within-the-enterprise.aspx. 

Ghosting

By default, SharePoint does not store file updates made in SharePoint Designer on the file system.  Instead, these file are “Un-Ghosted” and their changes are stored in a database.  This means that should a catastrophic event happen, updates to various files could be lost.  Un-Ghosted files in Designer can be identified by the small blue circle with an “i” in its center.   It is very important to use the regular backups to prevent loss of customization.  Alternatively, a feature can be developed to force these Un-Ghosted files to save to the file system.  An article outlining ghosting can be found at: http://blogs.msdn.com/michael_yeager/archive/2007/11/03/sharepoint-terms-ghosted-unghosted-and-reghosted.aspx .

SharePoint Quirks

The following are a few of the most “silly” things about SharePoint & SharePoint Designer:

• If any file is directly opened from the file system by designer, many of the relative paths within the file will be altered when saved, resulting in File not Found errors in SharePoint.
• When saving a local copy of a file, SharePoint Designer will attempt to package up every element that the file references, and then update all of the relative paths accordingly.
• The default SharePoint brands are not IE7/IE8 compatible.  Force IE to render in these modes using Developer Tools and see the funkyness.