The rich client allows rich components to be styled based on whether or not they have certain levels of messages associated with them. When a message of a particular type is added to a component (using the FacesMessage framework), the styles of that component are automatically modified to reflect the new status. If styles are not defined for the status in question, then the default stles are used.

In order to define styles for your components based on message levels that are tied to them, you would append a style pseudo-class to your component definition. For example:

    af|inputText::content {
      /*defines the base style for the content region of the af:inputText tag*/
    }
    af|inputText:error::content {
      /*defines the base style for the content region of the ad:inputText tag
        whem an error message is present.  The default will also be processed
        in addition to this special "error" style.
    }
  

The valid message properties are: fatal, error, warning, confirmation, and info. Typically these styles will only be defined on input elements, and they are of the form of a CSS pseudo-class (:fatal, :error, etc).

It is recommended that you use the aliases for the messages, if possible, since they will affect all the components, and you will have to style fewer selectors.

See also

• message Component - These styles may also be used when automatically displaying messaging for components even when no message component is on the page.
• messages Component - These styles may also be used when automatically displaying messaging for the page even when no messages component is on the page.

Several CSS pseudo-classes apply to almost every component. Some of these, such as :active and :hover are defined by the CSS specification. Most, are specific to ADF Faces and apply in well-defined cases. When combined together in the same selector, the selector applies only when all states are statisfied. Thus, :hover applies to any component with the mouse hovered over it, while :disabled:hover applies to components that are both disabled and have the mouse hovered over them.

The purpose of themes is to provide a consistent look and feel across multiple components for a portion of a page. A common usage for themes is in a page template where certain areas have a distinct look. For example, a page may have a branding area at the top with a dark background and light text, a navigation component with a lighter background, and a main content area with a light background.

A component that sets a theme exposes that theme to its child components and therefore the theme is inherited. Themes can be set (started or changed) by the following components:

• af:document
• af:decorativeBox
• af:panelStretchLayout
• af:panelGroupLayout

The Fusion and BLAF Plus skins support the following themes:

• Dark
• Medium
• Light
• None (default)

In the JSPX page, the theme is started by the af:document component, as in: <af:document theme="dark"> <af:panelTabbed>...lt;/af:panelTabbed> </af:document>

To set the theme for a component, specify a theme attribute in the skin selector in the CSS file. For example, the selector to change the text color under an af:panelTabbed component to a dark theme is: af|panelTabbed[theme="dark"] { color: red; }

af|panelTabbed[theme="dark"] { -tr-children-theme: default; }

af|panelTabbed,
af|panelTabbed[theme="medium"],
af|panelTabbed[theme="light"] {
  -tr-children-theme: dark;
}

af|outputLabel {-tr-enable-themes: true;}

A commandMenuItem can be a child of a menu or a menuBar.

When present on a menu, the commandMenuItem is identified by the style "af|commandMenuItem::menu-item". The commandMenuItem is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the commandMenuItem text, the "menu-item-accelerator" which contains the commandMenuItem accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open icon appears.

When present on a menuBar, the commandMenuItem is identified by the style "af|commandMenuItem::bar-item". The bar item is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute, and the "bar-item-text" which contains the commandMenuItem text.

af|decorativeBox {
  /* Use this icon with the default theme */
  -tr-center-icon: AFDecorativeBoxCenterIcon;
}
af|decorativeBox[theme="dark"] {
  /* Use this icon with the dark theme */
  -tr-center-icon: AFDecorativeBoxCenterIcon;
}
.AFDecorativeBoxCenterIcon:alias {
  content: url(/afr/images/icon.png);
}
                              

A goMenuItem can be a child of a menu or a menuBar.

When present on a menu, the goMenuItem is identified by the style "af|goMenuItem::menu-item". Like commandMenuItem and submenus, the goMenuItem is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the goMenuItem text, the "menu-item-accelerator" which contains the goMenuItem accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open icon appears.

When present on a menuBar, the goMenuItem is identified by the style "af|goMenuItem::bar-item". The bar item is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute, and the "bar-item-text" which contains the goMenuItem text.

See also the selectors for af:inputRangeSlider. Most likely when you skin the af:inputNumberSlider component you'll want to skin the af:inputRangeSlider component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|inputNumberSlider::label, af|inputRangeSlider::label {background-color: silver}.

See also the selectors for af:inputNumberSlider. Most likely when you skin the af:inputRangeSlider component you'll want to skin the af:inputNumberSlider component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|inputNumberSlider::label, af|inputRangeSlider::label {background-color: silver}.

There are 2 parts to a menu. One is the menu itself - meaning the popup that opens up and shows the children contained inside the menu. The other part is the menu link - the menu text and open icon that you click to open the menu. Menus can appear as children of two components. A menu can appear inside a menuBar - this is a normal or top-level menu. Alternately a menu can appear inside another menu - this is a submenu or nested menu.

The top-level menu link that appears on a menuBar is identified by the style "af|menu::bar-item". The menu bar item is further defined by 3 major sections, the "bar-item-icon-style" which contains the optional icon attribute, the "bar-item-text" which contains the menu text, and the "bar-item-open-icon-style" which contains the icon that opens the menu itself.

A nested submenu link (a menu inside a menu) is identified by the style "af|menu::submenu". The submenu is further defined by 4 major sections, the "submenu-icon-style" which contains the optional icon attribute, the "submenu-text" which contains the menu text, the "submenu-accelerator" which is the empty space corresponding to where a commandMenuItem's or goMenuItem's accelerator appears, and the "submenu-open-indicator" which is the space where the open indicator ("submenu-open-icon-style") appears.

These styles may also be used when automatically displaying messaging for components even when no message component is on the page.

These styles may also be used when automatically displaying messaging for the page even when no messages component is on the page.

The panelBox component has attributes "ramp" and "background". With these attributes, the panelBox provides 8 different color schemes. For example, when panelBox's ramp="core" and background="dark", the panelBox's background-color might be a dark blue. When the panelBox's ramp="highlight" and background="default", the panelBox's background-color might be white.

The following selectors are all augmented by the two pseudo-classes. The first pseudo-class is the ramp which can have values of ":core" or ":highlight". The second pseudo-class is the background which can have the values of ":default", ":light", ":medium" or ":dark". For example, if you want to change the background color on the header start cell when the panelBox's ramp attribute is "core" and background attribute is "default" do the following: "af|panelBox::header-start:core:default {background-color:pink; border: none;}". NOTE: You can use the aliases to make change the header and content. These .AFPanelBox aliases are also included in the region selectors. For example, .AFPanelBoxHeaderCoreMedium:alias is included in the selectors af|panelBox::header-start:core:medium, af|panelBox::header-center:core:medium, af|panelBox::header-end:core:medium. So if you want to change the background color of the core medium panelBox'sheader, you can use the .AFPanelBoxHeaderCoreMedium:alias instead of three selectors.