Using Themes and CSS with SharePoint 2010

Branding SharePoint just got a lot easier with the release of 2010. I used to have a basic rule of thumb when it came to using themes with 2007. Don’t use them. And if you must use them, don’t do further customization down the road. This is no longer true with 2010. The themes in 2010 are quite literally Office theme files (.thmx) and can be edited and created with PowerPoint.

There are really two types of branding exercises with SharePoint. The first is for public facing, typically anonymous sites with a high degree of customization and complete control over all of the visual elements. The second is for authenticated, typically intranet type sites where some customization is necessary, but where appropriate, out of the box visual elements can be used. In either case, themes are a good place to start the branding exercise, but they are particularly compelling with the latter, which is what this article is focused on.

Themes are essentially a collection of colours, and default fonts. You can apply a theme to a site by going to Site Settings, and selecting Site Theme under the Look and Feel heading.

As can be partially seen here, there are two other major theme features in 2010 that were not available in 2007,the ability to inherit a theme from a parent site,and the ability to push a theme down to sub sites, much like the way that master pages work.

From here you can select a theme, and if you like modify it. You can change the base colour for the 12 colour categories (the colour scales are calculated automatically), and you can set the base font face for headings and body. If you do modify these colour, you should be aware that you are not modifying the theme files themselves, which live in the theme gallery, but the derived CSS classes that are automatically generated whenever a theme is applied to a site. As such, you will find yourself working with a “custom theme”. Unfortunately, there is no way to save the custom theme off to the gallery, or locally, and that severely limits its reusability options. If anyone from Microsoft is reading this, please consider it a feature request.

The best way to edit a theme is by using PowerPoint, and it’s exceedingly easy. You can create a theme from scratch easily enough, but if you wanted to use one of the themes that ship with 2010 as a starting point, you can simply navigate to Site Settings (from the root site), and select Themes under the gallery heading. This is a simple document library, so select the theme in question, and click “Download a Copy” from the ribbon.

Once the file is downloaded, just double click on it to open up PowerPoint. PowerPoint will open up to a blank presentation. Click on the Design tab in the ribbon, and you will see that your theme colours are currently selected. You will edit your theme using the “Colors”, “Fonts” and “Effects” buttons.

Here’s where it gets a little non-intuitive. To change your colours, click the colors button and select “Create New Theme Colors”. I know… they’re not new, but to PowerPoint they are.

Edit away to your heart’s content, and then give the theme a good descriptive name so that you can refer to it later. You will likely use this name when saving your theme in a moment, but for now, this name will be used by PowerPoint to identify this group of colours. When you’re done selecting colours, save them, and repeat the process as necessary for fonts and effects. Once done, it’s time to save your theme. Simply use File-Save As, and select the “Office Theme (*.thmx”)” file type, and give the file a good descriptive name. Once that’s done, navigate back to the theme gallery, upload it, and it will be available for selection now under site theme.

What happens if you want your customization to go a little further? Maybe you’d like to tweak some of the CSS classes a little?   Should your start figuring out what the system classes are and start changing them? What’s the best approach?

Under no circumstances (OK, maybe a couple, but don’t) should you modify the core CSS files. There are many ways to accomplish your goal, I use several depending on the use case, but one of the easiest is to simply create a CSS Override file, and tell the system to use it. I start with a blank file called CoreOverrides.css (call it whatever you want) and I store it in the root of the style library. The next step is to tell the site to use it.

From the root site, Go into site settings, and select the Master Page link in the Look And Feel section. Then scroll down to the “Alternate CSS URL” section.

The description for this section is just as poorly written in 2010 as it was in 2007. It implies that by turning this on, you’re turning the internal classes off. This is not at all  true. The file that you indicate here gets loaded into the CSS stack after all other system classes have loaded, and therefore any classes defined here will have precedence over any identically named system classes. That’s why I call it Overrides.

How do you know which classes need to be modified? That’s where hacking comes in, or a lot of patience. You can study the master pages and page layouts, use view source on a rendered page, or use the IE developer tools. I use all 3, but I’m beginning to like developer tools a lot.

Load the page in question into IE, and then press the F12 key (or select Tools-Developer Tools from the menu). You will get a child browser widow pop up and from here you can navigate the entire DOM of the page. However, we want to see what CSS is being applied to a particular element, and the easiest way to do that is to select the CSS tab, and then select Find-Select Element By Click from the menu. You can then hover over any element on your page which will be outlined, and when you have the one that you want, click it , and its CSS stack will be displayed.

Once you find the class who’s behaviour you wish to change, simply copy its definition over to your overrides file, and edit away. Keep in mind though that you’re overriding a pre-existing class definition, and therefore you need to be explicit. If you want to remove a background image, you cant simply remove its definition, you must set it to “none”. Also, because some properties can be very sticky, I find the use of the !important directive to be very helpful.

Happy branding!