You are viewing a plain text version of this content. The canonical link for it is here.
Posted to docs@cocoon.apache.org by da...@cocoon.zones.apache.org on 2006/05/08 15:16:57 UTC
[DAISY] Created: CSS
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><widget name> : can be "field", "action", "output", "booleanfield",
"multivaluefield", "upload", "repeater", "imagemap", "aggregatefield", "form",
"messages".</li>
<li><state> : 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><class> : 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><layout> or <type> : the fi:styling/@layout or fi:styling/@type
of the fi:group</li>
<li><class> : 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