Themes

MOSS 2007 – Creating and adding custom theme

To give the same look and feel on any SharePoint site, custom Theme is the way to go.
You can easily create custom Themes for your SharePoint site by following the steps below.

A SharePoint site theme consists of three files

1. Theme.inf
2. Theme.css
3. Image files.

Theme.inf file represents the title of the Theme which will appear in your SharePoint Site Themes list.
Theme.css is a stylesheet file that defines styles, colors, images, logos and layouts of a site and image files can be referenced in the style sheet to display on SharePoint Page.

Give below are the steps to create a site theme called “MyTest”

1. Copy any theme folder from “C:/Program Files/Common Files/Microsoft Shared/web server extensions/12/TEMPLATE/THEMES” folder and paste it in the same directory

For this test, let’s say you have copied the folder called “Simple”

2. Rename the folder you just copied to “MyTest”

3. In the MyTest folder, rename SIMPLE.INF file to MYTEST.INF in upper case.

4. Open MYTEST.INF file with notepad.

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

6. Replace every word, Simple, under [titles] with MyTest.

7. Open “C:/Program Files/Common Files/Microsoft Shared/web server extensions/12/TEMPLATE/LAYOUTS/1033/SPTHEMES.XML” file with notepad.

8. Add the following lines under <SPThemes> tag:
 <Templates>
  <TemplateID>MyTest</TemplateID>
  <DisplayName>MyTest</DisplayName>
  <Description>MyTest Theme</Description>
  <Thumbnail>images/mytestimage.gif</Thumbnail>
  <Preview>images/mytestimage.gif</Preview>
 </Templates>

Remember that preview and thumbnail image paths are images/mytestimage.gif. But infact we do not have these images yet.

9. In order to display thumbnail and preview images 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 mytestimage.gif name. You can easily change the mytestimage.gif file name if you change the thumbnail and preview file names in <Templates> tag.

10. Perform IIS reset to get access to new theme

Now if you go to Site Settings -> Site Theme you can find theme called MyTest in the list.