This time I got to create my custom css for my SharePoint 2010 custom master page. Now, how to add/refer my custom css?
The Solution is simple, refer in the following way:
<SharePoint:CssRegistration ID="CssRegistration1" Name="/Style Library/Home/CSS/mycustom.css" runat="server" After="corev4.css" />
SharePoint 2010 uses corev4.css, located at /layouts/1033/styles/Themable/corev4.css on the server.
We can customize CSS just as we could on MOSS 2007, but in SharePoint 2010 we will customize it in the core4.css file. Unlike MOSS, when we customize CSS for a SharePoint 2010 site, the _Styles folder is not automatically created on the current site. When customizing CSS in SharePoint 2010, the _Styles folder is gotten from folder 14 on the server and runs from there.
Here are some of the most common ways to reference 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:
- <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:
- <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:
- <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>
- <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:
- <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
- <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:
- <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
- <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:
- <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
- <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:
- <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
- <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css" />
If you have a more elegant solution – please post a comment… I’ll be happy to hear.
...HaPpY CoDiNg
Partha (Aurum)
Ref:
http://erikswenson.blogspot.com/2010/01/sharepoint-2010-base-css-classes.html
No comments:
Post a Comment