SharePoint Customization and Branding

I found a really good SharePoint related site from a consultant in called Clever Workarounds. I read through his four part series on SharePoint branding and made some additional experiments.

Whenever you want to change look and feel of a website, you normally want to adjust the CSS files that control it. Cascading Style Sheets are relatively straight forward and seem to behave logically. For example, you can have multiple definition of a paragraph and whichever style is applied last wins. It would seem that if you added your own CSS link, tweaked the settings you want, you wouldn’t make any changes to the preinstalled files. That way, patches and upgrades wouldn’t destroy your work - simple, right?

However, SharePoint has a big problem with this. The key problem with custom branding for SharePoint is that a large part of the functionality in SharePoint is defined by the CORE.CSS style sheet. No problem, right? You just need to add another CSS file below it in the header, and you’re done. Well, actually, it is not that simple. Unfortunately, the way that SharePoint builds the pages, the CORE.CSS file is always last - thus making it always be dominant.

Looking at the Clever Workarounds pages, it looked like getting around that would be very, very complicated. However, in reading the comments, there seemed like their might be a good way around it. Here is the comment (edited slightly for length):

Remember the Cascading part of cascading style sheets and the specificity of each rule. It doesn’t matter if your css rule appears before or after core.css If you want your rule to win you make it more specific. I have used this approach since SharePoint 2001 and have never had any problems. I place a unique, short ID attribute on my body element in the master page. Example Then when I find a rule that I want to override that core.css is currently rendering I create a duplicate rule in my stylesheet but place #dm in front of the rule. So for example .ms-WPHeader in core.css becomes #dm .ms-WPHeader in my stylesheet. Now that I have a more specific rule my style rule wins. Works every time … and it requires no custom code or major modifications to SharePoint.

So, I gave this a shot:

• You create your own CSS page and link to it.
• At the body level, inside a table tag, or whatever makes since, add the ID tag (the commenter used DM for his example but it can be anything)
• View your pages and see what CORE.CSS styles need changing
• The internet explorer Developer Toolbar is very useful for this
• In your custom CSS page, create rule with the same name and add the #ID in front of the definition
• Save and refresh – repeat as necessary.