Understanding SharePoint Styles

A little more on SharePoint Styles and the way CSS works.

I have tried several variations of style finders for SharePoint in the past. Most recently Todd Bleekers. These are great little tools that can tell you what class/id is being used.

Before you begin customizing however you should be aware of the basic cascading rule of style-sheets and the style-sheets which SharePoint (SPS and WSS) reference.

SharePoint references several style-sheets at any given time by default.

Windows SharePoint Services for example references the OWS.CSS style-sheet by default. If you apply a theme to your WSS site it then also makes a reference to the theme.css file. The theme.css file also appends several color.css files to it (To create that theme1011-109.css file in case anyone ever wondered what the heck it was). Not to mention your menu.css file which controls the drop-down menu styles like the modify shared page.

SharePoint Portal Server has the SPS.CS equivalent by default but you can create WSS sites under SPS so you also have an OWS.CSS. Then you have all the extras in there as well.

By now this should be putting things into perspective. At any time you can have several style-sheets referenced and this is where problems can arise:

These style-sheets contain several of the “same” selectors, ie: The class ms-yourclass could be in 2 or 3 different stylesheets, all of which may be referenced.

It is also possible that the same selectors may be duplicated within the ‘same style-sheet’.

The final thing to point out is that there are several selectors combined in the style-sheets if you change the properties for one you change them for them all.

Ok so why am I saying all this?

The reason I say this is it’s quite possible you will use this utlitly to locate and change a style only to find out it didn’t change and then (virtually) scream at Todd. Before you start screaming however you need to understand why it didn’t change.

This is where the basic cascading rules come into play.

Stylesheets are referenced and read in order. This means if you reference 2 style-sheets in your document the second one will take precedence over the first and over-ride any styles which were the same.

It also means if you have 2 of the same classes in this file the second one will over-ride the first. Then there are inline styles (styles put directly into the mark-up). Those take precedence over all others.

The biggest one is that you may have two of the same classes in two different style-sheets BUT there may be an extra property or two in one that’s not in the other.

There are other little things such as telling a property to be !important or using which can force precedence but that is not usually an issue within SharePoint styles.

So all that being said, if you change something and it doesn’t take maybe it’s referenced in another style-sheet.

These are a few things to take note of when using style-finders. Perhaps a future enhancement would be to display the stylesheets which the documents reference and in order as well.

Food for thought.

You may also like...

I would love to hear from you.

%d bloggers like this: