SharePoint 2007 – Order that CSS is loaded

February 17, 2010

SharePoint is a complex creature.  There are four ways you can insert your own custom css:

  1. Create a custom theme and apply that theme.
  2. Add a <link> to your css in the master page: 
    <link rel="stylesheet" type="text/css" href="/customstyles/sample.css"/>
  3. Specify an AlternateCSS url (available via browser on publishing-enabled sites, but available via PowerShell on ALL other SharePoint sites).
  4. Add a link using <SharePoint:CssRegistration>to your master page:
    <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/HtmlEditorCustomStyles.css%>" runat="server"/>

Note that all of the above will override core.css – except item 4

 

The Simplest Way

So if you want to load your own css after core.css, the simplest way is to use method 2.  In your master page, it should look something like this:

<Sharepoint:CssLink runat="server"/>
<SharePoint:Theme runat="server"/>
<link rel="stylesheet" type="text/css" href="/customstyles/sample.css"/>

 

The Details

SharePoint:CssLink loads a bunch of css files (including core.css) for you automatically, and in a special order, over which you have no control.  Say, for example, if you used method 4 above, and added a CssRegistration pointing to a special custom css file.  You can put that registration anywhere you like in the master page, but it will still load that css BEFORE any other.  Here’s a simplified guideline to the order:

[Any CSS files defined by CssRegistration, e.g., Band.css – see method 4]
[Optional CSS files defined by loaded controls, e.g., HtmlEditorCustomStyles.css] 
[Any CSS files defined in page layout, e.g., pageLayouts.css]
Core.css
[Any  Custom AlternateCss – see method 3]

So as you can see, CssLink controls the order of CssRegistration and alternate css.  But YOU have control over where you put ye olde school <link> to css (method 2). 

Another thing that is not loaded via SharePoint:CssLink is any theme css.  That’s done via SharePoint:Theme.  And the order you place SharePoint:CssLink and SharePoint:Theme WILL affect the order of the theme css.  Out of the box, SharePoint:Theme is last, and thus the theme css will load last.  If you swap the two so that SharePoint:Theme is first, then your theme css will load first, then all the other SharePoint css files, in the order specified above.

Clear as mud?  I thought so.  Just wait til I post about the order of CSS in SharePoint 2010.

Advertisements

One Response to “SharePoint 2007 – Order that CSS is loaded”

  1. Peter Deleu Says:

    Hello, nice clear post, thx.
    I’ve recently came across a problem when working on a SharePoint Branding project: http://www.peterdeleu.be/blog/2010/03/custom-html-editor-styles-in-sharepoint/
    Any thoughts?

    Thx,
    Peter


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: