Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

    Advertisements
  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand
  • Advertisements

Color Palette

Posted by Paul on August 18, 2014


In this article we can explore how to create a color palette & deploy it.

Color Palette

A Color Palette is a combination of colors used in a SharePoint site. Each Master page contains multiple elements with color-names. A color palette contains color values for these pre-defined names.

A Color Palette has the extension .spcolor.

Following is the content of a sample .spcolor file.

image

Location of Color Palette File

The color palette file resides in the root site collection themes folder. You can access the location from Site Actions > Site Settings > Themes page.

image

Following is the Themes page.

image

Creating New Palette

You can open the themes gallery > 15 hive folder > download an existing .spcolor file. Later modify the color values according to your need.

Deploying New Palette

You can open the themes gallery > 15 hive folder > choose new document. In the appearing dialog choose the new spcolor file and upload.

image

Once uploaded, you can see the new palette in look and feel page.

image

Editing files

We can open the .spcolor file in notepad & edit the color hex values. Alternatively, there is a very good tool named Color Palette Tool which provides a graphical user interface in editing colors.

image

The tool can be downloaded from:

http://www.microsoft.com/en-us/download/confirmation.aspx?id=38182

Please find my other article on using the same.

image

Please note that the themes folder also contains font files.

References

http://msdn.microsoft.com/en-us/library/office/jj945889(v=office.15).aspx

Summary

In this article we have explored color palette and deployment.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s