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

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.

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