• Overview
• Global Selectors
• • Color
  • Font
  • Text
  • Icons
  • Component Group: Button
  • Component Group: Link
  • Component Group: Form Controls
  • Component Group: Menu
  • Component Group: PanelBox and Region
  • Component Group: PanelHeader
  • Component Group: Tabs
  • Miscellaneous
  • Global Resource Strings
  • Popup Selectors
  • Note Window Selectors
  • Poll component timeout Pseudo-classes
  • Inline Editing Pseudo-classes
  • Drag and Drop Pseudo-classes
  • Message Selectors
  • Component Group: CodeEditor
  • Common Pseudo-classes
  • Themes
• Renderer Selectors

Overview

This document lists the skin-selectors that can be used in an ADF Faces skin .css file to skin ADF Faces components.

         Examples of some ADF Faces Skin selectors:
         /* Global selectors affect more than one component */
         .AFDefaultFontFamily:alias {
           font-family: Tahoma, Verdana, Helvetica, sans-serif;
         }

         /* Component-specific selector.  */
         af|inputText::content
         {
           background-color: red;
         }
         

Global Selectors

Color

Color->Unclassified Color

Color->Anchor Color

Color->Derivative Color

Color->Specialty Color

Font

Text

Icons

Component Group: Button

Component Group: Link

Component Group: Form Controls

Component Group: Menu

Component Group: PanelBox and Region

Component Group: PanelHeader

Component Group: Tabs

Component Group: Tabs->Default

Default->Selected

Default->Unselected

Component Group: Tabs->Level One

Level One->Selected

Level One->Unselected

Component Group: Tabs->Level Two

Level Two->Selected

Level Two->Unselected

Miscellaneous

Global Resource Strings

Popup Selectors

The inline af:popup selector component defines a fragment of the page that will appear as a popup. The popup is not a browser window but a layer of DHTML that creates a visual layer on top of the page content. The inline popup component controls the delivery of the popup's content (inline, lazy, and lazyUncached). The server-side af:popup component doesn't directly participate in skinning.

However, if the popup's first child is a

• af:menu,
• af:dialog,
• af:panelWindow, or
• af:noteWindow,

If the popup has arbitrary content, meaning that the first child is not one of the components listed above, the skinning is controlled by global skinning classes. The reasoning behind using global skinning classes is that the outer frame is built in DHTML on the client. The client-side popup inline selector component and popup framework can be used without a corresponding server-side component. Some components such as the af:inputColor use the popup framework with an inline selector thus using the af:popup global style selectors.

When the af:popup contains arbitrary content, it uses global style selectors to create the frame around the inner af:popup content.

AFPopupSelector styles the root dom element of the component.

The root style contains skinning property "-tr-open-animation-duration" that specifies the animation duration for opening the popup. This skin property is honored only if the animation is enabled in the system.

The root style, contains skinning property "-tr-animate" that specifies whether animation is turn on or off for popup selectors. Set a value of "true" to enable animation. Set "false" to turn off animation. This skin property is honored only if the animation is enabled in the system.

Corner af:popup Global Selectors

AFPopupSelectorHeaderStart - top-start corner

AFPopupSelectorHeaderEnd - top-end corner

AFPopupSelectorFooterStart - bottom-start corner

AFPopupSelectorFooterEnd - bottom-end corner

Middle af:popup Global Selectors

AFPopupSelectorContentStart - middle-start side

AFPopupSelectorContent - middle-center contains af:popup content

AFPopupSelectorContentEnd - middle-end side

Summary of alias used by the global selectors.

.AFPopupSelectorBorderCell:alias - Cell border without edges; includes .AFTextBackground:alias

.AFPopupSelectorBorderCellEdge:alias - Cell border with one edge; includes .AFPopupSelectorBorderCell:alias

.AFPopupSelectorBorderCellCorner:alias - Cell border with two edges. If the dimensions of the corner images changed, the height and width properties would adjust in this selector; includes .AFPopupSelectorBorderCellEdge:alias

Note Window Selectors

Poll component timeout Pseudo-classes

Inline Editing Pseudo-classes

Drag and Drop Pseudo-classes

Message Selectors

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.

Component Group: CodeEditor

Common Pseudo-classes

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.

Themes

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.

For detailed information on theme support in ADF, please see the themes page.

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;}

af:activeCommandToolbarButton

af:activeImage

af:activeOutputText

af:breadCrumbs

af:button

af:body

af:calendar

af:carousel

af:carouselItem

af:chooseColor

af:chooseDate

af:column

af:commandButton

af:commandImageLink

af:commandLink

af:commandMenuItem

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:commandNavigationItem

af:commandToolbarButton

af:contextInfo

af:conveyorBelt

af:decorativeBox

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);
}
                              

af:deck

af:dialog

af:document

af:form

af:goButton

af:goImageLink

af:goLink

af:goMenuItem

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.

af:group

af:help"/>Special tag for configuring properties for dynamic help.

af:icon"/>There are no skinning selectors for this component.

af:inlineFrame

af:inputColor

af:inputComboboxListOfValues

af:inputDate

af:inputFile

af:inputListOfValues

af:inputNumberSlider

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}.

af:inputNumberSpinbox

af:inputRangeSlider

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}.

af:inputText

af:link

af:listItem

af:listView

af:masonryLayout

af:media

af:menu

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.

af:menuBar

af:message

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