Steps to create custom themes in SharePoint 2013

create custom theme sharepoint 2013

Here we will discuss how we can create custom themes in SharePoint 2013. By using Themes we can give a lightweight branding to a SharePoint 2013 site. We can customize by changing the site layout, color palette, font scheme, and background image. A lot has been changed from SharePoint 2010 Themes to SharePoint 2013 Themes. So we can not use themes created in SharePoint 2010 sites in our SharePoint 2013 sites.

You may read:
Record Management in SharePoint 2013 or SharePoint 2013 Online

SharePoint 2013 Only display User Login Name as Notification dialog box on uploadEx.aspx

Hide ribbon bar from Anonymous users in SharePoint 2013 public facing site using LoginView

Mainly there are three components to SharePoint Themes.

Color Palette: These are the color combinations used in a SharePoint site. By default, there are few Color Palette installed in the site which is there under _catalogs/theme/15/ folder. These are basically XML files with .spcolor extensions.

Font scheme: These are fonts used in the site. 7 fonts schemes are there by default in SharePoint 2013 which can be found under _catalogs/theme/15/. These are basically XML files with .spfont extensions.

Background Image: These are background image used on the site.

To see the Color Palette and Font scheme, You can navigate to Settings -> Site Settings and then click on Themes under Web Designer Galleries.

Apart from default themes, we can also create and use custom themes in SharePoint 2013.

There are two ways we can create a SharePoint 2013 Theme.

1- Microsoft provides SharePoint Color Palette Tool to create a Color Palette file. You can download and install SharePoint Color Palette Tool. After you Save it will be a Color Palette file.

2- The second way is we can download the existing Color Palette and we can modify and use as a new copy. We will discuss here the second approach here.

Open your SharePoint 2013 site, Click on Settings icon, Then Site Settings. Then click on Themes under Web Designer Galleries. Then click on 15. You can see Palette001 to Palette032. You can download any one.

create custom theme sharepoint 2013
create custom theme SharePoint 2013

One of the best way to modify the palette file is to open it using Notepad++. Once you open you will see something like this.

create custom theme sharepoint online
create custom theme SharePoint online

Here you can modify a few properties as per your requirement.

Here I have just modified the site title color to red color.

<s:color name=”SiteTitle” value=”ff0000″ />

I have save the file and rename it.

Now upload the same file to the Theme Gallery.

create custom theme sharepoint 2016
create custom theme SharePoint 2016

Copy the theme url.

Now we need to register the theme in the Composed looks so that it is easier for users to apply the theme from the UI.

Go back to the Site Settings page and now click on Composed looks under Web Designer Galleries.

In the Composed Looks page you will be able to see all the themes presented there.

Now click on Add new item’. Then in the form.
– Give a Title and Name
– Give the master page, theme and image url.

So it should look like below:

create custom theme sharepoint 2010
create custom theme SharePoint 2010

Now it is time to apply our custom theme. Go to the settings page. Under Look and Feel click on Change the look.

Here you will see our custom theme like below:

how to create custom theme sharepoint 2013
how to create custom theme SharePoint 2013

After you apply the theme since I have only applied a red color to the site title. It will appear like below:

how to create custom theme sharepoint online
how to create custom theme SharePoint online

 


You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →