Creating a Global Theme using a single CSS stylesheet

Lately I've been working on a lot of SharePoint branding – for MOSS and WSS. For a consistent user experience, we need to brand the application pages too (/_layouts/…), so we create a custom theme.

There are many other articles about creating custom themes:

• Create a custom theme for WSS v3 or MOSS 2007 (http://weblogs.asp.net/danlewis/archive/2008/06/12/create-a-custom-theme-for-wss-3-0-or-moss-2007.aspx)
  


• (MSDN) How To: Customise Themes (http://msdn.microsoft.com/en-us/library/aa979310.aspx)
  

One of the pain points with developing your own theme comes when it has been rolled out across many sites, and then a snag is spotted, or something needs to be changed. The theme has to be updated, and re-applied everywhere it was used (since applying a theme in a site takes a copy of the CSS and supporting files and stores it in each site). Imagine having to do that across 50+ sites – it is certainly something that can make you cry.

To get around this, and allow us to make global changes post-deployment, I use the following method.

1. Copy an existing theme, and make the necessary changes to the files to make it your own and customise the CSS (the above articles cover this) – and there is a theme generator out on the web: (http://hermansberghem.googlepages.com/themegenerator.htm)
   
   
2. Somewhere in the root of your SharePoint system, create a blank CSS page – "MyTheme.css".
   
   
3. Cut the CSS from your new theme on the server, and paste it into MyTheme.css.
   
   
4. Go back to your CSS sheet on the server, remove all the text from it, and enter only the following line:
   @import:url('/MyTheme.css');
   


5. Save + Reset IIS
   

Presto – now, all your custom theme does is look at a single parent style sheet in the root of your SharePoint system. This means that even after it's been deployed across many sites, we can make a change to the parent style sheet and see it reflected everywhere.

Hope this helps…davros.