Documenting the SPColor file, making composed looks easier to use

Recently a coworker and I started working with the Sharepoint 2013 spcolor file, part of Sharepoint composed looks, and I thought I could share our findings in hopes of helping someone else in the same situation.

Using Sharepoint’s ”Change look and feel” you can, as a user, change the colors on your site. You can select an existing color scheme which turns the banner pink and font yellow, even though it’s unclear why you would want that. But how does it work, where do the colors come from? It all starts with a file type called spcolor. It is an XML file where a name and a hexcode are combined, like this:

These values can then be used in a CSS file. You declare that an element should use the color from the spcolorfile instead of writing the hexcode directly in the CSS file. For syntax reasons you need to specify a default color and it all looks like this:

This means that all elements with the class ’some-class’ will be assigned the font color #262626 and not #000000. The ReplaceColor comment replaces the specified value with the corresponding value from the spcolor-file.
This can be used when creating your own themes, or in another word: composed looks. A custom made CSS file, as well as Sharepoint’s own CSS files, can use ReplaceColor .

And this is where we hit our firt road block, the lack of documentation. Although the names in the pcolor file are somewhat descriptive, it is impossible to tell exactly which elements they affect. There are, so to speak, some gaps.

We searched the spcolor file, looking for the selectors that used ReplaceColor and then we added those selectors as comments to the spcolor file in order to make it easier to use. It isn’t great bedtime reading, but I hope it can help to somewhat ease the process for future development of composed looks.

And here’s the result:

The spcolor file

En reaktion på “Documenting the SPColor file, making composed looks easier to use

Lämna ett svar till Erik Kronberg Avbryt svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *