Author: cluts Date: 2008-03-06 08:47:35 -0500 (Thu, 06 Mar 2008) New Revision: 6599 Added: trunk/docs/userguide/en/src/main/resources/images/panel_CS1.png trunk/docs/userguide/en/src/main/resources/images/panel_CS2.png Modified: trunk/docs/userguide/en/src/main/docbook/included/panel.xml Log: RF-1052 - corrected code and updated screens for panel Modified: trunk/docs/userguide/en/src/main/docbook/included/panel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panel.xml 2008-03-06 13:36:41 UTC (rev 6598) +++ trunk/docs/userguide/en/src/main/docbook/included/panel.xml 2008-03-06 13:47:35 UTC (rev 6599) @@ -283,7 +283,7 @@ </mediaobject> </figure> - <table> + <table id="tab_cn11"> <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> @@ -308,45 +308,62 @@ </tbody> </tgroup> </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panel&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define necessary properties in them.</para> - - <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:panel&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:panel&gt;</property> - </emphasis>attribute.</para> - <para>CSS code piece used on a page:</para> + <para>In order to redefine styles for all <emphasis role="bold"><property>&lt;rich:panel&gt;</property></emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names (possible classes could be found in the table <link linkend="tab_cn11">above</link>) and define necessary properties in them. An example is placed below:</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="CSS"><![CDATA[... - .rich-panel-header{ - background-color:#F99; - } - .myClass{ - font-style:italic; - } +.rich-panel-body{ + background-color: #ebf3fd; +} ... ]]></programlisting> - <para>Hence, a header class is redefined for all <property>panels</property> (its color changed) - of this page and body class is extended with the custom style properties (font-style) for this - particular <property>panel</property>. As a result, the <property>panel</property> with a - header redefined color and a text style in body is got.</para> + + <para>This is a result:</para> + <figure> - <title><emphasis role="bold"> - <property>&lt;rich:panel&gt;</property></emphasis> with redefined header and body text style</title> - + <title>Redefinition styles with predefined classes</title> <mediaobject> <imageobject> - <imagedata fileref="images/panel4.png"/> + <imagedata fileref="images/panel_CS1.png"/> </imageobject> </mediaobject> </figure> + + <para>In the example a body background color was changed.</para> + <para>Also it’s possible to change styles of particular <emphasis role="bold"><property>&lt;rich:panel&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" + ><property>&lt;rich:panel&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... +.myClass{ + text-align: justify; +} +...]]></programlisting> + <para>The <emphasis><property>&quot;bodyClass&quot;</property></emphasis> attribute for <emphasis role="bold" + ><property>&lt;rich:panel&gt; </property></emphasis> is defined as it’s shown in the example below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[<h:panel... bodyClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panel_CS2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, text align of body was changed.</para> </section> <section> <title>Relevant Resources Links</title> Added: trunk/docs/userguide/en/src/main/resources/images/panel_CS1.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/panel_CS1.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/panel_CS2.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/panel_CS2.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream