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 Files/Common Files/Microsoft Shared/web server extensions/12/TEMPLATE/LAYOUTS/1033/STYLES/YOURCUSTOMFOLDERHERE
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 Files/Common Files/Microsoft Shared/web server extensions/12/TEMPLATE/IMAGES/YOURCUSTOMFOLDERHERE

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

View of the file structure on the web server



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