One of the common questions we get from clients is "how do I apply a custom design to my SharePoint site?" While SharePoint's interface is relatively clean, it has the ubiquitous "SharePoint Look." Most clients want to make their sites match their brand, palette and navigational style. However, it's not always easy to figure out the various elements that need to change.
To that end, here's a short list of options for changing SharePoint's look into something more complimentary to your brand:
- Custom SharePoint Theme
A Theme, in SharePoint terms, is like a fresh coat of paint over the existing SharePoint interface. A Theme is driven exclusively by a series of CSS files located on the file system (in the "12 Hive"). The best custom themes simply override styles that can be found in the various CSS files that accompany the SharePoint software, like CORE.CSS. The advantage to a custom Theme is that it takes very little to create some dramatically different interface styles; since so much of SharePoint's interface is CSS drive (to its credit), you can do quite a lot by simply changing the theme. The easiest way to create your own theme is to copy an existing one (located in X:\program files\common files\microsoft shared\web server extensions\12\template\themes where X is your SharePoint installation drive). Once you've copied the directory, renamed it, updated the included CSS and added your images, just modify the THEMES.INF to point to your new custom theme. If you'd like detailed instructions, take a look at this MSDN article.
Figure 1 - List of Themes included with SharePoint
- Custom Master Page(s)
In the .NET v2.0 timeframe, Microsoft introduced a concept called a "master page." A Master Page, in SharePoint vernacular, represents all of the common elements of pages that share that Master Page. Using an overloaded term, "template" might best describe at least part of the concept. While Master Pages don't represent that entirety of the visual design, they establish the major elements and then determine where variable elements of a page can be placed. By using "container objects," called placeholders (another overloaded term), Master Pages can establish the interface framework without interfering in a specific implementation. Using various Master Pages with the same Page Layout (more on that shortly), you can produce vastly different looking sites. In fact, SharePoint (MOSS) comes pre-loaded with several master page examples (mostly with names including "band" in them). If you currently have a publishing enabled MOSS site (collaboration portal, News site or Publishing portal are the standard ones that enable this feature by default), you can change your master page in Site Settings. There you'll have the option of choosing between various pre-installed Master Pages for both the Site Master Page and the System Master page. In addition, you can create your own custom Master Page to introduce a radically different look. If you are using WSS or don't have the publishing feature enabled, you can still use different Master Pages. However, you'll either have to write a small utility to change the Master Page or you can download an open source extension to SharePoint from CodePlex to assist you in changing your master page (among other visual design elements). Microsoft published a short article on customizing master pages on their MSDN site. Remember though, you can have many Master Pages defined in your SharePoint site collection, but you can only use one Master Page per SharePoint site (unlike a traditional ASP.NET application).
Figure 2 - Option in Site Settings for changing Master Page
- Creating Custom Page Layouts
Page Layouts, like Master Pages, were released as a part of the .NET v2.0 framework. They are used in conjunction with Master Pages to create the overall visual design of a SharePoint site. Page Layouts define what content will be placed into placeholders defined by the Master Page. SharePoint ships with a number of different layouts. By default, selectable Page Layouts are only available when using a publishing enabled site; you can choose a specific Page Layout for other SharePoint-types. However, if you are using a publishing-enabled site, you can further refine your SharePoint site's look by leveraging customized Page Layouts. Just keep in mind that Master Pages and Page Layouts are pretty tied together; if you create a Page Layout that uses placeholders from a customized Master Page, that Page Layout may not be "compatible" with out-of-the-box layouts. For more information on creating Page Layouts, see this MS Office article.
In many cases, organizations will need to leverage more than one of these techniques to create the look they desire. The specific technique will largely depend on how different you want your SharePoint site to look.
Once you've completed your changes, the best way to "install" the new, customized look, is through a SharePoint Feature. A feature can provision all of the files involved in the customizations and programmatically enable them on one or more sites within the site collection. The advantage to this approach is that by activating or deactivating the feature, the customized look can be enabled or disabled without vastly affecting the function of the site; this approach is also the way Microsoft recommends making changes to your SharePoint site.
Now, if all of this is too much to take in, or if you just need some help, Consejo has recently created a new SharePoint Branding Fast Track offering. This offering is meant to help organizations quickly develop a customized the look and feel for their SharePoint site. In a short 11 business days, we create a semi-custom visual design for your site, leveraging our pre-build master pages, page layouts and themes. For more information or to discuss your needs, contact our sales group.
