SharePoint 2007: Create and manage custom theme in a flexible way

Recently I started to create a custom theme. As you may know, when you change the theme of a site, SharePoint will get a copy of the chosen theme and place that in the content database.
And that is exactly not what I was looking for. I just want to have one single place where my custom theme is located so I can easily manage and change the theme. This will affect than all sites that are (already) using my custom theme.

Here is how to do this:

1. Go to 12-hive\TEMPLATES\
2. A good starting point is to make a copy of an existing theme that’s close to what you want to have. For example make a copy of the VINTAGE folder.
3. Rename it to e.g. MYCUSTOMTHEME.
4. Inside this folder, rename the VINTAGE.INF file to MYCUSTOMTHEME.INF.
5. Open this MYCUSTOMTHEME.INF and replace all ‘vintage’ text into ‘mycustomtheme’ (without quotes).
6. Add an entry for the MYCUSTOMTHEME in the SPTHEMES.XML
   

   
   <Templates>
    <TemplateID>mycustomtheme</TemplateID>
    <DisplayName>My Custom Theme</DisplayName>
    <Description>This is my cool customized theme</Description>
    <Thumbnail>images/thmycustomtheme.gif</Thumbnail>
    <Preview>images/thmycustomtheme.gif</Preview>
   </Templates>
   

   
   (Note: the thmycustomtheme.gif image can be created when you are done with customization of your theme. Place this file on 12-hive\TEMPLATE\IMAGES\)


7. Instead of leaving the theme images and stylesheets inside the MYCUSTOMTHEME folder (12-hive\TEMPLATE\THEMES\MYCUSTOMTHEME) we need to move the images and stylesheets to be able to edit and see our changes immediate.
   a). Create subfolders called MYCUSTOMTHEME inside the following folders:
   i. \12\TEMPLATE\IMAGES\
   ii. \12\TEMPLATE\LAYOUTS\1033\STYLES\ (note: 1033 is dependent on your language)
   b). Move all images from the 12\TEMPLATE\THEMES\MYCUSTOMTHEME to 12\TEMPLATE\IMAGES\MYCUSTOMTHEME.
   c). Move the theme.css (and when using MOSS, mossExtensions.css) to \12\TEMPLATE\LAYOUTS\1033\STYLES\MYCUSTOMTHEME\. These two files you will use for your customizations.
   d). Go to 12\TEMPLATE\THEMES\MYCUSTOMTHEME\. There is one file left (mycustomtheme.inf).
   e). Create a new (text)file, called theme.css and open it.
   f). Add the following lines of code:
   

   
   @import "/_layouts/1033/STYLES/mycustomtheme/mossextensions.css";
   @import "/_layouts/1033/STYLES/mycustomtheme/theme.css";
   

   
   g). Now, when you set a site theme to your ‘mycustomtheme’, the theme.css you just created (with the import statements) are stored in the content database, but the site will use the the css-files on your file system. Now you are ready to edit your css files.
8. Remember to refer to the images like: url(“/_layouts/images/mycustomtheme/)

The following pictures shows where the customtheme folders are located:

Site Tips: Branding SharePoint (WSS3.0 and MOSS2007)

Yesterday I started with branding SharePoint for one of our customers. Creating a custom theme is not that easy as it should be. I will come back later on that.
I found some useful sites on the internet. I want to share this one in particular with you:

• http://www.heathersolomon.com/content/sp07cssreference.htm

This is a nice overview of the used style elements in SharePoint sites. You can easily find the corresponding element that are used in the stylesheets ( e.g. .ms-topnavselected) by using the index or screenshots.
The main site, http://www.heathersolomon.com/blog/articles/sp2007.aspx, shows a lot of information about the structure and customizations of sites.

Div width in IE and FireFox

Today I run into a strange problem. I was setting up the width property of a <div> container on a web site. I always test my sites on both IE and FireFox. But it seems that they render the width property differently. I put it together in the following picture:


As you can see, if you set the <div> width on 775px, in IE the actual width is 775px, including margins and paddings.
FireFox (and also Google Chrome) behaves different. The width property is for them only for the element, without the margins and paddings. They added their size onto the actual width as well.

To get you site behaving the same in both IE and FireFox, you can add some nasty css tricks or just put the following line just before the <html> tag on your (master)page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This doctype declaration will let behave IE as FireFox (and Google Chrome) does.

And again, IE (I'm using IE8!!) is wrong and not following the W3C standards. Read about the formatting model here how a browser needs to deal with element width and box width.