Custom Site Theme for SharePoint 2007 (MOSS 2007) and WSS 3.0

The easiest and the fastest way to apply the same look and feel on any SharePoint site is creating a site theme. A SharePoint site theme basically consists of theme.inf, theme.css, and image files. Theme.inf file simply represents the title of the theme. Theme.css is a stylesheet file that defines colors, header images and layouts of a site and image files can be referenced here to display on the page. By creating a custom site theme, you can easily change the style but in fact, writing and editing the stylesheet can be somewhat chanllenging when you have more than a hundred of elements to deal with.

Here is a short procedure of creating a custom site theme named "Ghost":

1. Copy any theme folder in "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES" folder and paste with its name replaced with "Ghost". In this example, copy GRANITE folder.

2. In Ghost folder, rename GRANITE.INF file to GHOST.INF in upper case.

3. Open GHOST.INF file with notepad.

4. Change the value of title under [Info] to Ghost.

5. Replace every word, Granite, under [titles] with Ghost.

6. Open "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033SPTHEMES.XML" file with notepad.

7. Add the following lines under tag:

Ghost
Ghost
Ghost theme.
images/thghost.gif
images/thghost.gif

Notice that preview and thumbnail paths are images/thghost.gif. By default, MOSS 2007 and WSS 3.0 will not have such image files.

8. In order to display thumbnail and preview correctly, you will need to capture the screen and save the file in "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATEIMAGES" folder with thghost.gif name. You can change the .gif file name if you change the thumbnail and preview file names in tag.

9. Do an iisrest for the server to recognize the new theme.

Pretty simple procedure. Now you are ready to test your new theme. In Site Settings, you can now choose Ghost theme; however, the theme will not differ from Granite theme. Now, it is time for you to play with theme.css file!