Color Codes in SharePoint SPColor Files MUST Be All Caps

With the new world of branding a tenant on Office 365, styling the suite bar and using a theme (aka Composed Look) can take you pretty far toward improving the user experience.

A Composed Look is made up of (potentially):

  • A master page – generally either Seattle or Oslo
  • Theme URL – the spcolor file to use for common classes in a SharePoint page
  • Image URL – an image to use as the background for pages
  • Font Scheme URL – spfont file to use for common classes in a SharePoint page
  • Display order – simply where in the list of Composed Looks yours is displayed

Composed Look Settings

I won’t go into all the details about how this works, but each setting above is somewhat optional: you can use an existing spcolor file, for example, but create your own spfont file. If you want to understand all the mechanics, check out Benjamin Niaulin’s article Step by Step: Create a SharePoint 2013 Composed Look

 

Change the look

Here’s a quick tip about spcolor files. I was tearing my hair out over the last few weeks trying to figure out why sometimes my iterations of an spcolor file were working and other times they weren’t. By not working, I mean that the Composed Look would simply disappear from the Change the look page. I’d revert to my last working version and slowly inch forward again.

It turned out to be something silly and obvious – once you know it!

All of the color codes in the spcolor file MUST be all capitals. So, for instance, this:

<s:color name="ContentAccent1" value="0057b8" />

would not work, but this:

<s:color name="ContentAccent1" value="0057B8" />

would. That was *not* easy to spot, but spot it I did.

Don’t let this one bite you; I hope that your Binglage has led you here for a solution and this helps…

Similar Posts

2 Comments

  1. Wow. Really? Microsoft couldn’t take the extra step to parse RGB color values case INSENSITIVE. I wonder if GUIDs are like this as well. So odd.

  2. This is not the only issue you are facing with color in themes. There is one thing that is even more wired. Themes not only support RGB colors. They support RGBA color definitions too.

    In HTML/CSS: you define the color by:
    “`Red“`, “`Green“`, “`Blue“`, “`Opacity / Alpha“`.
    In MS Themes it is the other way round:
    “`Opacity/Alpha“`, “`Red“`, “`Green“`, “`Blue“`.

    Naturally, all properties have to be UPPERCASE.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.