9:59 a.m.
Author: cluts
Date: 2008-01-23 10:59:57 -0500 (Wed, 23 Jan 2008)
New Revision: 5568
Modified:
trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml
Log:
http://jira.jboss.com/jira/browse/RF-1052 - done for inputNumberSlider (added screens)
Modified: trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2008-01-23
15:55:17 UTC (rev 5567)
+++ trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2008-01-23
15:59:57 UTC (rev 5568)
@@ -308,7 +308,7 @@
</mediaobject>
</figure>
- <table>
+ <table id="tab_cn">
<title>Classes names that define a component appearance</title>
<tgroup cols="2">
<thead>
@@ -356,38 +356,66 @@
<para>In order to redefine styles for all <emphasis
role="bold">
<property><rich:inputNumberSlider></property>
</emphasis> components on a page using CSS, it's enough to create
classes with the
- same names and define necessary properties in them.</para>
+ same names (possible classes could be found in the table <ulink
linkend="tab_cn">above</ulink>) and define necessary properties in
them. An example is placed below:</para>
+
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
+.rich-inslider-tip{
+ background-color: #FFDAB9;
+ font-family: Arial Black;
+}
+...]]></programlisting>
- <para>To change styles of particular <emphasis role="bold">
- <property><rich:inputNumberSlider></property>
- </emphasis> components, define your own style classes in the corresponding
<emphasis
- role="bold">
- <property><rich:inputNumberSlider></property>
- </emphasis>attributes.</para>
+ <para>This is a result:</para>
- <para>CSS code piece used on a page:</para>
-
+ <figure>
+ <title>Redefinition styles with predefined classes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/inputNumberSlider_CS2.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>In the example a tip background color and font family was
changed.</para>
+
+ <para>Also it’s possible to change styles of particular <emphasis
role="bold"
+
><property><rich:inputNumberSlider></property></emphasis>
component. In this case you should create own style classes and use them in corresponding
<emphasis role="bold"
+
><property><rich:inputNumberSlider></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[...
- .rich-slider-handle{
- border:2px solid;
- }
- .myClass{
- font-style:italic;
- }
-...
-]]></programlisting>
- <para>The component is defined in the following way:</para>
-
+.myClass{
+ font-style: italic;
+}
+...]]></programlisting>
+ <para>The <emphasis>"inputClass"</emphasis>
attribute for <emphasis role="bold"
+ ><property><rich:inputNumberSlider>
</property></emphasis> is defined as it’s shown in the example
below:</para>
+
<para>
<emphasis role="bold">Example:</emphasis>
</para>
- <programlisting role="XML"><![CDATA[<rich:inputNumberSlider ...
inputClass="myClass" .../>
-]]></programlisting>
- <para>Hence, header border width of all
<property>sliders</property> is redefined on a page as
- well as a style font for an input field of a particular
<property>slider</property>.</para>
+ <programlisting role="CSS"><![CDATA[<rich: inputNumberSlider
... inputClass="myClass"/>
+]]></programlisting>
+
+ <para>This is a result:</para>
+
+ <figure>
+ <title>Redefinition styles with own classes and styleClass
attributes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/inputNumberSlider_CS1.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>As it could be seen on the picture above, the font style for input text
was changed.</para>
+
+
</section>
<section>
<title>Relevant Resources Links</title>