Red Hat Summit Red Hat Summit지원콘솔개발자평가판 시작연락처

이 콘텐츠는 선택한 언어로 제공되지 않습니다.

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

자세한 정보

평가판, 구매 및 판매

커뮤니티

Red Hat 문서 정보

Red Hat을 사용하는 고객은 신뢰할 수 있는 콘텐츠가 포함된 제품과 서비스를 통해 혁신하고 목표를 달성할 수 있습니다. 최신 업데이트를 확인하세요.

보다 포괄적 수용을 위한 오픈 소스 용어 교체

Red Hat은 코드, 문서, 웹 속성에서 문제가 있는 언어를 교체하기 위해 최선을 다하고 있습니다. 자세한 내용은 다음을 참조하세요.Red Hat 블로그.

Red Hat 소개

Red Hat은 기업이 핵심 데이터 센터에서 네트워크 에지에 이르기까지 플랫폼과 환경 전반에서 더 쉽게 작업할 수 있도록 강화된 솔루션을 제공합니다.

Theme

© 2026 Red Hat