How to Work with SharePoint's Theming Engine

Topics: Office 365, SharePoint Tips, SharePoint Blog

Let’s start the New Year by learning about SharePoint theming engine. Composed looks make it easy to brand SharePoint Sites. It allows customizing the sites by changing color, font and background image. Learn to execute the Composed Looks opportunities in SharePoint.

How to create custom themes for SharePoint Sites?

  • Go to Site Settings > Select Themes > 15 (find it under Web Designer Galleries heading)
  • Download a copy of .spcolor file from the list of .spcolor and .spfont files that appear.
  • Open it in a text editor and edit the file according to your desired design guideline.
  • Add custom colors to each HTML element
  • Upload the .spcolor file to Site settings > Theme > 15 once you are done.

Steps to customize fonts of a custom theme for SharePoint Sites

  • Follow the same steps as mentioned above and download a copy of .spfont file.
  • Open the file in text editor
  • Edit the ‘<s:fontSlot />’ section for each font slot.
  • Upload the file back to Site Settings > Theme > 15

How to add a custom theme to SharePoint?

In order to let SharePoint access the custom theme, it should be added to the Composed Looks Directory. 

  • Go to Site Settings > Composed Looks (under Web Designer Galleries)
  • Choose New item link from top left
  • Give a Title and Name for the composed look in the window that opens.
  • Fill the remaining fields such as Master Page URL, Theme URL, Image URL, Font Scheme URL and Display Order.
  • Select Save. The Composed Looks List now lists the new theme entry.

How the SharePoint theming engine applies the composed look?

To apply the composed look as per the request of the user, SharePoint does the following actions.

  • SharePoint copies transform and stores CSS in the Content database.
  • Recolors and stores images in the content database.

New call-to-action