SharePoint Themes in WSS 3.0 - some tips

While working on the intranet portal for my client using WSS 3.0, we came across situations where the client web redesign was happening frequently and we had to change the theme accordingly. We had 30 + site collections and total of 120 sub-sites in all… This count would increase to double within a year or so!

Whenever redesigned, we had to apply it for all the sites!

The approach we had followed was to have a master page and theme, which would suffice our User Experience needs.

A feature scoped at site collection was created and activating this feature would set the custom master as the default master to the root site and all its sub-sites. Referred this post to implement this - http://blogs.msdn.com/b/navdeepm/archive/2008/05/04/changing-masterpage-programmatically-for-site-collection-and-sub-sites.aspx

Coming to setting the site theme similar to the master page. Setting theme at each sub-site level is a tedious job :). So we came up with a feature similar to the above, which would set the custom theme for all the webs in the site collection.

Programmatically setting theme

SPSite site = new SPSite("");
SPWeb web = site.OpenWeb();
web.ApplyTheme("");

So in the feature activated code of the feature receiver, the above code was used to set the theme.

Now the issue that we faced due to our requirement for frequently changing of design/theme, even though the SharePoint theme files are stored in the 12 hive, once a theme is applied, SharePoint stores a copy of the css file (theme file) in the content database: 
(the link to the file is as something below)

"/_themes/Intranet/cust1011-65001.css"

So if you update the theme file in the 12 hive, the same doesn't get refreshed until we apply the theme again. i.e. in our case activate and deactivate the feature to set theme.

So the alternative we developed was to use a custom css file, the link to which goes from the theme css file.

Details:

In the theme.css file in the theme folder, instead of giving all the css styles, we gave a link to the custom css file, placed in the layouts folder. Ex: @import url ('/_layouts/customtheme.css');

So now our theme files in turn points to the customtheme.css file.

Even though SharePoint still refers to cust1011-65001.css, in turn it will be getting the css styles from our customtheme.css.

Whenever the new theme is created, we just needed to upgrade the customtheme.css and automatically the new styles would reflect on all the sites. Because the theme css is in turn referring to the custom theme file in 12 hive!