SharePoint 2013 Composed Look

Target:

What is the composed look?

How to create a custom composed look?

Details:

What is the composed look?

Imagine that you want to make some changes to spruce up your home that can be done relatively quickly and easily. Your budget is limited, so you decide to paint the walls with a brighter and more appealing color. In SharePoint terms, this would be equivalent to applying a theme. Technically speaking, themes can be thought of as changes that are applied to the existing look and feel through the use of CSS.

Over the past few versions of SharePoint, themes have evolved more than any other branding function.

In SharePoint 2007, themes were stored on the file system of the SharePoint server and consisted of mostly XML, CSS, and images that were applied to a master page. The bigger issue was that although themes were considered to be one of the simplest approaches to branding, creating custom ones was actually quite complicated and required changes to files on the server, which required direct access to the file system. SharePoint Server Administrators aren't usually too fond of making changes to files on the file system.

SharePoint 2010 took a new approach to themes and used the same mechanism used by Microsoft Office to create .THMX files that enabled users to select from twelve colors and two fonts. This could all be done through Office clients or through the SharePoint UI, which made custom theme creation much easier than with SharePoint 2007. When created, these files could be uploaded and applied to any site. This meant that themes could be applied without making any changes to the file system, but the downside here was that themes in SharePoint 2010 essentially just recolored sites. They didn't provide a way to modify CSS or add images. Many users felt this iteration of themes was almost too simplistic.

SharePoint 2013 introduces another approach to themes that is noninvasive like SharePoint 2010 but enables more flexibility to add background images and other customizations similar to the types of customization typically made with SharePoint 2007 themes. This new approach to themes is called composed looks.

A composed look consists of a color palette, fonts, background image, and associated master page. When a user selects a composed look, all these associated design elements are applied to the site. There are several composed looks available to choose from out-of-the-box, but you can also customize these or even create your own. When you choose a composed look, SharePoint applies the styles and master page associated with the composed look, and with minimal effort you have created a customized site. Out-of-the-box, you get 18 prebuilt composed looks to choose from in SharePoint 2013.

How to create a custom composed look?

The cool thing about composed looks is you can provide a base master page design, and users can change the colors, fonts, and background images without knowing anything about CSS or master pages.

To begin understanding composed looks, you should check out the composed looks gallery by clicking Site Settings ➢ Web Designer Galleries ➢ Composed looks.

The following shows the new item menu from the composed looks gallery.

On the left and the menu you see when you select a composed look (Site Setting ➢ Look and Feel ➢ Change the Look)

The following list details what each setting in the composed looks gallery represents and how it relates to the Change the Look menu.

• Title

 The title for the list item that is created for each composed look.

• Name

The name or label that appears next to the look in the change the look menu.

• Master Page URL

A reference to the preferred master page that goes with the composed look. In the Change the Look menu, this shows in the Site Layout drop-down. This can be confusing terminology because Site Layout could be confused with page layouts, which are a different concept.

• Theme URL

Another confusing option because themes were the overarching name for functionality that was similar to composed looks in SharePoint 2010. In the composed looks gallery, Theme URL refers to an XML file that lists preferred colors for the composed look. This is shown in the change the Look menu as colors.

• Image URL

References the URL for a background image to be used in the composed look. On the Change the Look menu, this is represented by the image thumbnail in the top left of the screen.

• Font Scheme URL

Refers to an XML file that lists preferred fonts for this composed look. On the Change the Look menu, this is simply shown as Fonts.

• Display Order

This number represents the sort order from low to high that the composed look shows on the first page of the change the look menu with all the thumbnail previews.

Demo:

1-    To create custom composed look you should first create color and font xml files.

2-    These files live in /_catalogs/ theme/15 navigate to this folder. You can see a long list of files that end with the extensions .spfont and .spcolor; these represent all the default color and font options for composed looks.

3-    You need to make copies of fontscheme001.spfont and Pallete001.spcolor. Name the copies BreakfastFonts.spfont and BreakfastColors.spcolor, respectively.

4-    Start by opening BreakfastColors.spcolor in a text editing program.

Note: PreviewSlot1, PreviewSlot2, and PreviewSlot3 refer to the colors drop-down that shows in the Change the Look menu.

5-    To familiarize yourself with an SPFont file, look at the BreakfastFonts.spfont file: 

This file has a little extra going on. On line two the <s:fontScheme> tag is set up similarly to the <s:color> tag in the SPColor file in that it defines some previewSlots referenced in the following list of fontSlots. Inside of the fontSlots node, you see several fontSlot child nodes, each with a “name” that defines the slot. Inside of each fontSlot node you see an <s:latin> node that configures the actual fonts that will be used for this slot plus several nodes that tell SharePoint what fonts to use if the default language is set to a foreign language that doesn’t use Latin type faces. Focusing on the latin node, you can see that it defines the following properties:

Typeface: The name of the font that shows in the change the look menu.

EOTSRC: Points to the URL for an .EOT font file.

WOFFSRC: Points to the URL for a .WOFF font file.

TTFSRC: Points to the URL for a .TTF font file.

SVGSRC: Points to the URL for an .SVG font file.

Largeimgsrc: Points to the URL for an image that represents the font in the Change the Look menu. This image shows the user a sample of what the font will look like for the first previewSlot.

Smallimgsrc: Points to the URL for an image that represents the secondary font in the Change the Look menu. This image shows the user a sample of what the font will look like for the second previewSlot.

6-    Navigate to Site Settings ➢ Web Designer Galleries ➢ Composed Looks.

7-    Click new item at the top of this page to create a new composed look.

8-    Enter the following options for the composed look:

a.     Title : Breakfast

b.    Name : Breakfast Theme

c.     Master Page URL : /_catalogs/masterpage/oslo.master

d.    Theme URL : /_catalogs/theme/15/BreakfastColors.spcolor

e.     Image URL : /_layouts/15/images/image_bg117.jpg

f.     Font Scheme URL : /_catalogs/theme/15/BreakfastFonts.spfont

g.    Display Order : 5

9-    Click Save.

Note:

Custom master pages will not show up as options in the Change the Look menu unless they have a corresponding .preview file with a matching filename.

Composed look preview files are based on a unique file structure that defines default colors, fonts, preview-specific CSS and HTML markup, as well as special tokens that will inject helpful values. The HTML and CSS in previews represent a simpler version of the master page branding that they repre­sent. The CSS in previews should be based on percentage sizes to allow for scaling between two different preview sizes that SharePoint uses in the Change the Look menu.

Advantages:

1-    The cool thing about composed looks is you can provide a base master page design, and users can change the colors, fonts, and background images without knowing anything about CSS or master pages.

2-    Change the look and feel of a site without a lot of work.

Reference: SHAREPOINT®2013 BRANDING and USER INTERFACE DESIGN Book.