Skip to content

Overriding Core CSS Files

March 17, 2010

From Randy Drisgill‘s blog in a post entitled “Getting Your CSS To Be The Last To Load”:

In SharePoint 2007 getting your CSS to load last AFTER core.css was one of the major challenges we had to struggle with. This is critical because of the way CSS cascades, generally speaking if everything else is the same about two CSS rules, the last one loaded takes precedence. Well, I have some good news for everyone, in SharePoint 2010, we don’t have to struggle with this any more, now Microsoft has provided us with a property in <SharePoint:CssRegistration> called “After”. You simply tell the CssRegistration tag which CSS file you want to load you custom CSS AFTER, like this:  http://www.sharepointdevwiki.com/display/sp2010/CSS+Extensibility

<!– loads the ootb core CSS –>

<SharePoint:CssLink runat=”server” Version=”4″/>

<!—loads our custom CSS AFTER corev4.css –>

<SharePoint:CssRegistration name=”custom.css” After=”corev4.css” runat=”server”/>

Pretty cool, eh? What if you have more than one CSS to load after corev4.css? Well you can list more than one CssRegistration with the After=”corev4.css” but they actually get added beneath corev4.css in reverse order. So if you wanted the CSS to go in this order corev4.css, custom1.css, custom2.css you would list them like this:

<!– loads the ootb core CSS –>

<SharePoint:CssLink runat=”server” Version=”4″/>

<!—loads our custom CSS AFTER corev4.css –>

<SharePoint:CssRegistration name=”custom2.css” After=”corev4.css” runat=”server”/>

<SharePoint:CssRegistration name=”custom1.css” After=”corev4.css” runat=”server”/>

Personally, I’m pumped to not have to deal with this anymore!

I put my custom CSS file in the root and in order for it to be read I had to add /at the beginning in order for it to work. So instead of looking like this: <SharePoint:CssRegistration name=”custom2.css” After=”corev4.css” runat=”server”/>, mine looks like: <SharePoint:CssRegistration name=”/../custom2.css” After=”corev4.css” runat=”server”/>

To read Randy’s full post and see the comments, click here. His blog is full of very useful info that I’ll be referring to lots.

About these ads
Leave a Comment

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: