How to Create Custom Themes in SharePoint 2013

How to Create Custom Themes in SharePoint 2013

by | Jul 10, 2013 | SharePoint 2013, SharePoint Solutions

Bamboo Solutions | Ohio Tobacco Use Prevention and Control Foundation Selects Bamboo Solutions Grant Management Software

Start personalizing your SharePoint 2013 site now with your very own custom theme. While SharePoint 2013 offers a number of preloaded themes so that you can change your site’s look, there’s nothing like making the site your own adding custom color palettes and font schemes. Creating custom themes is simple and can be completed easily. Once you’re finished, simply upload your custom theme to the Themes Gallery and it’s ready for use.

To create your very own custom theme for your SharePoint 2013 site, follow these steps:

1. Go to Site Settings > Themes > 15 to determine the available color palettes:

2. Click on Palette001 to save your file:

3. Open Palette001.spcolor file in either SharePoint 2013 Designer or a Notepad (Notepad ++).

4. In Notepad++ you are able to change the values or colors for the Site Name Properties. In this example, we have modified the StrongBodyText, SiteTitle, WebPartHeading, CommandLinks, and PageBackground properties that are highlighted below:

5. Save the file with a new name. In this example, we have renamed the file ‘Palette033‘:

6. Upload the new file to Themes in SharePoint 2013:

7. Next, register a new Theme in Composed Looks going to Site Settings > Composed Looks. Click New Item to create a new Composed look:
8. In your new Composed Looks page, you will need to input the following:

  • Title: Title of your composed looks (e.g., “Blue Sky“)
  • Name: Name of your composed looks (e.g., “Blue Sky“)
  • Master Page URL: Master page that you want to use (e.g., /_catalogs/masterpage/seattle.master)
  • Theme URL: URL to your color palette (e.g., /_catalogs/theme/15/palette033.spcolor)
  • Image URL: URL to your background image (e.g., /_layouts/15/images/image_bg007.jpg)
  • Font Scheme URL: URL to your font scheme (e.g., /_catalogs/theme/15/fontscheme002.spfont)
  • Display Order: Arrange the ordering of your composed looks (e.g., 19)

9. Next, go to either Settings > Change a look or Site Settings > Look and Feel > Change a look:

10. Select the newly created Theme. For this example, we have created the custom theme Blue Sky:

11. Your site theme will now have the Blue Sky attributes!

Questions? Contact us or check out our online documentation.

Get a Demo
Contact Us
Newsletter Signup