From richfaces-svn-commits at lists.jboss.org Wed Aug 19 06:06:58 2009
Content-Type: multipart/mixed; boundary="===============0669523335040795357=="
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: r15212 -
 branches/community/3.3.X/docs/userguide/en/src/main/docbook/modules.
Date: Wed, 19 Aug 2009 06:06:58 -0400
Message-ID: <200908191006.n7JA6wCA032605@svn01.web.mwc.hst.phx2.redhat.com>

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

Author: ochikvina
Date: 2009-08-19 06:06:57 -0400 (Wed, 19 Aug 2009)
New Revision: 15212

Modified:
   branches/community/3.3.X/docs/userguide/en/src/main/docbook/modules/RFCa=
rchitectover.xml
Log:
https://jira.jboss.org/jira/browse/RF-7716 - added new section "Definition =
of Custom Style Classes";

Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/modul=
es/RFCarchitectover.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
--- branches/community/3.3.X/docs/userguide/en/src/main/docbook/modules/RFC=
architectover.xml	2009-08-19 08:20:28 UTC (rev 15211)
+++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/modules/RFC=
architectover.xml	2009-08-19 10:06:57 UTC (rev 15212)
@@ -3639,7 +3639,66 @@
 	</section>
 	<section id=3D"customstyles">
 		<title>Definition of Custom Style Classes</title>
-		<para></para>
+		<para>In the &quot;Reference Data&quot; section for most of the componen=
ts (see &quot;The RichFaces Components&quot; chapter) =

+			there are the tables with <code>rich-*</code> classes definitions. Thes=
e classes allow to redefine styles for a specific component by means of CSS.
+			Actually, you should create classes with the same names and define new =
properties in them.</para>
+		=

+		<para>Let&apos;s consider the <link linkend=3D"rich_modalPanel"><emphasi=
s role=3D"bold"><property>&lt;rich:modalPanel&gt;</property></emphasis></li=
nk> component. =

+			To change the background color for the mask, it&apos;s enough to redefi=
ne the <code>.rich-mpnl-mask-div</code> class.</para>
+		=

+		<para>
+			<emphasis role=3D"bold">Example:</emphasis>
+		</para>
+		<programlisting role=3D"CSS"><![CDATA[...
+.rich-mpnl-mask-div{
+    background-color:#fae6b0;
+}
+...]]></programlisting>
+		=

+		<para>This is a result:</para>
+		=

+		<figure>
+			<title>Style redefinition with predefined class</title>
+			<mediaobject>
+				<imageobject>
+					<imagedata fileref=3D"images/modalPanel_pc.png"/>
+				</imageobject>
+			</mediaobject>
+		</figure>
+		=

+		<para>If you have multiple components on the page, the redefined styles =
will be applied to all of them. To change styles for a =

+			particular component on the page, create your own style classes and use=
 them in corresponding style class attributes. An example on how to =

+			change the font style for the header of a particular modal panel is pla=
ced below:</para>
+		=

+		<para>
+			<emphasis role=3D"bold">Example:</emphasis>
+		</para>
+		<programlisting role=3D"CSS"><![CDATA[...
+.myClass{
+    font-style:italic;
+}
+...]]></programlisting>
+		<para>Next specify <emphasis>
+			<property>myClass</property></emphasis> as the value of the <emphasis>
+			<property>&quot;headerClass&quot;</property>
+		</emphasis> attribute for <emphasis role=3D"bold">
+			<property>&lt;rich:modalPanel&gt;</property>
+		</emphasis>:</para>
+	=

+		<programlisting role=3D"XML"><![CDATA[<rich:modalPanel ... headerClass=
=3D"myClass"/>
+]]></programlisting>
+		=

+		<para>This is a result:</para>
+		=

+		<figure>
+			<title>Style redefinition with own class</title>
+			<mediaobject>
+				<imageobject>
+					<imagedata fileref=3D"images/modalPanel_oc.png"/>
+				</imageobject>
+			</mediaobject>
+		</figure>
+		=

 	</section>
 	<section id=3D"statemanagerapi">
 		<title>State Manager API</title>


--===============0669523335040795357==--