Using Theme Settings in Style Sheets

This posting will explain how you can incorporate theme settings into your style sheets.  The SharePoint Theme Engine will combine your style sheet with your selected theme.  In an earlier post, I wrote about how to create a theme, add it to the SharePoint Theme Gallery, and then apply it to your site.

 

SharePoint 2010 Theme Engine

The diagram below provides a simple overview of how the SharePoint 2010 Theme Engine works. 

image

Theme File Locations

Theme files (*.thmx) can be located in several different places, but for the Theme Engine to pick up and process the theme file, the theme file must be stored in one of the following locations:

  • On the file system at 14\Template\Theme
  • In the content database at Style Library\en-us\Themable

If you are using any of the SharePoint in the cloud, like Office 365, you cannot place your theme on the file system.  As an alternative, upload your theme to the site’s Theme Gallery, which equates to site’s Style Library in the content database.  Just make sure you put the theme in the language/region folder and the Themable sub-folder.  For example, if you are working on a site that uses English in the U.S., you would place your theme file in Style Library\en-us\Themable.

NOTE: If your site uses the SharePoint Server Publishing  feature, you must check-in and publish your Theme!  If you forget to do this, you will probably be puzzled as to why your site doesn’t look right after you apply your theme.

After you select a theme, the Theme Engine goes to work.  It looks at the site’s master page and figures out which style sheets must be processed by the Theme Engine.  How does the Theme Engine know which style sheets to process?  Well, it requires at least the three SharePoint controls in the <head> section of the master page.  An example of these controls are provided below.

<SharePoint:CssLink runat=”server” Version=”4” “ />
<SharePoint:CssRegistration name=”/Style Library/en-us/Themable/custom.css”
EnableCssTheming=“true” After=”corev4.css” runat=”server” />
<SharePoint:Theme runat=”server” />

Although it has always been possible to include the standard HTML <link> attribute to include CSS style sheets in Master Pages, the CssLink, CssRegistration and Theme controls provide special functionality, and continue to be the recommended approach for inserting stylesheet links into your design. Here is a brief overview of what each of these controls does:

  • <SharePoint:CssLink>
    This control is responsible for injecting the default core styles used by SharePoint, and any custom style sheets that are registered using the CssRegistration control.
  • <SharePoint:CssRegistration>
    This control allows registration of any custom CSS style sheets. The links are actually rendered into the page using the CssLink control.
  • <SharePoint:Theme>
    This control checks if a theme has been applied to the current site, and is responsible for rendering links to the Theme stylesheets.
    NOTE: This control seems to continue to be included in SharePoint 2010 Master Pages for legacy support. It no longer seems to be necessary for supporting or enabling SharePoint 2010 themes.

Using the example above, the Theme Engine will process the style sheet at /Style Library/en-us/Themable/custom.css.  So what does the Theme Engine do?  It does the following:

  • Creates a Themed folder in the content database at _catalog\theme\Themed\<some folder>
  • It reads the published theme file, creates a copy and puts the modified theme file in the Themed folder
  • Modifies the necessary style sheets and puts them in the Themed folder
  • Modifies the necessary image files and puts them in the Themed folder

Theme Settings Review

Before we look at the theme instructions, let’s review what theme settings we can use.   SharePoint uses the following settings from a theme file:

  • 2 Dark Colors
  • 2 Light Colors
  • 6 Accent Colors
  • Hyperlink Font Color
  • Followed Hyperlink Font Color
  • Heading Font, which in SharePoint is the Major Font
  • Body Font, which in SharePoint is the Minor Font

The diagram below conveys how theme settings correspond to the theme engine instructions you provide inside your style sheet.

image

Theme Engine Instructions

How does the Theme Engine know what to modify?  Well, the style sheet must contain specific instructions to replace colors and images.  Theme colors can be applied anywhere inside a style sheet where colors are used.  That includes things like the font color, background color, etc.  A theme color can even be used to recolor an image.  That’s right.  When setup correctly, the theme engine can recolor an image.  Let’s look at how this is done.  The theme engine can process the following instructions:

  • Replace Color
  • Recolor Image
  • Replace Font

Replace Color

Use the ReplaceColor instruction to replace any color in your style sheet.  The example below will replace the font color, but any color could be replaced.  That includes things like the background color, border color, etc.  In the example below, the font color will be replaced with the Accent 4 color specified in the theme file.

/* [ReplaceColor(themeColor:”Accent4”)] */
color: #000000;

The example below is slightly more complex.  In this case, the font color will be replaced with the Darker Accent 4 color.  Notice the syntax of the themeColor.  You must specify one of the theme colors (see diagram above).  Optionally, one of the six color modifiers can be specified: -Lightest, -Lighter, -Medium, -Darker, or -Darkest.

/* [ReplaceColor(themeColor:”Accent4-Darker”)] */
color: #FFFFFF;

Below are two examples where the font color is replaced using the Hyperlink and Followed Hyperlink colors from the theme file.

/* [ReplaceColor(themeColor:”Hyperlink”)] */
color: #A9A9A9;

/* [ReplaceColor(themeColor:”FollowedHyperlink”)] */
color: #E0E0E0;

But wait, there’s more.  Not only can you replace the color, but you can change the tint and shade too.  Here are a couple examples.

/* [ReplaceColor(themeColor:”Accent4”,themeTint:”0.35”)] */
color: #000000;

/* [ReplaceColor(themeColor:”Accent4”,themeShade:”0.20”)] */
color: #000000;

Recolor Image

Use the RecolorImage instruction to recolor an image specified in the style sheet.  When I first learned about this, I thought wow, this might be interesting.  And it is.  The Theme Engine will recolor your image based on the theme color you specify.  Not only that, but you can specify one of the following methods for recoloring:

  • Tinting
  • Blending
  • Filling

To help illustrate these options, here are some examples.  First the image, then the style sheet code.

image
/* Original Image without a Replace Image instruction */
background-image: url(‘<image file directory>/Logo.png’);
image
/* [RecolorImage(themeColor:”Accent2-Lightest”,method:”Tinting”)] */
background-image: url(‘<image file directory>/Logo.png’);
image
/* [RecolorImage(themeColor:”Accent2-Lightest”,method:”Blending”)] */
background-image: url(‘<image file directory>/Logo.png’);
image
/* [RecolorImage(themeColor:”Accent2-Lightest”,method:”Filling”)] */
background-image: url(‘<image file directory>/Logo.png’);

All this is great, but what if you want to recolor and use only pat of the image?  Well, Microsoft thought of that too.  Below is one more example that introduce a bonus parameter in the RecolorImage instruction.  These examples utilize the includeRectangle parameter.  For this to work, you must specify the x and y coordinates with the width and height of the rectangle.

/* [RecolorImage(themeColor:”Accent2”,method:”Tinting”,includeRectangle:{x:0,y:100,width:1,height:42})] */
background-image: url(‘<image file directory>/bgximg.png’);

Replace Font

The ReplaceFont instruction can be used to have the Theme Engine replace the font family in the style sheet with one of the fonts specified in the theme file.  In this case, you can specify one of the following theme fonts:

  • MajorFont, which corresponds to the Heading Font setting in the Theme file
  • MinorFont, which corresponds to the Body Font setting in the Theme file

In the first example below, we replace the Verdana font family in the style sheet with whatever is specified in the theme file.

/* [ReplaceFont(themeFont:”MajorFont”)] */
font-family: Verdana;

In the last example, the Arial font family in the style sheet with whatever is specified in the theme file.

/* [ReplaceFont(themeFont:”MinorFont”)] */
font-family: Arial;

References

A great place to find more examples is in the style sheets that ship with SharePoint.

Working with the SharePoint Theming Engine
http://blogs.msdn.com/b/sharepointdesigner/archive/2010/04/09/working-with-the-sharepoint-theming-engine.aspx

How Themes work in SharePoint 2010
http://www.sharepointbits.com/blog/2010/1/4/how-themes-work-in-sharepoint-2010.html

Advertisements

About Rick Fogerty (Cowboy Rick)

Passionate about Business Intelligence, Analytics, Big Data, SharePoint, and Social Media. Opinions are my own. AKA #CowboyRick
This entry was posted in SharePoint 2010 and tagged , . Bookmark the permalink.

5 Responses to Using Theme Settings in Style Sheets

  1. Asif Iqbal says:

    No words its a great post

  2. Pingback: Top 4 Improvements in SharePoint 2013's UI

  3. Roshan says:

    This is the most descriptive post regarding SP2010 theme engine I’ve seen in the internet. Good work!!!

  4. Pingback: Complete walkthrough on Composed Looks in SharePoint 2013 | Bool Tech

  5. C. Howard says:

    Any chance to get an updated version for sharepoint 2013 ?

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