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/RFCarchitectover.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/modules/RFCarchitectover.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2009-08-19 08:20:28 UTC (rev 15211) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2009-08-19 10:06:57 UTC (rev 15212) @@ -3639,7 +3639,66 @@ </section> <section id="customstyles"> <title>Definition of Custom Style Classes</title> - <para></para> + <para>In the &quot;Reference Data&quot; section for most of the components (see &quot;The RichFaces Components&quot; chapter) + there are the tables with <code>rich-*</code> classes definitions. These 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="rich_modalPanel"><emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis></link> component. + To change the background color for the mask, it&apos;s enough to redefine the <code>.rich-mpnl-mask-div</code> class.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="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="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 placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="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="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis>:</para> + + <programlisting role="XML"><![CDATA[<rich:modalPanel ... headerClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Style redefinition with own class</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/modalPanel_oc.png"/> + </imageobject> + </mediaobject> + </figure> + </section> <section id="statemanagerapi"> <title>State Manager API</title>