cocoon-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From da...@cocoon.zones.apache.org
Subject [DAISY] Created: CSS
Date Mon, 08 May 2006 13:16:57 GMT
A new document has been created.

http://cocoon.zones.apache.org/daisy/documentation/1147.html

Document ID: 1147
Branch: main
Language: default
Name: CSS
Document Type: Cocoon Document
Created: 5/8/06 1:16:41 PM
Creator (owner): Simone Gianni
State: draft

Parts
=====

Content
-------
Mime type: text/xml
Size: 5390 bytes
Content:
<html>
<body>

<p>The library XSLTs provide CSS classes in the generated HTML. It's
responsibility of the page layout XSL to link to a CSS.</p>

<h1>Common fields styling</h1>

<p>The general rule for common fields (styled by forms-field-styling.xsl) is to
apply the following classes :</p>

<ul>
<li>"forms" : is always placed, to avoid name clashes with already present
site-specific classes.</li>
<li>&lt;widget name&gt; : can be "field", "action", "output", "booleanfield",
"multivaluefield", "upload", "repeater", "imagemap", "aggregatefield", "form",
"messages".</li>
<li>&lt;state&gt; : the state of the widget, can be empty, "active", "disbled",
"output".</li>
<li>"required" : if the widget is required.</li>
<li>"with-errors" : if there are some fi:validation-messages associated with the
widget.</li>
<li>&lt;class&gt; : an optional, user defined, fi:styling/@class that can be
specified on a field to fine tune widget styling.</li>
</ul>

<p>This technique makes it easy to write very specific CSS rules, as much as
very general ones. For example :</p>

<pre> </pre>

<pre>input.required {
  color: blue;
}
</pre>

<p>Will make all required inputs have a blue text color, while</p>

<pre>
input.upload.required {
  color: red;
}</pre>

<p>will make only the required upload widgets have a red text color.</p>

<p>The HTML elements to which this classes will be applied varies depending on
the widget type and special fi:styling attributes (like list-type for selection
lists, fi:styling/@type etc..).</p>

<p>There are also other classes, placed to correctly style other elements, these
are :</p>

<ul>
<li>"captcha" : applied to the img element of a captcha field.</li>
<li>"required-mark" : applied to the span containing the "*" near the required
fields.</li>
<li>"validation-message" : applied to the anchor element containing the "!" near
the fields with errors.</li>
<li>"vertical-list" and "horizontal-list" : applied to the tables used to layout
these kind of lists.</li>
<li>"upload-change-button" : applied to the button that appears next to the
upload widget when a file has been uploaded.</li>
</ul>

<p>For the validation-errors element (which outputs a list of all validation
errors found in the form) there are other special classes :</p>

<ul>
<li>"validation-errors" : applied to the div that contains the errors recap
block.</li>
<li>"validation-errors-header" and "validation-errors-footer" : applied to the
paragraphs that contains the header and footer of the errors recap.</li>
<li>"validation-errors-content" : applied to the "li" element of the errors
list.</li>
</ul>

<h1>Page styling</h1>

<p>Another set of classes is used for page styling (forms-page-styling.xsl). The
general rule for fi:group is to apply the following classes :</p>

<ul>
<li>"forms" : as always placed to mark a cocoon forms CSS class.</li>
<li>"group" : identify a group class</li>
<li>&lt;layout&gt; or &lt;type&gt; : the fi:styling/@layout or fi:styling/@type
of the fi:group</li>
<li>&lt;class&gt; : an optional, user defined, fi:styling/@class that can be
specified on a group to fine tune styling.</li>
</ul>

<p>As for the widgets, these classes are applied to different HTML elements
depèending on the group type and layout.</p>

<p>For those layouts which uses tables, special classes are used to mark
specific cells :</p>

<ul>
<li>"label" : applied to the "td" containing the label</li>
<li>"content" : applied to the "td" containing the form input</li>
<li>"action" : applied to the "td" containing an action widget, for those
layouts that creates special cells for this widgets.</li>
<li>"booleanfield" : applied to the "td" containing a booleanfield widget, for
those layouts that creates special cells for this widgets.</li>
<li>"other" : applied to the "td" containing other content, like another nested
fi:group or non cocoon forms elements.</li>
</ul>

<p>Consider this CSS snippet :</p>

<pre>
table.group.columns {
  border: 1px solid blue;
}
</pre>

<pre>table.group.columns td {
  background: yellow;
}
</pre>

<pre>table.group.columns td.label {
  background: blue;
  color: white;
  width: 20%;
}
</pre>

<p>This will style every fi:group with layout "columns" placing a blue border on
the table, then using a yello background for every cell in the table, while a
blue blackground, a while text color and a width of 20% will be used for cells
containing labels.</p>

<p>A special case of layout is handled directly in the basic xsl
(forms-field-styling.xsl), which format with a "columns" similar layout a
"fi:form". In this case the same classes (label, content etc..) applies.</p>

<p>Some special classes are used for the tab layout. These are :</p>

<ul>
<li>"tabArea" : applied to the div containing the tabs.</li>
<li>"tabContent" : applied to the div containing the tabs contents.</li>
<li>"tab" : applied to every span representing a single tab</li>
<li>"active" : marks the currently active tab.</li>
<li>"validation-message" : applied to the span placed in a tab when there are
validation-messages in any control inside that tab.</li>
</ul>

<h1>Compatibility with old classes</h1>

<p>The cocoon forms XSLs prior to this patch used a few CSS classes for tabs,
required marks, validation messages and another few elements. These classes have
been mantained to grant backward compatibilty, but should not be used anymore.
</p>

</body>
</html>

Collections
===========
The document belongs to the following collections: documentation

Mime
View raw message