Customized Theme in MOSS 2007

Customized Theme in MOSS 2007

Windows Sharepoint Server (WSS) and Sharepoint Portal Server (SPS) both ship with several built-in themes, giving you the ability to change the look and feel of a site quite dramatically. Choosing one of these themes is simply a matter of clicking on the “Site Settings” link in the upper navigation and then “Site Theme” under the “look and Feel” header. On the “Site Theme” page you should see a list of available themes on the right. Click on one of these themes and you’ll see a preview on the left of the page. All of the themes available for use on a SharePoint server are stored beneath a single folder named “THEMES“. This folder contains a unique folder for each theme: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES.
To create a theme, start by creating a new folder with the images and CSS files that make up the theme. Here are the steps to create a new theme called “MOSSTHEME″:
Here is a short procedure of creating a custom site theme named "MossTheme":
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 "MossTheme". In this example, copy GRANITE folder.
2. In MossTheme folder, rename GRANITE.INF file to MOSSTHEME.INF in upper case.
3. Open MOSSTHEME.INF file with notepad.
4. Change the value of title under [Info] to MossTheme.
5. Replace every word, Granite, under [titles] with MossTheme.
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:
'<' templates '>'
'<'templateid'>'MossTheme '<'/templateid'>'
'<'displayname'>'MossTheme '<'/displayname'>'
'<'description'>'ossTheme '<'/description'>'
'<'thumbnail'>'images/ MossTheme.gif'<'/thumbnail'>'
'<'preview'>'images/ MossTheme.gif'<'/preview'>'
''
Notice that preview and thumbnail paths are images/MossTheme.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 MossTheme.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 MOSSTHEME; however, the theme will not differ from Granite theme. Now, it is time for you to play with theme.css file!

Posted by Karun at Wednesday, May 07, 2008