Sharepoint Advanced Tips: CSS Registration and Rendering for SharePoint 2010 (including themes)

Updated 2011 december 20th

style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 13px; PADDING-RIGHT: 0px; COLOR: #e9ab17; FONT-WEIGHT: bold; PADDING-TOP: 10px">Topic
:

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">In
my previous post on the ms-rteStyle, the ms-rteElement CSS
classes and their role in the generation of the
Styles and the Markup Styles
menus items within the SharePoint 2010 Ribbon, I promised a real world example
of the Wiki Page branding. I will provide it soon, but first of all I had to
deeply explore how all was implemented in the new SharePoint 2010 version so
this post will be a very technical review of the involved blocks. That way, I
will be able to refer to the technical explanations of this post when I publish
a real example of branding.

style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 13px; PADDING-RIGHT: 0px; COLOR: #e9ab17; FONT-WEIGHT: bold; PADDING-TOP: 10px">Technical
review of the CSSLink , and CssRegistration WebControls in SharePoint
2010 and their use for the SharePoint 2010 themes

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">To
start from the beginning, I simply looked at the html source of a SharePoint
2010 wiki page created in a standard team site, and noticed this three link
references:

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">class=HTML_TAG> <class=HTML_ELM>link
relcolor=#0000ff>="stylesheet" class=HTML_ATR>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_layouts/1033/styles/Themable/search.css?rev=Uoc0fsLIo87aYwT%2FGX5UPw%3D%3D"/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 2px">class=HTML_TAG>color=#0000ff> <color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_layouts/1033/styles/Themable/wiki.css"/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 2px">class=HTML_TAG>class=HTML_TXT>
<linkcolor=#0000ff> color=#ff0000>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>

style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">1
-The <SharePoint:CSSLink /> control - How does it work?

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 8px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">If
you look in the v4.matser code you will find the control within the Head tag

face="Courier New">face="Courier New"> <color=#800000 face="Courier New">color=#800000 face="Courier New">SharePointcolor=#0000ff face="Courier New">color=#0000ff face="Courier New">:face="Courier New">face="Courier New">CssLinkcolor=#000000 face="Courier New"> face="Courier New">face="Courier New">runatface="Courier New">face="Courier New">="server"color=#000000 face="Courier New"> face="Courier New">face="Courier New">Versionface="Courier New">color=#0000ff size=1 face="Courier New">size=2>="4"/>

style="BORDER-BOTTOM: silver 1px solid; TEXT-ALIGN: justify; BORDER-LEFT: silver 1px solid; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; MARGIN-LEFT: 41px; FONT-SIZE: 10pt; BORDER-TOP: silver 1px solid; FONT-WEIGHT: normal; BORDER-RIGHT: silver 1px solid; PADDING-TOP: 5px">method
OnLoad

style="BORDER-BOTTOM: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-TOP: silver 1px solid; MARGIN-RIGHT: 0px; BORDER-RIGHT: silver 1px solid"
dir=ltr>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">method
SetDefaults
Check if it is the version 4 and choose between
core.css corev4.css

style="BORDER-BOTTOM: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-TOP: silver 1px solid; MARGIN-RIGHT: 0px; BORDER-RIGHT: silver 1px solid"
dir=ltr>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">method
MakeCssUrl - Make the default CSS Url (primaryCssUrl)
If the
variable cssFile is already affected, return it
else,
Check if there
is customized CSS and return the url if yes.
If no
NormalizeThemableCssFile (add themable in front of cssFile name if it
is the corev4.css)
then MakeLayoutCSSUrl
At this time there is
only two options (if you use native
templates)
-->/_layouts/lcid/style/core.css
or
-->/_layouts/lcid/styles/Themable/corev4.css

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Check
if there is alternate CSS and if yes
cancel the default values
flag
there is alternate css and register the value.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">method
SetupDialogCSS --> add dynamically CSS class to dialog and add a
link to dlgframe.css

either /_layouts/lcid/sytles/themable/corev4.css if you use
v4.master and a site based on a native SharePoint 2010 site
definition.
or /_layouts/lcid/styles/core.css if you omit the Version property
or /_styles/something if you use customized css (ie stored in the
database)
or /_layouts/lcid/styles/customFolder/customStyles.css if you use
alternate CCS
or maybe the corev4.css of the theme if a theme is applied but I could not
checked that...

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; FONT-SIZE: 10pt; FONT-WEIGHT: normal">color=#ff0000>Notice that this is a very bad idea to remove this control
from a master page because
it sets programmatically the styles for the
SharePoint 2010 dialogs.
it manages the version of the core.css file
it
finds the customized styles if there is some
it switches to the alternate css
if needed

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; FONT-SIZE: 10pt; FONT-WEIGHT: normal">color=#ff0000>Notice also that even if you use an alternate CSS and display a team site wiki page, the OOTB corev4.css will be loaded ANYWAY.
So, regarding the team site wiki pages the term alternate is WRONG...

For further information regarding this point you can read 2.8 - Second limitation of the team site wiki page in SharePoint 2010: it is very difficult to remove the OOTB RTE style

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">And
much more as we are going to see with the new SharePoint 2010 themes. But
before, let us finish with the two other links generated by the control:
So
where does come the wki.css and the search.css references from?
They are
rendered by the control in the Render method, based on the enumeration of the
CssRegistrationCollection filled by at least a SharePoint.CssRegistration Web
Control used in a declarative or imperative way.

style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">2 -
The <SharePoint:CssRegistration> control and the
Microsoft.SharePoint.WebControls.CssRegistration.Register method

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 0px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">This
control and this method are both linked to the <SharePoint:CSSLink>
control, because they are adding links to a collection at the level of the site
(CssRegistrationRecord) and the CSSLink control will enumerate this
collection during the Render method to render all the links to css files that
are registered within this collection.

- The two link toward
Themable/wiki.css and Themable/search.css are rendered by the CSSLink control
using this way:

style="TEXT-ALIGN: justify; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">The
Themable/wiki.css is registered at the wiki page template level in the
wkpstd.aspx file located at 14/TEMPLATE/DocumentTemplates/wkpstd.aspx
You
will find the instruction in the PlaceHolderAdditionalPageHead:

face="Courier New">

face="Courier New">face="Courier New"> <color=#800000 face="Courier New">color=#800000 face="Courier New">SharePointcolor=#0000ff face="Courier New">color=#0000ff face="Courier New">:face="Courier New">face="Courier New">CssRegistrationface="Courier New"> face="Courier New">face="Courier New">runatface="Courier New">face="Courier New">="server"face="Courier New"> color=#ff0000 face="Courier New">face="Courier New">Nameface="Courier New">face="Courier New">="wiki.css"face="Courier New"> face="Courier New">face="Courier New">/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New"> <color=#800000>color=#800000>SharePointcolor=#0000ff>:color=#800000>color=#800000>DelegateControl color=#ff0000>runatcolor=#0000ff>color=#0000ff>="server" color=#ff0000>ControlIdcolor=#0000ff>color=#0000ff>="SmallSearchInputBox" color=#ff0000>color=#ff0000>Versioncolor=#0000ff>="4" color=#0000ff>color=#0000ff>/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">
This
delegate gives us the choice to call different kind of search box at the top of
the page.
The link to the Themable/search.css is registered at the level of
the web control called by the delegate control

There are three
possible controls that can to be called by the delegate, they are
registered in these three features:

style="FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt">ContentLightup
style="FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt">OSearchBasicFeature
style="FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt">OSearchEnhancedFeature

color=#0000ff face="Courier New"><face="Courier New">size=2 face="Courier New">Controlcolor=#0000ff face="Courier New">color=#0000ff face="Courier New">
face="Courier New">face="Courier New">   Idface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">SmallSearchInputBoxface="Courier New">face="Courier New">"face="Courier New">face="Courier New">
face="Courier New">face="Courier New">   Sequenceface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">100face="Courier New">color=#000000>"
face="Courier New">face="Courier New">   ControlClasscolor=#0000ff face="Courier New">color=#0000ff face="Courier New">=face="Courier New">"color=#0000ff face="Courier New">color=#0000ff
face="Courier New">Microsoft.SharePoint.WebControls.SearchAreasize=2>color=#000000>"
face="Courier New">face="Courier New">   ControlAssemblycolor=#0000ff face="Courier New">color=#0000ff face="Courier New">=face="Courier New">"color=#0000ff face="Courier New">color=#0000ff face="Courier New">Microsoft.SharePoint, Version=14.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429cface="Courier New">face="Courier New">"face="Courier New">face="Courier New">>
</face="Courier New">face="Courier New">Controlface="Courier New">color=#0000ff size=1 face="Courier New">>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 0px">and
references the Microsoft.SharePoint.WebControls.SearchArea web control located
in the Microsoft SharePoint dll

the OSearchBasicFeature feature has
the 12.0.0.0 version and the scope WebApplication

color=#0000ff face="Courier New"><face="Courier New">size=2 face="Courier New">Controlcolor=#0000ff face="Courier New">color=#0000ff face="Courier New">
   color=#ff0000 face="Courier New">color=#ff0000 face="Courier New">Idface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">SmallSearchInputBoxface="Courier New">face="Courier New">"face="Courier New">face="Courier New">
   face="Courier New">face="Courier New">Sequenceface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">50face="Courier New">color=#000000>"
   face="Courier New">face="Courier New">ControlClassface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">Microsoft.SharePoint.Portal.WebControls.SearchBoxExsize=2>face="Courier New">"
   face="Courier New">face="Courier New">ControlAssemblyface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">Microsoft.Office.Server.Search, Version=14.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429cface="Courier New">face="Courier New">"face="Courier New">face="Courier New">>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 0px">and
references the Microssoft.SharePoint.Portal.WebControls.SearchBoxEx located in
the Microsoft.Office.Server.Search dll

the OSearchEnhancedFeature has
the version 14.0.0.0 and the scope WebApplication

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

color=#0000ff face="Courier New"><face="Courier New">size=2 face="Courier New">Controlcolor=#0000ff face="Courier New">color=#0000ff face="Courier New">
   color=#ff0000 face="Courier New">color=#ff0000 face="Courier New">Idface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">SmallSearchInputBoxface="Courier New">face="Courier New">"face="Courier New">face="Courier New">
   face="Courier New">face="Courier New">Sequenceface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">25face="Courier New">color=#000000>"
   face="Courier New">face="Courier New">ControlClassface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">Microsoft.SharePoint.Portal.WebControls.SearchBoxExsize=2>face="Courier New">"
   face="Courier New">face="Courier New">ControlAssemblyface="Courier New">face="Courier New">=color=#000000 face="Courier New">"face="Courier New">face="Courier New">Microsoft.Office.Server.Search, Version=14.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429cface="Courier New">face="Courier New">"face="Courier New">face="Courier New">>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">and
also references the the
Microssoft.SharePoint.Portal.WebControls.SearchBoxEx located in the
Microsoft.Office.Server.Search dll, but its sequence number is lower and
the properties of the feature element (SearchArea.xml) are different.

This is in this component
(Microssoft.SharePoint.Portal.WebControls.SearchBoxEx) that the css link to the
search.css is registered, in the OnPreRender method:

face="Courier New">

color=#0000ff face="Courier New">face="Courier New">ifface="Courier New"> (SPContext.Current.Web.UIVersion == color=#a52a2a face="Courier New">color=#a52a2a face="Courier New">4face="Courier New">)
size=2>{
size=2>CssRegistration.Register(face="Courier New">size=2 face="Courier New">"Themable/search.css"face="Courier New">size=2>);
}

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">But
how to know which control is actually called by the DelegateControl?

As
you have noticed for these three features, one has the scope Farm and the
two other the scope WebApplication.
I have deployed and Entreprise version of
SharePoint Server 2010 and the THREE features are actually
activated in my configuration:
I could checked it thanks to a providential
href="http://slingeronline.wordpress.com/2008/04/14/what-features-are-installed-in-your-farm/">application
page coded by Slinger...

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmuqmunnU5bL7M7y4qbki_sw8u7I5vCtoLM-RPWNcJ-Bl5wh3a5j1PkMojnLXGUUL9g47t7SxqxcejkelfGLwe5seJjnQ13WSCtPaD0q7FPgJTTOEi0To0XBKGxvuI3fPdC2dSerUqzNPR/s1600/rte+styles+-+110+-+application+page+-+check+all+activated+features+.jpg">style="WIDTH: 320px; HEIGHT: 158px; CURSOR: hand"
id=BLOGGER_PHOTO_ID_5481741403711108306 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmuqmunnU5bL7M7y4qbki_sw8u7I5vCtoLM-RPWNcJ-Bl5wh3a5j1PkMojnLXGUUL9g47t7SxqxcejkelfGLwe5seJjnQ13WSCtPaD0q7FPgJTTOEi0To0XBKGxvuI3fPdC2dSerUqzNPR/s320/rte+styles+-+110+-+application+page+-+check+all+activated+features+.jpg">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-GZZqvTbR_RpgfeoGU89gXO-16i-919ERc0pIGkZdS7apjV-YUJou2jhgRNwFPIVMD6foxd6k7xWes7rli2ram6BgL6Y9R_uBHRiCymL3hMMnVGR7gJE0639yKqu1ynf0y9AgkAAX5EfT/s1600/rte+styles+-+120+-+application+page+-+check+all+activated+features+.jpg">style="WIDTH: 320px; HEIGHT: 170px; CURSOR: hand"
id=BLOGGER_PHOTO_ID_5481741400818152786 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-GZZqvTbR_RpgfeoGU89gXO-16i-919ERc0pIGkZdS7apjV-YUJou2jhgRNwFPIVMD6foxd6k7xWes7rli2ram6BgL6Y9R_uBHRiCymL3hMMnVGR7gJE0639yKqu1ynf0y9AgkAAX5EfT/s320/rte+styles+-+120+-+application+page+-+check+all+activated+features+.jpg">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">As
the lowest sequence number delegate control wins, we have the
Microssoft.SharePoint.Portal.WebControls.SearchBoxEx installed by the
OSearchEnhancedFeature.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Now,
we have to explain the difference between the standard styles and the themable
styles because you have noticed that:

in 14/TEMPLATE/LAYOUTS/1033/styles directory there is a folder called
Themable where you can find files that are already present in the
styles folder
the CSSLink control by default, references the corev4.css file that is
located in the Themable folder
the Microsoft developer that has coded the SearchBoxEx web control has
choosen to reference the search.css in the Themable folder
although the wiki.css in not registered with the Themable instruction, the
rendered link references the wiki.css file located in the Themable
folder

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">What
all that does mean?
All this is linked to the new implementation of themes in
SharePoint 2010. So, let us check the difference between the standard styles and
the themable styles

style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">3
- Specifying the themable styles

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">I
have already talked a bit about SharePoint 2010 new themes in my previous post
on the href="http://mosshowto.blogspot.com/2009/12/sharepoint-2010-wiki-styles.html">Managing
the CSS styles for the SharePoint 2010 wiki pages and since the RTM
delivery, things have been changed since the automatically generated themes
files are now stored in another location than in the SharePoint 2010 Beta
version.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">class=HTML_TXT>color=#0000ff><color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_catalogs/theme/Themed/9D9B7D55/corev4-8A0ABD2F.css?ctag=18"/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">class=HTML_TXT><class=HTML_ELM>link
relcolor=#0000ff>="stylesheet" class=HTML_ATR>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_catalogs/theme/Themed/9D9B7D55/search-7E1AFF02.css?ctag=18"/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">When
applying a theme in SharePoint 2010 the product takes the THEMABLE css
files and generates automatically the new css files required for the theme and
store them bellow the
_catalog/theme/Themed/ virtual directory
within the content database.

What is important to know is that
you CAN specify which css file will be involved when
applying a specific theme and which will be not, ie what file is themable and
what is not.

In SharePoint 2010, the CSSRegistration web control has
now a new method href="http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.cssregistration.enablecsstheming.aspx">CssRegistration.EnableCssTheming
Property

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">color=#ff0000>Important: There is also a property called EnableTheming, so
do not mistake EnableTheming that is inherited from System.Web.UI.Control for
EnableCssTheming that is a new feature of SharePoint 2010 corresponding to the
new SharePoint 2010 themes implementation.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New"><color=#800000>color=#800000>SharePointcolor=#0000ff>:color=#800000>color=#800000>CssRegistration color=#ff0000>runatcolor=#0000ff>color=#0000ff>="server" color=#ff0000>Namecolor=#0000ff>color=#0000ff>="customStyles.css" color=#ff0000>EnableCssThemingcolor=#0000ff>="true" color=#0000ff>color=#0000ff>/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEganMI5neLN7wmKcFBUFdMZ5enyxzadM4yYb5q-qzr52-sHuax6LUswPGVkAzAPVWafvdPe4OzaERDOMxSEOsPSI6JUKlrVKPRwvBS_xK6OYPuYHwK6dNEoxLany-oNTFg9bZiUziyQhZw9/s1600/rte+styles+-+140+-Visual+Studio+-+CSS+Registration+enable+theming.jpg">style="WIDTH: 400px; HEIGHT: 179px; CURSOR: hand"
id=BLOGGER_PHOTO_ID_5481742300139924802 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEganMI5neLN7wmKcFBUFdMZ5enyxzadM4yYb5q-qzr52-sHuax6LUswPGVkAzAPVWafvdPe4OzaERDOMxSEOsPSI6JUKlrVKPRwvBS_xK6OYPuYHwK6dNEoxLany-oNTFg9bZiUziyQhZw9/s400/rte+styles+-+140+-Visual+Studio+-+CSS+Registration+enable+theming.jpg">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">"Fantastic!"
you might think, but wait a minute, and keep focusing because its use and
understanding is less than simple...

For instance, assume you allow
yourself to perform quick tests of this control by customizing the
template of the wiki pages (wkpstd.aspx) that is (I don't need to tell) not
a thing to do in the real life.

So add a customStyle.css file in the
lcid/Styles folder AND in the lcid/Styles/Themable folder
Then, place the
previous declaration without the EnableCssTheming property within the
template above the wiki.css registration and you will have this:

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

size=2><color=#800000>color=#800000>SharePointface="Courier New">color=#0000ff>:color=#800000>CssRegistration color=#ff0000>color=#ff0000>runatcolor=#0000ff>="server" color=#ff0000>color=#ff0000>Namecolor=#0000ff>="customStyles.css" color=#0000ff>color=#0000ff>/>face="Courier New">

color=#0000ff face="Courier New">face="Courier New"><face="Courier New">face="Courier New">SharePointface="Courier New">face="Courier New">:face="Courier New">face="Courier New">CssRegistrationface="Courier New"> face="Courier New">face="Courier New">runatface="Courier New">face="Courier New">="server"face="Courier New"> color=#ff0000 face="Courier New">face="Courier New">Nameface="Courier New">face="Courier New">="wiki.css"face="Courier New"> size=1 face="Courier New">color=#0000ff size=1
face="Courier New">/>

class=SYN_TXT>color=#0000ff><color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_layouts/1033/styles/customStyles.css?rev=D5q3ZhSBd%2FWysmMH%2BiJewA%3D%3D>

class=SYN_TXT>color=#0000ff><color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_layouts/1033/styles/Themable/wiki.css?rev=9pXM9jgtUVYAHk21JOAbIw%3D%3D"/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">The
exact same configuration and operation for the two files gives TWO
different results. Why?

Especially, why, in the case of the wiki.css,
although the EnableCssTheming is not set to true in the wkpstd.aspx
template, the rendered link has the /themable/ path?
It is because we used
the name of the file instead a path beginning by a '/'. The rule is the
following:

If you pass a name of the following files as a parameter of
the name property of the new SharePoint.CssRegistration web control, the
generated link will ALWAYS reference the themable file:

blog.cs

calendarv4.css

corev4.css

datepickerv4.css

discthread.css

forms.css

groupboard.css

help.css

layouts.css

mblrte.css

menu.css

minimalv4.css

mws.css

owsnocr.css

survey.css

themev4.css

wiki.css

wpeditmodev4.css

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">These
files references are neither in a CAML file nor in the Database, but hardcoded
in the NormalizeThemableCssFile method within the CSSLink web control.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">So
if you want one of THESE native css files present in the
themable folder NOT to be themable you must give the
COMPLETE reference to the same file that is not in the themable folder:

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New"><color=#800000>SharePointface="Courier New">color=#0000ff>:color=#800000>CssRegistration color=#ff0000>color=#ff0000>runatcolor=#0000ff>="server" color=#ff0000>color=#ff0000>Namecolor=#0000ff>color=#0000ff>="/_layouts/1033/styles/wiki.css" color=#0000ff>color=#0000ff>/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New"><color=#800000>SharePointface="Courier New">color=#0000ff>:color=#800000>CssRegistration color=#ff0000>color=#ff0000>runatcolor=#0000ff>="server" color=#ff0000>color=#ff0000>Namecolor=#0000ff>="wiki.css" color=#ff0000>EnableCssThemingcolor=#0000ff>="false" color=#0000ff>color=#0000ff>/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">On
the other hand if you want either, one of the custom css files present
in the themable folder, or one of the native files that are not in the default
themable files list to be themable you must ,

either
specify it explicitely

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New"><color=#800000>color=#800000>SharePointface="Courier New">color=#0000ff>:color=#800000>CssRegistration color=#ff0000>color=#ff0000>runatcolor=#0000ff>="server" color=#ff0000>color=#ff0000>Namecolor=#0000ff>="custom.css" color=#ff0000>EnableCssThemingcolor=#0000ff>="true" color=#0000ff>color=#0000ff>/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New"><color=#800000>SharePointsize=2>color=#0000ff>:color=#800000>CssRegistration color=#ff0000>color=#ff0000>runatcolor=#0000ff>="server" color=#ff0000>color=#ff0000>Namecolor=#0000ff>="Themable/custom.css"
color=#0000ff>/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New"><color=#800000>SharePointsize=2>color=#0000ff>:color=#800000>CssRegistration color=#ff0000>color=#ff0000>runatcolor=#0000ff>="server" color=#ff0000>color=#ff0000>Namecolor=#0000ff>color=#0000ff>="/_layouts/1033/styles/Themable/custom.css"
color=#0000ff>/>

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">notice
that if you don't give to the Name property a complete path but just the file
name, and there is no corresponding file in the Themable folder, as SharePoint
2010 will check in the folder for this file, you will have an
Exception.

Notice that you will have also an exception if the path
is not just the file name but a real path and it does not start by a '/' (Except
if the first word is Themable).

And finally if the path is well
formed but is not good, you will not have any raised exception, but the
page will not find your CSS file and you will not see your styles appear at the
page displaying.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">If
we look at the Microsoft documentation of the href="http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.cssregistration.register.aspx">Microsoft.SharePoint.WebControls.CssRegsitration.Register
method, we notice that we have the following overload

style="BORDER-BOTTOM: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-COLLAPSE: collapse; BORDER-TOP: silver 1px solid; BORDER-RIGHT: silver 1px solid"
id=memberList class=members>

style="BORDER-BOTTOM: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-RIGHT: silver 1px solid"> alt="Public method"
src="http://i.msdn.microsoft.com/Ee592212.pubmethod(en-us,office.14).gif"> alt="Static member"
src="http://i.msdn.microsoft.com/Ee592212.static(en-us,office.14).gif">

style="BORDER-BOTTOM: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-RIGHT: silver 1px solid"> id=ctl00_MTCS_main_ctl33_ctl00_ctl11
onclick="javascript:Track('ctl00_MTCS_main_ctl33_ctl00_ctl01|ctl00_MTCS_main_ctl33_ctl00_ctl11',this);"
href="http://msdn.microsoft.com/en-us/library/ee554041.aspx"> color=#0033cc>Register(String, Boolean)

style="BORDER-BOTTOM: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-RIGHT: silver 1px solid"> style="FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal">Registers
the specified cascading style sheet (CSS) in master pages, content pages,
or .ascx code pages, and specifies whether to reference the themed version
of this CSS file if a theme is applied.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqhnTJE8SzDxekkzhc5ESHbmrrM8oqVn8haDzg8GzBXIMUOkkmmDJeYrtuPbMb-GmfImT7bFmHlqwCKlbEzzjcQmC4fx8Xykpnp-wFyV_RRfxtqX9r8X5NW7GrRX9jvbzM9VQ7zBNXQiS/s1600/rte+styles+-+130+-Visual+Studio+-+CSS+Registration.jpg">style="WIDTH: 400px; HEIGHT: 26px; CURSOR: hand"
id=BLOGGER_PHOTO_ID_5481742297606257506 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqhnTJE8SzDxekkzhc5ESHbmrrM8oqVn8haDzg8GzBXIMUOkkmmDJeYrtuPbMb-GmfImT7bFmHlqwCKlbEzzjcQmC4fx8Xykpnp-wFyV_RRfxtqX9r8X5NW7GrRX9jvbzM9VQ7zBNXQiS/s400/rte+styles+-+130+-Visual+Studio+-+CSS+Registration.jpg">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">color=#ff0000>Important: this method has been completely rewritten for
SharePoint 2010, and there is now an overload
for EnableCssTheming. The parameter enableTheming that you can see on the
screenshot showing Visual Studio Intellisense is corresponding to the
EnableCssTheming property of the control that is a new feature of
SharePoint 2010 for the SharePoint 2010 themes implementation. Do not mistake
this parameter (EnableTheming) with the EnableTheming property
of CssRegistration that is inherited from
System.Web.UI.Control

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

Forget CssRegistration.EnableTheming, you don't need it, it is for the ASP
.Net themes

CssRegistration.EnableCssTheming and the boolean parameter enableTheming
of the method CssRegistration.Register(String,Boolean) are the same exactly
although the names are different.

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">So,
our previous Microsoft developer when implementing the
Microssoft.SharePoint.Portal.WebControls.SearchBoxEx, had to specify the
themable folder because the search.css is not themable by default (Although it
is one of the native SharePoint 2010 css files present in the themable folder),
but he (she) could have also written:

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

face="Courier New">if
(SPContext.Current.Web.UIVersion == color=#a52a2a>4size=2 face="Courier New">)
size=2>{
size=2>CssRegistration.Register(color=#a31515>"search.css"color=#000000>,color=#0000ff>truesize=1>);
size=2>}

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px"> or

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">face="Courier New">if
(SPContext.Current.Web.UIVersion == color=#a52a2a>4size=2 face="Courier New">)
size=2>{
size=2 color=#000000>CssRegistration.Register(color=#a31515>"search.css"color=#000000>,truecolor=#000000>,color=#a31515>"4"size=1>);
size=2>}

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 5px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">

For
ending,

face="Courier New">

color=#0000ff face="Courier New">face="Courier New"><face="Courier New">face="Courier New">scriptface="Courier New"> color=#ff0000 face="Courier New">face="Courier New">runatface="Courier New">face="Courier New">="server">
size=2>face="Courier New">face="Courier New">protectedface="Courier New"> color=#0000ff face="Courier New">face="Courier New">overrideface="Courier New"> color=#0000ff face="Courier New">face="Courier New">voidface="Courier New"> OnInit(face="Courier New">face="Courier New">EventArgsface="Courier New"> e)
size=2>{
color=#0000ff face="Courier New">face="Courier New">   baseface="Courier New">size=2>.OnInit(e);
face="Courier New">face="Courier New">   CssRegistrationface="Courier New">.Register(color=#a31515 face="Courier New">color=#a31515 face="Courier New">"wiki.css"face="Courier New">size=2>);
face="Courier New">face="Courier New">   CssRegistrationface="Courier New">.Register(color=#a31515 face="Courier New">color=#a31515
face="Courier New">"Themable/customStyles.css"size=1 face="Courier New">);

}

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">To
obtain themable references (You will notice that I have omited the Themable/
path for the wiki.css on purpose because here also, we can omit the path for the
ccs files that are themable by default.)

class=HTML_TXT>color=#0000ff><color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_layouts/1033/styles/Themable/wiki.css?rev=9pXM9jgtUVYAHk21JOAbIw%3D%3D"/>class=HTML_TXT>

class=HTML_TXT> color=#0000ff><color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_layouts/1033/styles/Themable/customStyles.css?rev=D5q3ZhSBd%2FWysmMH%2BiJewA%3D%3D"/>

color=#0000ff><color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_catalogs/theme/Themed/9D9B7D55/wiki-ECF524AA.css?ctag=24"/>

class=HTML_TXT>color=#0000ff><color=#800000>link class=HTML_ATR>rel=class=HTML_VAL>"stylesheet" color=#ff0000>type=class=HTML_VAL>"text/css" color=#ff0000>href=class=HTML_VAL>"/_catalogs/theme/Themed/9D9B7D55/customStyles-E81897D9.css?ctag=24"/>

style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 13px; PADDING-RIGHT: 0px; COLOR: #e9ab17; FONT-WEIGHT: bold; PADDING-TOP: 10px">Conclusion

style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">If you want your custom CSS to be a part of a SharePoint 2010 theme, you must use the CssRegistration web control.

Never, ever remove the CSSLink control from a SharePoint 2010 master page.

One fantastic thing : If you add a themable css file reference programmatically to a site, you have not to re apply the theme. The css is automatically included within the theme references when refreshing the page.

This is some of my other posts on the topic:

--> Use a delegate control to reference a CSS at the wiki page level:
Managing the CSS styles for the SharePoint 2010 wiki pages

--> To se the dynamic loading of the styles by debugging the SharePoint 2010 Ribbon and think about changing the CSS for the wiki pages:
Customizing and branding the SharePoint 2010 wiki pages

Sharepoint Advanced Tips

Friday, June 11, 2010

CSS Registration and Rendering for SharePoint 2010 (including themes)

No comments:

Post a Comment