NOTE: This is for the OLD version! For the new and far better version, see this post.

With the improvements to the security model in WSS 3.0 and the addition of blog and wiki site templates many more people are using SharePoint for public facing sites. Usually, they will want to brand the site and radically alter the look and feel of the site to make it look like something very different from the default often with the goal of obscuring the underlying SharePoint as much as possible. There are two common approaches to meeting this goal. You can use cascading style sheets and you can alter the actual pages via master pages and content pages. For a serious branding effort you will usually do both.

There are a number of approaches you can take to affect the styles. You can override styles using content editor, you can use the AlternateCSS attribute in the site's definition, you can attach a style sheet using SharePoint Designer, you can place html <link> elements in your master pages, and you can create themes. Each of these approaches has its advantages and disadvantages depending on your requirements, but in my opinion the latter is the most robust option. I will expound on why I believe this in another post. The topic of this post is a tool I created to make skinning a site via css or a custom theme much easier.

If you have attempted to override the styles on an out of the box SharePoint site, you know that it isn't a very easy thing to do.

The core.css file that contains the basic rules has 979 different style rules.

The core.css file uses a palette of 132 colors and 143 images.

The default page of a newly provisioned team site uses only 61 of those rules.

So, unless you have branded a lot of SharePoint sites and are intimately familiar with core.css and the default master pages and page layouts, just figuring out where to start modifying can be a daunting task. With SharePoint Skinner you can create new styles by altering existing styles in a WYSISWYG fashion. If you are not expert in writing CSS I recommend complimenting Skinner with a good style builder like the one included in most versions of Visual Studio including the free Visual Web Developer Express Edition. I also recommend the free Internet Explorer Developer Toolbar to help find those hard to locate style elements. Skinner includes an inspector tool that helps with this, but the toolbar is a great help when the built in inspector comes up short!

You can download the installer here. Once you've got it installed, come back and read the next posts to learn how to use it.