4.4.9. Client-side Script for Extended Skinning Support

Extended skinning of standard HTML controls is applied automatically: the browser type is detected, and if a browser does not fully support extended skinning, only basic skinning is applied.
There are some problems with standard HTML controls in certain browsers (Opera and Safari) that may cause problems if you wish to skin your RichFaces components and standard HTML controls manually.
To disable skinnability, set the org.richfaces.LoadStyleStrategy parameter to NONE in your web.xml file, like so:
...
<context-param>
	<param-name>org.richfaces.LoadStyleStrategy</param-name>
	<param-value>NONE</param-value>
</context-param>
...
You should also include the style sheets that apply skins to RichFaces components and standard HTML controls.
To work around the problem of extended skinning in Opera and Safari, the skinning.js client script is added to the RichFaces library. This detects the browser type and enables extended skinning only for browsers that fully support it.
Activate the script by inserting the following JavaScript into your page:
<script type="text/javascript">
	window.RICH_FACES_EXTENDED_SKINNING_ON = true;
</script>
When no script-loading strategy is used and extended skinning is enabled, a warning message appears in the console.
You must also specify the media attribute in the link tag. This adds the extended_both.xcss style sheet to rich-extended-skinning.
To include your style sheets to the page when automatic skinnability is disabled, add the following:
<link href='/YOUR_PROJECT_NAME/a4j_3_2_2-SNAPSHOTorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' />
<link media='rich-extended-skinning' href='/ YOUR_PROJECT_NAME /a4j_3_2_2-SNAPSHOTorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' />
<link href='/ YOUR_PROJECT_NAME /a4j_3_2_2-SNAPSHOT/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' />

Note

The Base64 encoder now uses ! instead of ., so remember to use the a4j/versionXXX resources prefix instead of a4j_versionXXX.