Creating a Custom Theme for SharePoint 2007 (MOSS 2007) and WSS 3.0

The easiest and the fastest way to apply styling on any SharePoint site is with a site theme. Ok, so maybe you are aware that Microsoft has conveniently provided a set of themes which gives users (with privileges) the ability to skin their SharePoint sites easily, but what if none of the provided themes match your corporate brand? What if there is a need to create a custom theme? Well, if you have some CSS skills and access to an image editing application like Photoshop then you are in luck.

Work smarter, not harder. Conveniently, Microsoft has done some of the dirty work for us. Since the existing themes already manipulate the styling for a large portion of SharePoint elements you would want to brand (like content pages, application pages, and lists in SharePoint) we can leverage their hard work and re-purpose it for ourselves.

What is a Theme made up of. If you open up any of the provided theme folders you will see most themes contain similar elements: 50 or so images, an *.INF file named appropriately by the name of the theme, and two CSS file files (theme.css and mossExtension.css). I believe the mossExtention.css was added there to control MOSS 2007 specific classes that may not be needed in WSS. Theme.inf simply defines the title of the theme for all of the different language-variations that may be applied to a site’s language setting. Theme.css is a style sheet file that defines the usual CSS class and ID elements of a site to be branded. And of course, you’ll need images if you want your site not to look like SharePoint OOTB. Those image files will be referenced in the CSS.

Let's get started. Here are the steps to creating a custom site theme named "MyTheme". We’re assuming for this exercise you have access to the file system of your SharePoint server.

1. Open up a Windows Explorer window and browse to the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" folder.

2. Copy any theme folder in and paste with its name replaced with "MyTheme". In this example, I chose to work with the OBSIDIAN folder. You may want to choose a theme that is closest in styling to the finished result you are looking for so you’ll have less work later.

3. In MyTheme folder, rename OBSIDIAN.INF file to MYTHEME.INF in upper case.

4. Open MYTHEME.INF file with notepad to edit it.

5. Change the value of title under [Info] to MyTheme.

6. Change the value to codepage to something unique. All of the default SharePoint themes use some variation of 6#### so I typically use numerical variations that begin with 7.

7. Leave the values for version, format, readonly, and refcount alone.

8. Everywhere that is says Obsidian under [titles] replace it with MyTheme.

When you are done your INF file should look something like this:

[info]
title= MyTheme
codepage=77777 <--change this to a unique theme code
version=3.00
format=3.00
readonly=true
refcount=0

[titles]
1031=MyTheme
1036=MyTheme
1040=MyTheme
3082=MyTheme
1043=MyTheme
1046=MyTheme
1053=MyTheme
1044=MyTheme
1030=MyTheme
1035=MyTheme
1041=MyTheme
1042=MyTheme
1028=MyTheme
2052=MyTheme
1029=MyTheme
1045=MyTheme
1032=MyTheme
1038=MyTheme
1049=MyTheme
1055=MyTheme
2070=MyTheme
1025=MyTheme
1037=MyTheme
1054=MyTheme

Note: each of the 4-digit codes under [titles] represents a locale identifier (or language variation) and if you wish to have different display name for your theme on different variation sites then this is where you set that. Language-specific resource files are separated into different directories to eliminate conflicts with other corresponding resources in other language.
For more information, see my blog post here:

http://beyondsharepoint.blogspot.com/2009/04/locale-ids-lcid-assigned-by-microsoft.html

9. Now open up and copy the classes from mossExtension.css that are missing from the theme.css over to the bottom of the theme.css file. Some classes may be repeated so now would be a good time to do a little clean-up and remove/merge any set of classes that were duplicated inside of the mossExtension.css file.

10. Once you are done merging the classes, delete the mossExtension.css file so there aren't any confusions later on. You are only going to need the theme.css file.

Set yourself up to succeed. Now we don’t want to activate our theme and apply it just yet. Before we make it available for selection you should redefine the styles the way you want. The reason for doing this is because once you activate a theme and select it for use on a site all of the theme files (CSS and images) will get cached in IIS, making editing and tweaking your theme’s styling a nightmare. In order to see your changes you’d need to reset IIS in order to see the alterations. Even worse, if a theme is set on any of your sites an instance of the theme gets stored in the content database of SharePoint. But there is a way to avoid all of this for development purposes.

11. We’ll proceed by moving the entire MyTheme folder to the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\" folder on our server.

12. Go back to your SharePoint site in the browser, go to Site Actions > Site Settings > Modify All Site Settings, and click on the Master Page link under the Look and Feel heading.

13. Scroll all the way down to the Styling section, select "Specify a CSS file to be used by this publishing site and all sites that inherit from it", check off "Reset all subsites to inherit this alternate CSS URL" and click OK. “/_layouts/1033/STYLES/MyTheme/theme.css” and click OK.

You’re probably wondering why I reset all subsites to inherit the alternate CSS file I set. It’s because I have built out my dev environment to include all of the OOTB SharePoint Site Templates in use so I can see all of the different ways SharePoint is styled. Being able to see how elements like the datepicker, calendar, and different web parts render and tweak their styling gives me a more practical view as to how my theme will behave in the end when I’m finished.

Note: Publishing Features are not available in WSS.

Time to Customize. When you browse back to the home page of your site you will see the look and feel has been changed. Now we can begin editing the CSS and images to reflect how you want your site to look. In the effort to keep this post moving along I will cover branding different elements of SharePoint in other posts. So when you are finished styling your site you may move on to the next steps.

Add a matched preview. Now that your site looks the way you want we’ll want to create a preview image so that when a user wishes to set the theme in the browser they will have a visual reference as to what it will look like when set. By default, MOSS 2007 and WSS 3.0 have those image files for the OOTB Themes and you’ll need to create one yourself if you want to provide a complete solution. I personally cringe when i go into others environments and see that someone cut a corner and skipped creating a preview. Short-sighted if you ask me.

14. Take a screenshot of your home page (Alt + Prnt Scrn).

15. Open the image editing program of your choice (I used Adobe PhotoShop).

16. Create a new file (which should be the size of your browser window by default).

17. Paste the screenshot from your clipboard.

18. Crop out the surrounding browser window to only how the page contents.

19. Resize the image to be approximately 375 x 231 pixels (the size of the other OOTB SharePoint theme preview images).

20. Export the image as thMyTheme.gif and save it in “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\”.

I should mention that you don't have to do this all from scratch. I have gone ahead and created a Photoshop PSD file that contains all of the OOTB SharePoint theme preview images on separate layers. It also has some of the elements from the default previews (like the search box, navigatioin, web part titles, etc.) seperated on different layers so you can do color shifting and move elements to match your theme as necessary. Here you go:

Theme Preview Image PSD

Restore the default styling. In your browser go back to the top level of your SharePoint site where you set your theme.css.

21. Go to Site Actions > Site Settings > Modify All Site Settings, and click on the Master Page link again under the Look and Feel heading.

22. Scroll all the way down to the Styling section, select "Use Windows SharePoint Services default styles", check off "Reset all subsites to inherit this alternate CSS URL" and click OK.

Make your theme available. It’s time to see the fruits of your labor at work.

23. Move your entire MyTheme folder from "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\" back to the "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" folder.

24. Open "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML" file with notepad.

25. Add the following lines underneath the tag:

<templates>
<templateid>MyTheme
<displayname>MyTheme
<description>MyTheme
<thumbnail>images/thMyTheme.gif
<preview>images/thMyTheme.gif
</templates>

Note: For this lesson we’re dealing with the 1033 folder. As mentioned above, 1033 is the locale identifier for "English (United States)" which was installed with my copy of SharePoint. If you are working in another locale with another language in SharePoint there will be other folders with 4-digit numeric codes for each of the languages installed in your environment. There will be a SPTHEMES.XML file under each of the LCID directories and you’ll need to add

26. Reset iisrest by opening up a Command prompt (Start > Run > cmd) on the server, type in “iisreset /noforce” and hit enter. You should now see it say that IIS is stoping, then restarting. Once it’s finished close the window. We do this in order for the server to recognize the new theme and make them available for selection because the SPTHEMES.XML file is also cached in IIS.

Check out your theme. In your browser go back to the top level of your SharePoint site one more time, go to Site Actions > Site Settings > Modify All Site Settings, and click on the Theme Settings link under the Look and Feel heading. You should now see MyTheme available for selection in the themes list. Clicking on MyTheme should show your preview that you created earlier. Click OK and go check out your site.
Pretty simple, huh? Enjoy!

Other Resources:

Internet Explorer Developer Toolbar.
Allows IE6 and IE7 users to visually see and inspect the DOM while viewing the page, revealing the layers HTML objects with their classes and IDs in a tree view, and the properties of each. If you have IE8 then use the new development tools built in.

Chris Arella's Theme Preview Image PSD File
A layerred Photoshop PSD file that contains all of the OOTB SharePoint theme preview images on separate layers. It also has some of the elements from the default previews (like the search box, navigatioin, web part titles, etc.) seperated on different layers so you can do color shifting and move elements to match your theme as necessary.

Servé Hermans's Sharepoint 2007 theme generator

Disclaimer: Any and all code and files are supplied as is without warranty or support. I am not responsible for any problems which may arise from the use of this code or these files, so use them at your own risk. In the event you do run into issue please feel free to reach out to me, post a comment here, and I’ll do what I can to help. Files and code can be used and shared free of charge and are not for resale. Credit towards their content and value is appreciated with links back to this blog and/or my website http://www.chrisarella.com.