Creating a SharePoint Custom Theme

// January 22nd, 2010 // Development, SharePoint

Microsoft’s information on creating a custom theme is a good start, however there are things that you will come across that are not covered here.

First, copy a theme that approximates what your envisaged theme will look like from your C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES directory, and rename it to what you want. This folder contains css files, image files, and an INF file.

Next, rename the INF file to the same name as your folder. Then open and replace the name of the theme it was copied from with the name of the new theme.

Now, to get the theme available in the options of the site you need to add a template definition to the SPTHEMES.XML file in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033.

1
2
3
4
5
6
7
<Templates>
   <TemplateID>mytheme</TemplateID>
   <DisplayName>My Theme></DisplayName>
   <Description>Description</Description>
   <Thumbnail>images/myPreview.gif</Thumbnail>
   <Preview>images/myPreview.gif</Preview>
</Templates>

Once all the above has been done it is time to customize the styles in the copied folder.

Styles

SharePoint also uses a Core.css file to style the site, and you will most probably need to overrite these styles. You can modify the core.css directly, but ff there are any upgrades of sharepoint then this file will be replaced, so any changes will be lost. Instead you are better off finding out the class/id of the element, revise the css in your themes css and add !important to any changes, therefore overriding the core.css.

What element is what?

Microsoft list their clases in core.css however, they assume you know what each desciption relates to. Insteand a great help is heather solomon’s reference chart for SharePoint 2007.

Caching

During the development you will find that changes you make to the style will not be updated from refreshes. Our old friend caching again. However, this is not the case of clearing the browser cache, but rather the cache that SharePoint creates.

What you need to do is first change the theme to something other than what you are working on and apply it.

Next, create a batch file (“clearcache.bat”) and enter this line:

cscript.exe c:\windows\system32\iisapp.vbs /a "Application pooll name" /r

In my case it is like this:

cscript.exe c:\windows\system32\iisapp.vbs /a "SharePoint - 80" /r

Now run the batch file.

Once that is done, change theme back to what you are working on.

OR you could download a SharePoint skinner hehe.

Leave a Reply