cocoon-docs mailing list archives

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

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


Mime type: text/xml
Size: 5390 bytes

<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>

<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",
<li>&lt;state&gt; : the state of the widget, can be empty, "active", "disbled",
<li>"required" : if the widget is required.</li>
<li>"with-errors" : if there are some fi:validation-messages associated with the
<li>&lt;class&gt; : an optional, user defined, fi:styling/@class that can be
specified on a field to fine tune widget styling.</li>

<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;

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

input.upload.required {
  color: red;

<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>

<li>"captcha" : applied to the img element of a captcha field.</li>
<li>"required-mark" : applied to the span containing the "*" near the required
<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>

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

<li>"validation-errors" : applied to the div that contains the errors recap
<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

<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>

<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>

<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>

<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>

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

<pre> {
  border: 1px solid blue;

<pre> td {
  background: yellow;

<pre> td.label {
  background: blue;
  color: white;
  width: 20%;

<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>

<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>

<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.


The document belongs to the following collections: documentation

View raw message