Details
-
Improvement
-
Status: Closed
-
Major
-
Resolution: Fixed
-
None
-
None
-
Patch available
Description
Added CSS classes to key elements in default cocoon forms XSL. Here is a brief explanation of how it works :
-----------------------
Common fields styling
The general rule for common fields (styled by forms-field-styling.xsl) is to apply the following classes :
- "forms" : is placed always, to avoid name clashes with already present site-specific classes.
- <widget name> : can be "field", "action", "output", "booleanfield", "multivaluefield", "upload", "repeater", "imagemap", "aggregatefield", "form", "messages".
- <state> : the state of the widget, can be empty, "active", "disbled", "output".
- "required" : if the widget is required.
- "with-errors" : if there are some fi:validation-messages associated with the widget.
- <class> : an optional, user defined, fi:styling/@class that can be specified on a field to fine tune widget styling.
This technique makes it easy to write very specific CSS rules, as much as very general ones. For example :
input.required {
color: blue;
}
Will make all required inputs have a blue text color, while
input.upload.required {
color: red;
}
will make only the required upload widgets have a red text color.
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..).
There are also other classes, placed to correctly style other elements, these are :
- "captcha" : applied to the img element of a captcha field.
- "required-mark" : applied to the span containing the "*" near the required fields.
- "validation-message" : applied to the anchor element containing the "!" near the fields with errors.
- "vertical-list" and "horizontal-list" : applied to the tables used to layout these kind of lists.
- "upload-change-button" : applied to the button that appears next to the upload widget when a file has been uploaded.
For the validation-errors element (which outputs a list of all validation errors found in the form) there are other special classes :
- "validation-errors" : applied to the div that contains the errors recap block.
- "validation-errors-header" and "validation-errors-footer" : applied to the paragraphs that contains the header and footer of the errors recap.
- "validation-errors-content" : applied to the "li" element of the errors list.
Page styling
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 :
- "forms" : as always placed to mark a cocoon forms CSS class.
- "group" : identify a group class
- <layout> or <type> : the fi:styling/@layout or fi:styling/@type of the fi:group
- <class> : an optional, user defined, fi:styling/@class that can be specified on a group to fine tune styling.
As for the widgets, these classes are applied to different HTML elements depèending on the group type and layout.
For those layouts which uses tables, special classes are used to mark specific cells :
- "label" : applied to the "td" containing the label
- "content" : applied to the "td" containing the form input
- "action" : applied to the "td" containing an action widget, for those layouts that creates special cells for this widgets.
- "booleanfield" : applied to the "td" containing a booleanfield widget, for those layouts that creates special cells for this widgets.
- "other" : applied to the "td" containing other content, like another nested fi:group or non cocoon forms elements.
Consider this CSS snippet :
table.group.columns {
border: 1px solid blue;
}
table.group.columns td {
background: yellow;
}
table.group.columns td.label {
background: blue;
color: white;
width: 20%;
}
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.
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.
Some special classes are used for the tab layout. These are :
- "tabArea" : applied to the div containing the tabs.
- "tabContent" : applied to the div containing the tabs contents.
- "tab" : applied to every span representing a single tab
- "active" : marks the currently active tab.
- "validation-message" : applied to the span placed in a tab when there are validation-messages in any control inside that tab.
Compatibility with old classes
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.
-----------------------
Thanks to Derek Hohls and Helma for sharing with me their work on this subject.
-----------------------
Common fields styling
The general rule for common fields (styled by forms-field-styling.xsl) is to apply the following classes :
- "forms" : is placed always, to avoid name clashes with already present site-specific classes.
- <widget name> : can be "field", "action", "output", "booleanfield", "multivaluefield", "upload", "repeater", "imagemap", "aggregatefield", "form", "messages".
- <state> : the state of the widget, can be empty, "active", "disbled", "output".
- "required" : if the widget is required.
- "with-errors" : if there are some fi:validation-messages associated with the widget.
- <class> : an optional, user defined, fi:styling/@class that can be specified on a field to fine tune widget styling.
This technique makes it easy to write very specific CSS rules, as much as very general ones. For example :
input.required {
color: blue;
}
Will make all required inputs have a blue text color, while
input.upload.required {
color: red;
}
will make only the required upload widgets have a red text color.
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..).
There are also other classes, placed to correctly style other elements, these are :
- "captcha" : applied to the img element of a captcha field.
- "required-mark" : applied to the span containing the "*" near the required fields.
- "validation-message" : applied to the anchor element containing the "!" near the fields with errors.
- "vertical-list" and "horizontal-list" : applied to the tables used to layout these kind of lists.
- "upload-change-button" : applied to the button that appears next to the upload widget when a file has been uploaded.
For the validation-errors element (which outputs a list of all validation errors found in the form) there are other special classes :
- "validation-errors" : applied to the div that contains the errors recap block.
- "validation-errors-header" and "validation-errors-footer" : applied to the paragraphs that contains the header and footer of the errors recap.
- "validation-errors-content" : applied to the "li" element of the errors list.
Page styling
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 :
- "forms" : as always placed to mark a cocoon forms CSS class.
- "group" : identify a group class
- <layout> or <type> : the fi:styling/@layout or fi:styling/@type of the fi:group
- <class> : an optional, user defined, fi:styling/@class that can be specified on a group to fine tune styling.
As for the widgets, these classes are applied to different HTML elements depèending on the group type and layout.
For those layouts which uses tables, special classes are used to mark specific cells :
- "label" : applied to the "td" containing the label
- "content" : applied to the "td" containing the form input
- "action" : applied to the "td" containing an action widget, for those layouts that creates special cells for this widgets.
- "booleanfield" : applied to the "td" containing a booleanfield widget, for those layouts that creates special cells for this widgets.
- "other" : applied to the "td" containing other content, like another nested fi:group or non cocoon forms elements.
Consider this CSS snippet :
table.group.columns {
border: 1px solid blue;
}
table.group.columns td {
background: yellow;
}
table.group.columns td.label {
background: blue;
color: white;
width: 20%;
}
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.
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.
Some special classes are used for the tab layout. These are :
- "tabArea" : applied to the div containing the tabs.
- "tabContent" : applied to the div containing the tabs contents.
- "tab" : applied to every span representing a single tab
- "active" : marks the currently active tab.
- "validation-message" : applied to the span placed in a tab when there are validation-messages in any control inside that tab.
Compatibility with old classes
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.
-----------------------
Thanks to Derek Hohls and Helma for sharing with me their work on this subject.