Creating a SharePoint 2013 composed look

before/after

SharePoint 2013 composed looks (also known as SharePoint themes) are the basis for SharePoint sites branding. This article covers the basics of creating composed looks for the SharePoint 2013 along with some tips.

Before you start:

  1. Permissions.
    Your account should belong to Site Owners group, the Designer group, or be a Site Collection Administrator in order to have permission to edit files in SharePoint Designer.
  2. SharePoint Designer.
    Most of the tasks are done in SharePoint Designer 2013, so you need to install it. You can download SharePoint Designer 2013 from Microsoft Download Center.
  3. SharePoint Color Palette Tool (optional).
    In order to edit color palettes you will need SharePoint Color Palette Tool. If you plan to use default color palettes, you can skip this step, otherwise you can download SharePoint Color Palette Tool from Microsoft Download Center.

Let's get started !

First of all, let's have look at a composed look structure. It is well demonstrated by the "Change the look" page at Site Actions > Site Settings > Look and Feel > Change the look. Choose any theme and click on its preview (the default one is called "Office"):

As you can see, a composed look consists of:

  1. Background image;
  2. Color palette;
  3. Master page;
  4. Font scheme.

Now let's see how each of these components should be made to create your own composed look.

1. Master Page

Master page generates a global layout, which is filled with content from a page before loading. You can use default master pages for your composed look, but I recommend you making your own, because you will likely make some customizations anyway.

Editing default files is considered to be a bad practise, so make a copy before editing

The default master page in SharePoint 2013 is called seattle.master. If you have the Publication feature activated in your application, then all master pages come along with an .html file with the same name. This file is used to generate corresponding master page, which is made every time you edit the .html file (you can't edit a master page directly). Every master page also has to have a .preview file in order to appear in a dropdown list at the "Change the look" page.

To create your own master page open your SharePoint site with SharePoint Designer 2013, navigate to _catalogs/masterpage/, then copy and rename these files:

  • seattle.html;
  • seattle.preview.

The seattle.master file will be created and renamed automatically with the corresponding .html file.

_catalogs/master page screenshot

Now you have your own master page, so you can change its HTML structure and add links to CSS and JavaScript files.

2. Color palette

Color palette is an xml-like document, which contains a list of UI elements and corresponding colors. Color of text elements, borders, buttons and other elements of a SharePoint site are set in it. Color themes are located at the _catalogs/theme/15/ folder and have an .spcolor extension.

To make a custom color palette just copy any of the defaults and rename it. Though you can edit it using SharePoint Designer or any text editor, I recommend using the SharePoint Color Palette Tool for this task.

To edit your color palette(1) outside of the SharePoint Designer you need to download it using the Export button(2) on the ribbon:

Export color palette screenshot

Download the SharePoint Color Palette Tool from the Microsoft Download Center. It provides more convenient way to edit colors, shows a preview screen, allows to group UI elements and warns you if colors you used don't contrast each other.

SharePoint Color Palette Tool screenshot

Marked controls are used for most common tasks:

  1. Color slots represent element - color sets from the file. This is the place where you edit colors.
    Color values support transparency, which is set by first two digits. It is set with a 0-255 number converted to hex. In CSS it will be converted to a standard 0-1 number and rounded to one decimal place. For example, black color with 50% transparency is set by #7f000000 value in a color palette, and it will actually become an rgba(0, 0, 0, 0.5) color value after conversion.
  2. Recolor button uses the main color to generate all other colors for all UI elements. Start your color palette creating by using this button with your main accent color selected, then manually fix color values of color slots you don't like.
  3. Color slots grouping. Choose different grouping to find UI elements you need easily.
  4. Preview screen. This screen shows UI preview with a current color palette applied. It refreshes automatically each time you change any value in a color slot.
  5. Layout type. The most useful layout is "Z - UI Preview", it will show most SharePoint controls, so you can see if they have the right color and text labels contrast their background.

3. Font scheme

A font scheme contains information about all text types and fonts which are used for them. Font schemes are located in the same folder as color palette: _catalogs/theme/15/. A font scheme has an .spfont extension and also has an xml-like structure. Each block represents different text type and sets specific font to it.

.spfont file screenshot

You can see a custom font declaration(1) and a default font declaration(2) on this screenshot.

To create your own font scheme copy any of default files and rename it.

Let's review the custom font declaration(1) structure to understand what we need to reproduce it in our font scheme file:
<s:latin typeface="Impact" eotsrc="/_layouts/15/fonts/Impact.eot"
woffsrc="/_layouts/15/fonts/Impact.woff" ttfsrc="/_layouts/15/fonts/Impact.ttf"
svgsrc="/_layouts/15/fonts/Impact.svg" largeimgsrc="/_layouts/15/fonts/ImpactLarge.png"
smallimgsrc="/_layouts/15/fonts/ImpactSmall.png" />

  1. A typeface name;
  2. An .eot font file (for IE only);
  3. A .woff font file (compressed, new standard);
  4. A .ttf font file (for most browsers except IE and iPhone);
  5. An .svg font file (iPhone/iPad);
  6. A large font preview image;
  7. A small font preview file.

Webfont kit

A set of .eot, .woff, .ttf and .svg font files is usually called a "webfont kit". Different font files are needed for different browser support. In case you have only an .otf or a .ttf file, you can use the Webfont generator on Font Squirrel to make a webfont kit. I recommend you not to use other unknown webfont generators, they show very bad results.

Many web fonts can affect the page load time. It is recommended not to use more than two web fonts.

For my composed look I took the free "Daniel" font from the Font Squirrel. I used it for titles and left the default Segoe UI font for body text.

Preview images

Preview images are used to display a font example on the "Change the look" page.

font preview

The top(1) and the bottom(2) preview slots are set in the beginning of an .spfont file:

Preview slots

The preview images are set at the end of a custom font declaration string:

Preview images set

Default image sizes for preview images are 109x16 pixels for a big one and 75x10 pixels for a small one.

Font preview images


Let's now add our custom font to SharePoint:

  1. Get the webfont kit;
  2. Create "Fonts" folder at /_catalogs/theme;
  3. Place your webfont kit and the font preview images to the newly created "Fonts" folder;
  4. Open your font scheme file and replace file paths to your font and images location.

This is what I have in my font scheme:
<s:latin typeface="Daniel" eotsrc="/_catalogs/theme/Fonts/daniel-webfont.eot"
woffsrc="/_catalogs/theme/Fonts/daniel-webfont.woff"
ttfsrc="/_catalogs/theme/Fonts/daniel-webfont.ttf"
svgsrc="/_catalogs/theme/Fonts/daniel-webfont.svg"
largeimgsrc="/_catalogs/theme/Fonts/daniel-webfontLarge.png"
smallimgsrc="/_catalogs/theme/Fonts/daniel-webfontSmall.png" />

4. Background image

Background image is set at the "Change the look" page. You can change it via CSS, but this way is not preferred, because if you are using the standard way to set the image, the SharePoint will generate some fallbacks for old browsers, so you don't need to worry about the background-size CSS rule support.

Images with .jpeg, .bmp, .png and .gif extensions can be used as a background. There is a built-in restriction of 140Kb for a background image file size to make sure it won't affect page load time.

Use high resolution PNG images for a page background for the best result.

While making a background image take into consideration that a final background image will also be overlaid by a page background, which is set in a color palette (for light themes it is usually white with 85% opacity):

background overlay

Creating composed look

A composed look is actually an item in "Composed looks" list. You can access it by going to Site Actions > Site Settings > Composed looks:

Create a new item and fill the fields with links to your master page, color palette, font scheme and background image.

Here you can avoid background image size restriction, but you shouldn't, because if you use a .jpg image it will be resized by SharePoint engine to meet requirements, but if you use a .png image, SharePoint fails to resize it and the whole page layout will be broken.

Change the "Display Order" field value to any number less than 10 for your composed look to appear first in the "Composed looks" list.
Once you save your composed look it will appear in the list at the "Change the look" page:

At this point the composed look creating is finished. You can apply your newly created composed look and see the result. You can also change the site icon at Site Actions > Site Settings > Title, description, and logo.

Final result

Distributing the composed look

Once you've created your composed look, you would probably want to use it at other sites.

Applying composed look inside one farm

Composed look of a root site is inherited by all subsites by default. The only thing to mention here is that the Publishing feature should be activated on all subsites for inheritance to take place. In some cases you may need to restore inheritance if it is broken. You can do it at the "Master page" page in Site Settings:

Applying composed look across different farms

For moving composed looks across different farms you will need to use "Design Package" functionality.

First, you need to create a design package. To do that, navigate to Site Actions > Site Settings > Design Manager > Create Design Package and click on the "Create" button(1). In a few minutes the process will be finished and you will able to download(2) a design package.

Design package creating page

Design package is just a .wsp archive, which contains all customized files. This is the list of contents of design package:

Libraries:
1. Master Pages Gallery
2. Theme Gallery
3. Style library Library
4. Site Assets Library

Lists:
5. Design Gallery
6. Composed looks
7. Device channels

Content types, fields:
8. Content types that inherit from the Page content type

Once you have your design package, you can move it to another site or farm. To import the design package navigate to Site Actions > Site Settings > Import Design Package, choose your design package with file explorer and click on the "Import" button. In a few minutes your package will be installed and the theme applied immediately.


You can now use these techniques to change SharePoint 2013 design and easily distribute it between your sites. Composed looks in combination with CSS makes it possible to create custom themes for SharePoint 2013.