Client-Side Alternate Style Sheets in SharePoint

One of the great things about modern browsers like Firefox 2.x and IE8 (finally) is the support of CSS 2.0+ standards as set forth by the W3C. Particularly for this discussion, we're looking at alternate style sheets which allow web developers and designers the ability to give end-users presentation choices. For instance, you can set a default stylesheet to render on the page when a visitor first arrives at your site. Here would be the link to that sheet in the head of the page:

  <link rel="stylesheet" 

  title="Normal (centered, fixed)" 

  href="/Style%20Library/main_blue-gray.css">

Alternative Styles can be offered by adding the following:

  <link rel="alternate stylesheet"

  title="Calssic"

  href="/Style%20Library/classic.css">



<link rel="alternate stylesheet"

  title="Modern"

  href="/Style%20Library/modern.css">



<link rel="alternate stylesheet"

  title="Plain"

  href="/Style%20Library/plain.css">

If you notice, the default is set because the rel="stylesheet" and the alternates are rel="alternate stylesheet". The number of alternates is infinite and you simply by adding more elements with the appropriate REL and TITLE attributes in the header. Also note, groups of links with the same TITLE are automatically combined into one style sheet.

So how does the end-user choose alternate styling? Simple: it's available in the menu. Here is a look at IE8's menu.

Here is Firefox's functionality.

You're probably wondering why would this be useful in SharePoint? Whether it is a internet, intranet, or extranet, this gives organizations a way to support their user's to have personal experiences. This may not make sense for every situation, and not every company is going to be willing to put in the effort, but it does make a statement about an organizations support for it's culture to enjoy individuality.

A business case has been proven to have alternative style sheets, now you may be wondering how we would implement it in SharePoint? Simply adding the links to the head can have mixed results depending on how the styling has been approached. For instance, if your CSS is only reference in the master page, then you run the risk of a theme or other alternate CSS set in the UI (Site Actions > Site Settings > [Look and Feel] to override your styling. So decisions need to be made as to what is going to be the dominating stylesheet. If you do not have anything set for the Alternate CSS URL and only reference your CSS in the master page, then your application pages (.../_layouts/...) will not be styled. So you'll want to at least do that. That CSS file is rendered right after the core.css as expected.

But what if you are working with themes? Well, what happens is a theme will override your alternate CSS URL set in the UI. So now what? How do you make client-side alternative stylesheets available? Simple, you break the rules. I have found that if I add CSS links after the opening body and before the form tag, I am able to override any CSS SharePoint will render.

So in the end, you'll want to link to a standard Alternate CSS URL in the UI, apply any themes to override it where ever you desire, and add the rel="alternate stylesheet" links in the body to for the final control.

Well, I hope this has helped. Have fun!