10:22 a.m.
Author: abogachuk
Date: 2009-06-29 11:22:02 -0400 (Mon, 29 Jun 2009)
New Revision: 16257
Modified:
trunk/jsf/docs/userguide/en/modules/editors.xml
Log:
https://jira.jboss.org/jira/browse/JBDS-752 - section 3.2.2 updated: page styling
re-written
Modified: trunk/jsf/docs/userguide/en/modules/editors.xml
===================================================================
--- trunk/jsf/docs/userguide/en/modules/editors.xml 2009-06-29 15:21:11 UTC (rev 16256)
+++ trunk/jsf/docs/userguide/en/modules/editors.xml 2009-06-29 15:22:02 UTC (rev 16257)
@@ -1023,13 +1023,13 @@
</mediaobject>
</figure>
- <para id="css_dialog"><property>CSS
Dialog</property> has four tabs where css
+ <para id="css_dialog"><property>CSS Style
Dialog</property> has several tabs where css
properties for text, background, borders and others can be specified.
A simple
- preview which is generated at the top of the <property>CSS
Dialog</property>
+ preview which is generated at the top of the <property>CSS
Style Dialog</property>
allows you to see the changes before you apply them.</para>
<figure>
- <title>CSS Dialog</title>
+ <title>CSS Style Dialog</title>
<mediaobject>
<imageobject>
<imagedata
fileref="images/visual_page/visual_page_7.png"/>
@@ -1042,16 +1042,15 @@
<title>External Stylesheets</title>
<para>The pages you are working with in
<property>VPE</property> can use external
stylesheets. <property>VPE</property> allows you to
create new style classes in
- existing stylesheets and/or edit them as well. For these purposes
<property>CSS
- Style Class Dialog</property> is provided (hot keys -
<emphasis>
-
<property>CTRL+SHIT+C</property>).</emphasis></para>
+ existing stylesheets and/or edit them as well. For these purposes
<property>Edit
+ Style Class Dialog</property> is provided.</para>
<para>Select the element for which you need to create or edit style
class and press
button next to <emphasis>
<property>styleClass</property>
</emphasis> field in <property>Properties
view</property>.</para>
<figure>
- <title>Calling the CSS Style Class Dialog</title>
+ <title>Calling the Edit Style Class Dialog</title>
<mediaobject>
<imageobject>
<imagedata
fileref="images/visual_page/visual_page_17.png"/>
@@ -1059,32 +1058,37 @@
</mediaobject>
</figure>
- <para>It'll pick up the <property>CSS Style Class
Dialog</property> which
- looks like on the figure below.</para>
+ <para>It'll pick up the <property>Edit Style Class
Dialog</property> which
+ looks like on the figure below:</para>
<figure>
- <title>CSS Style Class Dialog</title>
+ <title>Edit Style Class Dialog</title>
<mediaobject>
<imageobject>
<imagedata
fileref="images/visual_page/visual_page_18.png"/>
</imageobject>
</mediaobject>
</figure>
- <para>First, you should specify the CSS file where you are going to
put your style
- class. Do this by pressing the button next to the <emphasis>
- <property>CSS file</property>
- </emphasis> field.</para>
- <figure>
- <title>CSS File Selection</title>
- <mediaobject>
- <imageobject>
- <imagedata
fileref="images/visual_page/visual_page_19.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>To create new CSS class write its name in the
<emphasis>
- <property>Style class</property>
- </emphasis> field and then configure style settings switching
between the tabs: <emphasis>
+
+ <para>Choose a style class from the variants provided and click on
the <property>Ok</property> button to apply the changes.</para>
+
+ <para>To open a CSS dialog based on the active CSS file click on
<inlinemediaobject>
+ <imageobject>
+ <imagedata
fileref="images/visual_page/visual_page_19.png"/>
+ </imageobject>
+ </inlinemediaobject> in the top panel or use hot-keys
(<property>Shift+Ctrl+C</property>). </para>
+
+ <para>To create a new CSS class for the file click on the
<property>Add CSS Class</property> button, write its name in the field
appeared and click on the <property>Ok</property> button:</para>
+
+ <figure>
+ <title>Add CSS Class</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/visual_page/visual_page_20_b.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>Then you can configure style settings switching between
the tabs: <emphasis>
<property>Text/Font</property>, </emphasis>
<emphasis>
<property>Background</property>, </emphasis>
@@ -1095,7 +1099,7 @@
the chosen element just point to the
necessary one. Each time you select any class it is displayed in the
Preview tab. Click on the
<emphasis><property>Apply</property></emphasis> button will apply
the changes without closing the window.</para>
- <figure>
+ <figure>
<title>Style Class Selection</title>
<mediaobject>
<imageobject>
@@ -1104,6 +1108,9 @@
</mediaobject>
</figure>
+
+
+
<para>The <emphasis>
<property>Edited properties</property>
</emphasis> tab gives a preview of the properties which are set
for the existing
@@ -1142,7 +1149,7 @@
</mediaobject>
</figure>
- <para>At the top of the <property>CSS Style Class
Dialog</property>
+ <para>At the top of the <property>CSS Class
Dialog</property>
you can see a preview box which visualizes the result. To edit the
preview you should double click in the box. To leave the focus, use <emphasis>
<property>Ctrl +
Tab</property>.</emphasis></para>
@@ -1157,7 +1164,7 @@
<para>The dialog for creating a new CSS class, which is called from
<emphasis>
<property>New > Other... > JBoss Tools Web > CSS
Class</property>,
- </emphasis> looks the same.</para>
+ </emphasis> looks this way:</para>
<figure>
<title>New CSS Class Dialog</title>
@@ -1167,6 +1174,18 @@
</imageobject>
</mediaobject>
</figure>
+ <para>Click on the <property>Browse</property> button to
open a dialog to select the CSS file to create a CSS class for:</para>
+ <figure>
+ <title>CSS File Selection</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/visual_page/visual_page_22_b.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Choose the necessary CSS file and click on the
<property>Ok</property> button.</para>
+
+
</section>
</section>