Tuesday, December 30, 2014

SharePoint 2013 Composed Looks Feature

Themes are the quick and easiest way to apply branding to SharePoint sites. Themes got changed over time in SharePoint's history. Now in SharePoint 2013, Themes are redesigned as "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 which was introduced in SharePoint 2010, these themes can't be used in SharePoint 2013.

How to Apply composed look in SharePoint 2013? :
You can get the option to change SharePoint 2013 themes via "Change the Look" link from the Site Settings menu. Same is available under Look and Feel group of Site settings page.

 Change the look wizard and shows a thumbnail view of available designs. These designs are defined in a special list: "Composed Looks".

SharePoint 2013 Apply composed look:
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 2013 site.

Create composed look in SharePoint 2013:

In Short: To Create and Apply your custom theme in SharePoint 2013, 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 http://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 image, 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 theme (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 which is already uploaded to the master page gallery. This master page must accompanying a .preview file with the exact name - (with the .preview extension instead of .master). Otherwise, you won't get composed look preview.

Color Palette:
Color palette is nothing more than an normal XML file with a .spcolor extension. By default, color palette contains 89 Color slots of Key-Value pair.
<s:color name="FooterBackground" value="7F333333" />
Where the first two digits: 7F represents the Transparency (optional) and rest for HEX value of the color.
SharePoint 2013 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 color palette tool for SharePoint 2013 from Microsoft: http://www.microsoft.com/en-us/download/details.aspx?id=38182
This tool also lets you open a OOTB color palette and modify the colors. Once you 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 folder.

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 Pallette and Font Scheme reference: http://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: Making an entry in 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 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:
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.
Once you have the entry for your theme in this list you can see your composed look/theme available on "Change Look" page.

You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.

Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...