4.4.8. Standard Controls Skinning
rich-*
classes to particular elements, or to a container of elements that nests controls.
Extended
is used. However, if you want to explicitly specify the level to be applied, add a org.richfaces.CONTROL_SKINNING_LEVEL
context parameter to your web.xml
and set the value to either basic
or extended
.
- The Basic level provides customization for only basic style properties. Basic skinning is applied to the following browsers:
- Internet Explorer 6
- Internet Explorer 7 in BackCompat mode (see document.compatMode property in MSDN)
- Opera
- Safari
- The Extended level introduces a broader number of style properties on top of basic skinning, and is applied to browsers with rich visual styling control capabilities. The following browsers support Extended skinning:
- Mozilla Firefox
- Internet Explorer 7 in Standards-compliant mode (CSS1Compat mode)
input
select
textarea
keygen
isindex
legend
fieldset
hr
a
(together with thea:hover
,a:visited
pseudo-elements)
- add the
org.richfaces.CONTROL_SKINNING
parameter toweb.xml
.org.richfaces.CONTROL_SKINNING
takesenable
anddisable
as parameters. This method implies that skinning style properties are applied per-element and attribute type (where applicable). No additional steps are required. See the Section 4.4.8.1, “Standard Level” and Section 4.4.8.2, “Extended level” tables for elements to which skinning can be applied. - add the
org.richfaces.CONTROL_SKINNING_CLASSES
parameter toweb.xml
.org.richfaces.CONTROL_SKINNING_CLASSES
takesenable
anddisable
as parameters. When enabled, you are provided with a set of predefined CSS classes to apply skins to your HTML components.
org.richfaces.CONTROL_SKINNING_CLASSES
provides you style classes that can be applied to:
- basic elements nested within elements with a rich-container class. For example:
... .rich-container select { //class content } ...
- Elements with a class name that corresponds to one of the basic element names or types are mapped with the
rich-<elementName>[-<elementType>]
scheme, as in the following example:... .rich-select { //class content } .rich-input-text { //class content } ...
Note
Elements are given classes depending upon theirlink
type and pseudo-class name, for example,rich-link
,rich-link-hover
,rich-link-visited
... <u:selector name=".rich-box-bgcolor-header"> <u:style name="background-color" skin="headerBackgroundColor" /> </u:selector> <u:selector name=".rich-box-bgcolor-general"> <u:style name="background-color" skin="generalBackgroundColor" /> </u:selector> ... //gradient elements ... <u:selector name=".rich-gradient-menu"> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.gradientimages.MenuGradientImage"/> </u:style> <u:style name="background-repeat" value="repeat-x" /> </u:selector> <u:selector name=".rich-gradient-tab"> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.gradientimages.TabGradientImage"/> </u:style> <u:style name="background-repeat" value="repeat-x" /> </u:selector> ...
ui/core/src/main/resources/org/richfaces/
directory of the RichFaces SVN repository.
4.4.8.1. Standard Level
Table 4.3. HTML Element Skin Bindings for input, select, textarea, button, keygen, isindex and legend
CSS Properties | Skin Parameters |
---|---|
font-size | generalSizeFont |
font-family | generalFamilyFont |
color | controlTextColor |
Table 4.4. HTML Element Skin Bindings for fieldset
CSS Properties | Skin Parameters |
---|---|
border-color | panelBorderColor |
Table 4.5. HTML Element Skin Bindings for hr
CSS Properties | Skin Parameters |
---|---|
border-color | panelBorderColor |
Table 4.6. HTML Element Skin Bindings for a
CSS Properties | Skin Parameters |
---|---|
color | generalLinkColor |
Table 4.7. HTML Element Skin Bindings for a:hover
CSS Properties | Skin Parameters |
---|---|
color | hoverLinkColorgeneralLinkColor |
Table 4.8. HTML Element Skin Bindings for a:visited
CSS Properties | Skin Parameters |
---|---|
color | visitedLinkColor |
Table 4.9. Rich Elements Skin Bindings for .rich-input, .rich-select, .rich-textarea, .rich-keygen, .rich-isindex, .rich-link
CSS Properties | Skin Parameters |
---|---|
font-size | generalSizeFont |
font-family | generalFamilyFont |
color | controlTextColor |
Table 4.10. Rich Element Skin Bindings for .rich-fieldset
CSS Properties | Skin Parameters |
---|---|
border-color | panelBorderColor |
Table 4.11. Rich Element Skin Bindings for .rich-hr
CSS Properties | Skin Parameters |
---|---|
border-color | panelBorderColor |
border-width | 1px |
border-style | solid |
Table 4.12. Rich Element Skin Bindings for .rich-link
CSS Properties | Skin Parameters |
---|---|
color | generalLinkColor |
Table 4.13. Rich Element Skin Bindings for .rich-link:hover
CSS Properties | Skin Parameters |
---|---|
color | hoverLinkColor |
Table 4.14. Rich Element Skin Bindings for .rich-link:visited
CSS Properties | Skin Parameters |
---|---|
color | visitedLinkColor |
Table 4.15. Rich Element Skin Bindings for .rich-field
CSS Properties | Skin parameters/Value |
---|---|
border-width | 1px |
border-style | inset |
border-color | panelBorderColor |
background-color | controlBackgroundColor |
background-repeat | no-repeat |
background-position | 1px 1px |
Table 4.16. Rich Element Skin Bindings for .rich-field-edit
CSS Properties | Skin Parameters |
---|---|
border-width | 1px |
border-style | inset |
border-color | panelBorderColor |
background-color | editBackgroundColor |
Table 4.17. Rich Element Skin Bindings for .rich-field-error
CSS Properties | Skin Parameters |
---|---|
border-width | 1px |
border-style | inset |
border-color | panelBorderColor |
background-color | warningBackgroundColor |
background-repeat | no-repeat |
background-position | center left |
padding-left | 7px |
Table 4.18. Rich Element Skin Bindings for .rich-button, .rich-button-disabled, .rich-button-over
CSS Properties | Skin Parameters |
---|---|
border-width | 1px |
border-style | solid |
border-color | panelBorderColor |
background-color | trimColor |
padding | 2px 10px 2px 10px |
text-align | center |
cursor | pointer |
background-repeat | repeat-x |
background-position | top left |
Table 4.19. Rich Element Skin Bindings for .rich-button-press
CSS Properties | Skin Parameters |
---|---|
background-position | bottom left |
Table 4.20. Rich Element Skin Bindings for .rich-container fieldset, .rich-fieldset
CSS Properties | Skin Parameters |
---|---|
border-color | panelBorderColor |
border-width | 1px |
border-style | solid |
padding | 10px |
padding | 10px |
Table 4.21. Rich Element Skin Bindings for .rich-legend
CSS Properties | Skin Parameters |
---|---|
font-size | generalSizeFont |
font-family | generalFamilyFont |
color | controlTextColor |
font-weight | bold |
Table 4.22. Rich Element Skin Bindings for .rich-form
CSS Properties | Skin Parameters |
---|---|
padding | 0px |
margin | 0px |