From richfaces-svn-commits at lists.jboss.org Tue Mar 22 01:43:43 2011
Content-Type: multipart/mixed; boundary="===============6443686595703240617=="
MIME-Version: 1.0
From: richfaces-svn-commits at lists.jboss.org
To: richfaces-svn-commits at lists.jboss.org
Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r22289 - in
 modules/docs/trunk/Developer_Guide/src/main/docbook/en-US: extras and 1 other
 directory.
Date: Tue, 22 Mar 2011 01:43:43 -0400
Message-ID: <201103220543.p2M5hhIt016599@svn01.web.mwc.hst.phx2.redhat.com>

--===============6443686595703240617==
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable

Author: SeanRogers
Date: 2011-03-22 01:43:42 -0400 (Tue, 22 Mar 2011)
New Revision: 22289

Added:
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-De=
veloper_Guide-Skinning_and_theming-ECSS_style_mappings-0.xml_sample
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-De=
veloper_Guide-Skinning_and_theming-ECSS_style_mappings-1.xml_sample
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-De=
veloper_Guide-Skinning_and_theming-ECSS_style_mappings.css
Removed:
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-De=
veloper_Guide-Skinning_and_theming-XCSS_style_mappings-0.xml_sample
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-De=
veloper_Guide-Skinning_and_theming-XCSS_style_mappings-1.xml_sample
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-De=
veloper_Guide-Skinning_and_theming-XCSS_style_mappings.css
Modified:
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer=
_Guide-Getting_started_with_RichFaces.xml
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer=
_Guide-RichFaces_overview.xml
   modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Developer=
_Guide-Skinning_and_theming.xml
Log:
Updated Skinning section of Developer Guide based on review RFPL-1350

Modified: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-De=
veloper_Guide-Getting_started_with_RichFaces.xml
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Develope=
r_Guide-Getting_started_with_RichFaces.xml	2011-03-21 19:11:35 UTC (rev 222=
88)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Develope=
r_Guide-Getting_started_with_RichFaces.xml	2011-03-22 05:43:42 UTC (rev 222=
89)
@@ -215,7 +215,7 @@
 						The profile then needs to be activated in the <sgmltag>&lt;activePro=
files&gt;</sgmltag> element:
 					</para>
 <programlisting language=3D"XML" role=3D"XML">&lt;activeProfiles&gt;
-	&lt;activeProfile&gt;jboss-public-repository&lt;/activeProfile&gt;
+   &lt;activeProfile&gt;jboss-public-repository&lt;/activeProfile&gt;
 &lt;/activeProfiles&gt;</programlisting>
 					<para>
 						For further details, refer to the <citetitle>JBoss RichFaces Wiki</c=
itetitle>.

Modified: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-De=
veloper_Guide-RichFaces_overview.xml
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Develope=
r_Guide-RichFaces_overview.xml	2011-03-21 19:11:35 UTC (rev 22288)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Develope=
r_Guide-RichFaces_overview.xml	2011-03-22 05:43:42 UTC (rev 22289)
@@ -369,14 +369,12 @@
 				<stepalternatives>
 					<step>
 						<title>JBoss RichFaces Downloads area</title>
-						<!-- Update download location in Enterprise docs, or remove this sec=
tion altogether -->
 						<para>
 							Download the RichFaces distribution as described in <xref linkend=
=3D"sect-Developer_Guide-Getting_started_with_RichFaces-Setting_up_RichFace=
s" />. The distribution bundles contain the full RichFaces source code.
 						</para>
 					</step>
 					<step>
 						<title>Anonymous SVN repository</title>
-						<!-- Remove SVN details in Enterprise docs -->
 						<para>
 							Alternatively, the source files can be checked out from the anonymo=
us SVN repository at <ulink url=3D"http://anonsvn.jboss.org/repos/richfaces=
/branches/4.0.X/">http://anonsvn.jboss.org/repos/richfaces/branches/4.0.X/<=
/ulink> using the following command:
 						</para>
@@ -390,43 +388,12 @@
 					If using the downloaded distribution, create a new directory named <f=
ilename>RichFaces</filename>, then unzip the archive containing the source =
code there.
 				</para>
 			</step>
-			<!--
 			<step>
-				<title>Configure <productname>Maven</productname> with JBoss developer=
 settings</title>
+				<title>Configure <productname>Maven</productname> for RichFaces</title>
 				<para>
-					To compile the RichFaces source code, <productname>Maven</productname=
> requires access to JBoss development repositories. Edit the <filename><re=
placeable>maven_installation_folder</replaceable>/conf/settings.xml</filena=
me> file and add the following settings:
+					To compile the RichFaces source code, <productname>Maven</productname=
> requires access to the JBoss repositories. Refer to <xref linkend=3D"step=
-Developer_Guide-Using_RichFaces_with_Maven-Add_required_repositories" /> o=
f the procedure in <xref linkend=3D"sect-Component_Reference-Using_RichFace=
s_with_Maven-Using_the_RichFaces_project_archetype" /> to configure the req=
uired repositories.
 				</para>
-				<variablelist>
-					<varlistentry>
-						<term>Server definitions</term>
-						<listitem>
-							<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"=
text" href=3D"extras/prog-Developer_Guide-Compiling_from_source_code-Maven_=
server_definitions.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclude"=
 /></programlisting>
-							<para>
-								Change the <code><replaceable>username</replaceable></code> and <c=
ode><replaceable>password</replaceable></code> in your server definitions t=
o your <orgname>JBoss.org</orgname> username and password.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term>Mirror definitions</term>
-						<listitem>
-							<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"=
text" href=3D"extras/prog-Developer_Guide-Compiling_from_source_code-Maven_=
mirror_definitions.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclude"=
 /></programlisting>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term>Profile definitions</term>
-						<listitem>
-							<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"=
text" href=3D"extras/prog-Developer_Guide-Compiling_from_source_code-Maven_=
profile_definitions.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclude=
" /></programlisting>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term>Activate profile</term>
-						<listitem>
-							<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"=
text" href=3D"extras/prog-Developer_Guide-Compiling_from_source_code-Maven_=
activate_profile.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /=
></programlisting>
-						</listitem>
-					</varlistentry>
-				</variablelist>
 			</step>
-			-->
 			<step>
 				<title>Compile using <productname>Maven</productname></title>
 				<para>

Modified: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-De=
veloper_Guide-Skinning_and_theming.xml
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Develope=
r_Guide-Skinning_and_theming.xml	2011-03-21 19:11:35 UTC (rev 22288)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/chap-Develope=
r_Guide-Skinning_and_theming.xml	2011-03-22 05:43:42 UTC (rev 22289)
@@ -97,65 +97,434 @@
 &lt;/context-param&gt;</programlisting>
 	</section>
 	=

-	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Customizing_skin=
s">
-		<title>Customizing skins</title>
+	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Skinning_overvie=
w">
+		<title>Skinning overview</title>
 		<para>
 			RichFaces skins are implemented using the following three-level scheme:
 		</para>
 		<variablelist>
 			<varlistentry>
-				<term>A default style class inserted into the framework</term>
+				<term>Component stylesheets</term>
 				<listitem>
 					<para>
-						Style classes contain skin parameters linked to constant theme style=
s in the skin. Each component has a class style defining a default represen=
tation level. Application interfaces can be modified by altering the values=
 of skin parameters in the skin itself.
+						Stylesheets are provided for each component. CSS style parameters ma=
p to skin parameters defined in the skin property file. This mapping is acc=
omplished through the use of ECSS files. Refer to <xref linkend=3D"sect-Dev=
eloper_Guide-Skinning_and_theming-ECSS_files" /> for details on ECSS files.
 					</para>
 				</listitem>
 			</varlistentry>
 			<varlistentry>
-				<term>A style class extending the skin</term>
+				<term>Skin property files</term>
 				<listitem>
 					<para>
-						A custom style class can be added to the skin, working in conjunctio=
n with CSS classes of the same name. All components referencing the class a=
re extended in the same way.
+						Skin property files map skin parameters to constant styles. Skin pro=
perties are defined in <filename>skin.properties</filename> files. Refer to=
 <xref linkend=3D"sect-Developer_Guide-Skinning_overview-Skin_parameter_tab=
les" /> for a listing of the skin parameters used in a typical skin.
 					</para>
 				</listitem>
 			</varlistentry>
 			<varlistentry>
-				<term>User style class</term>
+				<term>Custom style classes</term>
 				<listitem>
 					<para>
-						Components can use the <varname>styleClass</varname> attribute to re=
define specific component elements. As such, the appearance of an individua=
l component can be customized according to a CSS style parameter specified =
in the class.
+						Individual components can use the <varname>styleClass</varname> attr=
ibute to redefine specific elements. These components then use the styles d=
efined in a CSS file instead of the standard look for components as defined=
 by the ECSS stylesheets.
 					</para>
 				</listitem>
 			</varlistentry>
 		</variablelist>
-		<example id=3D"exam-Developer_Guide-Using_skins-Simple_skinning_example">
-			<title>Simple skinning example</title>
+
+		<section id=3D"sect-Developer_Guide-Skinning_overview-Skin_parameter_tab=
les">
+			<title>Skin parameter tables</title>
 			<para>
-				Using any component, such as a panel, without specifying a <varname>st=
yleClass</varname> will use the default skin parameters for that component.
+				<xref linkend=3D"tabl-Developer_Guide-Skin_parameter_tables_in_RichFac=
es-Parameter_settings_for_the_blueSky_skin" /> lists the default values for=
 the parameter settings in the <literal>blueSky</literal> skin. These value=
s are all listed in the <filename>buleSky.skin.properties</filename> file, =
which can be customized and extended as described in <xref linkend=3D"sect-=
Developer_Guide-Skinning_and_theming-Customizing_skins" />.
 			</para>
-		=

-<programlisting language=3D"XML" role=3D"XML">&lt;rich:panel&gt;This is a =
panel without a header&lt;/rich:panel&gt;</programlisting>
+			<table id=3D"tabl-Developer_Guide-Skin_parameter_tables_in_RichFaces-Pa=
rameter_settings_for_the_blueSky_skin">
+				<title>Parameter settings for the <literal>blueSky</literal> skin</tit=
le>
+				<tgroup cols=3D"2">
+					<thead>
+						<row>
+							<entry>
+								Parameter name
+							</entry>
+							<entry>
+								Default value
+							</entry>
+						</row>
+					</thead>
+					<tbody>
+						<row>
+							<entry><parameter>
+								headerBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#BED6F8
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								headerGradientColor
+							</parameter></entry>
+							<entry><literal>
+								#F2F7FF
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								headTextColor
+							</parameter></entry>
+							<entry><literal>
+								#000000
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								headerWeightFont
+							</parameter></entry>
+							<entry><literal>
+								bold
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								generalBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#FFFFFF
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								generalTextColor
+							</parameter></entry>
+							<entry><literal>
+								#000000
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								generalSizeFont
+							</parameter></entry>
+							<entry><literal>
+								11px
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								generalFamilyFont
+							</parameter></entry>
+							<entry><literal>
+								Arial, Verdana, sans-serif
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								controlTextColor
+							</parameter></entry>
+							<entry><literal>
+								#000000
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								controlBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#ffffff
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								additionalBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#ECF4FE
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								shadowBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#000000
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								shadowOpacity
+							</parameter></entry>
+							<entry><literal>
+								1
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								panelBorderColor
+							</parameter></entry>
+							<entry><literal>
+								#BED6F8
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								subBorderColor
+							</parameter></entry>
+							<entry><literal>
+								#ffffff
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tabBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#C6DEFF
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tabDisabledTextColor
+							</parameter></entry>
+							<entry><literal>
+								#8DB7F3
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								trimColor
+							</parameter></entry>
+							<entry><literal>
+								#D6E6FB
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tipBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#FAE6B0
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tipBorderColor
+							</parameter></entry>
+							<entry><literal>
+								#E5973E
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								selectControlColor
+							</parameter></entry>
+							<entry><literal>
+								#E79A00
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								generalLinkColor
+							</parameter></entry>
+							<entry><literal>
+								#0078D0
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								hoverLinkColor
+							</parameter></entry>
+							<entry><literal>
+								#0090FF
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								visitedLinkColor
+							</parameter></entry>
+							<entry><literal>
+								#0090FF
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								headerSizeFont
+							</parameter></entry>
+							<entry><literal>
+								11px
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								headerFamilyFont
+							</parameter></entry>
+							<entry><literal>
+								Arial, Verdana, sans-serif
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tabSizeFont
+							</parameter></entry>
+							<entry><literal>
+								11px
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tabFamilyFont
+							</parameter></entry>
+							<entry><literal>
+								Arial, Verdana, sans-serif
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								buttonSizeFont
+							</parameter></entry>
+							<entry><literal>
+								11px
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								buttonFamilyFont
+							</parameter></entry>
+							<entry><literal>
+								Arial, Verdana, sans-serif
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tableBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#FFFFFF
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tableFooterBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#cccccc
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tableSubfooterBackgroundColor
+							</parameter></entry>
+							<entry><literal>
+								#f1f1f1
+							</literal></entry>
+						</row>
+						<row>
+							<entry><parameter>
+								tableBorderColor
+							</parameter></entry>
+							<entry><literal>
+								#C0C0C0
+							</literal></entry>
+						</row>
+					</tbody>
+				</tgroup>
+			</table>
+		</section>
+	=

+		<section id=3D"sect-Developer_Guide-Skinning_and_theming-ECSS_files">
+			<title><acronym>ECSS</acronym> files</title>
 			<para>
-				When rendered for display, the panel consists of two HTML elements: a =
wrapper <sgmltag>&lt;div&gt;</sgmltag> element and a <sgmltag>&lt;div&gt;</=
sgmltag> element for the body of the panel. The wrapper element for a panel=
 without a specified <varname>styleClass</varname> is rendered as follows:
+				RichFaces uses <acronym>ECSS</acronym> files to add extra functionalit=
y to the skinning process. ECSS files are CSS files which use Expression La=
nguage (<acronym>EL</acronym>) to connect styles with skin properties.
 			</para>
-			<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text=
" href=3D"extras/prog-Developer_Guide-Using_skins-Rendered_panel.xml_sample=
" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlisting>
-			<para>
-				<classname>rf-p</classname> and <classname>rf-p-b</classname> refer to=
 CSS classes specified in the framework. The CSS classes use skin parameter=
s for generic theme styles:
-			</para>
-			<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text=
" href=3D"extras/prog-Developer_Guide-Using_skins-Panel_styles.xml_sample" =
xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlisting>
-			<itemizedlist>
+			<example id=3D"exam-Developer_Guide-Skinning_and_theming-ECSS_style_map=
pings">
+				<title>ECSS style mappings</title>
+				<para>
+					The ECSS code for the <sgmltag>&lt;rich:panel&gt;</sgmltag> component=
 contains styles for the panel and its body:
+				</para>
+				<programlisting language=3D"Java" role=3D"JAVA"><xi:include parse=3D"t=
ext" href=3D"extras/exam-Developer_Guide-Skinning_and_theming-ECSS_style_ma=
ppings.css" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlisting>
+				<variablelist>
+					<varlistentry>
+						<term><classname>.rf-p</classname> defines the panel styles</term>
+						<listitem>
+							<itemizedlist>
+								<listitem>
+									<para>
+										The <property>background-color</property> CSS property maps to t=
he <parameter>generalBackgroundColor</parameter> skin parameter.
+									</para>
+								</listitem>
+								<listitem>
+									<para>
+										The <property>color</property> CSS property maps to the <paramet=
er>panelBorderColor</parameter> skin parameter.
+									</para>
+								</listitem>
+							</itemizedlist>
+						</listitem>
+					</varlistentry>
+					<varlistentry>
+						<term><classname>.rf-p-b</classname> defines the panel body styles</=
term>
+						<listitem>
+							<itemizedlist>
+								<listitem>
+									<para>
+										The <property>font-family</property> CSS property maps to the <p=
arameter>generalFamilyFont</parameter> skin parameter.
+									</para>
+								</listitem>
+								<listitem>
+									<para>
+										The <property>font-size</property> CSS property maps to the <par=
ameter>generalSizeFont</parameter> skin parameter.
+									</para>
+								</listitem>
+								<listitem>
+									<para>
+										The <property>color</property> CSS property maps to the <paramet=
er>generalTextColor</parameter> skin parameter.
+									</para>
+								</listitem>
+							</itemizedlist>
+						</listitem>
+					</varlistentry>
+				</variablelist>
+			</example>
+		</section>
+	</section>
+
+	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Customizing_skin=
s">
+		<title>Customizing skins</title>
+		<para>
+			Skins in RichFaces can be customized on each of the three levels:
+		</para>
+		<variablelist>
+			<varlistentry>
+				<term>Skin property files</term>
 				<listitem>
 					<para>
-						The <property>background-color</property> CSS class attribute is def=
ined by the <parameter>generalBackgroundColor</parameter> skin parameter.
+						Application interfaces can be modified by altering the values of ski=
n parameters in the skin itself. Edit the constant values defined in the <f=
ilename>skin.properties</filename> file to change the style of every compon=
ent mapped to that skin property.
 					</para>
 				</listitem>
+			</varlistentry>
+			<varlistentry>
+				<term>Component stylesheets</term>
 				<listitem>
 					<para>
-						The <property>color</property> CSS class attribute is defined by the=
 <parameter>panelBorderColor</parameter> skin parameter.
+						Mappings and other style attributes listed in a component's ECSS fil=
e can be edited. Edit the ECSS file to change the styles of all components =
of that type.
 					</para>
 				</listitem>
-			</itemizedlist>
+			</varlistentry>
+			<varlistentry>
+				<term>Custom style classes</term>
+				<listitem>
+					<para>
+						Individual components can use the <varname>styleClass</varname> attr=
ibute to use a unique style class. Add the new style class to the applicati=
on CSS and reference it from an individual component with the <varname>styl=
eClass</varname> attribute.
+					</para>
+				</listitem>
+			</varlistentry>
+		</variablelist>
+	=

+		<example id=3D"exam-Developer_Guide-Using_skins-Simple_skinning_example">
+			<title>Simple skinning example</title>
 			<para>
+				Using any component, such as a panel, without specifying a <varname>st=
yleClass</varname> will use the default skin parameters for that component.
+			</para>
+	=

+	<programlisting language=3D"XML" role=3D"XML">&lt;rich:panel&gt;This is a=
 panel without a header&lt;/rich:panel&gt;</programlisting>
+			<para>
+				When rendered for display, the panel consists of two HTML elements: a =
wrapper <sgmltag>&lt;div&gt;</sgmltag> element and a <sgmltag>&lt;div&gt;</=
sgmltag> element for the body of the panel. The wrapper element for a panel=
 without a specified <varname>styleClass</varname> is rendered as follows:
+			</para>
+			<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text=
" href=3D"extras/prog-Developer_Guide-Using_skins-Rendered_panel.xml_sample=
" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlisting>
+			<para>
 				To customize the panel appearance according to the three-level scheme,=
 adjust the styles according to the following approach:
 			</para>
 			<procedure>
@@ -177,315 +546,69 @@
 					<para>
 						The <literal>customClass</literal> style is added to the CSS, and is=
 applied to the component when it is rendered for display:
 					</para>
-<programlisting language=3D"XML" role=3D"XML">&lt;div class=3D"rf-p custom=
Class"&gt;
+					<programlisting language=3D"XML" role=3D"XML">&lt;div class=3D"rf-p c=
ustomClass"&gt;
    ...
 &lt;/div&gt;</programlisting>
 				</step>
 			</procedure>
 =

 		</example>
+		=

+		<section id=3D"sect-Developer_Guide-Customizing_skins-Creating_a_new_ski=
n">
+			<title>Creating a new skin</title>
+			<procedure>
+				<step>
+					<title>Create the skin file</title>
+					<para>The name of the skin file should follow the format <filename><r=
eplaceable>new_skin_name</replaceable>.skin.properties</filename> and is pl=
aced in either the <filename>META-INF/skins/</filename> directory or the cl=
asspath directory of your project.</para>
+				</step>
+				<step>
+					<title>Define the skin constants</title>
+					<stepalternatives>
+						<step>
+							<title>Define all the skin constants</title>
+							<para>Add skin parameter constants and values to the file. All the =
skin parameters listed in <xref linkend=3D"tabl-Developer_Guide-Skin_parame=
ter_tables_in_RichFaces-Parameter_settings_for_the_blueSky_skin" /> should =
be included in the skin file, with settings relevant to your new skin.</par=
a>
+							<example id=3D"exam-Developer_Guide-Skinning_and_theming-blueSky.sk=
in.properties_file">
+								<title><filename>blueSky.skin.properties</filename> file</title>
+								<para>
+									Open the <filename>blueSky.skin.properties</filename> file from t=
he <filename>/META-INF/skins</filename> directory in the <package>richfaces=
-impl-<replaceable>version</replaceable>.jar</package> package. The file li=
sts all the skin parameter constants shown in <xref linkend=3D"tabl-Develop=
er_Guide-Skin_parameter_tables_in_RichFaces-Parameter_settings_for_the_blue=
Sky_skin" />.
+								</para>
+								<para>
+									You can use the <filename>blueSky.skin.properties</filename> file=
 as a template for your new skin.
+								</para>
+							</example>
+						</step>
+						<step>
+							<title>Extend a base skin</title>
+							<para>
+								Instead of redefining an entire new skin, your skin can use an exi=
sting skin as a base on which to build new parameters. Specify a base skin =
by using the <varname>baseSkin</varname> parameter in the skin file, as sho=
wn in <xref linkend=3D"exam-Developer_Guide-Skinning_and_theming-Using_a_ba=
se_skin" />.
+							</para>
+							<example id=3D"exam-Developer_Guide-Skinning_and_theming-Using_a_ba=
se_skin">
+								<title>Using a base skin</title>
+								<para>
+									This example takes the <literal>blueSky</literal> skin as a base =
and only changes the <varname>generalSizeFont</varname> parameter.
+								</para>
+			<programlisting>baseSkin=3DblueSky
+generalSizeFont=3D12pt</programlisting>
+							</example>
+						</step>
+					</stepalternatives>
+				</step>
+				<step>
+					<title>Reference the skin definition</title>
+					<para>Add a skin definition <sgmltag>&lt;context-param&gt;</sgmltag> =
to the <filename>web.xml</filename> settings file of your application:</par=
a>
+					<programlisting>&lt;context-param&gt;
+   &lt;param-name&gt;org.richfaces.skin&lt;/param-name&gt;
+   &lt;param-value&gt;<replaceable>new_skin_name</replaceable>&lt;/param-v=
alue&gt;
+&lt;/context-param&gt;</programlisting>
+				</step>
+			</procedure>
+		</section>
 	</section>
 	=

-	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Skin_parameter_t=
ables_in_RichFaces">
-		<title>Skin parameter tables in RichFaces</title>
-		<para>
-			<xref linkend=3D"tabl-Developer_Guide-Skin_parameter_tables_in_RichFace=
s-Parameter_settings_for_the_blueSky_skin" /> lists the default values for =
the parameter settings in the <literal>blueSky</literal> skin. These values=
 can be customized and extended for a unique application theme as described=
 in <xref linkend=3D"sect-Developer_Guide-Skinning_and_theming-Customizing_=
skins" />.
-		</para>
-		<table id=3D"tabl-Developer_Guide-Skin_parameter_tables_in_RichFaces-Par=
ameter_settings_for_the_blueSky_skin">
-			<title>Parameter settings for the <literal>blueSky</literal> skin</titl=
e>
-			<tgroup cols=3D"2">
-				<thead>
-					<row>
-						<entry>
-							Parameter name
-						</entry>
-						<entry>
-							Default value
-						</entry>
-					</row>
-				</thead>
-				<tbody>
-					<row>
-						<entry><parameter>
-							headerBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#BED6F8
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							headerGradientColor
-						</parameter></entry>
-						<entry><literal>
-							#F2F7FF
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							headTextColor
-						</parameter></entry>
-						<entry><literal>
-							#000000
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							headerWeightFont
-						</parameter></entry>
-						<entry><literal>
-							bold
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							generalBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#FFFFFF
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							generalTextColor
-						</parameter></entry>
-						<entry><literal>
-							#000000
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							generalSizeFont
-						</parameter></entry>
-						<entry><literal>
-							11px
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							generalFamilyFont
-						</parameter></entry>
-						<entry><literal>
-							Arial, Verdana, sans-serif
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							controlTextColor
-						</parameter></entry>
-						<entry><literal>
-							#000000
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							controlBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#ffffff
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							additionalBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#ECF4FE
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							shadowBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#000000
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							shadowOpacity
-						</parameter></entry>
-						<entry><literal>
-							1
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							panelBorderColor
-						</parameter></entry>
-						<entry><literal>
-							#BED6F8
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							subBorderColor
-						</parameter></entry>
-						<entry><literal>
-							#ffffff
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tabBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#C6DEFF
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tabDisabledTextColor
-						</parameter></entry>
-						<entry><literal>
-							#8DB7F3
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							trimColor
-						</parameter></entry>
-						<entry><literal>
-							#D6E6FB
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tipBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#FAE6B0
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tipBorderColor
-						</parameter></entry>
-						<entry><literal>
-							#E5973E
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							selectControlColor
-						</parameter></entry>
-						<entry><literal>
-							#E79A00
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							generalLinkColor
-						</parameter></entry>
-						<entry><literal>
-							#0078D0
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							hoverLinkColor
-						</parameter></entry>
-						<entry><literal>
-							#0090FF
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							visitedLinkColor
-						</parameter></entry>
-						<entry><literal>
-							#0090FF
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							headerSizeFont
-						</parameter></entry>
-						<entry><literal>
-							11px
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							headerFamilyFont
-						</parameter></entry>
-						<entry><literal>
-							Arial, Verdana, sans-serif
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tabSizeFont
-						</parameter></entry>
-						<entry><literal>
-							11px
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tabFamilyFont
-						</parameter></entry>
-						<entry><literal>
-							Arial, Verdana, sans-serif
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							buttonSizeFont
-						</parameter></entry>
-						<entry><literal>
-							11px
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							buttonFamilyFont
-						</parameter></entry>
-						<entry><literal>
-							Arial, Verdana, sans-serif
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tableBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#FFFFFF
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tableFooterBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#cccccc
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tableSubfooterBackgroundColor
-						</parameter></entry>
-						<entry><literal>
-							#f1f1f1
-						</literal></entry>
-					</row>
-					<row>
-						<entry><parameter>
-							tableBorderColor
-						</parameter></entry>
-						<entry><literal>
-							#C0C0C0
-						</literal></entry>
-					</row>
-				</tbody>
-			</tgroup>
-		</table>
-	</section>
-	=

 	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Changing_skins_a=
t_runtime">
 		<title>Changing skins at runtime</title>
 		<para>
-			The user can change skins at runtime if a managed bean is used to acces=
s the skin.
+			To allow users to change skins at runtime, use a managed bean to access=
 the skin.
 		</para>
 		<procedure>
 			<step>
@@ -535,560 +658,46 @@
 				</stepalternatives>
 			</step>
 		</procedure>
-		<!-- TODO
-		<example id=3D"exam-Developer_Guide-Skinning_and_theming-Skin_changing_e=
xample">
-			<title>Skin changing example</title>
-			<para>
-				This example renders a list of radio buttons from which the user can c=
hoose their desired skin. The chosen skin is then applied to the panel bar =
items.
-			</para>
-<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text" h=
ref=3D"extras/exam-Developer_Guide-Skinning_and_theming-Skin_changing_examp=
le.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlist=
ing>
-			<blockquote>
-				<figure id=3D"figu-Developer_Guide-Skinning_and_theming-Skin_changing_=
example">
-					<title>Skin changing example</title>
-					<mediaobject>
-						<imageobject>
-							<imagedata fileref=3D"images/figu-Developer_Guide-Skinning_and_them=
ing-Skin_changing_example.png" format=3D"PNG" />
-						</imageobject>
-						<textobject>
-							<para>
-								A list of radio buttons from which the user can choose their desir=
ed skin. The chosen skin is then applied to the panel bar items.
-							</para>
-						</textobject>
-					</mediaobject>
-				</figure>
-			</blockquote>
-		</example>
-	-->
 	</section>
 	=

-	<section id=3D"sect-Developer_Guide-Creating_a_new_skin">
-		<title>Creating a new skin</title>
-		<procedure>
-			<step>
-				<title>Create the skin file</title>
-				<para>The name of the skin file should follow the format <filename><re=
placeable>new_skin_name</replaceable>.skin.properties</filename> and is pla=
ced in either the <filename>META-INF/skins/</filename> directory or the cla=
sspath directory of your project.</para>
-			</step>
-			<step>
-				<title>Define skin constants</title>
-				<para>Add skin parameter constants and values to the file. <xref linke=
nd=3D"exam-Developer_Guide-Skinning_and_theming-blueSky.skin.properties_fil=
e" /> shows how the skin parameters listed in <xref linkend=3D"tabl-Develop=
er_Guide-Skin_parameter_tables_in_RichFaces-Parameter_settings_for_the_blue=
Sky_skin" /> are included in the skin file.</para>
-				<example id=3D"exam-Developer_Guide-Skinning_and_theming-blueSky.skin.=
properties_file">
-					<title><filename>blueSky.skin.properties</filename> file</title>
-					<para>
-						The <filename>blueSky.skin.properties</filename> file lists all the =
skin parameter constants for the skin. It can be extracted from the <filena=
me>/META-INF/skins</filename> directory in the <package>richfaces-impl-<rep=
laceable>version</replaceable>.jar</package> package.
-					</para>
-<programlisting>#Colors
-headerBackgroundColor=3D#BED6F8
-headerGradientColor=3D#F2F7FF
-headerTextColor=3D#000000
-headerWeightFont=3Dbold
-
-generalBackgroundColor=3D#FFFFFF
-generalTextColor=3D#000000
-generalSizeFont=3D11px
-generalFamilyFont=3DArial, Verdana, sans-serif =

-
-controlTextColor=3D#000000
-controlBackgroundColor=3D#ffffff
-additionalBackgroundColor=3D#ECF4FE
-
-shadowBackgroundColor=3D#000000
-shadowOpacity=3D1
-
-panelBorderColor=3D#BED6F8
-subBorderColor=3D#ffffff
-
-tabBackgroundColor=3D#C6DEFF
-tabDisabledTextColor=3D#8DB7F3
-
-trimColor=3D#D6E6FB
-
-tipBackgroundColor=3D#FAE6B0 =

-tipBorderColor=3D#E5973E =

-
-selectControlColor=3D#E79A00
-
-generalLinkColor=3D#0078D0
-hoverLinkColor=3D#0090FF
-visitedLinkColor=3D#0090FF
-
-# Fonts
-headerSizeFont=3D11px
-headerFamilyFont=3DArial, Verdana, sans-serif
-
-tabSizeFont=3D11
-tabFamilyFont=3DArial, Verdana, sans-serif
-
-buttonSizeFont=3D11
-buttonFamilyFont=3DArial, Verdana, sans-serif
-
-tableBackgroundColor=3D#FFFFFF
-tableFooterBackgroundColor=3D#cccccc
-tableSubfooterBackgroundColor=3D#f1f1f1
-tableBorderColor=3D#C0C0C0
-tableBorderWidth=3D1px
-
-#Calendar colors
-calendarWeekBackgroundColor=3D#F5F5F5
-
-calendarHolidaysBackgroundColor=3D#FFEBDA
-calendarHolidaysTextColor=3D#FF7800
-
-calendarCurrentBackgroundColor=3D#FF7800
-calendarCurrentTextColor=3D#FFEBDA
-
-calendarSpecBackgroundColor=3D#E4F5E2
-calendarSpecTextColor=3D#000000
-
-warningColor=3D#FFE6E6
-warningBackgroundColor=3D#FF0000
-
-editorBackgroundColor=3D#F1F1F1
-editBackgroundColor=3D#FEFFDA
-
-#Gradients
-gradientType=3Dplain</programlisting>
-				</example>
-				<para>
-					Alternatively, instead of redefining an entire new skin, your skin ca=
n use an existing skin as a base on which to build new parameters. Specify =
a base skin by using the <varname>baseSkin</varname> parameter in the skin =
file, as shown in <xref linkend=3D"exam-Developer_Guide-Skinning_and_themin=
g-Using_a_base_skin" />.
-				</para>
-				<example id=3D"exam-Developer_Guide-Skinning_and_theming-Using_a_base_=
skin">
-					<title>Using a base skin</title>
-					<para>
-						This example takes the <literal>blueSky</literal> skin as a base and=
 only changes the <varname>generalSizeFont</varname> parameter.
-					</para>
-<programlisting>baseSkin=3DblueSky
-generalSizeFont=3D12pt</programlisting>
-				</example>
-			</step>
-			<step>
-				<title>Reference skin definition</title>
-				<para>Add a skin definition <sgmltag>&lt;context-param&gt;</sgmltag> t=
o the <filename>web.xml</filename> settings file of your application:</para>
-<programlisting>&lt;context-param&gt;
-    &lt;param-name&gt;org.richfaces.SKIN&lt;/param-name&gt;
-    &lt;param-value&gt;<replaceable>new_skin_name</replaceable>&lt;/param-=
value&gt;
-&lt;/context-param&gt;</programlisting>
-			</step>
-		</procedure>
-	</section>
-	=

 	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Skinning_standar=
d_controls">
 		<title>Skinning standard controls</title>
-		<section id=3D"sect-Developer_Guide-Skinning_and_theming-Skinning_standa=
rd_JSF_components">
-			<title>Skinning standard JSF components</title>
-			<para>
-				The RichFaces framework can also use skinning to theme JSF (JavaServer=
 Faces) components in addition to RichFaces components. Follow these additi=
onal steps to skin JSF components.
-			</para>
-			<procedure>
-				<step>
-					<title>Register a custom render kit</title>
-					<para>The custom render kit is created by registering it in the <file=
name>faces-config.xml</filename> configuration file:</para>
-<programlisting>&lt;render-kit&gt;
-    &lt;render-kit-id&gt;<replaceable>new_skin_name</replaceable>&lt;/rend=
er-kit-id&gt;
-    &lt;render-kit-class&gt;org.ajax4jsf.framework.renderer.ChameleonRende=
rKitImpl&lt;/render-kit-class&gt;
-&lt;/render-kit&gt;</programlisting>
-				</step>
-				<step>
-					<title>Register custom renderers for the JSF component</title>
-					<para>Add custom renderers in the <filename>faces-config.xml</filenam=
e> configuration file for each JSF component you want to skin:</para>
-<programlisting>&lt;renderer&gt;
-    &lt;component-family&gt;javax.faces.Command&lt;/component-family&gt;
-    &lt;renderer-type&gt;javax.faces.Link&lt;/renderer-type&gt;
-    &lt;renderer-class&gt;<replaceable>new_skin_name</replaceable>.HtmlCom=
mandLinkRenderer&lt;/renderer-class&gt;
-&lt;/renderer&gt;</programlisting>
-				</step>
-				<step>
-					<title>Reference the render kit in the skin file</title>
-					<para>Add the following to the top of the skin parameters file: <code=
>render.kit=3D<replaceable>new_skin_name</replaceable></code></para>
-				</step>
-			</procedure>
-		</section>
-		=

-		<section id=3D"sect-Developer_Guide-Skinning_and_theming-Skinning_standa=
rd_HTML_controls">
-			<title>Skinning standard HTML controls</title>
-			<para>
-				Standard HTML controls and components used alongside RichFaces and JSF=
 components can also be themed to create a cohesive user interface. The fol=
lowing HTML elements accept skinning:
-			</para>
-			<itemizedlist>
-				<listitem>
-					<para>
-						<sgmltag>&lt;a&gt;</sgmltag> (including <sgmltag>a:hover</sgmltag>, =
<sgmltag>a:visited</sgmltag> and other elements)
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;fieldset&gt;</sgmltag>
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;hr&gt;</sgmltag>
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;input&gt;</sgmltag>
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;isindex&gt;</sgmltag>
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;keygen&gt;</sgmltag>
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;legend&gt;</sgmltag>
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;select&gt;</sgmltag>
-					</para>
-				</listitem>
-				<listitem>
-					<para>
-						<sgmltag>&lt;textarea&gt;</sgmltag>
-					</para>
-				</listitem>
-			</itemizedlist>
-			<para>
-				Skinning for standard HTML controls can be included in one of two ways:
-			</para>
-			<variablelist>
-				<varlistentry>
-					<term>Automatic skinning</term>
-					<listitem>
-						<para>
-							The skinning style properties are automatically applied to controls=
 based on their element names and attribute types. Specify the <literal>org=
.richfaces.CONTROL_SKINNING</literal> context parameter in the <filename>we=
b.xml</filename> configuration file:
-						</para>
-	<programlisting language=3D"XML" role=3D"XML">&lt;context-param&gt;
-		&lt;param-name&gt;org.richfaces.CONTROL_SKINNING&lt;/param-name&gt;
-		&lt;param-value&gt;enable&lt;/param-value&gt;
-	&lt;/context-param&gt;</programlisting>
-					</listitem>
-				</varlistentry>
-				<varlistentry>
-					<term>Skinning with CSS classes</term>
-					<listitem>
-						<para>
-							The skinning style properties are determined through CSS. This meth=
od is available by default, but can be disabled through the <literal>org.ri=
chfaces.CONTROL_SKINNING_CLASSES</literal> context parameter in the <filena=
me>web.xml</filename> configuration file:
-						</para>
-	<programlisting language=3D"XML" role=3D"XML">&lt;context-param&gt;
-		&lt;param-name&gt;org.richfaces.CONTROL_SKINNING_CLASSES&lt;/param-name&=
gt;
-		&lt;param-value&gt;disable&lt;/param-value&gt;
-	&lt;/context-param&gt;</programlisting>
-						<para>
-							When enabled, the parameter offers a predefined CSS class named <li=
teral>rich-container</literal>. Reference the class from any container-like=
 component, and the standard HTML controls in the container will be skinned=
. Standard HTML controls can also be specifically defined in the CSS; refer=
 to the <filename>org/richfaces/renderkit/html/css/basic_classes.xcss</file=
name> file in the <package>richfaces-ui.jar</package> package for examples =
of specially-defined CSS classes with skin parameters for HTML controls.
-						</para>
-					</listitem>
-				</varlistentry>
-			</variablelist>
-			<section id=3D"sect-Developer_Guide-Skinning_and_theming-Skinning_level=
s_for_standard_HTML_controls">
-				<title>Skinning levels for standard HTML controls</title>
-				<para>
-					There are two levels of skinning for HTML controls, depending on whet=
her the browser viewing the application includes rich visual styling capabi=
lities, and whether the browser supports features of CSS2 and CSS3.
-				</para>
-				<remark>Browser lists may need to be updated.</remark>
-				<itemizedlist>
-					<title>Basic skinning</title>
-					<listitem>
-						<para>
-							<productname>Apple Safari</productname>
-						</para>
-					</listitem>
-					<listitem>
-						<para>
-							<productname>Microsoft Internet Explorer 6</productname>
-						</para>
-					</listitem>
-					<listitem>
-						<para>
-							<productname>Microsoft Internet Explorer 7</productname> in <litera=
l>BackCompat</literal> mode (refer to <citetitle pubwork=3D"article"><varna=
me>compatMode</varname> Property</citetitle> at <ulink url=3D"http://msdn.m=
icrosoft.com/en-us/library/ms533687(VS.85).aspx">http://msdn.microsoft.com/=
en-us/library/ms533687(VS.85).aspx</ulink>
-						</para>
-					</listitem>
-					<listitem>
-						<para>
-							<productname>Opera</productname>
-						</para>
-					</listitem>
-				</itemizedlist>
-				<itemizedlist>
-					<title>Extended skinning</title>
-					<listitem>
-						<para>
-							<productname>Microsoft Internet Explorer 7</productname> in standar=
ds-compliant mode
-						</para>
-					</listitem>
-					<listitem>
-						<para>
-							<productname>Mozilla Firefox</productname>
-						</para>
-					</listitem>
-				</itemizedlist>
-				<para>
-					If the browser type cannot be identified, the extended level is used.=
 Set the level explicitly by adding the following context parameter to the =
<filename>web.xml</filename> configuration file, and specifying the <sgmlta=
g>&lt;param-value&gt;</sgmltag> element as either <literal>basic</literal> =
or <literal>extended</literal>:
-				</para>
-<programlisting language=3D"XML" role=3D"XML">&lt;context-param&gt;
-    &lt;param-name&gt;org.richfaces.CONTROL_SKINNING_LEVEL&lt;/param-name&=
gt;
-    &lt;param-value&gt;basic&lt;/param-value&gt;
-&lt;/context-param&gt;</programlisting>
-<!--
-			<para>
-				Browsers with rich visual styling for controls (such as Opera and Safa=
ri) will not work correctly with standard HTML control skinning. The RichFa=
ces framework includes a client-side script (<filename>skinning.js</filenam=
e>) for determining the styling capabilities of the browser and enabling ex=
tended skinning accordingly.
-			</para>
-			<procedure id=3D"proc-Developer_Guide-Skinning_and_theming-Using_the_sk=
inning.js_script">
-				<title>Using the skinning.js script</title>
-				<step>
-					<title>Activate the script on the page</title>
-					<para>Add the following code to the head of the page:</para>
-<programlisting language=3D"XML" role=3D"XML">&lt;script type=3D"text/java=
script"&gt;
-    window.RICH_FACES_EXTENDED_SKINNING_ON =3D true;
-&lt;/script&gt;</programlisting>
-				</step>
-			</procedure>
--->
-			</section>
-		</section>
-	</section>
-	=

-	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Defining_skins_f=
or_individual_components">
-		<title>Defining skins for individual components</title>
 		<para>
-			RichFaces uses <acronym>XCSS</acronym> (XML-formatted CSS) files to add=
 extra functionality to the skinning process. XCSS files can contain all th=
e styling information for each RichFaces component in the library.
+			Standard HTML controls used alongside RichFaces components are also the=
med to create a cohesive user interface.
 		</para>
-		<para>
-			XCSS files contain mappings between CSS properties and skin parameters.=
 The <varname>name</varname> attribute of the <sgmltag>&lt;u:selector&gt;</=
sgmltag> element is the name of the CSS selector. Each <sgmltag>&lt;u:style=
&gt;</sgmltag> element defines a CSS property with the <varname>name</varna=
me> attribute as its name. Using the <varname>skin</varname> attribute spec=
ifies a skin parameter from the current skin file, while using the <varname=
>value</varname> attribute enters the literal value in the CSS file. An exa=
mple of this is shown in <xref linkend=3D"exam-Developer_Guide-Skinning_and=
_theming-XCSS_style_mappings" />.
-		</para>
-		<example id=3D"exam-Developer_Guide-Skinning_and_theming-XCSS_style_mapp=
ings">
-			<title>XCSS style mappings</title>
+
+		<section id=3D"sect-Developer_Guide-Skinning_standard_controls-Automatic=
_skinning">
+			<title>Automatic skinning</title>
 			<para>
-				The XCSS code for the CSS selector named <literal>.rich-component-name=
</literal> is as follows:
+				The skinning style properties are automatically applied to controls ba=
sed on their element names and attribute types. If the HTML elements are re=
ferenced in the standard skin stylesheets, the controls will be styled acco=
rding to the mapped skin properties.
 			</para>
-<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text" h=
ref=3D"extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings=
-0.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlist=
ing>
 			<para>
-				This renders the following CSS code to be read by a standard browser:
+				Standard HTML controls are skinned in this way by default. To override=
 this behavior, set the <literal>org.richfaces.enableControlSkinning</liter=
al> context parameter in the <filename>web.xml</filename> configuration fil=
e to <literal>false</literal>:
 			</para>
-<programlisting language=3D"Java" role=3D"JAVA"><xi:include parse=3D"text"=
 href=3D"extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappin=
gs.css" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlisting>
-			<para>
-				CSS selectors with identical skinning properties can be listed in a si=
ngle <varname>name</varname> attribute of a <sgmltag>&lt;u:selector&gt;</sg=
mltag> element, separated by commas.
-			</para>
-<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text" h=
ref=3D"extras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings=
-1.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclude" /></programlist=
ing>
-		</example>
-		<para>
-			Style properties can be modified using XML-based XCSS code, or using em=
bedded standard CSS code, as shown in <xref linkend=3D"exam-Developer_Guide=
-Skinning_and_theming-Using_XCSS_code_or_standard_CSS_code" />
-		</para>
-		<example id=3D"exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code=
_or_standard_CSS_code">
-			<title>Using XCSS code or standard CSS code</title>
-			<formalpara>
-				<title>Using XCSS code</title>
+			<programlisting language=3D"XML" role=3D"XML">&lt;context-param&gt;
+   &lt;param-name&gt;org.richfaces.enableControlSkinning&lt;/param-name&gt;
+   &lt;param-value&gt;false&lt;/param-value&gt;
+&lt;/context-param&gt;</programlisting>
+		</section>
+
+		<section id=3D"sect-Developer_Guide-Skinning_standard_controls-Skinning_=
with_the_rfs-ctn_class">
+			<title>Skinning with the <classname>rfs-ctn</classname> class</title>
 				<para>
-					XCSS code follows an XML structure, using <sgmltag>&lt;u:selector&gt;=
</sgmltag> elements to define style classes and <sgmltag>&lt;u:style&gt;</s=
gmltag> elements for each style parameter.
+					The skinning style properties can be determined through a separate CS=
S class. This method is not available by default, but is enabled through th=
e <literal>org.richfaces.enableControlSkinningClasses</literal> context par=
ameter in the <filename>web.xml</filename> configuration file:
 				</para>
-			</formalpara>
-<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text" h=
ref=3D"extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_=
standard_CSS_code-XCSS.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XIncl=
ude" /></programlisting>
-			<formalpara>
-				<title>Using standard CSS code</title>
+				<programlisting language=3D"XML" role=3D"XML">&lt;context-param&gt;
+   &lt;param-name&gt;org.richfaces.enableControlSkinningClasses&lt;/param-=
name&gt;
+   &lt;param-value&gt;true&lt;/param-value&gt;
+&lt;/context-param&gt;</programlisting>
 				<para>
-					CSS code can be included in an XCSS file through the use of a <sgmlta=
g>&lt;f:verbatim&gt;</sgmltag> element with a character data (CDATA) sectio=
n.
+					When enabled, a stylesheet with predefined classes offers a special C=
SS class named <classname>rfs-ctn</classname>. Reference the <classname>rfs=
-ctn</classname> class from any container element (such as a <sgmltag>&lt;d=
iv&gt;</sgmltag> element) to skin all the standard HTML controls in the con=
tainer.
 				</para>
-			</formalpara>
-<programlisting language=3D"XML" role=3D"XML"><xi:include parse=3D"text" h=
ref=3D"extras/exam-Developer_Guide-Skinning_and_theming-Using_XCSS_code_or_=
standard_CSS_code-CSS.xml_sample" xmlns:xi=3D"http://www.w3.org/2001/XInclu=
de" /></programlisting>
-		</example>
-	</section>
-	=

-	<section id=3D"sect-Developer_Guide-Skinning_and_theming-Extended_skinnin=
g">
-		<title>Plug-n-skin</title>
-		<para>
-			<emphasis>Plug-n-skin</emphasis> is an alternate method to create, cust=
omize, and add a skin. The skin can be based on an existing RichFaces skin,=
 and can include support for skinning standard HTML controls.
-		</para>
-		<procedure>
-			<step>
-				<title>Create a template</title>
-				<para>Use the <productname>Maven</productname> build and deployment to=
ol to create the skin template by using the following command:</para>
-<screen>mvn archetype:create -DarchetypeGroupId=3Dorg.richfaces.cdk -Darch=
etypeArtifactId=3Dmaven-archetype-plug-n-skin -DarchetypeVersion=3D<replace=
able>RF-VERSION</replaceable> -DartifactId=3D<replaceable>ARTIFACT-ID</repl=
aceable> -DgroupId=3D<replaceable>GROUP-ID</replaceable> -Dversion=3D<repla=
ceable>VERSION</replaceable></screen>
 				<para>
-					Use the following parameters for the command:
+					Standard HTML controls can also be specifically defined in the CSS. R=
efer to the <filename>/core/impl/src/main/resources/META-INF/resources/skin=
ning_both.ecss</filename> file in the <package>richfaces-ui.jar</package> p=
ackage for examples of specially-defined CSS classes with skin parameters f=
or HTML controls.
 				</para>
-				<variablelist>
-					<varlistentry>
-						<term><parameter>archetypeVersion</parameter></term>
-						<listitem>
-							<para>
-								The version of RichFaces, for example, <literal>4.0.0.GA</literal>.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><parameter>artifactId</parameter></term>
-						<listitem>
-							<para>
-								The artifact identifier or name of the project. The Maven template=
 will be created in a directory using this name.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><parameter>groupId</parameter></term>
-						<listitem>
-							<para>
-								The group identifier of the project.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><parameter>version</parameter></term>
-						<listitem>
-							<para>
-								The version of your project, for example, <literal>1.0</literal>.
-							</para>
-						</listitem>
-					</varlistentry>
-				</variablelist>
-			</step>
-			<step>
-				<title>Add the skin to the CDK</title>
-				<para>Change to the newly-created directory. Ensure it contains the <f=
ilename>pom.xml</filename> project file, then enter the following command t=
o create a new skin and add it to the <acronym>CDK</acronym> (Component Dev=
elopment Kit):</para>
-<screen>mvn cdk:add-skin -Dname=3D<replaceable>SKIN-NAME</replaceable> -Dp=
ackage=3D<replaceable>SKIN-PACKAGE</replaceable></screen>
-				<para>
-					Use the following parameters for the command:
-				</para>
-				<variablelist>
-					<varlistentry>
-						<term><parameter>name</parameter></term>
-						<listitem>
-							<para>
-								The name of your new skin.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><parameter>package</parameter></term>
-						<listitem>
-							<para>
-								The base package of the skin. By default, the group identifier is =
used.
-							</para>
-						</listitem>
-					</varlistentry>
-				</variablelist>
-				<para>
-					Use the following optional keys for advanced features:
-				</para>
-				<variablelist>
-					<varlistentry>
-						<term><parameter>baseSkin</parameter></term>
-						<listitem>
-							<para>
-								The skin to use as a base for the new skin.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><parameter>createExt</parameter></term>
-						<listitem>
-							<para>
-								Use <code>createExt=3Dtrue</code> to add extended CSS classes for =
skinning standard HTML controls.
-							</para>
-						</listitem>
-					</varlistentry>
-				</variablelist>
-				<para>
-					The command creates the following files:
-				</para>
-				<variablelist>
-					<varlistentry>
-						<term><filename>src/main/java/<replaceable>SKIN-PACKAGE</replaceable=
>/<replaceable>SKIN-NAME</replaceable>/images/BaseImage.java</filename></te=
rm>
-						<listitem>
-							<para>
-								The base class to store images.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><filename>src/test/java/<replaceable>SKIN-PACKAGE</replaceable=
>/<replaceable>SKIN-NAME</replaceable>/images/BaseImage.java</filename></te=
rm>
-						<listitem>
-							<para>
-								A test version of the base class to store images.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><filename>src/main/resources/<replaceable>SKIN-PACKAGE</replac=
eable>/<replaceable>SKIN-NAME</replaceable>/css/</filename></term>
-						<listitem>
-							<para>
-								The directory that holds the XCSS files that define the themes for=
 RichFaces components affected by the new skin.
-							</para>
-							<para>
-								If the <code>createExt=3Dtrue</code> parameter was used with the c=
ommand, the following XCSS files are included for defining styles for stand=
ard HTML controls:
-							</para>
-							<itemizedlist>
-								<listitem>
-									<para>
-										<filename>extended_classes.xcss</filename>
-									</para>
-								</listitem>
-								<listitem>
-									<para>
-										<filename>extended.xcss</filename>
-									</para>
-								</listitem>
-							</itemizedlist>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><filename>src/main/resources/<replaceable>SKIN-PACKAGE</replac=
eable>/<replaceable>SKIN-NAME</replaceable>/css/<replaceable>SKIN-NAME</rep=
laceable>.properties</filename></term>
-						<listitem>
-							<para>
-								The file that contains the skin properties.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><filename>src/main/resources/META-INF/skins/<replaceable>SKIN-=
NAME</replaceable>.xcss</filename></term>
-						<listitem>
-							<para>
-								A global XCSS file that imports the component-specific XCSS files.
-							</para>
-							<para>
-								If the <code>createExt=3Dtrue</code> parameter was used with the c=
ommand, the following <filename><replaceable>skin-name</replaceable>-ext.xc=
ss</filename> file is included, which imports the XCSS files for standard H=
TML controls.
-							</para>
-						</listitem>
-					</varlistentry>
-					<varlistentry>
-						<term><filename>src/main/config/resources/<replaceable>SKIN-NAME</re=
placeable>-resources.xml</filename></term>
-						<listitem>
-							<para>
-								The file that contains the description of all the files listed abo=
ve.
-							</para>
-						</listitem>
-					</varlistentry>
-				</variablelist>
-			</step>
-			<step>
-				<title>Edit XCSS files</title>
-				<para>
-					Edit the XCSS files contained in the <filename>src/main/resources/MET=
A-INF/skins/</filename> directory. Refer to <xref linkend=3D"sect-Developer=
_Guide-Skinning_and_theming-Defining_skins_for_individual_components" /> fo=
r instructions on how to edit XCSS files.
-				</para>
-			</step>
-			<step>
-				<title>Build the skin</title>
-				<para>
-					After editing the XCSS files, build the skin by running the following=
 command in the root directory of your skin project (the directory that con=
tains the <filename>pom.xml</filename> file).
-				</para>
-<screen>mvn clean install</screen>
-			</step>
-			<step>
-				<title>Add the skin to the project configuration</title>
-				<para>Add the following context parameter to your project's <filename>=
web.xml</filename> configuration file to use the new skin in your applicati=
on:</para>
-<programlisting>&lt;context-param&gt;
-    &lt;param-name&gt;org.ajax4jsf.SKIN&lt;/param-name&gt;
-    &lt;param-value&gt;<replaceable>SKIN-NAME</replaceable>&lt;/param-valu=
e&gt;
-&lt;/context-param&gt;</programlisting>
-			</step>
-		</procedure>
+		</section>
+		=

 	</section>
-
+	=

 </chapter>
 =


Copied: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/ex=
am-Developer_Guide-Skinning_and_theming-ECSS_style_mappings-0.xml_sample (f=
rom rev 21645, modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/ex=
tras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-0.xml_sa=
mple)
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-ECSS_style_mappings-0.xml_sample	      =
                  (rev 0)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-ECSS_style_mappings-0.xml_sample	2011-0=
3-22 05:43:42 UTC (rev 22289)
@@ -0,0 +1,6 @@
+<u:selector name=3D".rich-component-name">
+    <u:style name=3D"background-color" skin=3D"additionalBackgroundColor" =
/>
+    <u:style name=3D"border-color" skin=3D"tableBorderColor" />
+    <u:style name=3D"border-width" skin=3D"tableBorderWidth" />
+    <u:style name=3D"border-style" value=3D"solid" />
+</u:selector>

Copied: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/ex=
am-Developer_Guide-Skinning_and_theming-ECSS_style_mappings-1.xml_sample (f=
rom rev 21645, modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/ex=
tras/exam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-1.xml_sa=
mple)
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-ECSS_style_mappings-1.xml_sample	      =
                  (rev 0)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-ECSS_style_mappings-1.xml_sample	2011-0=
3-22 05:43:42 UTC (rev 22289)
@@ -0,0 +1,3 @@
+<u:selector name=3D".rich-ordering-control-disabled, .rich-ordering-contro=
l-top, .rich-ordering-control-bottom, .rich-ordering-control-up, .rich-orde=
ring-control-down">
+    <u:style name=3D"border-color" skin=3D"tableBorderColor" />
+</u:selector>

Copied: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/ex=
am-Developer_Guide-Skinning_and_theming-ECSS_style_mappings.css (from rev 2=
1645, modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam=
-Developer_Guide-Skinning_and_theming-XCSS_style_mappings.css)
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-ECSS_style_mappings.css	               =
         (rev 0)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-ECSS_style_mappings.css	2011-03-22 05:4=
3:42 UTC (rev 22289)
@@ -0,0 +1,14 @@
+.rf-p{
+   background-color:'#{richSkin.generalBackgroundColor}';
+   color:'#{richSkin.panelBorderColor}';
+   border-width:1px;
+   border-style:solid;
+   padding:1px;
+}
+
+.rf-p-b{
+   font-size:'#{richSkin.generalSizeFont}';
+   color:'#{richSkin.generalTextColor}';
+   font-family:'#{richSkin.generalFamilyFont}';
+   padding:10px;
+}

Deleted: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/e=
xam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-0.xml_sample
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-XCSS_style_mappings-0.xml_sample	2011-0=
3-21 19:11:35 UTC (rev 22288)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-XCSS_style_mappings-0.xml_sample	2011-0=
3-22 05:43:42 UTC (rev 22289)
@@ -1,6 +0,0 @@
-<u:selector name=3D".rich-component-name">
-    <u:style name=3D"background-color" skin=3D"additionalBackgroundColor" =
/>
-    <u:style name=3D"border-color" skin=3D"tableBorderColor" />
-    <u:style name=3D"border-width" skin=3D"tableBorderWidth" />
-    <u:style name=3D"border-style" value=3D"solid" />
-</u:selector>

Deleted: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/e=
xam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings-1.xml_sample
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-XCSS_style_mappings-1.xml_sample	2011-0=
3-21 19:11:35 UTC (rev 22288)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-XCSS_style_mappings-1.xml_sample	2011-0=
3-22 05:43:42 UTC (rev 22289)
@@ -1,3 +0,0 @@
-<u:selector name=3D".rich-ordering-control-disabled, .rich-ordering-contro=
l-top, .rich-ordering-control-bottom, .rich-ordering-control-up, .rich-orde=
ring-control-down">
-    <u:style name=3D"border-color" skin=3D"tableBorderColor" />
-</u:selector>

Deleted: modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/e=
xam-Developer_Guide-Skinning_and_theming-XCSS_style_mappings.css
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
--- modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-XCSS_style_mappings.css	2011-03-21 19:1=
1:35 UTC (rev 22288)
+++ modules/docs/trunk/Developer_Guide/src/main/docbook/en-US/extras/exam-D=
eveloper_Guide-Skinning_and_theming-XCSS_style_mappings.css	2011-03-22 05:4=
3:42 UTC (rev 22289)
@@ -1,6 +0,0 @@
-.rich-component-name {
-    background-color: additionalBackgroundColor; /*the value of the consta=
nt defined by your skin*/
-    border-color: tableBorderColor; /*the value of the constant defined by=
 your skin*/
-    border-width: tableBorderWidth; /*the value of the constant defined by=
 your skin*/
-    border-style: solid;
-}


--===============6443686595703240617==--