SHAREPOINT 7 MIN READ

How to Take Advantage of SharePoint 2013 Branding

Philippe Lavoie
WRITTEN BY PHILIPPE LAVOIE MARCH 25, 2013

Branding is critical for most businesses. You want your Sites or your Intranet to have the same look and feel as your entire company branding. SharePoint 2010 invested a lot of time and advanced technical knowledge to achieve what should be a simple task. Fortunately, SharePoint 2013 Branding has evolved and makes this simpler than ever.

Back in SharePoint 2010, when I started a new project for a publishing based intranet, the branding was quite straight forward. We created a clean Master Page and integrate the wire frames. For mobile, well good luck. My personal way to go was to add an HttpHandler to override the default SharePoint behavior with the mobile. Then, I would either redirect to a homemade jQuery Mobile interface (interacting with SharePoint via REST services) or simply respond to my client : “SharePoint don’t support mobile view. You will see a normal web page”. That was simpler, and cheaper for my client.

Thanks to SharePoint 2013, things have changed. Now we have nice things called Composed Looks and Device Channels. My friend Benjamin has an overview for the Device Channels in his introduction to SharePoint 2013 migration.

Composed Looks

This new feature does seems special at first glance. For sure, it does not apply to all project, but you certainly can consider it. Composed Looks are simply a way to create a theme using a Master Page, a color set, a font and an image.

To create one, go to:

Site Settings > Web Designer Galleries > Composed looks

The form looks like this:

SharePoint 2013 Branding - A New Approach

1. Master Page

You choose a master page. In my example, I chose Seattle (out of the box for SharePoint 2013)

2. Theme URL

The theme is a *.spcolor file. Basically, it’s an xml file with a placeholder for each color. Here’s a sample:

<?xml version="1.0" encoding="utf-8"?>

<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/sharepoint/">

    <s:color name="BodyText" value="444444" />

    <s:color name="SubtleBodyText" value="777777" />

    <s:color name="StrongBodyText" value="262626" />

Little hint here, here’s a list of the “blue” colored key to turn them to a color of your choice: AccentText, Hyperlink, CommandLinksHover, RowAccent, NavigationAccent, NavigationHover, EmphasisBackground, HeaderNavigationHoverText, HeaderNavigationSelectedText, SuiteBarBackground and ContentAccent1.

3. Image Url

This is the background image for you view. Out of the box, SharePoint is using 1024x768 background and apply a stretching/blurring/fading thing on it. In fact, the background-image-size css is cover witch scale the background image maintaining its aspect ratio. Also, there is an overlay css class on the s4-workspace that apply a 85% transparency white over this background color (background-color: rgba(255, 255, 255, 0.85)).

4. Font Scheme URL

This is another xml file for the font of the site. You can refer to default typeface (like Tahoma) or import your own (eot, woff, ttf, etc…). Here’s a sample:

<s:latin typeface="Rockwell Light" eotsrc="/_layouts/15/fonts/RockwellLight.eot" woffsrc="/_layouts/15/fonts/RockwellLight.woff" ttfsrc="/_layouts/15/fonts/RockwellLight.ttf" svgsrc="/_layouts/15/fonts/RockwellLight.svg" largeimgsrc="/_layouts/15/fonts/RockwellLightLarge.png" smallimgsrc="/_layouts/15/fonts/RockwellLightSmall.png" />

5. Apply the Composed Look

So after creating my Composed Look, I just have to apply it by going to:

Site Settings > Look and Feel > Change the look.

Then, you select your new Composed Look

SharePoint 2013 Branding - A New Approach

Here's the final look of my Site:

SharePoint 2013 Branding - A New Approach

Device Channels

The second advantage of SharePoint 2013 Branding is the Device Channels. They offer a way to apply a specific look to a specific device (read User Agents). First, we need to create a Device Channel.

Site Settings > Look and Feel > Device Channels

The form for a new item look like this:

SharePoint 2013 Branding - A New Approach

Let’s create one for the iPad. The only important part is the Device Inclusion Rules which is a substring of the User Agent you which to match. Don’t forget to activate it.

After that, we need to associate a Master Page to the Device Channel. To do so, go to:

Site Settings > Look and Feel > Master Page

Notice here that the site is configured by default (in publishing) to use the “Mobile Browser View”. In the iPad (and most of the devices I tried) it’s simply displaying the normal layout. Let’s change that by disabling the feature:

Site Settings > Site Actions > Manage Site Features > [Deactivate] Mobile Browser View

SharePoint 2013 Branding - A New Approach

Finally, back to the Site Master Page Settings, simply select a Master Page for your Device Channel (iPad in our case).

SharePoint 2013 Branding - A New Approach

Powerful new features for SharePoint 2013 Branding

Overall, these two new features are powerful. You have much more flexibility on how to display content depending on what device you use. The composed looks give us the ability to select font or color regardless of the Master Page I created for my client. I can even create multiple Composed Looks for multiple region (like one for the Portal, one for the Collaboration and another one for the President Site). Now it’s time to be creative and exploit those new features!