TIPS on: Customizing SharePoint Themes (overriding left over properties)

While customizing SharePoint themes you will most likely run into problems if you remove backgrounds, borders from the theme.css. The problem being that they still they display after you removed them!

Your site is reading from multiple stylesheets namely OWS.CSS (Also SPS.CSS in Portals case) and Theme.CSS.

These stylesheets often have the same classnames but with different properties so what happens is it finds the property in one but not the other and applies it.

This means you must overwrite the property in the Theme (or the last stylesheet) being read by the browser.

The following example is the same for many elements you might want to customize in a SharePoint theme.

An example of this would be:

Have you ever tried customizing a SharePoint theme to edit the top of your site? The bar that has the logo and links across the top, documents and lists, create etc?

There are actually two separate classes which are applied to the elements in the top bar. The whole table up there has ms-bannerframe applied to it. Realistically the only area ms-bannerframe will noticeably affect is the area behind the logo in the top left.

The link bar and ‘up to’ has ms-banner applied.

If you were to apply an image or colour to ms-banner and not ms-bannerframe you would end up with two separate background images across the top.

If you were to remove the background-image from ms-bannerframe it will end up finding one in OWS in the long run.

If you are using a background image you need to apply it to both these classes. If you want to use a straight colour then you will want to put background-image:none; in your ms-bannerframe class (in the theme.css).

Another example would be ms-selectednav and ms-unselectednav. This is the class applied to the items you pick in the quick launch bar. These have a border/background colour in OWS.css so if you remove them from your theme.css they will still show up. Instead of removing things try using background-image:none; or border:none; in your theme.

A very simple but effective tip.

You may also like...

I would love to hear from you.

%d bloggers like this: