CSS – Updating SharePoint Design

by Stefan on 30 Dec 2009

Branding of SharePoint sites (changing the design to make it look unique and fit the purpose of the site) is one of those topics you can (and need to) read a lot about. Part of the process (which this posting is about) is changing a design, in other words: you have created a page layout and it has been published, and now you need to make changes.

Heather Solomon published a very good write-up about the big trap involved and what to do about it: when you apply your custom design to a site, SharePoint takes the style folder with yourCustom.css file and creates a copy yourCustom.css file in the SQL DB for each site it is applied on. So when you have made changes to the original yourCustom.css file you need to replace its copies on each of those customized sites with the updated file.

The easiest way to accomplish updates is using the following setup from the beginning:

1) Place yourCustom.css file in a folder that is accessible from all sites, e.g.,
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1031\styles\yourCustom.css.

NOTE: This would be the setup for a German speaking site. For U.S. replace 1031 by 1033.

2) In the folder containing your customized design (and which will be copied), i.e.,
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\THEMES\YourTheme\
place a theme.css file with the following content only (yes, just this one line):

@import “/_layouts/1031/styles/yourCustom.css”;

The bottom line is: You don’t have to worry about any SharePoint mechanics here – you use standard CSS technology by importing an external css file each time a pages is called. This way any design change is applied the moment you update the one original css file.

No TweetBacks yet. (Be the first to Tweet this post)
Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • MySpace
  • Slashdot
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post: