SharePoint 2007 Design Tip: Import your CSS for SharePoint Themes

One of the major drawbacks of SharePoint themes is you have to reapply the theme to any site that uses your custom theme in order to see any new changes that you have made.  This happens because when you apply a theme to a SharePoint site, a copy of the theme is added for the site in the content database. 

Try it out, open a test site in SharePoint Designer and look at the folder structure in the Folder List task pane.  If you have already applied a theme to this site, you will see a _theme folder. If you have not applied a theme to this site, then this folder will not appear.  Expand the folder and you will see a single sub folder named the same as your theme.  Now go and change the theme the site uses through a browser.  Return to SharePoint Designer and hit F5 to refresh the Folder List.   The _theme folder will appear if you didn’t have a theme applied the first time, and the sub folder under this directory will change to reflect the theme you just applied.

When you make a change to the theme files on the web server, it does not update any copies of the theme that live in the content database.  When you apply a new theme in the browser, it replaces the copy in the content database with a new theme.  That is why you have to physically reapply a theme when you make changes, you have to replace the theme copy in the content database.

From a development perspective, the theme copy in the content database is rather handy.  If you update any of the files in the content database (by changing the CSS files in SharePoint Designer and importing in new images), the changes automatically appear in the browser. Woo-hoo! This just made life easier when it comes to developing themes.

But after you finish up development, you are stuck back with the problem of how to update your theme in the future, especially if it is applied to several sites.  This is where this trick comes in.

Import CSS to Create Editable Themes

Create a copy of the final theme.css file and store it in another location on the web server, such as:
C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033STYLESYOURCUSTOMFOLDERHERE
You can even rename the file, it no longer needs to be named theme.css.

Open the original theme.css file in the custom theme folder, delete out all of the contents, and add an import rule for your new CSS file:
@import “/_layouts/1033/styles/YOURCUSTOMFOLDERHERE/theme.css”;

Save the file and deploy your theme (add text to SPTHEMES.xml and reset IIS).   Apply your new theme to the site.  Now go to the new CSS file in the Styles folder and make a change.   Refresh your browser.  Your change will appear.  That is cool.

By moving around your files and using the import rule  you can create a theme that you can update without reapplying the theme to every site that uses it.  Be sure to update your image paths in your CSS styles to a location where you can edit the images as well, such as:
C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATEIMAGESYOURCUSTOMFOLDERHERE 

Below are a couple of screen shots for the end result of this method.

View of the file structure on the web server

Image showing file structure on the web server

View of the theme folder and the theme.css file that is still in the theme folder

Image showing custom theme folder and custom theme.css file

 

18 thoughts on “SharePoint 2007 Design Tip: Import your CSS for SharePoint Themes”

  1. Hi,Great info. I am trying to figure out, what if I have the French language pack installed, 1036, and I would like to have that refected. Is there a [~currentCultureCode] or a folder structure within the theme to store the different values ?Thanks,–Robert

  2. Hi Heather,Great post! I have a question, what is the best way to change the search button image in the top right or any other image that comes directly from the 12 hive layouts/images folder without editing it? I am trying to find a way to do this using css themes or the masterpage but there doesn’t seem to be any way. I don’t want to edit the file directly because it will change it for ever site in the collection, so I was wondering if this is something you’ve ever had to tackle in the past?Thanks,Neil

  3. Interesting, but doesn’t this approach become brittle on a multi-WFE farm environment? That is to say, if you’re directly editing files on a single server, how do you make these changes across all the WFEs in your farm? And what about backup? stsadm -o backup backs up the content database, not the file system, right? So, if you have a catastrophic failure, and you need to restore using stsadm -o restore, your theme that lived on the file system is gone.Or am I mistaken?

  4. You don’t mention it explicitly, but you also have to move the other theme files (GIFs, JPEGs etc.) to the location where you have stored the original Theme.css. This is because Theme.css references those files in a relative way.

  5. hey:) I’m trying to implement this method for importing themes, but after creating a theme, using the import statement, adding values to spthemes.xml, run iisreset and applying the new theme on my subsite, I still can’t get the theme to function. Can you help me out with some checkpoints? If I do a simple “view source” I can’t find the link-statement to include the theme.css…….love your blog by the way!!!!

  6. Heather,Do you have or plan to show a fully worked example of common site design customisation for MOSS 2007 Team Site, such as custom logo and header, for example, just like the one you have already done, shown in ‘How to Create a Theme in Windows SharePoint Services v2’?Could you expand or add to ‘SharePoint 2007 Design Tip: Import your CSS for SharePoint Themes’ as this was the closest example I could find? Previously I have customised a WSS 2/3 using the following examples with great success. I just can’t find examples that work through on customisation for MOSS 2007.A Quick Way to Add/Change the SharePoint Header Area Graphic http://heathersolomon.com/blog/articles/166.aspxSharePoint CSS Tricks: Shift the top tool navigation to the left http://heathersolomon.com/blog/archive/2006/05/22/5646.aspxAdventures in CSS: Putting a banner image above the menubar in WSShttp://weblogs.asp.net/bsimser/archive/2005/12/19/433512.aspxCreating a Site Definition from an Existing Site Definitionhttp://msdn.microsoft.com/en-us/library/ms868598.aspxThese are great examples too: How to Create a Theme in Windows SharePoint Services v2 http://www.heathersolomon.com/blog/articles/Create2003Theme.aspxSharePoint 2007 Design Tip: Import your CSS for SharePoint Themeshttp://www.heathersolomon.com/blog/archive/2008/01/30/SharePoint-2007-Design-Tip-Import-your-CSS-for-SharePoint-Themes.aspx#feedbackYou are the SharePoint ‘Oracle’! ThanksSteve

  7. Hi,Great Post!We created a custom theme for our organisation. And we have a farm with two WFEs and one central admin server. We copied this custom theme on all three servers. And we removed other available themes from SSPTHEMES.XML file. But when I create a new site collection fusing this custom theme the images are not applied to it. And when I open it in designer I see onle the css file in _themes folder, all the images are not there. But sometimes it copies all images and works perfectly. I am not able to figure out why it doen’s picks up the images some time from custom theme folder. Is tehre any setting which may be different on different servers? ThanksArpit

  8. It appears that one needs to update the version of the template file at the .INF file in order to force Sharepoint to create a new temporary .css file.Open your TEMPLATE.INF file and update…[info]title=My Themecodepage=65001version=1.12 <—– … thatformat=1.12 <—– … and thatreadonly=truerefcount=0Hope I have made the life of someone less miserable albeit just the fact of using Sharepoint will automatically deny that. :)Cass

  9. So basically we’re undoing the convenience of being able to install all the stuff in one spot. Thanks Microsoft!

  10. Nice solution Heather!Just to Will’s question, if you create a wsp package for the above theming approach and deploy using stsadm commands then it will be deployed across your farm.

  11. This post was a great help and I’ve used it in a project.However I’ve noticed that there is a problem when defining custom styles for the html editor (E.g. .ms-rteCustom-MyBulletList – http://panvega.wordpress.com/2009/05/26/custom-css-styles-in-the-sp-richtext-editor-dropdown/).For some kind of reason the the html-editor does not pick up the custom styles when using the import rule. If I put the styles directly in the css of the theme everything works fine.Anyone have the same experience or a solution for this?

Comments are closed.