SharePoint 2013 Colour Palette

Colour choices

by Ian Jackson, Front End Developer@ClearPeople

30/06/2014

In front-end development, the first step we take when styling a web site is to focus on the branding (font-sizes, line-heights, margins, and padding of the primary html elements). We also focus on the brand colours, and define them on the base elements so that all child elements will inherit the style. The branding is defined in the CSS, and is generally the first piece of CSS loaded.

When test developing SharePoint, we need to approach this process in a different way. Where normally we begin from the ground up – build our branding foundation and style our site around it- SharePoint gives us an out-of-the-box website/web application with a branding foundation already in place. We have the option of overridding the OOTB branding, which is often the initial urge, or we can redefine the base branding to suit our site.

Color Palette Tool

This is an external tool which allows test us to define the base colours of a SharePoint 2013 site: Download here. With this tool we can choose what colour we want, our text, backgrounds, lines, headers, etc. The colour scheme can then be saved and imported to the SP2013 site. This application gives us a preview of what elements are affected by the colours selected, but it doesn’t give us an in-depth list of all the elements. Defining the ‘body text’ colour in the Color Palette Tool affects over 100 individual elements for instance.

Sometimes we might want to change the colour of a particular base element, but we are unsure where to make the change in the Color Palette Tool. To help us with this problem and identify the UI group needed to change, I have created a list showing the relationship between the elements and type of CSS attribute affected (color, border color, or background colour). To receive an electronic copy of this spreadsheet, please fill in our contact form.

color