Monday, January 18, 2010

SharePoint 2010 CSS references in Master Pages

Here are some of the most common ways to reference your custom CSS for SharePoint 2010. One key change over 2007 is the ability to specify After=”corev4.css” in the CssRegistration to make sure your custom CSS is referenced after the OOTB corev4.css file.

<SharePoint:CssLink runat="server" Version="4"/>
Note: Default OOTB
Output Order:

  1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>

<SharePoint:Theme runat="server"/>
Note: If a theme is enabled
Output Order:

  1. <link rel=”stylesheet” type=”text/css” href=”/_themes/[UniqueCounter#]/corev4-[u=UniqueHex#].css?ctag=[UniqueCounter#]”/>

<SharePoint:CssRegistration name=”customfolder/samplecustom.css” runat=”server”/>
Note: Alternate CSS on Server but comes before corev4.css
Output Order:

  1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>
  2. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>

<SharePoint:CssRegistration name=”customfolder/samplecustom.css” After=”corev4.css” runat=”server”/>
Note: Alternate CSS on Server and comes after corev4.css.
Output Order:

  1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
  2. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/samplecustom.css %>" After="corev4.css" runat="server"/>
Note: Alternate CSS In SharePoint Database for sites without publishing enabled
Output Order:

  1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
  2. <link rel="stylesheet" type="text/css" href="/Style%20Library/emc_2010_custom.css"/>

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/samplecustom.css %>" After="corev4.css" runat="server"/>
Note: Alternate CSS In SharePoint Database for sites with publishing enabled
Output Order:

  1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
  2. <link rel="stylesheet" type="text/css" href="/[sitename]/Style%20Library/en-US/Themable/Core%20Styles/emc_2010_custom.css"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>
Note: Alternate CSS on Server by using the standard link rel. Does not need the After attribute…
Output Order:

  1. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
  2. <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css" />

8 comments:

Anonymous said...

Brilliant, thanx for your work with this!

Mano Mangaldas said...

Nice work Erik. Thanks

Eric Schrader said...

Do any of these render CSS Theme comments?

I am having a hard time trying to use the theming functionalty
body{
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:#676767;
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
margin:0px;
padding:0px;
}

I changed this from corev4.css to:
(I changed Light1 to Accent2):
body{
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:#676767;
/* [ReplaceColor(themeColor:"Accent2")] */ background-color:#fff;
margin:0px;
padding:0px;
}

The CSS is in my themable directory, but it wont read the comments...

Any ideas?

getsetbro said...

@Eric Schrader, be sure to check in and publish your custom css file before running the theme change.

Ali Nawaz said...

thanks for the informative post :)

Anonymous said...

Just terrific I thanks you for all this wonderful things

Sandeep said...

Thanks. Saved my day

aparna john said...

Hi, Assembling a website is an one-of-a-kind blend of publishing, user interface design, and technology. There are arguments for doing your Web Design Cochin in-house. It is hard enough looking for a web design business.Thanks...