SharePoint 2013: Choosing the Right Colours

Posted 30 June 2014 12:00 AM by Ian Jackson, UX Developer @ ClearPeople

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.



Add your comment





intranet Modern SharePoint teamwork employee engagement digital workspace SharePoint JavaScript Windows Azure Digital Transformation staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics jquery QA Quality Assurance testing content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath