Export (0) Print
Expand All

Branding with SharePoint Themes

Retired Content

This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

Companies typically do not want their public extranet sites to look the same as the standard SharePoint site. Individual departments in a company also may want to distinguish their departmental site. Customizing a SharePoint site to obtain a certain appearance and behavior (look and feel) is referred to as branding. Typically, branding includes customizations of color, styles, banners, images, navigation, and page layout. Branding can also include changes to the master page, custom cascading style sheets, and customizations to the Core.css file.

There are many approaches to branding. In the Training Management application, Contoso Pharmaceuticals uses a custom SharePoint theme to brand its site. Themes are a collection of images and cascading style sheets that customize a site's appearance. The files that are part of a theme are stored in the THEMES folder in the Office 12 hive folder structure. This topic describes how to programmatically deploy and apply the Contoso theme. It does not discuss how to create and modify cascading style sheets.

The Contoso Theme

Figure 1 illustrates the contents of the Contoso theme directory. A theme must contain an .inf file and a Theme.css file. The .inf file must have the same name as the name of the theme folder. In this case, the name of the file is Contoso.inf.

Ff649377.contoso_theme_files(en-us,PandP.10).png

Figure 1
Contoso theme directory

The following are the contents of the Contoso.inf file:

[info]
title=CONTOSO
codepage=65001
version=3.00
format=3.00
readonly=true
refcount=0

The title must match the name of the theme.

Deploying the Theme

A theme can be deployed with a Web solution package (WSP). The following XML code shows how to create a Manifest.xml file for a solution.

<Solution SolutionId="74f02676-7c5d-4b3f-92d5-f5b8069d6686" xmlns="http://schemas.microsoft.com/sharepoint/">
  <Assemblies>
    <Assembly Location="Contoso.RI.UpdateTheme.dll" DeploymentTarget="GlobalAssemblyCache" />
  </Assemblies>
  <FeatureManifests>
    <FeatureManifest Location="ContosoTheme\feature.xml" />
  </FeatureManifests>
  <TemplateFiles>
    <TemplateFile Location="THEMES\Contoso\allday_simple.gif" />
    …
    <!-—all files part of the theme should go here -->
  </TemplateFiles>
</Solution>

Applying the Theme

Themes can be applied to any existing sites. One way to apply a theme is to manually change the theme through the Site Settings tab on the SharePoint site. For a user to see the custom theme displayed as an option, you must add the theme to the SPThemes.xml file that is in the \TEMPLATE\LAYOUTS\1033 folder of the Office 12 hive on the Web front-end server. You must create a Templates entry for the custom theme. The other option is write code for a SharePoint feature receiver code that automatically associates the custom theme with a site. The following code demonstrates how to do this.

public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
   SPWeb web = properties.Feature.Parent as SPWeb;
   web.ApplyTheme("Contoso");
}

Figure 2 illustrates the Training Management site before the theme is applied.

Ff649377.branding_site_no_themeV2(en-us,PandP.10).png

Figure 2
Training Management site without theme

Figure 3 illustrates the site after the theme is applied.

Ff649377.branding_site_themeV2(en-us,PandP.10).png

Figure 3
Training Management site with theme

Retired Content

This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

Show:
© 2014 Microsoft