Composed Look Feature in SharePoint

Themes are the quick and easiest way to apply branding to SharePoint sites. Themes got changed over time in SharePoint’s history. Now from SharePoint 2013, Themes are redesigned as the “Composed Look” feature. As it sounds “Composed” look, it simply defines theming by combining design elements: Master page – AKA site layout, Color theme, Font schemes, and background images.

No more thmx – PowerPoint themes introduced in SharePoint 2010; these themes can’t be used in SharePoint 2013.

How to Apply composed look in SharePoint?

You can get the option to change SharePoint 2013 themes via the “Change the Look” link from the Site Settings menu. The same is available under the Look and Feel group of the Site settings page.

composed look in sharepoint 2013

 Change the look wizard and shows a thumbnail view of available designs. These designs are defined in a special list: “Composed Looks”.
 create a new composed look sharepoint 2013

How to Apply composed look in SharePoint?

To apply a composed look, Click on:

  • Site Settings >> Change the Look 
  • Select the new look to apply
  • Click on “Try it out” link >> SharePoint will give you the preview of your SharePoint site with the new theme 
  • Once you confirm by “Yes, Keep it”, the new look and feel is applied to your SharePoint 2016 site.
composed looks in sharepoint online

Create a composed look in SharePoint 2016:

In Short: To Create and Apply your custom theme in SharePoint 2016, There are three steps: 
Step 1: Create and upload theme elements: Master Pages, spcolor, spfonts, etc. to SharePoint.
Step 2: Register your Theme: Create a list item in “Composed Looks” list populating your theme artifacts. This will make your theme available in the design gallery at https://your-site-url/_layouts/15/designgallery.aspx
Step 3: Apply theme: You can apply theme from Site settings – Change the Look. You can also apply theme programmatically.

As illustrated above, To create a custom composed look in SharePoint 2013, We need these artifacts ready. BTW, These design elements are reusable – Meaning can be used in any number of custom themes (or call it “Composed Look”)!

  • Master Page – AKA – Site Layout
  • Color palette – AKA – Theme
  • Font scheme  – Optional
  • Background image  – Optional

Master Page URL – A reference to either a default or custom master page already uploaded to the master page gallery. This master page must be accompanying a .preview file with the exact name – (with the .preview extension instead of .master). Otherwise, you won’t get a composed look preview.

Color Palette:
The color palette is nothing more than a normal XML file with a .spcolor extension. By default, the color palette contains 89 Color slots of Key-Value pair. E.g.

<s:color name="FooterBackground" value="7F333333" />

The first two digits: 7F represent the Transparency (optional) and the rest for the HEX value of the color.
  
SharePoint Color Palette Tool:
While editing the .spcolor file can be done with SharePoint Designer or notepad, Microsoft offers a nifty tool to make it simple. You can download the color palette tool for SharePoint 2013 from Microsoft: https://www.microsoft.com/en-us/download/details.aspx?id=38182

create composed look sharepoint 2013

This tool also lets you open an OOTB color palette and modify the colors. Once you have built your customized color palette, You can upload it to the Theme Gallery (Site settings >> Themes >> 15 (Shortcut:  /_catalogs/theme/15/ ) and use it in a composed look. This gallery generally resides on the root web level and has theme files, Color palette, and font schema inside 15 folders.

Font scheme:  (Optional)
SPFont File – This file contains all the font definitions for the Composed Look. The font scheme is also an XML file with a .spfont extension. There are 7 font slots with names such as title, navigation, and small-heading. Font schemes can be easily edited with any Text editor or SharePoint designer.(Download any existing font scheme and do your changes)

Upload your .spfont file under: Site Settings > Themes > 15 > add new document then use that link to the .spfont file in your Composed Look item.

Please note: The .spfont and .spcolor files must be in the /_catalogs/theme/15 folder, NOT in a sub-folder!

Color Palette and Font Scheme reference: https://msdn.microsoft.com/en-us/library/office/jj945889.aspx

Background Image (Optional) – The image that will cover the entire background of your SharePoint pages.

Once you have all these artifacts ready, The next step is: Make an entry in the Composed Looks list to pack it as a theme!

The “Composed Looks” List:

As the name suggests, This library contains all composed looks. This list actually contains the master page URL, image URL, theme(color palette) URL, Font Scheme URL, and Display Order. So, all of them together is a theme.

You can launch this list by: Site settings >> under “Web Designer Galleries” Group >> Composed looks:

composed looks list sharepoint 2013

Once you have the above artifacts ready and uploaded to respective folders, To make your own Composed Look, go to:

  • Site Settings > Composed looks under the Web Designer Galleries heading 
  • Click on add new item.  
  • From there you simply fill out the form giving the title, name and URLs to your custom Master Page (which may have custom CSS files linked inside) and other artifacts.
create theme for sharepoint 2016

Once you have the entry for your theme in this list, you can see your composed look/theme available on the “Change Look” page.

Salaudeen Rajack

Salaudeen Rajack - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

Leave a Reply

Your email address will not be published. Required fields are marked *