One of the simple branding changes you can make in both SharePoint 2013 or SharePoint Online is to create a custom “composed look” that reflects your branding and fonts. Creating a new theme is surprisingly easy and makes a big difference in the basic appearance of SharePoint.

A SharePoint “composed look” is a theme that combines the following into a package:

• Colors
• Fonts
• Master Page
• Background Image

SharePoint 2013 and SharePoint Online come with a set of themes such as this one:

Creating a new look and feel for your site involves uploading a custom color, font file and background image as needed to provide the user the ability to customize their site to reflect your branding.

Adding a Custom Color Palette

A color palette in SharePoint is an XML file that defines the HTML colors for each UI element on the page. The easiest way to create an SPColor file is to use Microsoft’s free color palette tool. The tool brings up the default color scheme and you can then supply a new set of colors.

Once you have a custom color file, upload it to the Theme Gallery in the 15 folder.

Adding a Custom Font Scheme

A font scheme in SharePoint is an XML file that defines the font attributes for each UI element on the page.

For standard web fonts such as Helvetica, Times Roman, Arial, Verdana, etc. you can just type in the name of the font into the typeface values. It gets a bit trickier if you want to use a custom web font. In order to do this, you need to upload the EOT, WOFF, TTF and SVG files to SharePoint and then reference them in the type face definition.

I used Google’s Open Sans as a custom font by uploading from GitHub the web font files into the SharePoint theme file. Open Sans has bold, semi-bold and regular variations so you can use a single font family for headings, body text, etc. or you could use multiple fonts for each type of text in the UI.

In the typeface definition, you can provide also an image that shows a preview of the font – this image is used when showing the drop down menu for selecting the font scheme. If you leave these entries blank, SharePoint just provides text content instead of a render of the text.

One important note: if you don’t get these references right, the entire theme won’t be loaded and you won’t see it available in the menu. If you notice this, check the references for all your fonts and ensure the URLs have been supplied correctly.

Adding a Background Image

You can add a background image simply by uploading an image to the theme library and referencing it in your composed look.

Selecting a Master Page

Describing how to create a new master page is beyond the scope of this post, so let’s select from one of the existing master pages, either Seattle or Oslo.

Putting it all Together with a Composed Look

Once you have your components ready, you create a new composed look in the Composed Look gallery. This is a basic SharePoint list that references your theme components. You can also specify the display order – I always put my custom themes’ display order as below 10 so they appear at the top of the list.

Once you have picked your theme, you’ll notice that your font scheme and color palette are selected by default.

Now you have a custom theme that reflects your colors, fonts and background image.

Apply Themes to Sub Sites

In order to apply your composed look to a sub site, you have two options. The first option is to create the list item for the composed look in each sub site. This is a pretty manual exercise but you could also save this as part of a site template potentially to save the manual steps.

An alternative approach is to use publishing sites. One of the unique features of publishing sites is they have the ability to inherit their theme and master page from their parent site. This is only available when you have activated publishing as a feature and use the publishing site template.