branding « Hannah's SharePoint

I was asked to do a simple branding for a client as part of a SharePoint Online/2013 project. I jumped into it thinking it would be like the difference between MOSS 2007 and SharePoint 2010 – some small changes, but generally the same. It wasn’t – though there are some neat new things.

Background

The premise for this project was fairly simple: the client needed a central administration site with sub-sites for each project.

The biggest caveat on this project was that the project sites would be created from a SharePoint site template (“save site as template”), which is notoriously complicated combined with team sites and branding.

Change the look

There are a few ways to change the design package or “look” in SharePoint 2013.

branding3

This brings you into a screen where you can choose from a number of default Looks or edit your current Look:

When you choose a look, you end up on the configuration screen for that Look where you can change the background image, the colors (theme/color palette), site layout (master page) or fonts (font scheme). You can see a live update in the middle of the screen:

This is great for end-users: it allows them to have far more control over their environment and to customise things to fit their own needs. It allows the users to use pieces of a branding solution. It also allows branders to supply them with better options, i.e. by creating color palettes which the end users can then choose.

Composed looks

The “Change the look” allows the user to select a premade template and then change the options that create the look. You can also create a Composed look for your environment that includes all of the elements. The user can select it and then have everything automatically look correct.

You can find the Composed looks on each site settings, under Web Designer Galleries:

Composed looks is nothing more than a list with a number of different columns which point to different resources. If you edit an item in the list, you will be able to edit all of these different properties:

Creating a new Composed Look is easy; simply create a new item in this list.

Note: the master page must be created via a HTML page, even if you don’t make any changes to it, before it will be available in a Composed Look. You will not be able to select the master page as a layout option in the Change the Look screen otherwise.

Composed Look elements

SharePoint 2013 has a number of design elements which are combined in the Composed Look:

Element	Description	Lessons learned
(HTML page)	SharePoint 2013 creates master pages from HTML templates	Make all of your changes here, if possible
Master page	Created from the HTML – try and avoid editing the master page directly in SharePoint 2013	Is automatically created from the HTML page as soon as there is a new version of the HTML page
Theme	Also called color palette, is responsible for colors	Download a pre-existing template and update as needed. Choose one main color to replace, then replace it with “replace” in an editor – this will keep the coloring consistent. Just changing one color was enough to make a big impact for my client.
Background image	Used for the background image on pages, automatically repeats	SharePoint assigns CSS transparency of 85% to this image – make sure that it is fairly dark, otherwise, you will not be able to see it
Font scheme	Helps to control all the different fonts in the environment

I was very impressed with how easy it was to update things like the color palette – you need some basic branding knowledge and an understanding of check-in/check-out. That’s it, and changing these things can make your environment look very differently.

Branding inheritance with team sites

I really wanted to reuse the same master page on each of the different team sites; I had put the Open in Explorer link from my Using the “Open in Explorer” link on SharePoint 2013 mini project right about the left menu.

Here’s what I learned while trying to accomplish that:

Edit the HTML master file for the layout, not the master page. If you only edit the master page, for some reason it is impossible to select this master page as a layout in Change the Look. Plus, there is no reason not to – SharePoint updates the master page with the changes in the HTML on the fly.
Master pages are not shared over different sites (without the publishing feature) – the master page that I created for the client was not available on one of their project sites. I also edited one of the default master pages – the change was not visible on a subsite. This means that the master page changes are limited to a site scope, not site collection.
Color palettes are available over different sites. I did not test font palettes.
If you save a site as a template, the same Look is applied to the new sites created from that template. In my project, this meant that the color palette and the background are automatically applied to new sites.

Resources

Benjamin Niaulin: Step by Step: Create a SharePoint 2013 Composed Look