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

Recently I shifted to SharePoint 2007, after working with ASP .Net for more than couple of years.

When it's about developing a web application, the first thing all concentrate is on the UI part of it. Everyone wish to see his/her site with some good UI elements. The SharePoint 2007 gives you more flexibility by introducing the concept of Themes. (Now a days ASP .Net also does support Themes).

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
• 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 challenging 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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" 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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.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 Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES" 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 iisreset 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!