SharePoint 2013 Theme Creation

Creating a SharePoint 2013 Theme

Introduction

Basic branding of SharePoint has been made easier than ever by the new release of SharePoint 2013, so it’s great that Microsoft have acknowledged that companies love branding their SharePoint solutions.

Don’t worry, you don’t have to be an advanced developer to create great SharePoint 2013 themes, you just need have good taste, an eye for design, and to know your brand.

In this post we go step by step on how to configure the font, colours, logo, and the background image for your new SharePoint 2013 theme. The configuration is done in the comfort of SharePoint designer.

Also in this post we also discuss other tools and techniques which make life easier when creating a theme.

What tools will I need?

SharePoint Designer 2013
http://www.microsoft.com/en-GB/download/details.aspx?id=35491

SharePoint Colour Palette Tool
http://www.microsoft.com/en-gb/download/details.aspx?id=38182

How long will this take?

2 hours – 1 day depending on your familiarity with basic development

Tutorial breakdown

Font theme creation

  • Step 1 – Upload fonts and images
  • Step 2 – Duplicate the font scheme
  • Step 3 – Edit the font scheme

Colour theme creation

  • Step 4 – Duplicate Font Scheme and Export
  • Step 5 – Edit the Colour Scheme
  • Step 6 – Test, Test, Test and Test again 

Adding a logo and background image

  • Step 7 –  Upload your logo
  • Step 8 – Change your background

Font Theme Creation

Step 1 – Upload Fonts and Images

Open your site in SharePoint Designer and navigate to…

All Files > _catalogs > theme

Add two folders in here called “fonts” and “images”

SharePoint 2013 Theme Creation

In the font folder upload your font files in eot, woff, ttf and svg format (these can be converted from “ttf” or “otf” by using www.fonts2web.com)

In the images folder upload images of the fonts at sizes – small: 75px x 10px and large: 109px x 16px (these will be used in “change the look” to preview the font).

Step 2 – Duplicate the Font Scheme

In SharePoint Designer, navigate to…

All Files > _catalogs > theme > 15

SharePoint 2013 Theme Creation

Copy the fontscheme.spfont that is closest to your requirements and rename it.

Step 3 – Edit the Font Scheme

Open the renamed fontscheme.spfont file in SharePoint Designer.

SharePoint 2013 Theme Creation

The first line <s:fontScheme… denotes the name of the font and which fonts are previewed in which slot in “Change the Look”. Change this as required.

The file is then broken down into <s:fontSlots… these slots define the “title”, “navigation”, “small heading”, “heading”, “large heading”, “body”, and “large body”.

Within each of these <s:fontSlot there are several lines defining which font is displayed, for European languages we are only concerned with the first line <s:latin, all the other lines define which font should be used for non-European languages (fonts that use characters that are not included in European fonts such as Hebrew, Chinese etc).

The line <s:latin can then be edited for each font slot, renaming the slot and pointing to the fonts and images uploaded earlier in Step 1.

<s:latin
typeface=”NewFont”
eotsrc=”/_catalogs/theme/fonts/ NewFont-Small.eot”
woffsrc=”/_catalogs/theme/fonts/ NewFont-Small.woff”
ttfsrc=”/_catalogs/theme/fonts/NewFont-Small.ttf”
svgsrc=”/_catalogs/theme/fonts/NewFont-Small.svg”
largeimgsrc=”/_catalogs/theme/images/ NewFont-Large.png”
smallimgsrc=”/_catalogs/theme/images/NewFont-Small.png”
/>

Save this file and your font scheme should now appear in the font dropdown in “change the look”.

Colour Theme Creation

Step 4 – Duplicate Font Scheme and Export

Open site in SharePoint Designer and navigate to…

‘All Files > _catalogs > theme > 15’

SharePoint 2013 Theme Creation

Copy the ‘palette.spcolor’ that is closest to your requirements and rename it.

Step 5 – Edit the Colour Scheme

There are two ways of creating a new colour theme, the file can either be edited manually in SharePoint Designer or edited using the SharePoint Color Palette Tool which can be downloaded from the link below:

http://www.microsoft.com/en-us/download/details.aspx?id=38182

Edit the Colour Scheme manually in SharePoint Designer

The ‘palette.spcolor’ file contains references to the 89 different colours that control the Colour Scheme. The Hex codes listed in this file are either 6 digit or 8 digit values, where an 8 digit value is used the first two digits of the number relate to transparency/opacity. If we think of 00 being black (000000) equating to completely transparent, FF being white (FFFFFF) equating to completely opaque and 80 being 50% grey (808080) equating to 50% transparency.

If you are editing this file manually then please be aware that colours may control two or more areas that may interact, so be careful that the colours used do not clash or give enough contrast to be legible.

Edit the Colour Scheme using the SharePoint Color Palette Tool

Download the app from the above link and install.

Download the palette.spcolor that is closest to your requirements and rename it.

Open the palette.spcolor in the SharePoint Color Palette Tool

SharePoint 2013 Theme Creation

In the left hand panel there is a drop down called ‘Color Buckets’

SharePoint 2013 Theme Creation

In here you can change how the colours are grouped together

Color Buckets – Groups the colours together by hex code, so all the areas that are the same colour can be edited at once.

UI Groups – Groups the colours into the types of UI element that they control (the same groups used in the theme guide refer to earlier).

UI Type groups these further into more generic headings.

In the Preview area on the right you can see a live preview of the elements that you have coloured, this can be switched between master pages oslo and seattle, a contrast test and a preview of individual UI elements will look like in your colour theme.

SharePoint 2013 Theme Creation

SharePoint 2013 Theme Creation
SharePoint 2013 Theme Creation
SharePoint 2013 Theme Creation

At the bottom of the application there is an area that lists any errors or warnings.

Once you are happy with your theme save the file and upload to ‘All Files > _catalogs > theme > 15’, your colour scheme should now appear in the colour dropdown in “change the look”.

Step 6 – Test, Test, Test and Test again

Once you have applied your new colour theme to SharePoint, test everything to make sure that there are no colours that look out of place and that there are no colours that clash, especially text that is illegible on the same or similar background colour. Once you have finished testing, test again because every hover state, every icon will need to be checked.

Points to note

The icons that SharePoint uses are generated when a colour theme is applied to a site. Items such as an edit icon will be controlled by a particular colour reference in the spcolor file. These icons will also need to be tested thoroughly.

Adding a logo and background image

Step 7 – Upload your logo

Click the cog icon at the top right of your SharePoint page.

A dropdown will appear displaying a number of options.

Click on ‘Site settings’.

SharePoint 2013 Theme Creation

Upon arriving on ‘site settings’ page, click the option ‘title, description, and logo’.

SharePoint 2013 Theme Creation

Find the ‘Insert Logo’ section on the right hand column of the page and click on either ‘FROM COMPUTER’ to upload an image from your computer, or ‘FROM SHAREPOINT’ to upload an image from the site assets folder on your server.

SharePoint 2013 Theme Creation

Browse to the file on your desktop through windows explorer by clicking ‘Browse’.

SharePoint 2013 Theme Creation

After you have located the file and have uploaded the logo to SharePoint you will then be able to see it as a preview under the ‘Insert Logo:’ section.

Click ‘OK’ to save the changes.

SharePoint 2013 Theme Creation

Step 8 – Change the background

Click the cog icon at the top right of your SharePoint page.

A dropdown will appear displaying a number of options.

If you have site publishing turned off then ‘change the look’ will appear in the dropdown menu.

Click this option.

If you have site publishing turned on then ‘change the look’ will appear on the ‘Site settings’ page

In this case click ‘Site settings’.

SharePoint 2013 Theme Creation

Select your theme which should be visually displayed as one of the options on the page.

SharePoint 2013 Theme Creation

To add a background image click ‘CHANGE’ in the left hand column.

SharePoint 2013 Theme Creation

Browse to the file on your desktop through windows explorer by clicking ‘Browse’.

SharePoint 2013 Theme Creation

After locating and uploading the file click ‘OK’

You will find yourself back on the ‘Site Settings > Change the look’ page after the modal window disappears.

You should now see your background in the page preview in the right column

Click ‘Try it out’ and then click ‘Yes, keep it’ on the next page

Your changes have now been saved.

You have completed this tutorial

Please feel free to learn more about our SharePoint Design services.