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

Posted in SharePoint 2010 | Tagged , | 5 Comments

SharePoint 2010 Themes

Summary

One of the new features in SharePoint 2010 is the support of Themes and the Theme Engine.  This allows the SharePoint site to use a Theme.  SharePoint comes with a bunch of pretty built in Themes, but you can also create, add, and apply your own custom themes.  Let’s explore how to do all this.  In another post, I will explain how you can take this one step further and incorporate the theme settings in your own style sheets.

This topic covers the following:

  • Microsoft Office Themes
  • Create Theme
  • Add Theme to SharePoint 2010
  • Apply Theme to Site

Microsoft Office Themes

Themes were introduced in Office 2007.  A PowerPoint theme is a collection of settings that includes coordinated colors, fonts, slide layouts, and effects.  A theme can be applied to tables, SmartArt graphics, shapes or charts in PowerPoint slides.  SharePoint 2010 can use a PowerPoint theme, but SharePoint will only use the color and font settings.

A PowerPoint theme supports the following:

  • 2 Dark Colors
  • 2 Light Colors
  • 6 Accent Colors
  • Hyperlink Font Color
  • Followed Hyperlink Font Color
  • Heading Font
  • Body Font

Create Theme

The easiest way to create a theme is inside Microsoft PowerPoint.  It’s really easy to do.

  1. Start PowerPoint 2010
  2. Select the Design Ribbon
  3. In the Themes group, use the Colors dropdown, select Create New Theme Colors…, or right-click on an existing Theme and select Edit…
  4. Edit your colors as needed
  5. Provide a Name for your Theme, then click Save.
    image
  6. In the Themes group, use the Fonts dropdown, select Create New Theme Fonts…, or right-click on an existing Theme and select Edit…
  7. Edit your fonts as needed
  8. Provide a Name for your Theme, then click Save.
    image
  9. Select the File Ribbon
  10. Click on the Save As
  11. Provide a File name for your file
  12. Make sure you save for file as an “Office Theme (*.thmx)” file

NOTE: The theme file is nothing more than an xml file.  So, it is possible to create or edit a theme file manually, but I find the PowerPoint interface much easier to work with.

Add Theme to SharePoint 2010

This is really easy too, so long as you have the proper permissions.  Simply follow the steps below:

  1. Go to your SharePoint Site
  2. From the Site Actions menu, select Site Settings
  3. In the Galleries, click on the Themes link
  4. In the Library Tools Ribbon, select the Documents tab
  5. Click the Upload Document
  6. Click the Browse…. button and select the Office Theme file you created earlier
  7. Then click OK
  8. Your Theme should now appear in the Theme Gallery

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.  I have to admit this little step had me puzzled at first.

Apply Theme to Site

To apply your custom theme to the current site, follow the steps below:

  1. Return to the Site Settings page
  2. In the Look and Feel section, click the Site theme link
  3. Select your theme, then click OK
    image
  4. Your Theme should now be applied to the site

Next Step

Now that you have your custom theme applied to your site, my next post explains how you can use all those theme colors and fonts in your own style sheets.

References

ThmxTheme Class

http://msdn.microsoft.com/en-us/library/ee658367.aspx

Posted in SharePoint 2010 | Tagged , | Leave a comment