Thursday, April 30, 2015

Using the SharePoint Color Palette Tool to Create Customized Composed Looks

At the great SharePoint Evolution Conference last week, someone – I wish I could remember what session it was! – mentioned this great little tool. It helps you to create a very detailed theme for SharePoint 2013. You can save the file into a .spcolor file, which you can upload to the Theme Gallery in your SharePoint Site Collection.

Go to the Microsoft Download Center to grab the SharePoint Color Palette Tool. It’s a quick download and install. Once you have it loaded and launch it, you’ll see this:

The color palette tool provides color palette functionality for use with SharePoint designs.

SharePoint Color Palette Tool

In my example below, you can see an example of a customized theme. I found a photo of the lovely Sonya Koptyev (@SonyaKoptyev) presenting at SPC last year to use as my background and I made one other small color change to the suite bar. Then I saved the file as Sonya.spcolor.

The Sonya Color Palette

The Sonya Color Palette

Next we upload the .spcolor file to the Themes Gallery. (Site Settings -> [Web Designer Galleries] Themes) In this case, I uploaded my .spcolor file to the 15 folder because it’s built for that version (2013) of SharePoint.

Theme Gallery

Theme Gallery

Once you’ve uploaded your new palette file, you can create a new Composed Look with it (Site Settings -> [Web Designer Galleries] Composed looks). The image below shows all of the out-of-the-box Composed Looks.

The Composed Looks Gallery contains all of the looks designed for your Site Collection.

Composed Looks Gallery

When you create a new Composed Look, you specify a Master Page URL, a Theme URL, an Image URL, and a Font Scheme URL. The combination of these components make up a Composed Look.

In the screenshot below, you can see how I’m creating a new Composed Look using my Sonya.spcolor file.

Sonya Composed Look

Sonya Composed Look

Once I’ve saved the new Composed Look, I can apply it to my site ((Site Settings -> [Look and Feel] Change the look). After I select my new Composed Look, voila! A quick new look for my site!

Previewing the Sonya Composed Look

Previewing the Sonya Composed Look

But wait. “Where’s my background image?”, you’ll probably ask. I certainly did.

The background image you select in the SharePoint Color Palette Tool doesn’t automagically get saved in the .spcolor file. That’s what the Image URL is for in the Composed Look. So upload that image (in my case, the lovely Sonya presenting) and add the URL to it in the Image URL for your Composed Look.

Adding the Sonya image to the Composed Look

Adding the Sonya image to the Composed Look

And now: voila for real!

Previewing the Sonya Theme on my Team Site

Previewing the Sonya Theme on my Team Site

The SharePoint Color Palette Tool is just a v1.00 tool, but it seems to work reasonably well. Let’s hope that Microsoft builds something like this right into the UI rather than keeping it a separate tool.

By the way, the reason I still have the image of Sonya presenting is that I love the quote she had in her slide:

"The world hates change, yet it 
is the only thing that has 
brought progress." 
Charles Kettering

 

 


by Marc D Anderson via Marc D Anderson's Blog

No comments:

Post a Comment