SharePoint Branding: Themes vs Style Sheets vs Relative CSS

Introduction

In order to apply CSS to a SharePoint site (this includes WSS 3.0) there are a number of options. This article will discuss the pro’s and con’s of each and I am really interested to see what other people might be using, since we often have this discussion at work.

The three basic methods are:

1. Creating a SharePoint theme and embedding the CSS that you would like to use in the theme so that it may be selected by users from the Site Settings on each site, see below
   

   Users can select from a number of themes

2. Creating a style sheet (anything with a .css extension) and then specifying it as the Alternate CSS URL in Site Settings->Site Master Page settings,see below:

Specifying an alternate CSS file

<link rel="stylesheet" type="text/css" href="/_layouts/styles/mystyle.css"/>

Comparing the Approaches

So which approach should you use, well lets look at the advantages and disadvantages of each.

Creating a Theme

Advantages

1. Allows users to easily select the theme in a familiar interface regardless if they are on a site with the Publishing Infrastructure enabled (such as the out of the box Collaboration Portal) or not enabled (such as a team site)
2. Can quickly and easily change themes if a user requires.
3. Can use the Alternate CSS URL for any quick fixes if need be.

Disadvantages

1. Added programming effort of creating a theme,(have to create an XML file and requires an IIS Reset)
2. Themes are NOT automatically propagated to sub sites when a new sub site is created. So if I have a Site Collection with a number of sites that already have my theme applied any new site will NOT have that theme automatically applied, a user will have to configure it themselves.

Specifying an Alternate CSS URL

Advantages

1. All sub sites created will inherit the Alternate CSS URL, hence they will have the CSS applied automatically. This is in direct contrast to the theme which will have to be configured.
2. Users can easily change the .css file through SPD or the front end of SharePoint and see these changes propagated.

Disadvantages

1. In sites without the Publishing Infrastructure enabled there is no way through the SharePoint interface to specify an alternate CSS URL so for things such as Team Sites you have to enable the Publishing Infrastructure feature to allow users to do this from the user interface. Of course this creates a lot of overhead and document libraries which you don’t necessarily want.

Relative CSS

Advantages

1. In order to change the CSS a user can simply change the CSS on the document library where it is stored.

Disadvantages

1. Real pain to have all these references in Master Pages and then in Page Layouts. Could be a real mess when you try to trace the css to see what is going on.
2. Cannot easily change the CSS file or add a new CSS file unless you redo every single Master Page or Page Layout that the link resides on…this could be time consuming and undoubtably will lead to errors.

Some tips!

In my mind branding should always be implemented in themes. For starters a user can quickly and easily change the theme if the want to..especially in team sites. By having an alternatve CSS specified you force your team site users, which will far outnumber publishing sites, to place extra overhead simply to specify a CSS file.

So thats my opinion but I am sure that it will differ from people but hopefully this has outlined some of the issues that you could face.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.