For Styles: 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://c-lien.blogspot.com/?aHR0cDovL3NsaW5nZXJvbmxpbmUud29yZHByZXNzLmNvbS8yMDA4LzA0LzE0L3doYXQtZmVhdHVyZXMtYXJlLWluc3RhbGxlZC1pbi15b3VyLWZhcm0v">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="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9UQk1PdzE3QWROSS9BQUFBQUFBQUJ1WS9sTlUyRGJwSmhhcy9zMTYwMC9ydGUrc3R5bGVzKy0rMTEwKy0rYXBwbGljYXRpb24rcGFnZSstK2NoZWNrK2FsbCthY3RpdmF0ZWQrZmVhdHVyZXMrLmpwZw==">style="WIDTH: 320px; HEIGHT: 158px; CURSOR: hand"
id=BLOGGER_PHOTO_ID_5481741403711108306 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg48BMfUgzCoY0_LGHTkMZabCTQvH5-sjvzF7ZK-hQjr8gycC9W5I3AAevMAChNyRP9ARsIQbailmrqj-WDdUjAPVcruFtVeNrtB1Gbl5IbygEwVRQwEKgjPGt11iIsLN_kI4a1zAIm_ulJ/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="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9UQk1Pd3JKUmRWSS9BQUFBQUFBQUJ1US95UVBRVUdsdTVTOC9zMTYwMC9ydGUrc3R5bGVzKy0rMTIwKy0rYXBwbGljYXRpb24rcGFnZSstK2NoZWNrK2FsbCthY3RpdmF0ZWQrZmVhdHVyZXMrLmpwZw==">style="WIDTH: 320px; HEIGHT: 170px; CURSOR: hand"
id=BLOGGER_PHOTO_ID_5481741400818152786 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD9QWXRNiF-1JTm7A2gyScr-fGD23GqG8jiy-sVmI7CSRSM8cQSUUhBBV44gFjZyQr5iUiYoNnnF3gCuaNNVWDmDRwTYjMMIT_UzqktyYWTKX5IdeglMAxnNCjZlpErbSManQ3oKdBmAZB/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://c-lien.blogspot.com/?aHR0cDovL21vc3Nob3d0by5ibG9nc3BvdC5jb20vMjAwOS8xMi9zaGFyZXBvaW50LTIwMTAtd2lraS1zdHlsZXMuaHRtbA==">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://c-lien.blogspot.com/?aHR0cDovL21zZG4ubWljcm9zb2Z0LmNvbS9lbi11cy9saWJyYXJ5L21pY3Jvc29mdC5zaGFyZXBvaW50LndlYmNvbnRyb2xzLmNzc3JlZ2lzdHJhdGlvbi5lbmFibGVjc3N0aGVtaW5nLmFzcHg=">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="http://c-lien.blogspot.com/?aHR0cDovLzQuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9UQk1QbEJZU3JVSS9BQUFBQUFBQUJ1by9KTFZOeE16WU1zZy9zMTYwMC9ydGUrc3R5bGVzKy0rMTQwKy1WaXN1YWwrU3R1ZGlvKy0rQ1NTK1JlZ2lzdHJhdGlvbitlbmFibGUrdGhlbWluZy5qcGc=">style="WIDTH: 400px; HEIGHT: 179px; CURSOR: hand"
id=BLOGGER_PHOTO_ID_5481742300139924802 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XE-DF6TxZ4J-0e8TnoCn3uXxFS26aPJB0JxBjTEyHlQq5KtDvgqGJKPxF9LKU_Q8GUwutIhtcWc2VAArlRTVWM9hN2KAlH6NKSL5Kmho8lWsQzebJaPjrfliOsM3Spsu7cPmmu4xXCXh/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>

For Styles

samedi 5 mai 2012

CSS Registration and Rendering for SharePoint 2010 (including themes)

Aucun commentaire:

Enregistrer un commentaire