How to Create Sharepoint Theme

As a product that puts you on the web easily, Sharepoint provides customization to the nth level. Here, I am just mentioning one way I found out to do so.

Custom Templates: This thought came to my mind after I saw the Christmas Template done by Brightstarr. The themes can be defined as “the face of the website or a web application that adopts to certain values”.

Themes help us to select a look and feel for a particular web page by changing its colors and images used for designing. Technically, changing theme is just adapting to a new Style Sheet and imagery.

To create a new theme, copy an existing theme from the themes directory into your development machine. Incase you don’t know where you can find it; look at the following directory on your Sharepoint Server.

C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions12TEMPLATETHEMES

Use either Adobe Dreamweaver or other CSS editors and do the necessary changes on the style sheet you want to see on the webpage.

You would find two or three CSS files apart from all the images or may be one CSS files. All you need to do is find the correct Class name used in the Source Code and match it on the CSS. Do the changes required, test it. You are done.

There is a INI file which stores information about the creation and version number which is helpful. You can choose to edit the same in the following manner. Make sure you do not change anything else than Version, Title.

[info]
title=NewStyleSheetOfCompany
codepage=65001
version=1.00
format=1.00
readonly=true
refcount=0

If you want to do testing, take a view source of the Sharepoint site and save it to your development machine. You can either add a <base href=”” /> to this page or change all the URLs to point at your development machine where you have stored the CSS and Images.

Once you are done with doing the changes on CSS and Imagery, its time to put it on its way.

Edit the C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033SPTHEMES.XML file and add your theme in the following manner.

<Templates>
<TemplateID>TheDirectoryName</TemplateID>
<DisplayName>Theme Name</DisplayName>
<Description> Description of the theme</Description>
<Thumbnail>images/themethumbnail.jpg</Thumbnail>
<Preview>images/themepreview.jpg</Preview>
</Templates>

Access the Images folder here and put your Thumbnail and Preview images here.
> C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATEIMAGES

Reset IIS and Bingo! You would be able to select the new theme from Site Settings of your Sharepoint Site.