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 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 in 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 are 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 in 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.
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.
Here you can modify 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.
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 looks like below:
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:
After you apply the theme, since I have only applied red color to the site title. It will appear like below:
Download FREE SharePoint 2019 Installation PDF Guide
This FREE PDF contains, Steps by step guide to install SharePoint 2019 Preview, prerequisites, hardware and software new features. First impression to SharePoint Server 2019 new modern site, modern lists and modern document libraries.