Custom .SPColor files for SharePoint Composed Looks

Composed Looks
“Themes provide a quick and easy way to apply lightweight branding to a SharePoint 2013 site. A theme lets a site owner, or a user who has designer rights, customize a site by changing the site layout, color palette, font scheme,and background image.The theming experience in SharePoint 2013 was redesigned to simplify the process of customizing sites. The themes user interface was redesigned and there is a set of new file formats related to themes. The Change the look wizard is the entry point to the theming experience where you can change the look and feel of your site. You can select a design for the site. Then, you can customize the design by changing the site layout, background, color palette, or font scheme. You can preview the site before applying the design” (MSDN)

.SPColor File
An “spcolor” file allows you to generate a “theme” and is the backbone of how composed looks function.  Each color file contains the same selection of “names”. These can vary from the “Suite Bar Background Colour”, to six variations of “Content Accents”. Each of these, once changed, will modify the branding of your SharePoint site.

How to create a custom name
A client have requested  that each of their departments contain a different theme. Initially, I thought there were too many colour variations for the SPColor file to handle without affecting the branding of the OOTB elements.

After a quick test, it appears that you can create custom “names”, allowing you to generate a selection of themes that would never be picked up by OOTB SharePoint elements, but will only ever be picked up by your custom content. The below outlines the six default “ContentAccent” names which have been modified for the client.

Now, if I wanted to have another five colour options and didn’t want to change any of the other default SPColor names, you can create your own.

Each of these names can be applied and utilized by your themeable.less/css file like this:

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s