In this post, I will give you a walkthrough about how one can create a custom theme in SharePoint. This is applicable to all SharePoint versions except SharePoint 2007.
Before we jump in, it would be nice if you know about couple of locations/libraries where existing themes are stored and referred.
Theme document library – This is the library where you can find all the existing themes. Navigate to http://sitecollectionurl/_catalogs/theme to have a look. There is only one ‘Theme’ library in the whole site collection.
Composed Looks library – This is the library which has entries that refers to the themes created in ‘Theme’ library. The screen that allows you to choose a theme from a list of themes reads theme related information from this library. Each site has its own ‘Composed Looks’ library. Navigate to http://siteurl/_catalogs/design to have a look.
Now, to create a custom theme and to make it appear under list of available themes, we need to, firstly, create a theme and store it in ‘Theme’ library and then add an entry in the ‘Composed Looks’ library that refers to our custom theme in ‘Theme’ library.
Step 1 – Create a Custom theme and upload to ‘Theme’ library
- Firstly, let’s take a copy of one of the existing themes. Navigate to the ‘Theme’ library and download ‘Palette031’.
- Open ‘Palette031.spcolor’ in NotePad++ (or any text editor). Change the color values to the color you want and save it. I will save it as ‘Manvir.spcolor’. You can download Manvir.spcolor from here – Manvir.zip
- Upload ‘Manvir.spcolor’ to the ‘Theme’ library. Upload it under ‘15’ folder where other theme files are uploaded.
Step 2 – Add an entry in the ‘Composed Looks’ library
- Go to the ‘Composed Looks’ library and add a new entry. It should look like this –
Master Page Url – https://siteUrl /_catalogs/masterpage/seattle.master. Please note that only the master page that has a .html file should be used here. You can use ‘Oslo’ or ‘Seattle’ as they have olso.html and seattle.html files respectively.
Theme Url – It should be a link to custom theme file (in this case Manvir.spcolor). It should be something like this – https://siteurl/_catalogs/theme/15/Manvir.spcolor
You can leave ‘Image Url’ and ‘Font scheme Url’ blank unless you have an image file or a custom .spfont file to apply your custom font.
Apply the new theme
To apply the new them, go to ‘Site Settings’ and click on ‘Change the look’ under ‘Look and feel’.
You should be able to see the custom theme named ‘Manvir’ as shown below –
Select and apply the theme. Now, your site should look something like this –
That’s it. Please don’t forget to leave your comments if it really helped you.