SharePoint 2013: Branding with Theme

Theme is a nice and quick way of applying some new styles to SharePoint site. Using theme you can apply some customisation in branding: font, color, background image etc. In this post I’ll explain SharePoint 2013 Theme and you can download a sample SharePoint 2013 Visual Studio solution from here.

There’s some out-of-the-box theme preinstalled in SharePoint. However you can install your own custom theme in SharePoint site.

 

Theme - Concept

A theme is combination of the following items:

• Color palette (a file with ‘.spcolor’ extension)
• A font scheme (a file with ‘.spfont’ extension)
• Background Image (if you would like to apply/change background image for this theme)
• Master page, used for theme preview mainly

You can browse the URL http://{SiteCollection}/_catalogs/design/AllItems.aspx to view all theme list items.

Let me explain the theme components:

Color Palette

If you are not already familier with color palette – simply it’s a set of consistent colors to be used for designing/painting. You can find a lots of free site to choose color palette. Some free color platte sites are listed below. If you are designing your SharePoint site then these color palette sites can be really helpful:

• http://www.colourlovers.com/palettes
• http://colorschemedesigner.com/csd-3.5/
• https://kuler.adobe.com/create/color-wheel/

Once you select your color palette, you can use a tool called ‘SharePoint Color Palette Tool’ to apply your color palette to design the theme. The following image shows the tool in action:

Few points to note about the tool:

• You can only create the spcolor file
• Though you can use background image to test the style in the tool, it’s for preview only. The background image will not be included in the spcolor file.
• It’s quite unfortunate that there’s no user manual or documentation on how to use the tool. However there’s some videos available online, you can check.

 

 

Font Scheme

Font scheme defines the fonts to be used in different section of SharePoint site – navigation, heading, body etc when the theme will be applied. Most of the time you don’t need new font scheme. However if needed, the easiest way of creating a new font scheme is copy an existing one – for example ‘15/Template/Layouts/default.spfont’. If you don’t need custom font scheme as part of the theme, you don’t need to develop a custom font scheme.

 

Background Image

As part of the theme you can specify a background image that will used when the theme will be applied. Using background image is not quite common in SharePoint sites though.

 

Master Page

A theme can be associated with master page – but it doesn’t mean if theme is applied to a site, the master page will be changed too. Rather, the master page will be used for previewing the theme. You can view the theme preview by navigating to Site Settings => Change the look, or browsing “http://{siteurl}/_layouts/15/designgallery.aspx”. However, for custom theme if you specify a custom master page, then the master page should have a preview file associated, otherwise you will not see the theme in this design gallery.

 

Theme - Development/Deployment

I’ve provided a sample Visual Studio solution that shows how to develop a theme-based branding and deploy it. You can find code details from MSDN at http://msdn.microsoft.com/en-us/library/office/jj927175(v=office.15).aspx. However, simply developing, deploying and applying themes include the following steps:

• Uploading files: You can upload your files as SharePoint modules(themes spcolor, spfonts, master pages etc.). In your visual studio solutions add these files as modules and as you deploy the solution the files will be uploaded in appropriate locations.
• Install Theme: You need to create list items in ‘design catalog’ with populating different properties like theme url, order, title etc. Creating this list item will make the theme available in the design gallery at http://{siteurl}/_layouts/15/designgallery.aspx
• Apply theme: If you would like to apply them when the feature is activated, you can apply the theme on feature activation. Alternatively you can apply theme manually from Site settings. In the sample solution, I’ve installed two themes (BrandingTestLight and BrandingTestDark) but only activated the dark theme on feature activation.

 

To install theme, we need to create a list item in design catalog gallery as shown below:

var themeItem = designCatalog.AddItem();
themeItem["Name"] = themeTitle;
themeItem["Title"] = themeTitle;
themeItem["MasterPageUrl"] = new SPFieldUrlValue(masterUrl);
themeItem["ThemeUrl"] = new SPFieldUrlValue(Web.Site.ServerRelativeUrl.TrimEnd('/') + "/_catalogs/theme/15/" + themeName);
themeItem["DisplayOrder"] = displayOrderCounter; 
themeItem.Update();

In the code snippet above, Master page URL is only for displaying purpose. In my sample application I’ve used seattle.master. This is because whichever master page you use, the master page will have to have a ‘preivew’ file. Since it’s only for display purpose and seattle master page has a preview file, I’ve reused the same preview instead of creating a custom preview of my own for my custom master page. However, if you would like to create a custom preview for your master page you can see more details at http://msdn.microsoft.com/en-us/library/office/jj927173(v=office.15).aspx

 

 

To apply theme, you need to apply theme by using ‘Theme.ApplyTo’ method. However, there’s more. In the theme catalog (http://{sitecollection}/_catalogs/design/AllItems.aspx), you will find a list item with title ‘current’ as shown below. You need update the current theme - list item also as you can see in the sample solution provided.

 

Download the code

The sample solution I’ve uploaded is available here . The sample solution adds two themes (BrandingTestLight and BrandingTestDark)  and a custom master page. Once you deploy the sample WSP, there’ll be a Web scoped feature “SharePoint Branding - Theme” will be available. Activating and deactivating the feature will deploy the themes and custom master pages, modify the default and custom master page, apply the dark theme.