This is part 1 in a series of posts about how to create your own SharePoint theme.

When you install SharePoint, it comes with a range of themes to pick from. Each theme determines the style and formatting of pages within a site. Themes are applied per site. Navigate to a site, click on Site Actions – Site Settings (Modify all settings). Under the second column ‘Look and Feel’, click on Site Theme

You can click on each of theme and see a preview of what it will look like. Select one, click Apply and your site will adopt the new theme.

The chances are, one of themes may look vaguely similar but will not be a match for your own colour scheme. There are various solutions to create your own style and formatting for SharePoint. We will start with the easiest option – create a new theme by modifying an existing one.

Note: This method works with both MOSS 2007 (SharePoint Server, the licensed product) and WSS 3.0 (SharePoint Services, the bit that is free with Windows Server)

Step 1: Identify the theme that is closest to the one you intend to create

  1. Go to a SharePoint site and open Site Settings, click on Site Theme
  2. Scroll through the list of themes and identify which one is closest to what you intend to create
  3. Note: this does not necessarily mean the main colours such as links and text. The hardest elements to adjust are the backgrounds because they use a lot of images. Look closely at the colours used for the shaded area just beneath the tabs on the page and the background behind the Quick Launch navigation, and how Site Admin appears (we won’t be changing much here)
  4. If in doubt, I tend to start with ‘Classic’ which uses few images and has a plain background that is quite easy to adjust. It also has a simple colour scheme for admin that doesn’t need changing. ‘Simple’ is another one but I tend not to use it as it throws up a dialogue box (‘display unsecured items…’) on certain browsers. Both require extra effort on the Quick Launch navigation (quite easy to sort, that’s coming in part 2)

Step 2: Copy an existing theme into a new folder

  1. Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\THEMES
  2. Create a new folder for your theme. I recommend calling it a short word, e.g. MyTheme, this will become the name of your new theme (referred to here as newtheme)
  3. Open the folder for the theme you are planning to copy (chosen in step 1, e.g. Classic) and copy its entire contents into your new folder
  4. Within your new folder, open the file ‘oldtheme.inf’ in notepad (where ‘oldtheme’ is the name of the theme you just copied)
  5. Under the [info] tag, change the title to match the name of your new theme
  6. Under the [titles] tag, change the title to match the name of your new theme for each of the locales listed (the numbers represent the different languages supported by SharePoint)
  7. Save and close the file
  8. Rename the file from ‘oldtheme.inf’ to ‘newtheme.inf’ (where ‘oldtheme’ is the original theme you copied and ‘newtheme’ is the name of your new theme)

Step 3: Add the new theme to the list of themes displayed under Site Settings – Site Theme

  1. Navigate from the \THEMES folder to the \LAYOUTS folder (both are listed under C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE)
  2. Within \LAYOUTS, navigate to \1033 (note: this is the default language for SharePoint – US English)
  3. Within \1033, open the file ‘SPTHEMES.XML’ in NotePad. This file determines the list of themes displayed under Site Settings – Site Theme
  4. Within SPTHEMES.XML, you need to add a ‘templates’ reference for your new theme. Copy the entire contents of an existing template (starts and ends with the ‘templates’ tags into a new row within the file, and amend the properties to reflect your new theme
  5. The tag ‘templateid’ must match the name of your theme
  6. The tag’displayname’ is what will appear in the Themes list (can be more than one word)
  7. Rename ‘thumbnail’ and ‘preview’ to ‘images/’newtheme’.gif’. Where ‘newtheme’ is the name of your new theme Note: You haven’t created this file yet, that’s coming in Part 2.
  8. Save and close the file
  9. Open a command line and run ‘iisreset’ to restart IIS and SharePoint
  10. Open a browser and navigate to a site within your SharePoint deployment. Go to Site Settings Site Theme and your new theme should now be listed (with a missing image for preview and thumbnail)

That’s it. The first stage is complete. You have a fresh theme waiting to be modified to include your own style and formatting. The next stages are to modify the .css files, specifically theme.css (within your new theme folder) and core.css (affects all themes within your SharePoint deployment)

References: