Red Hat Summit 红帽全球峰会支持控制台（Console）开发人员开始试用联系人

此内容没有您所选择的语言版本。

4.4.8. Standard Controls Skinning

This feature is designed to unify the look and feel of standard HTML elements and RichFaces components. Skinning can be applied to all controls on a page based on element names and attribute types (where applicable). This feature also provides a set of CSS styles that let skins be applied by assigning rich-* classes to particular elements, or to a container of elements that nests controls.
Standard Controls Skinning provides two levels of skinning: Basic and Extended. The level used depends on the browser type detected. If the browser type cannot be detected, 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:
  • 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)
The following elements can be modified with skins:
  • input
  • select
  • textarea
  • keygen
  • isindex
  • legend
  • fieldset
  • hr
  • a (together with the a:hover, a:visited pseudo-elements)
There are two ways to initialize skinning for standard HTML controls:
  • add the org.richfaces.CONTROL_SKINNING parameter to web.xml. org.richfaces.CONTROL_SKINNING takes enable and disable 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 to web.xml. org.richfaces.CONTROL_SKINNING_CLASSES takes enable and disable as parameters. When enabled, you are provided with a set of predefined CSS classes to apply skins to your HTML components.
Enabling 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
}
...
    Copy to Clipboard Toggle word wrap
  • 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
}

...
    Copy to Clipboard Toggle word wrap

    Note

    Elements are given classes depending upon their link type and pseudo-class name, for example, rich-link, rich-link-hover, rich-link-visited
The predefined rich CSS classes provided can be used as classes for both basic and complex HTML elements.
The following code snippet shows several elements as an example: 
...
<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>
...
Copy to Clipboard Toggle word wrap
For a more thorough look at standard component skinning, we recommend exploring the CSS files located in the ui/core/src/main/resources/org/richfaces/ directory of the RichFaces SVN repository.

4.4.8.1. Standard Level
复制链接

Expand
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
Expand
Table 4.4. HTML Element Skin Bindings for fieldset
CSS Properties Skin Parameters
border-color panelBorderColor
Expand
Table 4.5. HTML Element Skin Bindings for hr
CSS Properties Skin Parameters
border-color panelBorderColor
Expand
Table 4.6. HTML Element Skin Bindings for a
CSS Properties Skin Parameters
color generalLinkColor
Expand
Table 4.7. HTML Element Skin Bindings for a:hover
CSS Properties Skin Parameters
color hoverLinkColorgeneralLinkColor
Expand
Table 4.8. HTML Element Skin Bindings for a:visited
CSS Properties Skin Parameters
color visitedLinkColor
Expand
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
Expand
Table 4.10.  Rich Element Skin Bindings for .rich-fieldset
CSS Properties Skin Parameters
border-color panelBorderColor
Expand
Table 4.11.  Rich Element Skin Bindings for .rich-hr
CSS Properties Skin Parameters
border-color panelBorderColor
border-width 1px
border-style solid
Expand
Table 4.12.  Rich Element Skin Bindings for .rich-link
CSS Properties Skin Parameters
color generalLinkColor
Expand
Table 4.13.  Rich Element Skin Bindings for .rich-link:hover
CSS Properties Skin Parameters
color hoverLinkColor
Expand
Table 4.14.  Rich Element Skin Bindings for .rich-link:visited
CSS Properties Skin Parameters
color visitedLinkColor
Expand
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
Expand
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
Expand
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
Expand
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
Expand
Table 4.19.  Rich Element Skin Bindings for .rich-button-press
CSS Properties Skin Parameters
background-position bottom left
Expand
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
Expand
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
Expand
Table 4.22.  Rich Element Skin Bindings for .rich-form
CSS Properties Skin Parameters
padding 0px
margin 0px
返回顶部
Red Hat logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务，以及可以信赖的内容，帮助红帽用户创新并实现他们的目标。 了解我们当前的更新.

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情，请参阅红帽博客.

關於紅帽

我们提供强化的解决方案，使企业能够更轻松地跨平台和环境（从核心数据中心到网络边缘）工作。

Theme

© 2025 Red Hat