Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors
11g Release 1 (11.1.1)

E15862-02

Selectors for Skinning Fusion's ADF Faces Components

Overview

This document lists the 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;
      }
      

GlobalSelectors

Global Selectors are selectors that affect more than one component. If the selector name ends in the :alias pseudo-class, then the selector is most likely included in other component-specific selectors. Defining properties for a selector that ends in :alias will most likely affect the skin for more than one component. For example, most, if not all of our components use the .AFDefaultFontFamily:alias definition to specify the font-family. If your skin overrides the .AFDefaultFontFamily:alias selector with a different font-family, that change will affect all the components that have included it in their selector definition.

Global Style Selectors

Selector Name Description
.AFBarSeparator:alias Specifies the separator bar used by af|menuBar, af|toolbar, and af|query.
.AFButtonAccessKeyStyle:alias Specifies the access key style for af|commandButton, af|goButton, af|resetButton.
.AFButtonBackground:alias Specifies the background for buttons that include this style alias, like af|commandButton, af|goButton, af|resetButton, af|trainButtonBar. Skinning the .AFButton* aliases is meant to be a short-cut for the skin developer and it can help ensure that all buttons are skinned the same since all button components include these aliases in the base skin. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled.
.AFButtonBackgroundActive:alias Specifies the background for buttons in the active state (mouse down).
.AFButtonBackgroundDisabled:alias Specifies the background for buttons in the disabled state.
.AFButtonBackgroundFocus:alias Specifies the background for buttons in the focus state.
.AFButtonBackgroundHover:alias Specifies the background for buttons in the hover state (mouse over).
.AFButtonBorder:alias Specifies the border for buttons that include this style alias, like af|commandButton, af|goButton, af|resetButton.
.AFButtonBorderActive:alias Specifies the border for buttons in the active state.
.AFButtonBorderDisabled:alias Specifies the border for buttons in the disabled state.
.AFButtonBorderHover:alias Specifies the border for buttons in the hover state.
.AFDataCollectionStatusMessage:alias Styles the status message that shows up when the user scrolls a data collection type component (i.e., table and tree).
.AFDefaultBoldFont:alias Includes AFDefaultFont:alias, and sets the font-weight to bold.
.AFDefaultFont:alias Specifies the default font for the skin. This style defines both the default font family (as specified by the AFDefaultFontFamily named style), the default font size, and default font weight.
.AFDefaultFontFamily:alias Specifies the default font family list ("font-family" property) for the skin.
.AFTextForeground:alias Specifies the color of the font for text.
.AFDynamicHelpIconStyle:alias Style that is used for the dynamic help icon. Includes .AFClickableImageAnchor:alias
.AFDynamicHelpIconStyleActive:alias Style that is used for the dynamic help icon in the active state.
.AFDynamicHelpIconStyleHover:alias Style that is used for the dynamic help icon in the hover state.
.AFErrorTextForeground:alias Style that is used for the color of error text.
.AFStartTextAlign:alias Sets the text-align property to "left" for left-to-right reading direction and "right" for right-to-left reading direction.
.AFEndTextAlign:alias Sets the text-align property to "right" for left-to-right reading direction and "left" for right-to-left reading direction.
.AFEndPadding:alias Sets the padding property to pad on the left-to-right reading direction and "left" for right-to-left reading direction. e.g,: padding: 0px 8px 0px 0px; (for "right" padding).
.AFLeftTextAlign:alias Sets the text-align property to "left" regardless of the reading direction.
.AFRightTextAlign:alias Sets the text-align property to "right" regardless of the reading direction.
.AFCenterTextAlign:alias Sets the text-align property to "center" regardless of the reading direction.
.AFClickableImageAnchor:alias Specifies the CSS properties needed to display an image which is clickable and which has inline-mode display. This style should be applied on an empty anchor, i.e. no text between the <a> and </a> tags. The attributes control the appearance, e.g. font-size and padding-right give the image room to display inline. By default, this alias is included in style selectors that use 16x16 images and need to display inline background-images for both IE and Firefox. To customize, you can include this alias in your selector and override its properties. For example, you can change font-size and padding-right for an image with different height and width, or you can set "display: block" together with height, width attributes to display in block mode.
.AFFormAccessKeyStyle:alias Style the access key (like underline or bold) for form components. Affects output labels, input, panelLabelAndMessage, af:select* components.
.AFLabel:alias Aliased style class that is included in the label selector for all the form components. e.g. "af|inputText::label". Uses .AFDefaultFont:alias, .AFEndTextAlign:alias, .AFEndPadding:alias, .AFLabelTextForeground:alias,
.AFLabelDisabled:alias Aliased style class that is included in the label selector for all the form components when they are disabled. It is a quick way to style disabled form components' labels the same, instead of for each component: .AFLabelDisabled:alias instead of e.g. "af|inputText:disabled::label".
.AFLabelTextForeground:alias Colors the label. Use the CSS property "color" to style the color of the label. This is used in the .AFLabel:alias style which styles the label for all form components, like af:inputText and af:selectOne/selectMany components.
.AFLabelTextForegroundDisabled:alias Use the property "color" to style the color of the label when it is disabled. This is used in the .AFLabelDisabled:alias style which styles the label for all form components (like af:inputText and af:selectOne/selectMany) when they are disabled.
.AFStandardIconStyle:alias Aliased style class that defines styles for a standard icon that is defined as a background image.
.AFLinkAccessKeyStyle:alias Highlight the Access Key for the link, e.g. bold it.
.AFLinkForeground:alias The default foreground color for links.
.AFActiveLinkBorder:alias The default border information (color, size, style) for active links.
.AFVisitedLinkBorder:alias The default border information (color, size, style) for visited, focused links.
.AFActiveLinkForeground:alias The default foreground color for active links. By default, this value is computed relative to the .AFLinkForeground:alias color.
.AFVisitedLinkForeground:alias The default foreground color for visited links. By default, this value is computed relative to the .AFLinkForeground:alias color.
.AFRequiredIconStyle A style class that styles the required icon for form components. You cannot currently style this icon for each component.
.AFMenuItem Style class that applies to menu items. Valid menu items are either commandMenuItems, goMenuItems, or submenus (menus in menus).
.AFMenuItemDisabled Style class that applies to disabled menu items. Valid menu items are either commandMenuItems, goMenuItems, or submenus (menus in menus).
.AFInstructionText,
.AFFieldText,
.AFFieldTextLTR,
.AFPhoneFieldText,
.AFPostalCodeFieldText,
.AFAddressFieldText,
.AFInstructionTextDisabled,
.AFFieldTextDisabled,
.AFFieldTextLTRDisabled,
.AFPhoneFieldTextDisabled,
.AFPostalCodeFieldTextDisabled,
.AFAddressFieldTextDisabled,
.AFDataText,
.AFDataTextDisabled,
.AFDataNumber,
.AFDataNumberDisabled,
.AFFieldNumber,
.AFFieldNumberDisabled,
.AFLabelTextDisabled,
.AFLinkIEWorkaround
Please note: For the af:inputText components, you should set the styleClass attribute to styleClasses that end in "Marker". The "Marker" styles affect only the "content" piece of the components because in the base skin we have this definition: af|inputText.AFFieldNumberMarker af|inputText::content {-tr-rule-ref:selector(".AFFieldNumber")} You can 'skin' the .AFFieldNumber style and it will get picked up by AFFieldNumberMarker because of the above skin selector. See af|inputText below for the list of public styleClasses to use for those components.
.AFHideBorder A marker style class that can be used to turn off borders that components have assigned to their root elements. This cannot and will not affect borders that are applied to internal elements of components nor for components whose borders are applied via inline styles or from skin definitions with high specificity weights.
.AFStretchWidth A marker style class that will declaratively stretch a component horizontally in a wide flowing container. This style class should be used instead of attempting to use a percentage width as an inlineStyle width to stretch a component horizontally.

Features:

  • Automatically applies stretching to just the components that can be stretched horizontally.
  • Provides a work around for a bug in Internet Explorer 7. In this browser, a horizontally-stretched component can cause a horizontal scroll bar to appear. This scroll bar lets you scroll the distance equal to the width of the vertical scroll bar. This scroll bar should not appear at all. To work around this issue, this style class will use a smaller stretched width in order to reduce the chance of encountering this bug.

If your component is already being stretched both horizontally and vertically by its parent component, then this style class will not be needed (it would be redundant).

.AFAuxiliaryStretchWidth A marker style class that will declaratively stretch a component horizontally in a narrow flowing container. This style class should be used instead of attempting to use a percentage width as an inlineStyle width to stretch a component horizontally.

Features:

  • Automatically applies stretching to just the components that can be stretched horizontally.
  • Provides a work around for a bug in Internet Explorer 7. In this browser, a horizontally-stretched component can cause a horizontal scroll bar to appear. This scroll bar lets you scroll the distance equal to the width of the vertical scroll bar. This scroll bar should not appear at all. To work around this issue, this style class will use a smaller stretched width in order to reduce the chance of encountering this bug.

If your component is already being stretched both horizontally and vertically by its parent component, then this style class will not be needed (it would be redundant).

.AFBranding A legacy style class used in a simplified branding area of a page template to just provide text styling for a page title. This should not be used if you want to use the a bar for your branding.
.AFBrandingBar A style class used for a branding bar container (e.g. on an af:panelBorderLayout or horizontal af:panelGroupLayout). This typically defines the height of the bar and optionally border decoration.
.AFBrandingBarItem A style class used for a container (e.g. an af:panelGroupLayout) for items inside of the branding bar container. This typically defines the height of the items inside of the bar. If you place other components in these items, you want need to define styles to adjust their padding-top, e.g. if you use an af:navigationPane hint="buttons", you may want to provide a skin definition of ".AFBrandingBar af|navigationPane-buttons" where you provide a padding-top. Similarly, if you use an af:statusIndicator, you may want to provide a definition of ".AFBrandingBar af|statusIndicator" where you provide a padding-top.
.AFBrandingBarLogo A style class used as a decorative branding logo (e.g. on an af:spacer) placed inside of a branding bar item wrapper. This typically defines a background-image and dimensions of the image that the logo needs to consume.
.AFBrandingBarTitle A style class used for title text (e.g. on an af:outputText) placed inside of a branding bar item wrapper. This typically defines a font-family, a font-size, and a padding-top if you want to tweak the alignment of the text and the logo.
.AFDecorativeBoxTopStart,
.AFDecorativeBoxTop,
.AFDecorativeBoxTopEnd,
.AFDecorativeBoxCenterStart,
.AFDecorativeBoxCenter,
.AFDecorativeBoxCenterEnd,
.AFDecorativeBoxBottomStart,
.AFDecorativeBoxBottom,
.AFDecorativeBoxBottomEnd
These are handy for use in page templates where you might want to insert components in the outer sides of the box.

Intended box structure:
.AFDecorativeBoxTopStart .AFDecorativeBoxTop .AFDecorativeBoxTopEnd
.AFDecorativeBoxCenterStart .AFDecorativeBoxCenter .AFDecorativeBoxCenterEnd
.AFDecorativeBoxBottomStart .AFDecorativeBoxBottom .AFDecorativeBoxBottomEnd


Note: these styles cannot be used in conjunction with component theming.
.AFPopupSelectorHeader,
.AFPopupSelectorHeaderStart,
.AFPopupSelectorHeaderEnd,
.AFPopupSelectorContent,
.AFPopupSelectorContentStart,
.AFPopupSelectorContentEnd,
.AFPopupSelectorFooter,
.AFPopupSelectorFooterStart,
.AFPopupSelectorFooterEnd

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,
the first child controls the skinning. The server-side af:popup is always responsible for the content delivery.

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 frame is created using a 3x3 table. Each of the 9 cells are assigned to one of the global style selectors listed to the left. The rounded corners in the popup selector are achieved using a background image for each corner cell.
Corner af:popup Global Selectors
AFPopupSelectorHeaderStart - top-start corner
AFPopupSelectorHeaderEnd - top-end corner
AFPopupSelectorFooterStart - bottom-start corner
AFPopupSelectorFooterEnd - bottom-end corner
All four corners include .AFPopupSelectorBorderCellCorner:alias. Furthermore, the corner selectors have :rtl and :ltr pseudo-classes added to each selector. This is necessary to handle the non-symmetric corner images. The middle-start, middle-center and middle-end cells in the popup's frame are assigned to the remaining styles.
Middle af:popup Global Selectors
AFPopupSelectorContentStart - middle-start side
AFPopupSelectorContent - middle-center contains af:popup content
AFPopupSelectorContentEnd - middle-end side
The middle sides (start and end) includes .AFPopupSelectorBorderCellEdge:alias. The middle side selectors have :rtl and :ltr pseudo-classes applied to decorate the appropriate cell border.
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
.AFNoteWindow,
.AFNoteWindowRight,
.AFNoteWindowSeparator,
.AFNoteWindowHintText,
.AFNoteWindowHintText,
.AFNoteWindowInstructions,
.AFNoteWindowShortDesc,
.AFNoteWindowConeBorder,
.AFNoteWindowConeBorderRight,
.AFNoteWindowCone,
.AFNoteWindowConeTR,
.AFNoteWindowConeBL,
.AFNoteWindowConeBR,
.AFNoteWindowContent,
.AFNoteWindowFooter,
.AFNoteWindowFooterStart,
.AFNoteWindowFooterEnd,
.AFNoteWindowNavigator,
.AFNoteWindowChooser,
.AFNoteWindowPreviousLink,
.AFNoteWindowNextLink,
.AFNoteWindowAllButton

Note windows operate in a dual mode. When used by input components to display validation messages, they are client only. Note windows can be created using the af:noteWindow component. When created using a component, af:noteWindow must be the immediate child of the af:popup component. All uses of the note window share these global styles.

AFNoteWindow 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.
.AFModalGlassPane

When the af:dialog and af:panelWindow components are used in modal mode, a div is created that lies between the primary window and the modal popup window. This global style is assigned to the div creating the effect of a glass pane. Adjusting the background-color of this style will change the look of the modal glass.

.AFMaskingFrame

This style is used by the inline popups to prevent bleed-through of content found below the floating elements. The style is assigned to a dynamically created iframe. Blending is adjusted using the opacity attribute.

.AFStampContainer

Style to apply to a container of stamps as defined by the key notation, page stamp and header legend UI guidelines.

.AFTwinkleBackground:alias

Specifies the background of active data when twinkle is on.

.AFTwinkleForeground:alias

Specifies the foreground of active data when twinkle is on.

Global Icon Selectors

Selector Name Description
.AFChangedIcon:alias An alias that defines the changed icon.
.AFIndexedIcon:alias An alias that defines the indexed icon.

Global Resource Strings

Selector Name Description
AFChangedIconShortDesc Changed icon hover text
AFErrorIconShortDesc Error icon hover text
AFWarningIconShortDesc Warning icon hover text
AFInfoIconShortDesc Info icon hover text
AFLogoIconShortDesc Logo icon hover text
AFRequiredIconShortDesc Required icon hover text
AFIndexedIconShortDesc Indexed icon hover text
AFKeyModifierMeta The name of the meta modifier key that is displayed in accelerators, e.g. in a menu item.
AFKeyModifierControl The name of the control modifier key that is displayed in accelerators, e.g. in a menu item.
AFKeyModifierAlt The name of the alt modifier key that is displayed in accelerators, e.g. in a menu item.
AFKeyModifierShift The name of the shift modifier key that is displayed in accelerators, e.g. in a menu item.
AFKeyMeta The name of the meta key that is displayed in accelerators as a key itself rather than as a modifier, e.g. the user presses the meta key by itself without pressing any other key.
AFKeyControl The name of the control key that is displayed in accelerators as a key itself rather than as a modifier, e.g. the user presses the control key by itself without pressing any other key.
AFKeyAlt The name of the alt key that is displayed in accelerators as a key itself rather than as a modifier, e.g. the user presses the alt key by itself without pressing any other key.
AFKeyShift The name of the shift key that is displayed in accelerators as a key itself rather than as a modifier, e.g. the user presses the shift key by itself without pressing any other key.
AFKeyCapsLock The name of the Caps Lock key that is displayed in accelerators, e.g. in a menu item.
AFKeyUp The name of the up key that is displayed in accelerators, e.g. in a menu item.
AFKeyDown The name of the down key that is displayed in accelerators, e.g. in a menu item.
AFKeyLeft The name of the left key that is displayed in accelerators, e.g. in a menu item.
AFKeyRight The name of the right key that is displayed in accelerators, e.g. in a menu item.
AFKeyEscape The name of the escape key that is displayed in accelerators, e.g. in a menu item.
AFKeyPageUp The name of the page up key that is displayed in accelerators, e.g. in a menu item.
AFKeyPageDown The name of the page down key that is displayed in accelerators, e.g. in a menu item.
AFKeyEnter The name of the enter key that is displayed in accelerators, e.g. in a menu item.
AFKeyHome The name of the home key that is displayed in accelerators, e.g. in a menu item.
AFKeyEnd The name of the end key that is displayed in accelerators, e.g. in a menu item.
AFKeyClear The name of the clear key that is displayed in accelerators, e.g. in a menu item.
AFKeyTab The name of the tab key that is displayed in accelerators, e.g. in a menu item.
AFKeyForwardDelete The name of the forward delete key that is displayed in accelerators, e.g. in a menu item.
AFKeyBackwardDelete The name of the backward delete key that is displayed in accelerators, e.g. in a menu item.
AFKeyInsert The name of the insert key that is displayed in accelerators, e.g. in a menu item.
AFKeySpace The name of the space key that is displayed in accelerators, e.g. in a menu item.
AFKeyF1 The name of the F1 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF2 The name of the F2 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF3 The name of the F3 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF4 The name of the F4 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF5 The name of the F5 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF6 The name of the F6 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF7 The name of the F7 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF8 The name of the F8 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF9 The name of the F9 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF10 The name of the F10 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF11 The name of the F11 key that is displayed in accelerators, e.g. in a menu item.
AFKeyF12 The name of the F12 key that is displayed in accelerators, e.g. in a menu item.
AFActiveDataConfirmRequest A confirmation message shown if there are any dirty components when the user presses the hot key in screenreader mode. The message text can contain {0} in it to be replaced with the list of components that are dirty.
AFActiveDataNoChange A confirmation message shown if there are no dirty components when the user presses the hot key in screenreader mode.
AFActiveDataHotKeyInfo An information message shown when the page is first loaded in screenreader mode and there are active data controls on the page. The message text can contain {0} and {1} in it. {0} is replaced with a list of active components while {1} contains the hot key to query the active data components.
AFActiveDataEventTime An information message shown ...
AFActiveDataNoActiveComponent An information message shown when the page is first loaded in screenreader mode to tell the user there are no active components on the page.
AFResponseCompleteStatus Status message announced via a WAI-ARIA live region when a partial page response completes. This message is only used in screenreader mode.

Message Selectors

Defining Component-level Message Styles

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

See also

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.

Standard Pseudo-classes

Style Selectors
Pseudo-class Description
:active Pseudo-class used to change display style when mouse pressed.
:busy Pseudo-class used to select a component with a current outstanding server event.
:disabled Pseudo-class used to change display style when component is disabled.
:disabled:active Use :disabled:active if :active and :disabled are specified to prevent a disabled element from showing mouse down status when pressed by the mouse. The :disabled:active style should be the same as :disabled style. An example of the skinning key format is: af|inputDate::launch-icon-style:disabled:active.
:hover Pseudo-class used to change display style when mouse hovered.
:hover-target
  1. This is only applied when there is a client component.
  2. Due to an IE bug, it is not supported on IE in right to left mode. See Bug 6931294 - ie7 setting styles in rtl cause scroll bar to reset position.

BIDI and :rtl pseudo-class

You can add the :rtl pseudo-class to your selector when you want your component to be rendered in right-to-left mode. This is very useful for non-symmetrical images. An example of the skinning key format is:

af|panelAccordion::header-start:rtl

Style Selectors
Pseudo-class Description
:rtl Pseudo-class used when component is to be rendered right-to-left

Inline Editing Pseudo-classes

The following pseudo-classes are applied when the application activates a component subtree for editing in the user-agent. Another pseudo-class of interest for inline editing is :hover-target, which is described in the Standard Pseudo-classes section.

Style Selectors
Pseudo-class Description
:active-inline-editable-container Pseudo-class applied to the root component of the currently active inline-editable component subtree
:inline-editable Pseudo-class applied to components in the active inline-editable subtree that are editable
:inline-selectable Pseudo-class applied to components in the active inline-editable subtree that are selectable but not editable and thus have an inline editor
:inline-selected Pseudo-class applied to components in the active inline-editable subtree that are currently selected

Drag and Drop Pseudo-classes

The following pseudo-classes are applied during drag and drop operations:

Style Selectors
Pseudo-class Description
:drag-source Pseudo-class applied to the component initiating the drag and removed once the drag is over.
:drop-target Pseudo-class applied to a component willing to accept the drop of the current drag. Note that the cursor is under the control of the drag and drop framework during drag and drop operations.

Theme support

The usage of tonal styles has been deprecated. As a replacement, theme support has been added. Themes are attributes that result in the addition of an attribute for elements of themed components and children elements that support theming.

Available components that can set the theme:

Any time a RichRenderer is used to render style classes, it checks to see if there is a current theme and if the current component supports theming for the current skin. If the check passes, the theme is added to the element as an "theme" attribute (implementation subject to change in future releases). If a theme has not been set the attribute is not added.

Themes propagate to all child components take for example:

  <af:decorativeBox theme="dark">
    <f:facet name="center">
      <af:outputText styleClass="customText" value="Test" />
    </f:facet>
  </af:decorativeBox>

The resultant HTML for this output text will be (assuming themes are supported on the outputText component):

Test]]>


Please note that the current implementation adds the theme attribute but this attribute is not part of the public API. The skin syntax will be supported in the future but the existence and name of the attribute is not guarunteed to remain.

The following can be used in a skin to apply style to all "customText" components for a dark theme:




Themes are not compatible with tonal styles and cannot be mixed within the same application. The tonal styles are the default to preserve backwards compatibility. To disable tonal styles and use themes, set this web.xml parameter:

    <context-param>
      <param-name>oracle.adf.view.rich.tonalstyles.ENABLED</param-name>
      <param-value>false</param-value>
    </context-param>

Enabling Themes For Components

Themes are enabled on a per-component basis in the skin. The purpose to selectively enable themes for certain compoments is to not add unneccessary HTML for attributes that will not be used by the generated CSS files.

Themes are enabled using the "-tr-enable-themes" value for a skin selector. Example of adding support for themes on the outputLabel component:




Altering The Theme From The Skin

There are times that skinning can affect the visual theme of its children on a component that does not support changing the theme via a theme attribute. The main cause of this is when a component is skinned to change its background color. For example:

   <af:document theme="dark">
    <af:panelHeader text="Header Level 0">
      <af:panelHeader text="Header Level 1" />
    </af:panelHeader>
  </af:document>

If the panel header were to change its background to white, and the dark document used a dark background, due to the inheritance of themes, the inner panel header would assume that its background was dark to match the theme. As a result, there would be light text on a light background.

To overcome this problem, the skin that sets the white background on the panel header can change the theme of its children. This is done via the -tr-set-children-theme skin property that can be used on any component that has a rich renderer and may use the theme name in the selector. The problem above could be corrected with the following skin CSS:




The selector that contains the skin property must be a default style class, or a root style class of a component and can optinally use a theme, as show above. It is important to ensure that the background-color is not changed in a way to affect the theme on components with more complex selectors, as the theme will be unable to be changed.

Wrapping the Main Content Body of Your Page

In order to correctly layout pages according to the UI specification guidelines, the main content area should be wrapped with a decorative box with the special theme contentBody. In older skins this will not have any affect on the page, but with the new fusion skin, it will be styled the same as the dark decorative box. The reasoning behind the usage of a custom theme is that it allows for backwards compatibility of your templates with the old skins while allowing for an upgrade path to the new Fusion FX skin. It is recommended that you place the decorative box with the content body theme in your page templates. The usage is simple:

  <af:form>
    <!-- Top, "Global", content here -->
    <af:decorativeBox id="contentBodyBox" theme="contentBody">
      <f:facet name="center">
        <!-- The main content of your page -->
      </f:facet>
    </af:decorativeBox>
    <!-- Footer (i.e. Copyright notice) content here -->

Component-level Selectors

Component-level selectors are selectors that can be used to skin a particular ADF Faces component. The selectors defined below are specified by the component they affect. Let's say you want to skin the af:inputText component. If you go to the af:inputText Component section of this document, you will see the selectors that you can use to skin the af:inputText component. One of the selectors is af|inputText::content. The ::content pseudo-element indicates that this is the content portion of the af:inputText component; the input. To skin this you would set CSS properties on the af|inputText::content selector in your ADF Faces skin .css file.

af:activeOutputText Component

Style Selectors
Name Description
af|activeOutputText Style on the root element of the af:activeOutputText component. Available pseudo-classes:twinkle-on. To style an active output text to twinkle, use "af|activeOutputText:twinkle-on".

af:breadCrumbs Component

Style Selectors
Name Description
af|breadCrumbs Styles the root dom element of the component.
af|breadCrumbs::access-key Style on the access key character of commandNavigationItem, when it is used inside a breadCrumbs. Includes .AFFormAccessKeyStyle:alias
af|breadCrumbs::body Style on the container which encloses both the breadCrumbs content and the overflow indicator.
af|breadCrumbs::content Style on the container which encloses the breadCrumbs content.
af|breadCrumbs::overflow-indicator Style on the overflow indicator. The indicator is specified using a background-image in this key.
af|breadCrumbs::icon-style Style on the icon of commandNavigationItem, when it is used inside a breadCrumbs.
af|breadCrumbs::separator Styles the separator icon.
af|breadCrumbs::step Styles the step. Available pseudo-classes are :selected and :disabled and pseudo-classes that are allowed in an a tag, like :hover. (e.g. af|breadCrumbs::step:selected)
Icon Selectors
Name Description
af|breadCrumbs::separator-icon The separator icon itself.
af|breadCrumbs::overflow-icon Overrides the default overflow indicator image. Icons can be text or img elements, e.g. af|breadCrumbs::overflow-icon {content "X"} or af|breadCrumbs::overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the overflow-indicator key and defining the override icon in this key.
ADF Faces properties
Name Description
-tr-show-last-item Valid values are true or false. Determines whether the last item is displayed or not. e.g. af|breadCrumbs {-tr-show-last-item:false} will not show the last item in the breadCrumbs.
Resource Strings
Name Description
af_breadCrumbs.TIP_SHOW_MORE_LINKS The hover text for the overflow icon.

af:calendar Component

Style Selectors
Name Description
.AFCalendarTodayBackground:alias alias for the background color for today's date
.AFCalendarTodayHeaderBackground:alias alias for the background color for headers for today's date
.AFCalendarActiveDayHeaderBackground:alias alias for the background color for headers for the active day
af|calendar The selector on the root dom element of the component.
af|calendar::view style the portion of the calendar showing a particular view, meaning the part of the calendar that does not include the toolbar.
af|calendar::toolbar-display-range style the date range string in the toolbar
af|calendar::header-all-day-container day and week view: style area containing header and all day activity area
af|calendar::all-day-container day and week view:style container for the all day area
af|calendar::time-activity-grid-container day and week view:style container for the time column and timed activity 'grid'
af|calendar::activity-grid-column day and week view: style container for the activity grid column
af|calendar::time-column day and week view: style time column
af|calendar::time-cell day and week view: style cell in time column
af|calendar::time-text day and week view:style text in time column
af|calendar::hgrid-minor day and week view: style the minor horizontal grid lines. The 'drop-target' pseudo-class is applied as the chosen location for a drop
af|calendar::hgrid-major day and week view: style the major horizontal grid lines. The 'drop-target' pseudo-class is applied as the chosen location for a drop
af|calendar::day-of-week day and week view: style the day of the week.

several pseudo-classes are applied to this style.

  • The 'today' pseudo-class - applied to the cell for today's date
  • The 'active-day' pseudo-class - applied to the cell for date matching the calendar's activeDay attribute
  • The 'drop-target' pseudo-class - applied to the cell as the chosen location for a drop
af|calendar::time-activity-container day and week view: style for the container of a time based activity
af|calendar::time-activity-header day and week view: style for the header portion of a time based activity
af|calendar::time-activity-content day and week view:style for the content portion of a time based activity
af|calendar::time-activity-resize-grip day and week view: style for the resize grip on a time based activity. The background image can be styled to change the grip image.
af|calendar::time-activity-resize day and week view: style for the resize grip on a time based activity.
af|calendar::all-day-activity day, week and month: style on all day activity container
af|calendar::all-day-activity-text day, week and month: style on text in all day activity
af|calendar::all-day-activity-time day, week and month: style on time in 'all day' activity. For skinning purposes 'all day' can also apply to multiday timed activities
af|calendar::day day: style for the day root container
af|calendar::day-header-row day: style for the header area in day view
af|calendar::week week: style for the week root container
af|calendar::week-header-row week: style for the header row in week view
af|calendar::week-header-cell week: style for the header cell in week view. The 'today' pseudo-class is applied to this style for today's date.
af|calendar::week-header-day-link week: style for the day links in the header
af|calendar::week-vgrid week: style for the vertical grid in week
af|calendar::month month: style for the month root container
af|calendar::month-header-row month: style for the month header row
af|calendar::month-header-cell month: style for the cells in the month header row. The 'today' pseudo-class is applied to this style for today's date.
af|calendar::month-grid month: style for the month grid container
af|calendar::month-grid-cell month: style for a cell in the month grid.

several pseudo-classes are applied to this style.

  • The 'today' pseudo-class - applied to the cell for today's date
  • The 'active-day' pseudo-class - applied to the cell for date matching the calendar's activeDay attribute
  • The 'prev-month' and 'next-month' pseudo-classes - applied to cells in the previous and next month. For example let's say the activeDay is September 1, 2008. In month view you will see days in August (the previous month) and October(the next month).
  • The 'drop-target' pseudo-class - applied to the cell as the chosen location for a drop
af|calendar::month-grid-cell-header month: style for the header area of a month grid cell. To style the cell header for today's date you could do something like "af|calendar::month-grid-cell:today af|calendar::month-grid-cell-header{background-color:orange}"
af|calendar::month-grid-cell-header-misc month: style for miscellaneous text that can be added to the month grid cell header using the calendar's dateCustomizer attribute.
af|calendar::month-grid-cell-header-day-link month: style for the month grid cell header day of the month link
af|calendar::month-overflow-link month: style for the overflow link which appears if there are too many activities to show.
af|calendar::month-time-activity month: style applied to time activity in month view. This is for single day time activities. A mulitiday time activity will not use this style, because for skinning purposes a multiday time activity uses 'all-day' styles.
af|calendar::list list: style for the list root container
af|calendar::list-row list: style for a row in the list view

several pseudo-classes are applied to this style.

  • The 'today' pseudo-class - applied to the cell for today's date
  • The 'active-day' pseudo-class - applied to the cell for date matching the calendar's activeDay attribute
af|calendar::list-cell list: style for a cell in the list view
af|calendar::list-day-of-week-column list: style for the day of the week column
af|calendar::list-day-of-month-column list: style for the day of the month column
af|calendar::list-time-column list: style for the time column
af|calendar::list-day-of-month-link list: style for the day of the month link
af|calendar::list-title-link list: style for the title link
af|calendar::list-swatch-container list: style for the calendar provider color swatch
af|calendar::list-date-separator list: style for the separator between days
Icon Selectors
Name Description
af|calendar::toolbar-day-icon Icon for the 'day' toolbar button.
af|calendar::toolbar-day-hover-icon Icon for the 'day' toolbar button when hovering.
af|calendar::toolbar-day-active-icon Icon for the 'day' toolbar button when active.
af|calendar::toolbar-week-icon Icon for the 'week' toolbar button.
af|calendar::toolbar-week-hover-icon Icon for the 'week' toolbar button when hovering.
af|calendar::toolbar-week-active-icon Icon for the 'week' toolbar button when active.
af|calendar::toolbar-month-icon Icon for the 'month' toolbar button.
af|calendar::toolbar-month-hover-icon Icon for the 'month' toolbar button when hovering.
af|calendar::toolbar-month-active-icon Icon for the 'month' toolbar button when active.
af|calendar::toolbar-list-icon Icon for the 'list' toolbar button.
af|calendar::toolbar-list-hover-icon Icon for the 'list' toolbar button when hovering.
af|calendar::toolbar-list-active-icon Icon for the 'list' toolbar button when active.
af|calendar::toolbar-prev-icon Icon for the 'previous' toolbar button which moves the date back.
af|calendar::toolbar-prev-hover-icon Hover icon for the 'previous' toolbar button which moves the date back.
af|calendar::toolbar-prev-active-icon Active icon for the 'previous' toolbar button which moves the date back.
af|calendar::toolbar-next-icon Icon for the 'next' toolbar button which moves the date forward.
af|calendar::toolbar-next-hover-icon Hover icon for the 'next' toolbar button which moves the date forward.
af|calendar::toolbar-next-active-icon Active icon for the 'next' toolbar button which moves the date forward.
af|calendar::reminder-light-icon Icon indicating an activity has a reminder.This is the light version of the icon, which will be placed on a dark background.
af|calendar::reminder-dark-icon Icon indicating an activity has a reminder.This is the dark version of the icon, which will be placed on a light background.
af|calendar::recurring-light-icon Icon indicating an activity is recurring.This is the light version of the icon, which will be placed on a dark background.
af|calendar::recurring-dark-icon Icon indicating an activity is recurring.This is the dark version of the icon, which will be placed on a light background.
af|calendar::recurring-change-light-icon Icon indicating an activity is no longer part of a recurring series.This is the light version of the icon, which will be placed on a dark background.
af|calendar::recurring-change-dark-icon Icon indicating an activity is no longer part of a recurring series.This is the dark version of the icon, which will be placed on a light background.
af|calendar::all-day-activity-prev-icon In day, week, and month views the icon indicating an activity continues from a previous date.
af|calendar::all-day-activity-next-icon In day, week, and month views the icon indicating an activity will continue to a later date.
af|calendar::list-activity-prev-icon In list view, the icon indicating an activity continues from a previous date.
af|calendar::list-activity-next-icon In list view, the icon indicating an activity will continue to a later date.
Resource Strings
Name Description
af_calendar.TIP_NEXT Tip for the 'next' toolbar button.
af_calendar.TIP_PREVIOUS Tip for the 'previous' toolbar button.
af_calendar.TIP_DAY Tip for the 'day' toolbar button.
af_calendar.TIP_WEEK Tip for the 'week' toolbar button.
af_calendar.TIP_MONTH Tip for the 'month' toolbar button.
af_calendar.TIP_LIST Tip for the 'list' toolbar button.
af_calendar.LABEL_TODAY Text for the 'today' toolbar button
af_calendar.LABEL_EMPTY Text seen in list view when there are no activities found.
af_calendar.LABEL_ACTIVITY_TITLE_LOCATION Message that displays the title and location of an activity where {0} is the title and {1} is the location. For example: "{0} -- {1}" will turn into "meeting with Jane -- Ivy Restaurant" when {0} ="meeting with Jane" and {1} = "Ivy Restaurant".
af_calendar.TIP_REMINDER Tip for the icon indicating an activity has a reminder
af_calendar.TIP_RECURRING Tip for the icon indicating an activity is recurring
af_calendar.TIP_RECURRING_CHANGE Tip for the icon indicating an activity is no longer part of recurring series.
af_calendar.LABEL_OVERFLOW Label for the overflow link indicating there are more activities. {0} will be replaced with the number of unseen activities.

af:carousel Component

Style Selectors
Name Description
af|carousel Styles the root dom element of the component. Typically a background-color, color, width dimension, or non-percent height dimension would be defined in this selector. The pseudo-class :vertical is used when the carousel orientation is set to vertical.
af|carousel::item Styles the wrapper around each carouselItem component. Typically a border or shadow style would be defined in this selector.
af|carousel::item-overlay Styles the element that covers every carouselItem except for the current item (since only the current item should be interactive to the user; clicking the overlay will cause the carousel to spin to this particular item). Typically a background-color would be defined in this selector.
af|carousel::item-text Styles the text for the current item in the carousel. Typically a background-color, color, font-family, font-size, font-weight, border, padding, or shadow style would be defined in this selector. The pseudo-class :vertical is used when the carousel orientation is set to vertical.
af|carousel::spin-info Styles the text that identifies the current item number and the total number of items that the carousel has (if known). Typically a color, font-family, font-size, font-weight would be defined in this selector. The pseudo-class :vertical is used when the carousel orientation is set to vertical.
af|carousel::spin-bar Styles the bar that appears behind the spin thumb, representing the list of items in the carousel. Typically a background-image, background-repeat, background-position would be defined in this selector. For a horizontal orientation, a non-auto left, right, and height and auto top, bottom, and width would be defined. For a vertical orientation, a non-auto top, bottom, and width and auto left, right, and width would be defined to configure the sizing of the bar. These dimensions should correspond to those of the previous and next icons so they appear adjacent to the bar. The pseudo-class :vertical is used when the carousel orientation is set to vertical and :disabled is used when the carousel is disabled.
af|carousel::spin-h-previous-icon-style Style of the horizontally-oriented previous button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. For the :ltr pseudo-class, a right style would be defined in this selector. For the :rtl pseudo-class, a left style would be defined in this selector. The psuedo-class :disabled is also used when the carousel is disabled.
af|carousel::spin-h-next-icon-style Style of the horizontally-oriented next button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. For the :ltr pseudo-class, a left style would be defined in this selector. For the :rtl pseudo-class, a right style would be defined in this selector. The psuedo-class :disabled is also used when the carousel is disabled.
af|carousel::spin-h-thumb-icon-style Style of the horizontally-oriented spin thumb button icon used with the carousel component. This icon is used for identifying where the current item resides along the spin slider bar. The selector icon is specified as a background-image, width, and height in this key. The psuedo-class :disabled is also used when the carousel is disabled.
af|carousel::spin-v-previous-icon-style Style of the vertically-oriented previous button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. A bottom style would be defined in this selector. The psuedo-class :disabled is also used when the carousel is disabled.
af|carousel::spin-v-next-icon-style Style of the vertically-oriented next button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. A top style would be defined in this selector. The psuedo-class :disabled is also used when the carousel is disabled.
af|carousel::spin-v-thumb-icon-style Style of the vertically-oriented spin thumb button icon used with the carousel component. This icon is used for identifying where the current item resides along the spin slider bar. The selector icon is specified as a background-image, width, and height in this key. The psuedo-class :disabled is also used when the carousel is disabled.
af|carousel::status-message Styles the status message that shows up when the user spins the carousel. Includes the .AFDataCollectionStatusMessage:alias.
Icon Selectors
Name Description
af|carousel::spin-h-previous-icon Overrides the carousel's default horizontal orientation icon for spinning the carousel to the previous item.
af|carousel::spin-h-thumb-icon Overrides the carousel's default horizontal orientation icon for identifying where the current item resides along the slider bar.
af|carousel::spin-h-next-icon Overrides the carousel's default horizontal orientation icon for spinning the carousel to the next item.
af|carousel::spin-v-previous-icon Overrides the carousel's default vertical orientation icon for spinning the carousel to the previous item.
af|carousel::spin-v-thumb-icon Overrides the carousel's default vertical orientation icon for identifying where the current item resides along the slider bar.
af|carousel::spin-v-next-icon Overrides the carousel's default vertical orientation icon for spinning the carousel to the next item.
ADF Faces properties
Name Description
-tr-spin-animation-duration The length of time in milli-seconds that the spin animation should last. This skin property is honored only if animation is enabled in the system.
Resource Strings
Name Description
af_carousel.LABEL_FETCHING Label shown to the user when the carousel is busy fetching items from the server.
af_carousel.LABEL_GOING_TO Label shown to the user when the carousel is busy spinning to a specific part of the carousel items. This string can contain {0} in it to be replaced with a label identifying the start or end of the set of items or a label identifying a specific item number.
af_carousel.LABEL_START Label shown to the user in place of {0} of the af_carousel.LABEL_GOING_TO resource string when the carousel is busy spinning to a the starting side of the list of carousel items.
af_carousel.LABEL_END Label shown to the user in place of {0} of the af_carousel.LABEL_GOING_TO resource string when the carousel is busy spinning to a the ending side of the list of carousel items.
af_carousel.LABEL_ITEM Label shown to the user in place of {0} of the af_carousel.LABEL_GOING_TO resource string when the carousel is busy spinning to a specific item number in the list of carousel items. This string can contain {0} in it to be replaced with the specific item number.
af_carousel.MSG_NO_DATA Message used to notify the user that the carousel has no items to display.
af_carousel.MSG_SCREEN_READER_SPIN_INFO_X Message used in screen reader mode that explains what item number is currently being displayed out of an unknown total number of items. This string can contain {0} in it to be replaced with the current item number.
af_carousel.MSG_SCREEN_READER_SPIN_INFO_X_OF_Y Message used in screen reader mode that explains what item number is currently being displayed out of a known total number of items. This string can contain {0} in it to be replaced with the current item number and {1} to be replaced with the total number of items.
af_carousel.TIP_SPIN_TO_PREVIOUS_ITEM Tooltip on the button that spins the carousel to the previous item in the list.
af_carousel.TIP_SPIN_THUMB Tooltip on the slider thumb pointer that identifies where the current item resides along the slider bar.
af_carousel.TIP_SPIN_INFO_X_OF_Y Tooltip to identify the current item number and the total number of items that the carousel has. This string can contain {0} in it to be replaced with the current item number and {1} to be replaced with the total number of items.
af_carousel.TIP_SPIN_TO_NEXT_ITEM Tooltip on the button that spins the carousel to the next item in the list.

af:carouselItem Component

Style Selectors
Name Description
af|carouselItem Styles the root dom element of the component. This component is not intended for use outside of the carousel component. Typically nothing would be customized in this selector because the carousel component uses its own wrapper elements for styling its items. However, you could define a background-color or border style in this selector.

af:chooseColor Component

Style Selectors
Name Description
af|chooseColor Styles the root dom element of the component.
af|chooseColor::button Styles the standard color palette buttons. Includes .AFButtonBorder:alias, .AFButtonBackground:alias, and .AFButtonForeground:alias. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|chooseColor::button-swatch Styles the color swatch on standard color palette buttons. And :empty is a potential pseudo-classes for this class. Includes .AFButtonBorderDisabled:alias
af|chooseColor::swatch Styles the margin and width/height of color swatch. And :empty is a potential pseudo-class for this class. Includes .AFButtonBorder:alias.
af|chooseColor::swatch-cell Styles the swatch cell on standard color palette; typically this would be the border properties. And :selected is a potential pseudo-class for this class.
Resource Strings
Name Description
af_chooseColor.LABEL_CUSTOM_COLOR The button label and hover text for the button that is used to bring up the select custom color dialog.
af_chooseColor.LABEL_DEFAULT_COLOR Label and hover text for the default color button.
af_chooseColor.LABEL_HEX The label for the input text field on the select custom color dialog used to entering a new color as a single RGB string
af_chooseColor.LABEL_LAST_USED_COLOR Label and hover text for the last used color button.
af_chooseColor.LABEL_RED The label for the input text field on the select custom color dialog used to entering a new Red color as an integer between 0 and 255.
af_chooseColor.LABEL_GREEN The label for the input text field on the select custom color dialog used to entering a new Green color as an integer between 0 and 255.
af_chooseColor.LABEL_BLUE The label for the input text field on the select custom color dialog used to entering a new Blue color as an integer between 0 and 255.
af_chooseColor.MSG_RGB_INVALID The error text for when a user enters an invalid value for a color into the Red, Green, and Blue input boxes on the Select Custom Color dialog. The error text can contain {0} in it to be replaced with the invalid data entered in the Red, Green, Blue input field.
af_chooseColor.MSG_HEX_INVALID The error text for when a user enters an invalid hexadecimal value for a color. The error text can contain {0} in it to be replaced with the invalid data entered in the Hex input field
af_chooseColor.TIP_CURRENT_COLOR The hover text for the color swatch on the select custom color dialog. This is directly below the new color swatch.
af_chooseColor.TIP_NEW_COLOR The hover text for the new color swatch on the select custom color dialog. This is directly above the color swatch.
af_chooseColor.TIP_NO_COLOR The hover text for all color swatches that are not associated with a color. The swatch has an "x" through it.
af_chooseColor.TIP_TRAN_NO_COLOR Transparent
af_chooseColor.TITLE_CUSTOM_DLG The dialog title for the custom color dialog.

af:chooseDate Component

Style Selectors
Name Description
af|chooseDate The selector on the root dom element of the component.
af|chooseDate::ampm Style on the root element of the AM/PM radio buttons within chooseDate. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation.
af|chooseDate::ampm-content The appearance of the AM/PM radio buttons within chooseDate. For example, this can be set to a different font-size.
af|chooseDate::ampm-item-text Style on the item text associated with the AM/PM radio buttons.
af|chooseDate::choice-list Style on the root element of the dropdown month selector and the dropdown timezone selector. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation.
af|chooseDate::choice-list-content Styles the appearance of the dropdown month selector and the dropdown timezone selector. For example, this can be set to a different font size.
af|chooseDate::choice-list-dropdown Styles the background of the dropdown icon.
af|chooseDate::choice-list-dropdown-icon-style Styles the dropdown icon for the month selector and the timezone selector. The icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the dropdown-icon-style and define the override icon for the dropdown-icon. Includes .AFClickableImageAnchor:alias
af|chooseDate::days-row Styles the appearance of the dates within the calendar grid. Individual day types (previous or next month, selected, regular) can override the properties defined here. For example, this can be set to a uniform font-size for all the days.
af|chooseDate::month-year-row Styles the appearance of the row containing the Month and Year selectors above the calendar grid. For example, this can be used to set a background color or height.
af|chooseDate::next-month-arrow Styles the next-month icon cell. You can put a background-image here. Available pseudo-classes are those that are allowed on the html a tag, like :hover and :active.
af|chooseDate::next-month-day Styles the appearance of the table cell for dates in the next month. For example, you can add background color or border to the cell. :selected pseudo-class available as well.
af|chooseDate::prev-month-arrow Styles the previous-month icon cell. You can put a background-image here. Available pseudo-classes are those that are allowed on the html a tag, like :hover and :active.
af|chooseDate::prev-month-day Styles the appearance of the table cell for dates in the previous month. For example, you can add background color or border to the cell. :selected pseudo-class available as well.
af|chooseDate::regular-day Styles the appearance of the table cell for dates in the current month. For example, you can add background color or border to the cell. :selected pseudo-class available as well.
af|chooseDate::spinbox The root style for spinboxes within chooseDate (year, hours, minutes, seconds). Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation.
af|chooseDate::spinbox-content The appearance of the spinboxes within chooseDate (year, hours, minutes, seconds). For example, this can be set to a different font-size.
af|chooseDate::spinbox-incrementor-icon-style Uses background-image to set the increment image for the spinboxes within chooseDate (year, hours, minutes, seconds). If you want to use text instead of a background-image, you can use af|chooseDate::spinbox-incrementor-icon {content:"Text"}.
af|chooseDate::spinbox-decrementor-icon-style Uses background-image to set the decrement image for the spinboxes within chooseDate (year, hours, minutes, seconds). If you want to use text instead of a background-image, you can use af|chooseDate::spinbox-decrementor-icon {content:"Text"}.
af|chooseDate::time-selectors-row Styles the appearance of the row containing the Hour, Minute, Second time selectors. For example, this can be used to set a background color or height.
af|chooseDate::timezone-selectors-row Styles the appearance of the row containing the Timezone dropdown selector. For example, this can be used to set a height.
af|chooseDate::today Styles the appearance of the table cell for the current date (today). For example, you can add background color or border to the cell. :selected pseudo-class available as well.
af|chooseDate::week-header-cell The appearance of individual cells in the weekday header. For example, this can be set to have a different width or padding.
af|chooseDate::week-header-row The appearance of the weekday headers of the calendar. For example, this can be set to a different font-size or background color.
Icon Selectors
Name Description
af|chooseDate::choice-list-dropdown-icon Icon hook for the dropdown arrow in the month selector and the timezone selector. For example, this can be set to a different icon.
af|chooseDate::prev-month-arrow-icon The arrow for navigating to the previous month. Can be set to an image or a text string, e.g. "<". If setting to a text string, the background image in "af|chooseDate::prev-month-arrow" should be nulled out by setting "-tr-inhibit: background-image;".
af|chooseDate::next-month-arrow-icon The arrow for navigating to the next month. Can be set to an image or a text string, e.g. ">". If setting to a text string, the background image in "af|chooseDate::prev-month-arrow" should be nulled out by setting "-tr-inhibit: background-image;".
af|chooseDate::spinbox-incrementor-icon Overrides the default incrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds).
af|chooseDate::spinbox-decrementor-icon Overrides the default decrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds).
af|chooseDate::spinbox-incrementor-disabled-icon Overrides the default disabled incrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds).
af|chooseDate::spinbox-decrementor-disabled-icon Overrides the default disabled decrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds).
af|chooseDate::time-separator Styles the appearance of the time separator character ':' shown between the hours/minutes/seconds display.
Resource Strings
Name Description
af_chooseDate.TIP_PREVIOUS_MONTH Hover text for the arrow used to navigate to the previous month.
af_chooseDate.TIP_NEXT_MONTH Hover text for the arrow used to navigate to the next month.
af_chooseDate.LABEL_SELECT_MONTH Label for the field used to select the month.
af_chooseDate.LABEL_SELECT_YEAR Label for the field used to select the year.
af_chooseDate.LABEL_SELECT_HOURS Label for the field used to select the hours.
af_chooseDate.LABEL_SELECT_MINUTES Label for the field used to select the minutes.
af_chooseDate.LABEL_SELECT_SECONDS Label for the field used to select the seconds.
af_chooseDate.LABEL_SELECT_TIMEZONE Label for the field used to select the timezone.

af:column Component

To style the table component, you will use both af|table and af|column skin selectors.

Style Selectors
Name Description
af|column::column-header-cell Styles the column header cell. Available pseudo-classes are :focused (when it has the current focus) and :drag (the box when it is dragged during a drag and drop. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
af|column::column-header-cell-content Styles the content in a header cell. Available pseudo-classes are :sorted (when the column has been sorted). Typically you would use this to define a padding-right (with :ltr) or padding-left (with :rtl) so that the content shifts when the data is sorted to reduce the chance that the sort indicator obscures the header content.
af|column::column-footer-cell Styles the column footer cell. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
af|column::context Placed around the context facet content. A compound selector like "af|column::context af|contextInfo" can be used to control padding so that the icon doesn't overlap the column content
af|column::row-header-cell Styles the row header cell that has current focus. Available pseudo-classes are :focused (when it has the current focus). This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
af|column::data-cell Styles a column's data cell that is not banded. Available pseudo-classes are :selected, :inactive and twinkle-on. To style a selected row's data cell, use "af|table::data-row:selected af|column::data-cell." To style a selected column's non-banded data cell, use "af|column::data-cell:selected". This includes .AFTableCellPadding:alias and .AFTableCellDataBorder:alias. To style a data cell as a subtotal cell, use "af|column::data-cell.AFTableCellSubtotal" in your skin definition and styleClass="AFTableCellSubtotal" in the tag (typically this value would come from an EL expression since not every cell would be a subtotal cell). To style an active data's data cell to twinkle, use "af|column::data-cell:twinkle-on".
af|column::banded-data-cell Styles a column's data cell that is banded. Available pseudo-classes are :selected, :inactive and twinkle-on. To style a selected row's banded data cell, use "af|table::data-row:selected af|column::banded-data-cell". To style a selected column's banded data cell, use "af|column::banded-data-cell:selected". This includes .AFTableCellPadding:alias and .AFTableCellDataBorder:alias. To style an active data's data cell to twinkle, use "banded-data-cell:twinkle-on".
af|column::detail-cell Styles a cell representing the state (disclosed/undisclosed) of the detail stamp for a given row. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
af|column::detail-column-header-cell Styles a column header cell above the cells representing the state (disclosed/undisclosed) of the detail stamp. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
af|column::dynamic-help-icon-style Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|column::column-filter-cell Styles a column's filter cell.
af|column::sort-ascending-icon-style Styles the icon used for the sort ascending indicator. The icon is specified as a background-image in this key. Use pseudo-classes :hover and :active to customize the look. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sort-ascending-icon-style and define the icon for the sort-ascending-icon.
af|column::sort-descending-icon-style Styles the icon used for the sort descending indicator. The icon is specified as a background-image in this key. Use pseudo-classes :hover and :active to customize the look. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sort-descending-icon-style and define the override icon for the sort-descending-icon.
af|column::sorted-ascending-icon-style Styles the icon used for the sorted ascending indicator. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sorted-ascending-icon-style and define the override icon for the sorted-ascending-icon.
af|column::sorted-descending-icon-style Style of the icon used for the sorted descending indicator. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sorted-descending-icon-style and define the override icon for the sorted-descending-icon.
Icon Selectors
Name Description
af|column::dynamic-help-icon Icon that can be used instead of a background-image on af|column::dynamic-help-icon-style. By default this is null. If you use this af|column::dynamic-help-icon-style can then be used for background colors, etc.
af|column::sort-ascending-icon Overrides the default sort ascending indicator. Icons can be text or img elements, e.g. af|column::sort-ascending-icon {content "X"} or af|column::sort-ascending-icon {content: url(...)}. Use this key instead of the sort-ascending-icon-style key if you do not want background-image.
af|column::sort-descending-icon Overrides the default sort descending indicator. Use this key instead of the sort-descending-icon-style key if you do not want background-image.
af|column::sorted-ascending-icon Overrides the default sorted ascending indicator. Use this key instead of the sorted-ascending-icon-style key if you do not want background-image.
af|column::sorted-descending-icon Overrides the default sorted descending indicator. Use this key instead of the sorted-descending-icon-style key if you do not want background-image.
Resource Strings
af_column.TIP_SORT_ASCENDING Tooltip for the ascending sort icon on the column when sorting is enabled.
af_column.TIP_SORT_DESCENDING Tooltip for the descending sort icon on the column when sorting is enabled.
af_column.LABEL_DETAIL_STAMP Label to identify the existences of detail information on a row. This is only rendered in screenreader mode.
af_column.LABEL_ROW_SELECT Label on row header check box used to select rows. This is a special column for supporting row selection. This check box and label are only available in screenreader mode.
af_column.LABEL_COLUMN_SELECT Label on column header check box used to select columns. This check box and label are only available in screenreader mode.
af_column.LABEL_SELECT_ALL Label on left most column header check box used to select all rows. This check box and label are only available in screenreader mode.

af:commandButton Component

Style Selectors
Name Description
af|commandButton Style on the root element of the af:commandButton component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled, :text-only to style the button for different states. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|commandButton::icon-style Style on the button icon, if the icon attribute is set on the af:commandButton.
af|commandButton::access-key Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style.

commandImageLink Component

Style Selectors
Name Description
af|commandImageLink Style on the root element of the commandImageLink component. This style includes the .AFDefaultFont:alias style. commandImageLink supports further styling with the :hover, :disabled, and :text-only pseudo-classes.
af|commandImageLink::access-key Style on the access key for the label of the af:commandImageLink component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|commandImageLink::text Style on the link text on the af:commandImageLink component.
af|commandImageLink::image Style of the image used inside of the af:commandImageLink component.

af:commandLink Component

Style Selectors
Name Description
af|commandLink Style on the root element of the af:commandLink component. This style includes the .AFLinkForeground:alias and .AFDefaultFont:alias styles. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled to style the component for different states. Please note that for links :focus pseudo-class does not work in IE 7. The visited pseudo-class does not apply to hyperlinks generated by a commandLink component because clicking on the link results in firing a command which may or may not result in a page navigation. On the other hand, the "visited" pseudo-class applies to hyperlinks (such as those generated by a goLink) that have already been visited by the user. This is a user agent capability and user agents may choose to return a visited link to the (unvisited) ":link" state after a certain period of time. The state :focus includes .AFActiveLinkBorder:alias, the state :active includes .AFActiveLinkForeground:alias, the state :active:link includes .AFActiveLinkForeground:alias, and the state :disabled:active includes .AFLinkForeground:alias

When the commandLink has a context facet this style is placed around all content with the exception of the context facet content. See af|commandLink::context for more information.

af|commandLink::context Placed around the context facet content. A compound selector like "af|commandLink::context af|contextInfo" can be used to control padding so that the icon doesn't overlap the commandLink text
af|commandLink::access-key Styles the access key character for command links, default bold. This style includes .AFLinkAccessKeyStyle:alias

af:commandMenuItem Component

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.

Style Selectors
Name Description
af|commandMenuItem Selector that renders on the root dom element of the component. CommandMenuItem supports further styling with the :disabled, :highlighted and :depressed pseudo-classes. A commandMenuItem is not only highlighted on mouseover, but also when its selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes.
af|commandMenuItem::bar-item Style applied to a commandMenuItem present on a menubar. The commandMenuItem 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 menu text.
af|commandMenuItem::bar-item-icon-style Style applied to a bar item's icon container, which is the part of the bar item before its text. The icon is specified as an optional attribute on the commandMenuItem.
af|commandMenuItem::bar-item-access-key Style on the access key character of a commandMenuItem, as shown on the menu bar. Includes the .AFFormAccessKeyStyle:alias.
af|commandMenuItem::bar-item-text Style applied to the commandMenuItem's text, as shown on the menu bar.
af|commandMenuItem::menu-item Style applied to a commandMenuItem present on a menu. The menu item 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 menu item text, the "menu-item-accelerator" which contains the menu item accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open indicator appears.
af|commandMenuItem::menu-item-icon-style Style applied to a commandMenuItem's icon container, which is the part of the commandMenuItem before its text. The icon is specified as an optional attribute on the commandMenuItem.
af|commandMenuItem::menu-item-access-key Style on the access key character of a commandMenuItem present on a menu. Includes the .AFFormAccessKeyStyle:alias.
af|commandMenuItem::menu-item-text Style applied to the commandMenuItem's text, as shown inside a menu. For an antonym type commandMenuItem, the menu-item-antonym-text-default and menu-item-antonym-text-selected keys are used instead.
af|commandMenuItem::menu-item-antonym-text-default Style applied to the text of an antonym type commandMenuItem (shown inside a menu) in its default state.
af|commandMenuItem::menu-item-antonym-text-selected Style applied to the selected text of an antonym type commandMenuItem (shown inside a menu) in its selected state.
af|commandMenuItem::menu-item-accelerator Style on the part of the commandMenuItem (shown inside a menu) containing its accelerator keyboard shortcut.
af|commandMenuItem::menu-item-open-indicator Style on the part of the commandMenuItem (shown inside a menu) where an open icon would go. Because commandMenuItems do not open into nested submenus, this is an empty section at the end of the menu item.
af|commandMenuItem::menu-item-radio-icon-style Style on the radio icon for a radio type command menu item shown inside a menu. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the menu-item-radio-icon-style and define the icon for the menu-item-radio-icon key.
af|commandMenuItem::menu-item-check-icon-style Style on the check icon for a check type command menu item shown inside a menu. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the menu-item-check-icon-style and define the icon for the menu-item-check-icon key.
Icon Selectors
Name Description
af|commandMenuItem::menu-item-radio-icon Overrides the default radio icon for a radio type command menu item shown inside a menu. Icons can be text or img elements, e.g. af|commandMenuItem::menu-item-radio-icon {content "X"} or af|commandMenuItem::menu-item-radio-icon {content: url(...)}. Use this key instead of the af|commandMenuItem::menu-item-radio-icon-style key if you do not want a background-image.
af|commandMenuItem::menu-item-check-icon Overrides the default check icon for check type command menu items. Icons can be text or img elements, e.g. af|commandMenuItem::menu-item-check-icon {content "X"} or af|commandMenuItem::menu-item-check-icon {content: url(...)}. Use this key instead of the af|commandMenuItem::menu-item-check-icon-style key if you do not want a background-image.
Resource Strings
Name Description
af_commandMenuItem.ROLE_TYPE_NORMAL Default role for command menu items. This is only used in screenreader mode.
af_commandMenuItem.ROLE_TYPE_CHECKBOX Role defined for command menu items that are of type checkbox. This is only used in screenreader mode.
af_commandMenuItem.ROLE_TYPE_RADIO Role defined for command menu items that are defined of type radio button. This is only used in screenreader mode.
af_commandMenuItem.STATE_CHECKBOX_SELECTED State value showing that the checkbox in a command menu item is selected. This is only used in screenreader mode.
af_commandMenuItem.STATE_RADIO_SELECTED State value showing that the radio button in a command menu item is selected. This is only used in screenreader mode.
af_commandMenuItem.STATE_DISABLED State value indicating that a command menu item is disabled. This is only used in screenreader mode.

af:commandNavigationItem Component

Style Selectors
Name Description
af|commandNavigationItem Style on the root element of the af:commandNavigationItem component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :selected and :disabled to style the component for different states. commandNavigationItem is not used by itself in general. The common use case would be using it inside of a breadCrumb or navigationPane. When commandNavigationItem is inside of a breadCrumbs or navigationPane, the commandNavigationItem styleClasses will be overridden with their specific keys respectively.
af|commandNavigationItem::icon-style Style for icon on NavigationItem, if specified.
af|commandNavigationItem::access-key Style on the text of the NavigationItem. This includes the .AFButtonAccessKeyStyle:alias style.
Resource Strings
Name Description
af_commandNavigationItem.TIP_SELECTED Tooltip that shows the current item is selected. The tooltip text can contain {0} in it to be replaced by the name of the selected item.
af_commandNavigationItem.TIP_DISABLED Tooltip that shows the current item selected is disabled. The tooltip text can contain {0} in it to be replaced by the name of the disabled item.

af:commandToolbarButton Component

Style Selectors
Name Description
af|commandToolbarButton Style on the root element of the af:commandToolbarButton component. This style includes the .AFDefaultFont:alias style. CommandToolbarButton supports further styling with the :hover, :depressed, :selected, :disabled, :text-only, twinkle-on and :action-disabled pseudo-classes.
af|commandToolbarButton::access-key Style on the access key for the label of the af:commandToolbarButton component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|commandToolbarButton::link Style on the button link on the af:commandToolbarButton component.
af|commandToolbarButton::text Style on the button text on the af:commandToolbarButton component.
af|commandToolbarButton::dropdown-cell Style on the cell containing the dropdown icon used for the popup button of the af:commandToolbarButton component.
af|commandToolbarButton::dropdown-icon-style Style of the icon used for the popup button of the af:commandToolbarButton component. The icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the dropdown-icon-style and define the override icon for the dropdown-icon.
Icon Selectors
Name Description
af|commandToolbarButton::dropdown-icon Overrides the default dropdown icon used for the popup button of the af:commandToolbarButton component.
Resource Strings
Name Description
af_commandToolbarButton.TIP_ADD_LINK Tooltip for generic command toolbar button used to insert a link. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_REMOVE_LINK Tooltip for generic command toolbar button used to remove a link. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_CLEAR_STYLING Tooltip for generic command toolbar button used to clear stylings. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_UNDO Tooltip for generic command toolbar button used to undo last action. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_REDO Tooltip for generic command toolbar button used to redo the last action. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_BOLD Tooltip for generic command toolbar button used to bold the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_ITALIC Tooltip for generic command toolbar button used to italicize the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_UNDERLINE Tooltip for generic command toolbar button used to underline the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_SUBSCRIPT Tooltip for generic command toolbar button used to subscript the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_SUPERSCRIPT Tooltip for generic command toolbar button used to superscript the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_STRIKETHROUGH Tooltip for generic command toolbar button used to strike through the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_JUSTIFY_LEFT Tooltip for generic command toolbar button used to left justify the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_JUSTIFY_CENTER Tooltip for generic command toolbar button used to center justify the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_JUSTIFY_RIGHT Tooltip for generic command toolbar button used to right justify the currently selected text. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_JUSTIFY_FULL Tooltip for generic command toolbar button used to set the styles for the browser to spread out sentences so that both the first and the last characters in the paragraph line up (except for the last line of the paragraph). Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_LIST_UNORDERED Tooltip for generic command toolbar button used to insert an unordered list. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_LIST_ORDERED Tooltip for generic command toolbar button used to insert an ordered list. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_OUTDENT Tooltip for generic command toolbar button used to outdent a line. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_INDENT Tooltip for generic command toolbar button used to indent a line. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_MODE_RICH_TEXT Tooltip for generic command toolbar button used to put the rich text editor into rich mode. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_MODE_CODE Tooltip for generic command toolbar button used to put the rich text editor into raw xhtml mode. Currently this is only used in the rich text editor component.
af_commandToolbarButton.TIP_SELECTOR Tooltip text for the popup selector on command toolbar buttons. This is only used in screen reader mode.
af_commandToolbarButton.ROLE Default role for command toolbar buttons. This is only used in screenreader mode.
af_commandToolbarButton.ROLE_CHECKBOX Role defined for command toolbar items that are of type checkbox. This is only used in screen reader mode.
af_commandToolbarButton.ROLE_RADIO Role defined for command toolbar items that are defined of type radio button. This is only used in screenreader mode.
af_commandToolbarButton.STATE_POPUP State value showing that the command toolbar button popup is being shown. This is only true for command toolbar buttons that have a popup facet defined and only in screenreader mode.
af_commandToolbarButton.STATE_CHECKBOX_SELECTED State value showing that the check button in a command toolbar button is selected. This is only used in screenreader mode.
af_commandToolbarButton.STATE_RADIO_SELECTED State value showing that the radio button in a command toolbar button is selected. This is only used in screenreader mode.
af_commandToolbarButton.STATE_DISABLED State value showing that a command toolbar button is disabled. This is used only in screen reader mode.

af:contextInfo Component

Style Selectors
Name Description
af|contextInfo Style on the root element of the af:contextInfo component. You can use this in conjuction with other selectors to control the padding so that the icon doesn't overlap the content, for example "af|outputText af|contextInfo" or "af|column::context af|contextInfo".
af|contextInfo::launch-icon-style used to control the launch icon. Available pseudo-classes are those that are allowed on the html a tag, like :hover and :active.
Icon Selectors
Name Description
af|contextInfo::launch-icon Can be used to override the af|contextInfo::launch-icon-style background image with an icon in high contrast mode.
Resource Strings
Name Description
af_contextInfo.TIP_MORE Text rendered on the contextInfo launch icon when there's no shortDesc attribute provided.

af:decorativeBox Component

Note: the decorative box requires themes to be enabled.

Style Selectors
Name Description
af|decorativeBox Selector that renders on the root dom element of the component
af|decorativeBox::top-start Selector for the top left (top right for RTL) DIV. The property "-tr-width" is supported to specify the width. The height is taken from the height of the top.
af|decorativeBox::top Selector for the top container DIV. If the "top" facet is present, it will be contained with this element. The property "-tr-height" is supported to specify the height. If the "top" facet is present, the topHeight attribute is used instead of this property.
af|decorativeBox::top-content The DIV that contains the top facet's content.
af|decorativeBox::top-end Selector for the top right (top left for RTL) DIV. The property "-tr-width" is supported to specify the width.
af|decorativeBox::start Selector for the left (right for RTL) DIV. The property "-tr-width" is supported to specify the width.
af|decorativeBox::center This is the style for the content region of the box ("center" facet)
af|decorativeBox::end Selector for the right (left for RTL) DIV. The property "-tr-width" is supported to specify the width.
af|decorativeBox::bottom-start Selector for the bottom left (bottom right for RTL) DIV. The property "-tr-width" is supported to specify the width. The height is taken from the height of the bottom.
af|decorativeBox::bottom Selector for the top container DIV. The property "-tr-height" is supported to specify the height.
af|decorativeBox::bottom-end Selector for the bottom right (bottom left for RTL) DIV. The property "-tr-width" is supported to specify the width. The height is taken from the height of the bottom.
ADF Faces properties
Name Description
-tr-width Used to specify the width of one of the sides or corners of the edges of the decorative box. The property may be themed:



-tr-height Used to specify the height of the top or bottom side of the decorative box. The property may be themed:



-tr-top-facet-layout How the top facet should be rendered. If not specified, or "center", the top facet is placed in between the rounded corners. If "full", the top facet will extend to both left and right edges of the outside of the decorative box.
-tr-center-icon The name of an icon alias placed on the decorative box style class with a theme to use for an image to be placed into the center of the decorative box. Used in the fusion skin for a horizontal gradient that can stretch. Example usage:



-tr-additonal-center-icon The name of an icon alias placed on the decorative box style class with a theme to use for an image to be placed into the center of the decorative box. This is the same as the -tr-center-icon, but allows for a second icon to be placed. Used in the fusion skin for a top shadow gradient that sits above the horizontal gradient. See the -tr-center-icon for example code.
-tr-bottom-icon The name of an icon alias placed on the decorative box style class with a theme to use for an image to be placed into the bottom of the decorative box. This has the same usage as the -tr-center-icon. Used in the fusion skin for a horizontal gradient. See the -tr-center-icon for example code.

af:dialog Component

Style Selectors
Name Description
af|dialog Selector that renders on the root dom element of the component. Use pseudo-classes :drag and :inactive to change the inactive and the dragged states of the dialog
af|dialog::resize-ghost The selector applied to the element temporarily created to animate a mouse drag resize. The element is a div with absolute positioning that floats above the dialog getting resized. The border, background color and opacity are attributes that a custom skin might want to adjust.
af|dialog::main Selector for the main element of this dialog. This selector along with the pseudo-classes :drag and :inactive on the root element can be used to customize the inactive and drag states of the dialog. For e.g. "af|dialog:drag af|dialog::main{opacity:0.15;} @agent ie {af|dialog:drag af|dialog::main{filter:alpha(opacity:15);}}" changes the drag state of the dialog so that it is only 15% opaque.
af|dialog::inactive-background Selector for displaying the background when the dialog is not the active window. This selector is used in conjunction with the pseudo-class :inactive on the root element and af|dialog::main to achieve an inactive look for the dialog. For e.g. "af|dialog::inactive-background{background-color:#FFFFFF;} af|dialog:inactive af|dialog::main{opacity:0.5;} @agent ie {af|dialog:inactive af|dialog::main{filter:alpha(opacity:50);}" sets the background to white and lets it bleed into the dialog by setting its opacity to 50%.
af|dialog::header-start The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|dialog::header Styles the "header" element. This element surrounds the header text, icon and close regions. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: n-resize).
af|dialog::header-end The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: ne-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|dialog::footer-start The style for the starting cell of the footer. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: sw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|dialog::footer The style for the center cell of the footer. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: s-resize).
af|dialog::footer-end The style for the ending cell of the footer. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: se-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|dialog::content-start The style for the starting of the content. This will be located directly below the af|dialog::header-start key, above the af|dialog::footer-start key and before the af|dialog::content key. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: w-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|dialog::content The style for the content region of the dialog. This is the area where the components children will be rendered. It is located directly below the af|dialog::header key, above the af|dialog::footer and after the af|dialog::content-start key. Use the :resizable pseudo-class to change attributes such as padding when resize mode is on.
af|dialog::content-center The center of the dialog is marked with this style. It is contained in the af|dialog::content node. Padding and color can be adjusted with this style but overflow is managed programmatically. Use of this style is conditional on property values stretchChildren=first or resize=on.
af|dialog::content-end The style for the ending of the content. This will be located directly below the af|dialog::header-end key, above the af|dialog::footer-end key and after the af|dialog::content key. Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: e-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|dialog::resize-icon-region Styles the region around the resize icon in af|dialog::footer and aligned to end in LTR. It can be used to set paddings, margins around the resize icon.
af|dialog::resize-icon-style The style for the resize icon located in the af|dialog::resize-icon-region.
af|dialog::icon-region Styles the region around the window icon in af|dialog::header and aligned to start. It can be used to set paddings, margins around the title icon.
af|dialog::title Styles the title of the dialog.
af|dialog::help-link-container A style containing the "dynamic help" for the window. It will only be displayed if assigned a helpTopicId and will be positioned after the af|dialog::title and before the af|dialog::close-icon-style within af|dialog::header.
af|dialog::dynamic-help-icon-style Style the dynamic help icon located within the help-link-container. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|dialog::close-icon-style-region Styles the region around af|dialog::close-icon-style in af|dialog::header and aligned to end. It can be used to set paddings, margins around the title icon.
af|dialog::close-icon-style Style on the dialog's close icon. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the close-icon-style and define the icon for the close-icon key.
af|dialog::footer-button Styles the root element of the af:commandButton in the footer of the dialog. For example, styles the footer buttons in the dialog. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled, :text-only to style the button for different states. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|dialog::footer-button-icon-style Styles the footer button icon, if there is an icon on the button.
af|dialog::footer-button-access-key Styles the access key text of the footer button. This includes the .AFButtonAccessKeyStyle:alias style.
ADF Faces properties
Name Description
-tr-open-animation-duration The root style, af|dialog, 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 default is 300 milliseconds.
-tr-default-content-width The root style, af|dialog, contains skinning property "-tr-default-content-width" that provides the default contentWidth if not provided when stretching is turned on, "stretchChildren=first". The default is 250 pixels.
-tr-default-content-height The root style, af|dialog, contains skinning property "-tr-default-content-height" that provides the default contentHeight if not provided when stretching is turned on, "stretchChildren=first". The default is 250 pixels.
Icon Selectors
Name Description
af|dialog::close-icon Overrides the default close icon. Icons can be text or img elements, e.g. af|dialog::close-icon {content "X"} or af|dialog::close-icon {content: url(...)}. Use this key instead of the close-icon-style key if you do not want a background-image.
af|dialog::dynamic-help-icon Icon that can be used instead of a background-image on af|dialog::dynamic-help-icon-style. Located in the af|dialog::help-link-container and only enabled if a helpTopicId is provided.
af|dialog::resize-icon Overrides the default resize icon. Icons can be text or img elements, e.g. af|dialog::resize-icon {content ">"} or af|dialog::resize-icon {content: url(...)}. Use this key instead of the resize-icon-style key if you do not want a background-image.
Resource Strings
Name Description
af_dialog.LABEL_OK Label for the "ok" button attached to the dialog. This is only available when the dialog has been configured with an "ok" button.
af_dialog.LABEL_CANCEL Label for the "cancel" button attached to the dialog. This is only available when the dialog has been configured with the "cancel" button.
af_dialog.LABEL_YES Label for the "yes" button attached to the dialog. This is only available when the dialog has been configured with the "yes" button.
af_dialog.LABEL_NO Label for the "no" button attached to the dialog. This is only available when the dialog has been configured with the "no" button.

af:document Component

Style Selectors
Name Description
af|document Selector that renders on the root dom element of the component.
af|document::maximized Selector that renders on the root dom element of the component when a maximized="true" attribute is specified on the component.
af|document::skip-link Selector on the skip link that is rendered by the af:document component when an af:skipLinkTarget tag is present.
af|document::splash-screen Selector on the root element of the document splash screen. The splash screen is displayed on the first page access for any new session. This selector is typically used to provide a background color for the page while the splash screen is displayed.
af|document::splash-screen-content Selector on the content element of the document splash screen. The content contains two sub-pieces: an icon and a text message (e.g. "Loading..."). The selector is typically used to display a border/background for these contents.
af|document::splash-screen-message Selector on the message element of the document splash screen. This selector is typically used to specify a font for the splash screen text message (e.g. "Loading...").
Icon Selectors
Name Description
af|document::splash-screen-icon Icon displayed within the splash screen contents.
Resource Strings
Name Description
af_document.LABEL_SKIP_LINK_TEXT Text written out as part of link in screenreader mode to skip to the content on the page.
af_document.LABEL_SPLASH_SCREEN The label for the splash screen that is displayed the first time a page is shown.
af_document.MSG_FAILED_CONNECTION The error text brought up in an alert box when a connection to the server fails.
af_document.MSG_SCREEN_READER_HINT A message that lets screen reader users know that the page is rendered using screen reader optimized contents. This message is rendered such that it is read by screen readers, but not visible to non-screen reader users.

af:form Component

The form component has no public skinning keys.

af:goButton Component

Style Selectors
Name Description
af|goButton Style on the root element of the af:goButton component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled to style the component for different states. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|goButton::icon-style Style on the button icon, if the icon attribute is set on the af:goButton.
af|goButton::access-key Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style.

af:goImageLink Component

Style Selectors
Name Description
af|goImageLink Style on the root element of the goImageLink component. This style includes the .AFDefaultFont:alias style. goImageLink supports further styling with the :hover, :disabled, and :text-only pseudo-classes.
af|goImageLink::access-key Style on the access key for the label of the af:goImageLink component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|goImageLink::text Style on the link text on the af:goImageLink component.
af|goImageLink::image Style of the image used inside of the af:goImageLink component.

af:goLink Component

Style Selectors
Name Description
af|goLink Style on the root element of the af:goLink component. Available pseudo-classes are those that can go on an html A tag, like :hover, :active, :focus, :visited, as well as :disabled. Please note that for links :focus pseudo-class does not work in IE 7. This style includes the .AFLinkForeground:alias and .AFDefaultFont:alias styles. The state :visited includes .AFVisitedLinkForeground:alias, the state :focus includes .AFActiveLinkBorder:alias, the state :visited:focus includes .AFVisitedLinkBorder:alias, the state :active includes .AFActiveLinkForeground:alias, the state :active:link includes .AFActiveLinkForeground:alias, and the state :disabled:active includes .AFLinkForeground:alias
af|goLink::access-key Styles the access key character for go links, default bold. This style includes .AFLinkAccessKeyStyle:alias

af:goMenuItem Component

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.

Style Selectors
Name Description
af|goMenuItem Selector that renders on the root dom element of the component. GoMenuItem supports further styling with the :disabled, :highlighted and :depressed pseudo-classes. A goMenuItem is not only highlighted on mouseover, but also when its selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes.
af|goMenuItem::bar-item Style applied to a goMenuItem present on a menubar. The goMenuItem 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 menu text.
af|goMenuItem::bar-item-icon-style Style applied to a bar item's icon container, which is the part of the bar item before its text. The icon is specified as an optional attribute on the goMenuItem.
af|goMenuItem::bar-item-access-key Style on the access key character of a goMenuItem, as shown on the menu bar. Includes the .AFFormAccessKeyStyle:alias.
af|goMenuItem::bar-item-text Style applied to the goMenuItem's text, as shown on the menu bar.
af|goMenuItem::menu-item Style applied to a goMenuItem present on a menu. The menu item 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 menu item text, the "menu-item-accelerator" which contains the menu item accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open indicator appears.
af|goMenuItem::menu-item-icon-style Style applied to a goMenuItem's icon container, which is the part of the goMenuItem before its text. The icon is specified as an optional attribute on the goMenuItem.
af|goMenuItem::menu-item-access-key Style on the access key character of a goMenuItem present on a menu. Includes the .AFFormAccessKeyStyle:alias.
af|goMenuItem::menu-item-text Style applied to the goMenuItem's text, as shown inside a menu.
af|goMenuItem::menu-item-accelerator Style on the part of the goMenuItem (shown inside a menu) containing its accelerator keyboard shortcut.
af|goMenuItem::menu-item-open-indicator Style on the part of the goMenuItem (shown inside a menu) where an open icon would go. Because goMenuItems do not open into nested submenus, this is an empty section at the end of the menu item.
Resource Strings
Name Description
af_goMenuItem.ROLE Default role for go menu items. This is only used in screenreader mode.
af_goMenuItem.STATE_DISABLED State value indicating that a go menu item is disabled. This is only used in screenreader mode.

af:group Component

Style Selectors
Name Description
n/a This component has no visual representation. It does not generate any elements on the page and thus is not skinnable.

af:image Component

Style Selectors
Name Description
af|image Style on the root dom element of the component. Available pseudo-classes:twinkle-on

af:inlineFrame Component

Style Selectors
Name Description
af|inlineFrame Selector that renders on the root dom element of the component.

af:inputColor Component

Style Selectors
Name Description
af|inputColor Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|inputColor:read-only::content"
af|inputColor::access-key Style on the access key character for inputColor. Includes .AFFormAccessKeyStyle:alias
af|inputColor::content Style on the content of the component. You can set the width of the content piece and border colors.
af|inputColor::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputColor::launch-icon-style Style the clickable icon of the component. Available pseudo-class is hover.
Icon Selectors
Name Description
af|inputColor::launch-icon The button icon which is used to launch the secondary color picker dialog. Note: This af|selectInputColor's color swatch is now used to launch the secondary dialog on most browsers. The af|selectInputColor::launch-icon icon is only displayed on browsers which do not display the color swatch, such as Netscape 4.x.
af|inputColor::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputColor::dynamic-help-icon Icon that can be used instead of a background-image on af|inputColor::dynamic-help-icon-style. By default this is null. If you use this af|inputColor::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_inputColor.TIP_CLICK_TO_LAUNCH_POPUP_SELECTOR Tooltip that displays on the launch icon.

af:inputComboboxListOfValues Component

Style Selectors
Name Description
af|inputComboboxListOfValues Style on the root element of the inputComboboxListOfValues component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the label when the component is disabled by using this selector: "af|inputComboboxListOfValues:disabled::label"
af|inputComboboxListOfValues::access-key Style on the access key for the label of the af:inputComboboxListOfValues component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputComboboxListOfValues::container Style on the container of the af:inputComboboxListOfValues component, which basically contains inputText and the dropdown icon.
af|inputComboboxListOfValues::content Style on the content of the af:inputComboboxListOfValues component. You can set the width of the content piece that will be used when the columns attribute on af:inputComboboxListOfValues is not set.
af|inputComboboxListOfValues::context-content
af|inputComboboxListOfValues::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputComboboxListOfValues::label Style on the label of the af:inputComboboxListOfValues component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|inputComboboxListOfValues::search Overrides the Search... link in the drop down of the inputComboboxListOfValues component.
af|inputComboboxListOfValues::separator Overrides the separator of the inputComboboxListOfValues component.
af|inputComboboxListOfValues::dropdown-cell Overrides the default gradient background for the drop down icon of the inputComboboxListOfValues component.
af|inputComboboxListOfValues::dropdown-icon-style Overrides the default drop down icon of the inputComboboxListOfValues component. Includes .AFClickableImageAnchor:alias
af|inputComboboxListOfValues::popup-create-icon-style Overrides the default create icon of CommandToolbarButton in LOV. Available pseudo-classes are :disabled, :hover and :active. Includes .AFClickableImageAnchor:alias
Icon Selectors
Name Description
af|inputComboboxListOfValues::dropdown-icon The icon used to launch the drop down list of the inputComboboxListOfValues component.
af|inputComboboxListOfValues::dropdown-disabled-icon Overrides the default disabled dropdown icon.
af|inputComboboxListOfValues::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputComboboxListOfValues::dynamic-help-icon Icon that can be used instead of a background-image on af|inputComboboxListOfValues::dynamic-help-icon-style. By default this is null. If you use this af|inputComboboxListOfValues::dynamic-help-icon-style can then be used for background colors, etc.
af|inputComboboxListOfValues::popup-create-icon Icon that can be used instead of a background-image on af|inputComboboxListOfValues::popup-create-icon-style. By default this is null.
ADF Faces Properties
Name Description
-tr-dropdown-number-of-rows The property used to indicate how many rows to be displayed in the drop down list. The default value is 19 rows
-tr-dropdown-row-height The property used to determine the row height of each item in the drop down list. The default value is 16 px
Resource Strings
Name Description
af_inputComboboxListOfValues.LABEL_SEARCH The text used in the popup for use with transient search link added to the popup.
af_inputComboboxListOfValues.TIP_CREATE The text used as the tooltip for the create commandToolbarButton created inside the search and select dialog

af:inputDate Component

Style Selectors
Name Description
af|inputDate Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|inputDate:disabled::content"
af|inputDate::access-key Style on the access key character for inputDate. Includes .AFFormAccessKeyStyle:alias
af|inputDate::content Style on the content of the component. You can set the width of the content piece and border colors.
af|inputDate::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputDate::timezone Style on the timezone that appears beside the input field. You can hide the entire timezone string by setting "display:none".
af|inputDate::launch-icon-style Style of the clickable launch icon. Available pseudo-classes are :disabled, :hover and :active. For example, you can style the icon when the component is disabled by using this selector: "af|inputDate::launch-icon-style:disabled". The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the launch-icon-style and define the icon for the launch-icon key. Includes .AFClickableImageAnchor:alias
Icon Selectors
Name Description
af|inputDate::launch-icon The button icon which is used to launch the secondary date picker dialog. For example, you can replace the glyph with a text icon. By default, the ::launch-icon-style is set with the background-image and this key is not set.
af|inputDate::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputDate::dynamic-help-icon Icon that can be used instead of a background-image on af|inputDate::dynamic-help-icon-style. By default this is null. If you use this af|inputDate::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_inputDate.TIP_TITLE_SELECT_DATE The tooltip text for the popup selector of the inputDate component when configured for date only mode. This is also used as the title for the popup that is generated in response to clicking the selector. This popup hosts the chooseDate component.
af_inputDate.TIP_TITLE_SELECT_DATE_AND_TIME The tooltip text for the popup selector of the inputDate component when configured for date and time mode. This is also used as the title for the popup that is generated in response to clicking the selector. This popup hosts the chooseDate component.
af_inputDate.TIP_CLICK_TO_LAUNCH_POPUP_SELECTOR A fallback tooltip for the glyph next to the inputDate, when the code is unable to determine the type of the converter.

af:inputFile Component

Style Selectors
Name Description
af|inputFile Style on the root element of the af:inputFile component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation.
af|inputFile::access-key Style on the access key for the label of the af:inputFile component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputFile::content Style on the content of the af:inputFile component.
af|inputFile::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputFile::label Style on the label of the af:inputFile component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Icon Selectors
Name Description
af|inputFile::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputFile::dynamic-help-icon Icon that can be used instead of a background-image on af|inputFile::dynamic-help-icon-style. By default this is null. If you use this af|inputFile::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_inputFile.LABEL_UPDATE_BUTTON Label for the button to launch the update dialog for file upload.
af_inputFile.LABEL_UPDATE_DIALOG_TITLE The text for the dialog title on the file upload update dialog.
af_inputFile.MSG_UPLOAD_ERROR Summary error text used to generate a faces message on a failed file upload.
af_inputFile.MSG_UPLOAD_ERROR_DETAIL Detailed error text used to generate a faces message on a failed file upload.

af:inputListOfValues Component

Style Selectors
Name Description
af|inputListOfValues Style on the root element of the af:inputListOfValues component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the label when the component is disabled by using this selector: "af|inputListOfValues:disabled::label"
af|inputListOfValues::access-key Style on the access key for the label of the af:inputListOfValues component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputListOfValues::content Style on the content of the af:inputListOfValues component. You can set the width of the content piece that will be used when the columns attribute on af:inputListOfValues is not set.
af|inputListOfValues::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputListOfValues::label Style on the label of the af:inputListOfValues component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|inputListOfValues::search-icon-style Overrides the default search icon of the inputListOfValues component. Includes .AFClickableImageAnchor:alias
af|inputListOfValues::popup-create-icon-style Overrides the default create icon of CommandToolbatButton in LOV. Available pseudo-classes are :disabled, :hover and :active. Includes .AFClickableImageAnchor:alias
Icon Selectors
Name Description
af|inputListOfValues::search-icon Search icon used to launch the search and select dialog of the inputListOfValues component.
af|inputListOfValues::search-disabled-icon Overrides the default disabled search icon.
af|inputListOfValues::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputListOfValues::dynamic-help-icon Icon that can be used instead of a background-image on af|inputListOfValues::dynamic-help-icon-style. By default this is null. If you use this af|inputListOfValues::dynamic-help-icon-style can then be used for background colors, etc.
af|inputListOfValues::popup-create-icon Icon that can be used instead of a background-image on af|inputListOfValues::popup-create-icon-style. By default this is null.
Resource Strings
Name Description
af_inputListOfValues.TIP_SEARCH The text used as the tooltip for the search icon used to launch the search and select dialog when label and searchDesc are null.
af_inputListOfValues.TIP_SEARCH_LABEL The text used as the tooltip for the search icon used to launch the search and select dialog when searchDesc is null and label is not null.
af_inputListOfValues.TIP_CREATE The text used as the tooltip for the create commandToolbarButton created inside the search and select dialog

af:inputNumberSlider Component

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

Style Selectors
Name Description
af|inputNumberSlider Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|inputNumberSlider:read-only::content"
af|inputNumberSlider::access-key Style on the access key for the label of the af:inputNumberSlider component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputNumberSlider::content Style on the content of the component. Common properties are height and border colors. There is a :disabled and :vertical pseudo-class available
af|inputNumberSlider::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputNumberSlider::label Style on the label of the af:inputNumberSlider component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|inputNumberSlider::plus-icon-style Uses background-image to set the increment image (+). If you want to use text instead of a background-image, you can use af|inputNumberSlider::plus-icon {content:"Text"}. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::minus-icon-style Uses background-image to set the decrement image (-). If you want to use text instead of a background-image, you can use af|inputNumberSlider::minus-icon {content:"Text"}. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::bar Styles the bar size of the slider.
af|inputNumberSlider::bar-outer-border Styles the outer border. This combined with the af|inputNumberSlider::bar-inner-border gives the bar area a sunken effect
af|inputNumberSlider::bar-inner-border Styles the inner border. This combined with the af|inputNumberSlider::bar-outer-border gives the bar area a sunken effect
af|inputNumberSlider::thumb-icon-style Uses background-image to show the currently selected value in the slider. If you want to use text instead of a background-image, you can use af|inputNumberSlider::thumb-icon {content:"Text"}. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::thumb-value-line Styles the line drawn from the thumb to the displayed value of the current thumb position. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::thumb-value Styles the value of the current thumb position. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::ticks Styles the basic tick marks for the slider. This is used to set the positioning of the ticks. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::major-tick Styles the major tick marks for the slider. This tick is normally longer than the minor ticks marks. The major tick marks position are defined by the majorIncrement attribute of the component. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::minor-tick Styles the minor tick marks for the slider. The minor tick marks position are defined by the minorIncrement attribute on the component. If this attribute is not defined these ticks are not rendered. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::zero-tick Styles the zero tick marks for the slider. This is only rendered if the slider has a range that crosses the zero point. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::tick-value Styles the value for major tick marks for the slider. There is a :disabled and :vertical pseudo-class available.
af|inputNumberSlider::zero-tick-value Styles the value of the zero tick mark for the slider. This is only rendered if the slider has a range that crosses the zero point. There is a :disabled and :vertical pseudo-class available.
Icon Selectors
Name Description
af|inputNumberSlider::plus-icon Overrides the default plus icon.
af|inputNumberSlider::minus-icon Overrides the default minus icon.
af|inputNumberSlider::thumb-icon Overrides the default thumb icon.
af|inputNumberSlider::plus-disabled-icon Overrides the default disabled plus icon.
af|inputNumberSlider::minus-disabled-icon Overrides the default disabled minus icon.
af|inputNumberSlider::thumb-disabled-icon Overrides the default disabled thumb icon.
af|inputNumberSlider::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputNumberSlider::dynamic-help-icon Icon that can be used instead of a background-image on af|inputNumberSlider::dynamic-help-icon-style. By default this is null. If you use this af|inputNumberSlider::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_inputNumberSlider.TIP_INCREASE The tooltip for the increase icon attached to both the input number slider and the input range slider. This is shown when the user hovers over the icon.
af_inputNumberSlider.TIP_DECREASE The tooltip for the decrease icon attached to both the input number slider and the input range slider. This is shown when the user hovers over the icon.

af:inputNumberSpinbox Component

Style Selectors
Name Description
af|inputNumberSpinbox Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|inputNumberSpinbox:read-only::content"
af|inputNumberSpinbox::access-key Style on the access key for the label of the af:inputNumberSpinbox component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputNumberSpinbox::content Style on the content of the component. Common properties are height and border colors.
af|inputNumberSpinbox::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputNumberSpinbox::label Style on the label of the component. Includes .AFLabel:alias. The key af|inputNumberSpinbox:disabled::label includes .AFLabelDisabled:alias.
af|inputNumberSpinbox::incrementor-icon-style Uses background-image to set the increment image. If you want to use text instead of a background-image, you can use af|inputNumberSpinbox::incrementor-icon {content:"Text"}. There is a :disabled pseudo-class available.
af|inputNumberSpinbox::decrementor-icon-style Uses background-image to set the decrement image. If you want to use text instead of a background-image, you can use af|inputNumberSpinbox::decrementor-icon {content:"Text"}. There is a :disabled pseudo-class available.
af|inputNumberSpinbox::spinbox-cell Styles the cell for the decrementor/incrementor icons. Available pseudo-classes are :disabled, :hover and :active. For example, you can style the icon when the component is disabled by using this selector: "af|inputNumberSpinbox:disabled::spinbox-cell".
Icon Selectors
Name Description
af|inputNumberSpinbox::incrementor-icon Overrides the default incrementor icon.
af|inputNumberSpinbox::decrementor-icon Overrides the default decrementor icon.
af|inputNumberSpinbox::incrementor-disabled-icon Overrides the default disabled incrementor icon.
af|inputNumberSpinbox::decrementor-disabled-icon Overrides the default disabled decrementor icon.
af|inputNumberSpinbox::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputNumberSpinbox::dynamic-help-icon Icon that can be used instead of a background-image on af|inputNumberSpinbox::dynamic-help-icon-style. By default this is null. If you use this af|inputNumberSpinbox::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_inputNumberSpinbox.TIP_INCREMENT The tooltip for the increase icon attached to the input spinbox. This is shown when the user hovers over the icon.
af_inputNumberSpinbox.TIP_DECREMENT The tooltip for the decrease icon attached to the input spinbox. This is shown when the user hovers over the icon.
af_inputNumberSpinbox.TIP_INCREMENT_DISABLED The tooltip for the increase icon attached to the input spinbox when disabled. This is shown when the user hovers over the icon.
af_inputNumberSpinbox.TIP_INCREMENT_DISABLED The tooltip for the decrease icon attached to the input spinbox when disabled. This is shown when the user hovers over the icon.

af:inputRangeSlider Component

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

Style Selectors
Name Description
af|inputRangeSlider Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|inputRangeSlider:read-only::content"
af|inputRangeSlider::access-key Style on the access key for the label of the af:inputRangeSlider component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputRangeSlider::content Style on the content of the component. Common properties are height and border colors. There is a :disabled and :vertical pseudo-class available
af|inputRangeSlider::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputRangeSlider::label Style on the label of the af:inputRangeSlider component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|inputRangeSlider::plus-icon-style Uses background-image to set the increment image (+). If you want to use text instead of a background-image, you can use af|inputRangeSlider::plus-icon {content:"Text"}. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::minus-icon-style Uses background-image to set the decrement image (-). If you want to use text instead of a background-image, you can use af|inputRangeSlider::minus-icon {content:"Text"}. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::bar Styles the bar size of the slider. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::bar-outer-border Styles the outer border. This combined with the af|inputRangeSlider::bar-inner-border gives the bar area a sunken effect. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::bar-inner-border Styles the inner border. This combined with the af|inputRangeSlider::bar-outer-border gives the bar area a sunken effect. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::highlight Styles the region contained within the bar between the minimum and maximum thumb values of the current range. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::thumb-icon-style Uses background-image to show the currently selected value in the slider. If you want to use text instead of a background-image, you can use af|inputNumberSlider::thumb-icon {content:"Text"}. Two of these will be rendered for the range to represent the minimum and maximum value of the Range. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::thumb-value-line Styles the line drawn from the thumb to the displayed value of the current minimum and maximum thumb positions. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::thumb-value Styles the value of the current minimum and maximum thumb positions. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::ticks Styles the basic tick marks for the slider. This is used to set the positioning of the ticks. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::major-tick Styles the major tick marks for the slider. This tick is normally longer than the minor ticks marks. The major tick marks position are defined by the majotIncreament attribute of the component. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::minor-tick Styles the minor tick marks for the slider. The minor tick marks position are defined by the minorIncrement attribute on the component. If this attribute is not defined these ticks are not rendered. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::zero-tick Styles the zero tick marks for the slider. This is only rendered if the slider has a range that crosses the zero point. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::tick-value Styles the value for major tick marks for the slider. There is a :disabled and :vertical pseudo-class available.
af|inputRangeSlider::zero-tick-value Styles the value of the zero tick mark for the slider. This is only rendered if the slider has a range that crosses the zero point. There is a :disabled and :vertical pseudo-class available.
Icon Selectors
Name Description
af|inputRangeSlider::plus-icon Overrides the default plus icon.
af|inputRangeSlider::minus-icon Overrides the default minus icon.
af|inputRangeSlider::thumb-icon Overrides the default thumb icon.
af|inputRangeSlider::plus-disabled-icon Overrides the default disabled plus icon.
af|inputRangeSlider::minus-disabled-icon Overrides the default disabled minus icon.
af|inputRangeSlider::thumb-disabled-icon Overrides the default disabled thumb icon.
af|inputRangeSlider::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputRangeSlider::dynamic-help-icon Icon that can be used instead of a background-image on af|inputRangeSlider::dynamic-help-icon-style. By default this is null. If you use this af|inputRangeSlider::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_inputRangeSlider.TIP_START_RANGE The tooltip for the thumb icon that denotes the start of the range. This is shown when the user hovers over the icon.
af_inputRangeSlider.TIP_END_RANGE The tooltip for the thumb icon that denotes the end of the range. This is shown when the user hovers over the icon.

af:inputText Component

Style Selectors
Name Description
af|inputText Style on the root element of the af:inputText component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the label when the component is disabled by using this selector: "af|inputText:disabled::label"
af|inputText::access-key Style on the access key for the label of the af:inputText component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputText::content Style on the content of the af:inputText component. You can set the width of the content piece that will be used when the columns attribute on af:inputText is not set.
af|inputText::context-content
af|inputText::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|inputText::label Style on the label of the af:inputText component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
AFFieldTextMarker, AFFieldTextLTRMarker, AFPhoneFieldTextMarker, AFPostalCodeFieldTextMarker, AFAddressFieldTextMarker, AFFieldNumberMarker To style the input (aka content) piece of inputText without creating a skin definition, you can set these public style classes on the styleClass attribute. The "Marker" style classes are rendered on the root dom element, they have no style properties of their own, and they map the content piece of the component's styling to the public style class without the "Marker". For example, we map AFFieldTextMarker to AFFieldText by defining this skin definition for you in our base skin: af|inputText.AFFieldTextMarker af|inputText::content {-tr-rule-ref: selector(".AFFieldText")}. If you set styleClass="AFFieldText", the entire component will be affected, including the label. If you want to affect only the "content" piece, use one of these marker style classes. If you need to skin these styles, then you can skin the non-marker equivalent style (e.g., .AFFieldText) and because the base skin skin selector, the content piece will be affected. By default, in LTR mode only the AFFieldNumberMarker style does anything (it right aligns the text). It is in RTL mode that the styling is changed; the bidi-direction is changed for most of these marker styles.
Icon Selectors
Name Description
af|inputText::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputText::dynamic-help-icon Icon that can be used instead of a background-image on af|inputText::dynamic-help-icon-style. By default this is null. If you use this af|inputText::dynamic-help-icon-style can then be used for background colors, etc.

af:media Component

Style Selectors
Name Description
af|media Selector that renders on the root dom element of the component.
Resource Strings
Name Description
af_media.TIP_DEFAULT_LINK_TEXT_AUDIO Default text for the link to audio media.
af_media.TIP_DEFAULT_LINK_TEXT_VIDEO Default text for the link to video media.
af_media.TIP_DEFAULT_LINK_TEXT_UNKNOWN Default text for the link to unknown media.

af:menu Component

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.

Style Selectors
Name Description
af|menu Selector that renders on the root dom element of the component. Menu supports further styling with the :disabled, :highlighted and :depressed pseudo-classes. The part of the menu that appears on the menu bar or in a menu (as a submenu) is not only highlighted on mouseover, but also when it is selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes. Also of note, within the af|menu selector you can specify the -tr-visible-items property.

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

af|menu::bar-item Style applied to the menu bar item that is shown on a menubar (when a menu is located on a menubar). 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.
af|menu::bar-item-icon-style Style applied to a menu bar item's icon container, which is the part of the menu bar item before its text. The icon is specified as an optional attribute on the menu.
af|menu::bar-item-access-key Style on the access key character of a menu, as shown on the menu bar. Includes the .AFFormAccessKeyStyle:alias.
af|menu::bar-item-text Style applied to the menu's text, as shown on the menu bar.
af|menu::bar-item-open-icon-style For menus that appear in a menubar, this is the style on the menu's open icon (i.e., the drop down menu icon). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the bar-item-open-icon-style and define the icon for the bar-item-open-icon key.
af|menu::child-container Style applied to the menu container that appears when you open a menu. The menu container contains the child contents, called menu items, of the menu. These menu items can be either additional menus, called submenus, commandMenuItems, or goMenuItems.
af|menu::scroll-up-cell Style on the cell that contains the scroll up icon. This cell is only present in a menu when there are more menu items present than the menu's maximum item setting.
af|menu::scroll-up-icon-style Style on the scroll up icon that is present in a menu when there are more menu items present than the menu's maximum item setting. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the scroll-up-icon-style and define the icon for the scroll-up-icon key.
af|menu::scroll-down-cell Style on the cell that contains the scroll down icon. This cell is only present in a menu when there are more menu items present than the menu's maximum item setting.
af|menu::scroll-down-icon-style Style on the scroll down icon that is present in a menu when there are more menu items present than the menu's maximum item setting. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the scroll-down-icon-style and define the icon for the scroll-down-icon key.
af|menu::submenu Style applied to the submenu item inside a menu (when a menu is located inside another menu). 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|menu::submenu-icon-style Style applied to a submenu's icon container, for submenus that have assigned icons. The icon is specified as an attribute on the menu.
af|menu::submenu-text Style applied to the submenu's text, as shown inside the menu.
af|menu::submenu-access-key Style on the access key character of the submenu, as shown inside the menu. Includes the .AFFormAccessKeyStyle:alias.
af|menu::submenu-accelerator Style on the part of the submenu where an accelerator keyboard shortcut would go. CommandMenu Items (which can also appear inside menus) have accelerators while menus do not. Because menus do not have accelerators, this is just an empty section near the end of the submenu item.
af|menu::submenu-open-indicator Style on the section of the submenu that contains its open icon for opening the nested submenu. The submenu-open-icon-style, which contains the actual icon image, is a child of this element.
af|menu::submenu-open-icon-style Style for a submenu open icon, which is present when you have menus inside of menus (nested submenus). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the submenu-open-icon-style and define the icon for the submenu-open-icon key.
af|menu::separator-row Style on the row inside a menu that contains a separator. Menus have separators when they have grouped menu items inside the menu.
af|menu::separator Style on the separator line itself. The separator stretches across most of the separator-row, but not the space on the left where optional icons go.
af|menu::detachable-header The header row for a detachable menu. Contains the detachable-header-content-center and af|panelWindow::close-icon-style. When attached, the header shows a detach grip. When detached, the header appears similar to a panelWindow header.
af|menu::detachable-header-content-center The center content for the detachable header row. When attached, contains the detach-handle and spans the header row. When detached, contains a af|panelWindow::title and shares the header row with the af|panelWindow::close-icon-style.
af|menu::detach-handle Style on the top of a detachable menu where a user can grab and drag the detachable menu.
af|menu::detach-grip For a detachable menu, this is the style on the part of the detachable handle where the grip image is located. This image is a background image for this style and can be customized by specifying an alternate background image.
af|menu::fetching-message Styling on the 'data fetching...' text message that briefly appears when a menu that has contentDelivery set to lazy is first opened. This message is displayed while the menu information is retrieved from the server.
Icon Selectors
Name Description
af|menu::bar-item-open-icon Overrides the default menubar menu's launch icon (i.e., the drop down menu icon). Icons can be text or img elements, e.g. af|menu::bar-item-open-icon {content "X"} or af|menu::bar-item-open-icon {content: url(...)}. Use this key instead of the af|menu::bar-item-open-icon-style key if you do not want a background-image.
af|menu::scroll-up-icon Overrides the default menu's scroll up icon. Icons can be text or img elements, e.g. af|menu::scroll-up-icon {content "X"} or af|menu::scroll-up-icon {content: url(...)}. Use this key instead of the af|menu::scroll-up-icon-style key if you do not want a background-image.
af|menu::scroll-down-icon Overrides the default menu's scroll down icon. Icons can be text or img elements, e.g. af|menu::scroll-down-icon {content "X"} or af|menu::scroll-down-icon {content: url(...)}. Use this key instead of the af|menu::scroll-down-icon-style key if you do not want a background-image.
af|menu::submenu-open-icon Used to override a submenu open icon, which is present when you have menus inside of menus (nested submenus). Icons can be text or img elements, e.g. af|menu::submenu-open-icon {content "X"} or af|menu::submenu-open-icon {content: url(...)}. Use this key instead of the af|menu::submenu-open-icon-style key if you do not want a background-image.
ADF Faces Properties
Name Description
-tr-visible-items Sets the default maximum number of visible items that can be displayed inside a menu. If there are more items in the menu than this value, then scroll up and scroll down icons will be displayed, allowing the user to scroll through the menu contents. It is important to note that setting the maxItems attribute on the menu component will override this default setting.
Resource Strings
Name Description
af_menu.ROLE The role for a submenu, used for screenreader mode testing.
af_menu.STATE_DISABLED State value of a menu indicating that the menu is disabled.

af:menuBar Component

Style Selectors
Name Description
af|menuBar Selector that renders on the root dom element of the component.
af|menuBar::body The main section of the menuBar where the items are, not including the end space to the right where the overflow-indicator appears.
af|menuBar::item Style applied to the menuBar item that is shown on a menuBar.
af|menuBar::separator Styles the separator icon that is used to separate grouped children.
af|menuBar::overflow-indicator Style on the overflow indicator that is present when the menuBar items are overflowed beyond the available space. Available pseudo-classes are :hover and :active.
Icon Selectors
Name Description
af|menuBar::overflow-icon Overrides the default menuBar overflow icon. Icons can be text or img elements, e.g. af|menuBar::overflow-icon {content "X"} or af|menuBar::overflow-icon {content: url(...)}. Use this key instead of the af|menuBar::overflow-indicator key if you do not want a background-image.

af:message Component

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

Icon Selectors
Name Description
af|message::info-icon The icon for messages that are of type info.
af|message::confirmation-icon The icon for messages that are of type confirmation.
af|message::warning-icon The icon for messages that are of type warning.
af|message::error-icon The icon for messages that are of type error.
af|message::fatal-icon The icon for messages that are of type fatal.
Resource Strings
Name Description
af_message.TIP_FATAL Tooltip that displays on the component when the type of message is critical error.
af_message.TIP_ERROR Tooltip that displays on the component when the type of message is error.
af_message.TIP_WARNING Tooltip that displays on the component when the type of message is warning.
af_message.TIP_CONFIRMATION Tooltip that displays on the component when the type of message is confirmational.
af_message.TIP_INFO Tooltip that displays on the component when the type of message is informational.
af_message.LABEL_COMPONENT_MESSAGES_INTRO Header text that displays when multiple messages are displayed for the same component.
af_message.TIP_PREVIOUS_MESSAGE Tooltip that displays on the previous icon when multiple messages are displayed.
af_message.TIP_NEXT_MESSAGE Tooltip that displays on the next icon when multiple messages are displayed.
af_message.LABEL_SHOW_ALL_MESSAGES Label text that displays on the "All" button when multiple messages are displayed.
af_message.TIP_SHOW_ALL_MESSAGES Tooltip that displays on the "All" button when multiple messages are displayed.
af_message.LABEL_COMPACT_TYPE_SUMMARY Message that displays the type of error, where {0} is the type and {1} is the message summary. For example: "Error: Not a number" where {0} ="Error" and {1} = "Not a number".

af:messages Component

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

Icon Selectors
Name Description
af|messages::info-icon The icon for messages that are of type info.
af|messages::confirmation-icon The icon for messages that are of type confirmation.
af|messages::warning-icon The icon for messages that are of type warning.
af|messages::error-icon The icon for messages that are of type error.
af|messages::fatal-icon The icon for messages that are of type fatal.
Resource Strings
Name Description
af_messages.TIP_FATAL Tooltip that displays on component level messages when the type of message is critical error.
af_messages.TIP_ERROR Tooltip that displays on component level messages when the type of message is error.
af_messages.TIP_WARNING Tooltip that displays on component level messages when the type of message is warning.
af_messages.TIP_CONFIRMATION Tooltip that displays on component level messages when the type of message is confirmational.
af_messages.TIP_INFO Tooltip that displays on component level messages when the type of message is informational.
af_messages.LABEL_COMBINED_MESSAGES_INTRO Header text that displays when multiple messages are displayed.
af_messages.LABEL_COMPONENT_LEVEL_MESSAGE Text link that displays when there are page level and component level messages. When clicked, the component level messages display.
af_messages.LABEL_SET_FOCUS_ON_COMPONENT Tooltip that displays on hover of the LABEL_COMPONENT_LEVEL_MESSAGE.

af:navigationPane Component

Style Selectors
Name Description
af|navigationPane Styles the root dom element of the component.
af|navigationPane-bar Style on the root dom element of the component for hint as "bar".
af|navigationPane-bar::link Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "bar". Available pseudo-class are :disabled, :selected and :hover.
af|navigationPane-bar::access-key Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "bar". Includes .AFFormAccessKeyStyle:alias
af|navigationPane-bar::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "bar"
af|navigationPane-bar::separator-icon-style Style of the icon used as the bar item separator. And icon can be specified as a background-image in this key. Alternately, you can use tr-inhibit: background-image and instead define the override icon.
af|navigationPane-bar::body Styles the container which encloses both the navigationPane bar content and the overflow indicator.
af|navigationPane-bar::content Styles the container which encloses the navigationPane bar content (excluding the overflow indicator).
af|navigationPane-bar::start-overflow-indicator Style on the start overflow indicator that is present when the bar items are overflowed beyond the first item displayed. Available pseudo-classes are :hover and :active.
af|navigationPane-bar::end-overflow-indicator Style on the end overflow indicator that is present when the bar items are overflowed beyond the last item displayed. Available pseudo-classes are :hover and :active.
af|navigationPane-buttons Style on the root dom element of the component for hint as "buttons".
af|navigationPane-buttons::link Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "buttons". Available pseudo-class are :disabled, :selected and :hover.
af|navigationPane-buttons::access-key Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "buttons". Includes .AFFormAccessKeyStyle:alias
af|navigationPane-buttons::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "buttons"
af|navigationPane-buttons::separator-icon-style Style of the icon used as the buttons item separator. And icon can be specified as a background-image in this key. Alternately, you can use tr-inhibit: background-image and instead define the override icon.
af|navigationPane-choice Style on the root dom element of the component for hint as "choice".
af|navigationPane-choice::label Style on the label of navigationPane with hint "choice". This includes .AFLabelTextForeground:alias. :disabled::label includes .AFLabelTextForegroundDisabled:alias.
af|navigationPane-choice::link Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "choice". Available pseudo-class are :disabled, :selected, :hover, :focus and :active. This includes .AFTextForeground:alias, .AFLinkForeground:alias, .AFDefaultFont:alias and .AFStartTextAlign:alias style selectors.
af|navigationPane-choice::dropdown-cell Style on the cell of dropdown icon for gradient style. Available pseudo-class are :hover and :active. This includes .AFButtonGradient:alias, AFDropDownIconBorder:alias, .AFButtonGradientHover:alias, .AFButtonGradientActive:alias and .AFDropDownIconBorderActive:alias style selectors.
af|navigationPane-choice::dropdown-icon-style Styles the dropdown icon of the navigationPane component with hint "choice". By default the dropdown-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :hover and :active. Includes .AFClickableImageAnchor:alias.
af|navigationPane-choice::access-key Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "choice". Includes .AFFormAccessKeyStyle:alias
af|navigationPane-choice::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "choice"
af|navigationPane-list Style on the root dom element of the component for hint as "list".
af|navigationPane-list::bullet Style on the cell which contains the bullet for list of the component with hint "list". The bullet image is specified as a background-image in this key. To use text or an img element instead of a background-image, set {-tr-inhibit: background-image} in this style and define the icon using the bullet-icon, icon selector.
af|navigationPane-list::link Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "list". Available pseudo-class are :disabled, :selected and :hover.
af|navigationPane-list::access-key Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "list". Includes .AFFormAccessKeyStyle:alias
af|navigationPane-list::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "list"
af|navigationPane-tabs Style on the root dom element of the component for hint as "tabs".
af|navigationPane-tabs::header Style on the tab bar container of the component for hint as "tabs".
af|navigationPane-tabs::tab Style on the tabs in the navigationPane component for hint as tabs. Use pseudo-class :selected to style content for the currently selected tab. Use pseudo-class :disabled to style content for disabled tabs.
af|navigationPane-tabs::tab-start Style on the start of the tabs used with the navigationPane component for hint as tabs. To provide an alternate skinning of the tabs, specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. Alternate styling styling of :disabled and :selected states can be done as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). Here is an example of a full reskinning of the tabs:
  • af|navigationPane-tabs::tab-start {width: 10px; background-image:url('/images/tab_top_left_black.png');}
  • af|navigationPane-tabs::tab-end {width: 10px; background-image:url('/images/tab_top_right_black.png');}
  • af|navigationPane-tabs::tab-content {background-image:url('/images/tab_top_middle_black.png');}
  • af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-start {background-image:url('/images/tab_top_left_red.png');}
  • af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-end {background-image:url('/images/tab_top_right_red.png');}
  • af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-content {background-image:url('/images/tab_top_middle_red.png');}
  • af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-start {background-image:url('/images/tab_top_left_blue.png');}
  • af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-end {background-image:url('/images/tab_top_right_blue.png');}
  • af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-content {background-image:url('/images/tab_top_middle_blue.png');}
af|navigationPane-tabs::tab-end Style on the end of the tabs used with the navigationPane component for hint as tabs. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example.
af|navigationPane-tabs::tab-content Style on the middle of the tabs used with the navigationPane component for hint as tabs. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example.
af|navigationPane-tabs::tab-link Style on the anchor (link) part of the tabs used with the navigationPane component for hint as tabs. Disabled tabs do not have a tab-link selector.
af|navigationPane-tabs::body Styles the container which encloses both the navigationPane tabs content and the overflow indicator.
af|navigationPane-tabs::content Styles the container which encloses the navigationPane tabs content (excluding the overflow indicator).
af|navigationPane-tabs::start-overflow-indicator Style on the start overflow indicator that is present when the toolbar tabs are overflowed beyond the first tab displayed. Available pseudo-classes are :hover and :active.
af|navigationPane-tabs::end-overflow-indicator Style on the end overflow indicator that is present when the toolbar tabs are overflowed beyond the last tab displayed. Available pseudo-classes are :hover and :active.
af|navigationPane-tabs::access-key Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "tabs". Includes .AFFormAccessKeyStyle:alias
af|navigationPane-tabs::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "tabs"
Icon Selectors
Name Description
af|navigationPane-bar::separator-icon Allows setting of an alternate separator icon for navigationPane component with hint "bar".
af|navigationPane-buttons::separator-icon Allows setting of an alternate separator icon for navigationPane component with hint "buttons".
af|navigationPane-choice::dropdown-icon Dropdown icon. You can use af|navigationPane-choice::dropdown-icon-style instead. Available pseudo-class is :hover.
af|navigationPane-list::bullet-icon Icon hook for the bullet. This can be used instead of a background-image defined on af|navigationPane-list::bullet. By default this is null.
af|navigationPane-bar::start-overflow-icon Overrides the default start overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-bar::start-overflow-icon {content "X"} or af|navigationPane-bar::start-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the start overflow-indicator key and defining the override icon in this key.
af|navigationPane-bar::end-overflow-icon Overrides the default end overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-bar::end-overflow-icon {content "X"} or af|navigationPane-bar::end-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the end overflow-indicator key and defining the override icon in this key.
af|navigationPane-tabs::start-overflow-icon Overrides the default start overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-tabs::start-overflow-icon {content "X"} or af|navigationPane-tabs::start-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the start overflow-indicator key and defining the override icon in this key.
af|navigationPane-tabs::end-overflow-icon Overrides the default end overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-tabs::end-overflow-icon {content "X"} or af|navigationPane-tabs::end-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the end overflow-indicator key and defining the override icon in this key.
ADF Faces Properties
Name Description
-tr-tab-bar-height Sets the value (with units) for the height of the tab bar that displays tabs as well as the height of the tab contents. You can tweak the line-height of the ::tab-start, ::tab-conent, ::tab-end if you want to adjust where the text appears vertically within this bar. Note that you should not assign a font-size on these elements because if your height is in font-relative units, e.g. "em", it may not resolve the a consistent number of pixels unless all elements that get this height value use the same font-size.

af:outputLabel Component

Style Selectors
Name Description
af|outputLabel Styles the root dom element of the component.
af|outputLabel::access-key Style on the access key character for the output label. Includes .AFFormAccessKeyStyle:alias.

af:pageTemplate Component

Style Selectors
Name Description
n/a This component has no visual representation. It does not generate any elements on the page and thus is not skinnable.

af:panelAccordion Component

Style Selectors
Name Description
af|panelAccordion Selector that renders on the root dom element of the component. The root style contains -tr-header-height and -tr-overflow-height skin properties to specify the heights of the header and overflow.
af|panelAccordion::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|panelAccordion::drop-target Style of the drop target of the panel accordion that is shown while reordering panels with the mouse.
af|panelAccordion::ghost Style on the parent element of the header and content elements that are being dragged during item reordering using the mouse.
af|panelAccordion::header Style on the various headers included in the panelAccordion component. The available pseudo-classes are: :disclosed, :selected and :highlight. The pseudo-class :disclosed is used when the associated item is disclosed, :selected is used when the header is active (mouse down or one of the enter, up or down keys is down) and :highlight is used when the header has focus or the mouse is hovering over the header.
af|panelAccordion::header-subsequent Style on the subsequent headers (all except the first) included in the panelAccordion component. The available pseudo-classes are: :disclosed, :selected and :highlight. The pseudo-class :disclosed is used when the associated item is disclosed, :selected is used when the header is active (mouse down or one of the enter, up or down keys is down) and :highlight is used when the header has focus or the mouse is hovering over the header.
af|panelAccordion::header-start Style on the beginning of the header. By default contains the start image (background-image CSS property) for the header, as well as the image width (width CSS property). If you are replacing the start image through the background-image property, you should set the corresponding width property as well.
af|panelAccordion::header-disclose Style on the part of the header that contains the disclose/undisclose button.
af|panelAccordion::undisclosed-icon-style Style on the icon that is shown when the panel is undisclosed (collapsed). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the undisclosed-icon-style and define the icon for the undisclosed-icon key.
af|panelAccordion::disclosed-icon-style Style on the icon that is shown when the panel is disclosed (expanded). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the disclosed-icon-style and define the icon for the disclosed-icon key.
af|panelAccordion::icon-style Style on the image that corresponds to the showDetailItem icon in the header.
af|panelAccordion::header-title Style on the title element in the header.
af|panelAccordion::header-toolbar Style on the container for the header toolbar.
af|panelAccordion::header-toolbar Style on the container for the header toolbar.
af|panelAccordion::header-end Style on the end of the header. By default contains the ending image (background-image CSS property) for the header, as well as the image width (width CSS property). If you are replacing the ending image through the background-image property, you should set the corresponding width property as well.
af|panelAccordion::body-content Style on the body root element for disclosed showDetailItems in the panelAccordion. For example you could change the background-color or the border. The available pseudo-classes are: :selected and :highlight. The pseudo-class :selected is used when the header is active (mouse down or one of the enter, up or down keys is down) and :highlight is used when the header has focus or the mouse is hovering over the header.
af|panelAccordion::top-overflow-indicator Style on the top overflow indicator that is present when the accordion showDetailItems are overflowed beyond the top of the panelAccordion. Available pseudo-classes are :hover and :active.
af|panelAccordion::bottom-overflow-indicator Style on the bottom overflow indicator that is present when the accordion showDetailItems are overflowed beyond the bottom of the panelAccordion. Available pseudo-classes are :hover and :active.
af|panelAccordion::resize-divider Styles the vertical resize divider for each disclosed detail item. The height, cursor and background color of the resize divider bar can be changed using this style. The :drag pseudo-class is applied during the drag operation to animate resizing.
Icon Selectors
Name Description
af|panelAccordion::undisclosed-icon Overrides the default undisclosed icon. Icons can be text or img elements, e.g. af|panelAccordion::undisclosed-icon {content "X"} or af|panelAccordion::undisclosed-icon {content: url(...)}. Use this key instead of the undisclosed-icon-style key if you do not want a background-image.
af|panelAccordion::disclosed-icon Overrides the default disclosed icon. Icons can be text or img elements, e.g. af|panelAccordion::disclosed-icon {content "X"} or af|panelAccordion::disclosed-icon {content: url(...)}. Use this key instead of the disclosed-icon-style key if you do not want a background-image.
af|panelAccordion::overflow-top-icon Overrides the default top overflow icon. Icons can be text or img elements, e.g. af|panelAccordion::overflow-top-icon {content "X"} or af|panelAccordion::overflow-top-icon {content: url(...)}. Use this key instead of the top-overflow-indicator key if you do not want a background-image.
af|panelAccordion::overflow-bottom-icon Overrides the default bottom overflow icon. Icons can be text or img elements, e.g. af|panelAccordion::overflow-bottom-icon {content "X"} or af|panelAccordion::overflow-bottom-icon {content: url(...)}. Use this key instead of the bottom-overflow-indicator key if you do not want a background-image.
ADF Faces Properties
Name Description
-tr-header-height Sets the value in pixels for the height of the header.
-tr-overflow-height Sets the value in pixels for the overflow height.
-tr-minimum-resizable-height This property represents the minimum height that can be applied to a detail item using mouse drag resizing.
-tr-reorder-animation-duration The length of time in milli-seconds that the reorder animation should last.
-tr-disclosure-animation-duration The length of time in milli-seconds that the disclosure animation should last. The whole time is alloted for the initial disclosure, before the PPR returns, and half of this time is used for the animation after the PPR returns. So if the value is 800, and the PPR returns in 200 ms, the total animation time will be 200 ms + 800 ms / 2 or a total of 600 ms.
Resource Strings
Name Description
af_panelAccordion.TIP_DISCLOSE_BUTTON Tooltip for the disclosure icon when a panel is not being shown.
af_panelAccordion.TIP_UNDISCLOSE_BUTTON Tooltip for the disclosure icon when a panel is being shown.
af_panelAccordion.TIP_UNDISCLOSED_DISABLED_BUTTON Tooltip for the disclosure icon when a panel is being shown but the button is disabled. This is for panels that can not be hidden.
af_panelAccordion.TIP_SHOW_PREVIOUS_BUTTON Tooltip for the panel accordion overflow placed at the top of the panel accordion. This is only shown when there is not enough space to show all the individual items.
af_panelAccordion.TIP_SHOW_NEXT_BUTTON Tooltip for the panel accordion overflow placed at the bottom of the panel accordion. This is only shown when there is not enough space to show all the individual items.
af_panelAccordion.TIP_DISCLOSE_PRECISE_BUTTON Tooltip for the disclosure icon when a panel is not being shown. This is only used in screenreader mode and takes a parameter that is the label for this panel.
af_panelAccordion.TIP_UNDISCLOSE_PRECISE_BUTTON Tooltip for the disclosure icon when a panel is being shown. This is only used in screenreader mode and takes a parameter that is the label for this panel.
af_panelAccordion.TIP_UNDISCLOSE_DISABLED_PRECISE_BUTTON Tooltip for the disclosure icon when a panel is being shown and the user is not able to hide it. This is only used in screenreader mode and takes a parameter that is the label for this panel.
af_panelAccordion.TIP_PANEL_DISCLOSED Tooltip for panel that is displayed. This is only used in screenreader mode and takes a parameter that is the label for this panel.
af_panelAccordion.TIP_PANEL_UNDISCLOSED Tooltip for panel that is hidden. This is only used in screenreader mode and takes a parameter that is the label for this panel.
af_panelAccordion.TIP_PANEL_MOVE_UP Tooltip and text for the link rendered in screenreader mode when reordering is enabled to move the current item up in the order of displayed items.
af_panelAccordion.TIP_PANEL_MOVE_DOWN Tooltip and text for the link rendered in screenreader mode when reordering is enabled to move the current item down in the order of displayed items.

af:panelBorderLayout Component

Style Selectors
Name Description
af|panelBorderLayout Style on the root element of the af:panelBorderLayout component. You can also style using the CSS-2.1 :hover pseudo-class.

af:panelBox

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.

Style Selectors
Name Description
af|panelBox The selector on the root dom element of this component. The root style contains default setting of the width of the panel Box to 100%.

The root style contains a skinning property "-tr-animation-duration" that specifies the animation duration for expand/collapse of the panelBox content region. This skin property is honored only if the animation is enabled in the system.

The root style contains a skinning property "-tr-header-height" that is used when the panelBox is being stretched by its parent container to indicate the CSS length for the header bar of the panelBox so that the content can be stretched to fill the remaining space. This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard).

The root style contains a skinning property "-tr-never-header-height" that is used when the panelBox has its header bar turned off, e.g. via showHeader="never". If set to "0px" then no header will be shown. If set to some other value, an empty header will be shown using this height for the cases when the header bar is turned off.

The root style contains a skinning property "-tr-footer-height" that is used when the panelBox is being stretched by its parent container to indicate the CSS length for the footer bar of the panelBox so that the content can be stretched to fill the remaining space. This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard). Note the footer can be completely omitted if you set this property to "0px".

The root style contains a skinning property "-tr-center-start-width" that is used when the panelBox is being stretched by its parent container to indicate the CSS length for the indenting of the content container from the start (e.g. left) side of the panelBox so that the contentStyle that an application developer might assign does not interfere with the built-in indentation of the content. This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard).

The root style contains a skinning property "-tr-center-end-width" that is used when the panelBox is being stretched by its parent container to indicate the CSS length for the indenting of the content container from the end (e.g. right) side of the panelBox so that the contentStyle that an application developer might assign does not interfere with the built-in indentation of the content. This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard).

af|panelBox::header-start Style the start side of the header of the panel box. Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. For example, the ramp is set to "core" and background set to "default" the style used for this is "af:panelBox::header-start:core:default". This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-start:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|panelBox::header-center Style the center side of the header of the panel box. Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-center:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|panelBox::header-end Style the end side of the header of the panel box. Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-end:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|panelBox::center Style the center area of the panel box that wraps the content area of the panel box. The "center" wrapper provides potentially different padding than the content area so that people can set padding to zero in the contentStyle attribute and not mess anything up with the built-in minimum padding (e.g. for shadows that might be present in a background image behind the content). The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component.
af|panelBox::content Style the content area of the panel box. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxContent* alias, for example af|panelBox::content:core:default includes .AFPanelBoxContentCoreDefault:alias.
af|panelBox::footer-start Style the start side of the footer of the panel box (used only if -tr-footer-height is not 0px). Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. For example, the ramp is set to "core" and background set to "default" the style used for this is "af:panelBox::footer-start:core:default". This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-start:core:default includes .AFPanelBoxFooterCoreDefault:alias.
af|panelBox::footer-center Style the center side of the footer of the panel box (used only if -tr-footer-height is not 0px). Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-center:core:default includes .AFPanelBoxFooterCoreDefault:alias.
af|panelBox::footer-end Style the end side of the footer of the panel box (used only if -tr-footer-height is not 0px). Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-end:core:default includes .AFPanelBoxFooterCoreDefault:alias.
af|panelBox::icon-style Style to support an icon to the left of the header title
af|panelBox::disclosure-link Selector for the anchor element that contains the disclosure icon.
af|panelBox::dynamic-help-icon-style Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
.AFPanelBoxHeaderCoreDefault:alias Alias to change the properties on the panelBox header for the panelBox whose "ramp" is set to "core" and "color" is set to "default". Using this style class significantly simplifies the work required to style the header. Instead of changing three classes (for header-start, header, header-end) you only need to change this one. The region component uses this alias as well.
.AFPanelBoxContentCoreDefault:alias Alias to change the properties on the panelBox content for the panelBox whose "ramp" is set to "core" and "color" is set to "default". The region component uses this alias as well.
.AFPanelBoxHeaderCoreLight:alias Same as .AFPanelBoxHeaderCoreDefault:alias, but for color=light.
.AFPanelBoxContentCoreLight:alias Same as .AFPanelBoxContentCoreDefault:alias, but for color=light.
.AFPanelBoxHeaderCoreMedium:alias Same as .AFPanelBoxHeaderCoreDefault:alias, but for color=medium.
.AFPanelBoxContentCoreMedium:alias Same as .AFPanelBoxContentCoreDefault:alias, but for color=medium.
.AFPanelBoxHeaderCoreDark:alias Same as .AFPanelBoxHeaderCoreDefault:alias, but for color=dark.
.AFPanelBoxContentCoreDark:alias Same as .AFPanelBoxContentCoreDefault:alias, but for color=dark.
.AFPanelBoxHeaderHighlightDefault:alias Alias to change the properties on the panelBox header for the panelBox whose "ramp" is set to "highlight" and "color" is set to "default". Using this style class significantly simplifies the work required to style the header. Instead of changing three classes (for header-start, header, header-end) you only need to change this one. The region component uses this alias as well.
.AFPanelBoxContentHighlightDefault:alias Alias to change the properties on the panelBox content for the panelBox whose "ramp" is set to "highlight" and "color" is set to "default". The region component uses this alias as well.
.AFPanelBoxHeaderHighlightLight:alias Same as .AFPanelBoxHeaderHighlightDefault:alias, but for color=light.
.AFPanelBoxContentHighlightLight:alias Same as .AFPanelBoxContentHighlightDefault:alias, but for color=light.
.AFPanelBoxHeaderHighlightMedium:alias Same as .AFPanelBoxHeaderHighlightDefault:alias, but for color=medium.
.AFPanelBoxContentHighlightMedium:alias Same as .AFPanelBoxContentHighlightDefault:alias, but for color=medium.
.AFPanelBoxHeaderHighlightDark:alias Same as .AFPanelBoxHeaderHighlightDefault:alias, but for color=dark.
.AFPanelBoxContentHighlightDark:alias Same as .AFPanelBoxContentHighlightDefault:alias, but for color=dark.
.AFPanelBoxHeaderStart:alias Alias to change the dom element at the start of the header. Use this alias to modify the CSS properties that are needed for all ramp/background of panelBoxes. Common CSS properties are padding and border.
.AFPanelBoxHeaderCenter:alias Alias to change the dom element at the center of the header. Use this alias to modify the CSS properties that are needed for all ramp/background of panelBoxes. Common CSS properties for the header center dom element are width and font information.
.AFPanelBoxHeaderEnd:alias Alias to change the dom element at the end of the header. Use this alias to modify the CSS properties that are needed for all ramp/background of panelBoxes. Common CSS properties are padding and border.
Icon Selectors
Name Description
af|panelBox::disclosed-icon The icon is displayed when the af:panelBox component is rendered in its disclosed state.
af|panelBox::undisclosed-icon The icon is displayed when the af:panelBox component is rendered in its undisclosed state.
af|panelBox::dynamic-help-icon Icon that can be used instead of a background-image on af|panelBox::dynamic-help-icon-style. By default this is null. If you use this af|panelBox::dynamic-help-icon-style can then be used for background colors, etc.

af:panelCollection Component

Style Selectors
Name Description
af|panelCollection The selector on the root dom element of this component. The root style contains -tr-toolbar-height and -tr-statusbar-height skin properties to specify the heights of toolbar and statusbar facets when present.
Icon Selectors
Name Description
af|panelCollection::qbe-icon Toolbar Icon for hiding/showing filter row in the table. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::freeze-icon Toolbar Icon for freezing a column in the table. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::freeze-disabled-icon Toolbar Icon for freezing a column in the table, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::maximize-icon Toolbar Icon for maximizing the table. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::wrap-icon Toolbar Icon for wrapping a column in the table. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::wrap-disabled-icon Toolbar Icon for wrapping a column in the table, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::go-up-icon Toolbar Icon for moving up a node in display as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::go-up-disabled-icon Toolbar Icon for moving up a node in display as root for tree/treeTable, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::go-to-top-icon Toolbar Icon for showing the root node of the model as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::show-as-top-disabled-icon Toolbar Icon for showing the currently selected node as root for tree/treeTable, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::show-as-top-icon Toolbar Icon for showing the currently selected node as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.)
af|panelCollection::show-as-top-disabled-icon Toolbar Icon for showing the currently selected node as root for tree/treeTable, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.)
Resource Strings
Name Description
af_panelCollection.LABEL_ADVANCED_SORT_DLG The title for the advanced sort dialog.
af_panelCollection.LABEL_SORT_BY The label for the primary sort drop down that is shown in the advanced sort dialog.
af_panelCollection.LABEL_THEN_BY The label for the secondary and tertiary sort drop down that is shown in the advanced sort dialog.
af_panelCollection.LABEL_ASCENDING The label for the radio buttons for the ascending direction of sort.
af_panelCollection.LABEL_DESCENDING The label for the radio buttons for the descending direction of sort.
af_panelCollection.LABEL_SHOW_COLUMNS_DLG The title for the show more columns dialog.
af_panelCollection.LABEL_HIDDEN_COLUMNS Label of left hand side of the shuttle component in the show more columns dialog.
af_panelCollection.LABEL_VISIBLE_COLUMNS Label of right hand side of the shuttle component in the show more columns dialog.
af_panelCollection.MSG_VISIBLE_COLUMN_REQUIRED Message that displays when user marks all columns as hidden.
af_panelCollection.LABEL_REORDER_COLUMNS_DLG The title for the reorder columns dialog.
af_panelCollection.LABEL_RESIZE_COLUMN_DLG The title for the resize column dialog.
af_panelCollection.LABEL_COLUMN Label for the column to be resized in the resize column dialog.
af_panelCollection.LABEL_COLUMN_MULTIPLE Value of the output text to identify that multiple columns have been selected for resize in the resize column dialog.
af_panelCollection.LABEL_WIDTH Label for the input text field that the user enters a numeric value into in the resize column dialog.
af_panelCollection.LABEL_PERCENT Select one choice item that represents the percentage based resize value in he resize column dialog.
af_panelCollection.LABEL_PIXEL Select one choice item that represents the pixel based resize value in he resize column dialog.
af_panelCollection.LABEL_DETACH_TABLE_DLG Label for the detach toolbar item as well as menu item. As a menu item it is the third item under the "View" menu.
af_panelCollection.LABEL_DETACH_TREE_TABLE_DLG Label for the detach toolbar item as well as menu item for the tree and tree table.
af_panelCollection.LABEL_MENU_FORMAT Label for the "Format" menu item. This is a root element in the menu bar.
af_panelCollection.LABEL_MENU_VIEW Label for the "View" menu item. This is a root element in the menu bar.
af_panelCollection.LABEL_MENU_COLUMNS Label for the "Columns" menu item. This is the first menu item under the "View" menu.
af_panelCollection.LABEL_MENU_SORT Label for the "Sort" menu item. This is the fourth menu item under the "View" menu. This is a sub menu.
af_panelCollection.LABEL_MENUITEM_COLUMNS_SHOWALL Label for the "Show All Columns" menu item. This is the first menu item under "Columns" menu under the "View" menu.
af_panelCollection.LABEL_MENUIEM_COLUMNS_SHOWMORECOLUMNS Label for the "Show More Columns" menu item. This is the last menu item under "Columns" menu under the "View" menu.
af_panelCollection.LABEL_MENUITEM_FREEZE Label for the "Freeze" menu item. This is the second menu item under the "View" menu.
af_panelCollection.LABEL_MENUITEM_UNFREEZE Label for the "Unfreeze" menu item. This is the second menu item under the "View" menu.
af_panelCollection.LABEL_MENUITEM_DETACH Label for the "Detach" menu item. This is the third menu item under the "View" menu.
af_panelCollection.LABEL_MENUITEM_REDUCE Label for the "Reduce" menu item. This is the third menu item under the "View" menu. This is only when the tale has been detached.
af_panelCollection.LABEL_MENUITEM_REORDER Label for the "Reorder Columns" menu item. This is the forth menu item under the "View" menu.
af_panelCollection.LABEL_MENUITEM_RESIZECOLUMNS Label for the "Resize Column(s)" menu item. This is the first menu item under the "Format" menu.
af_panelCollection.LABEL_MENUITEM_QBE Label for the "Query By Example" menu item. This is the fifth menu item under the "View" menu. This is only available for tables that have filtering turned on.
af_panelCollection.LABEL_MENUITEM_SORT_ASCENDING Label for the "Sort Ascending" menu item. This is the first menu item under "Sort" menu under the "View" menu.
af_panelCollection.LABEL_MENUITEM_SORT_DESCENDING Label for the "Sort Descending" menu item. This is the second menu item under "Sort" menu under the "View" menu.
af_panelCollection.LABEL_MENUITEM_SORT_ADVANCED Label for the "Advanced Sort" menu item. This is the third menu item under "Sort" menu under the "View" menu.
af_panelCollection.LABEL_MENUITEM_WRAP Label for the "Wrap Column" menu item. This is the second menu item under the "Format" menu.
af_panelCollection.LABEL_MENUITEM_EXPAND Label for the "Expand" menu item. This is the first menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is collapsed. This is also the first menu item in the context menu for the Tree when the node selected is collapsed.
af_panelCollection.LABEL_MENUITEM_COLLAPSE Label for the "Collapse" menu item. This is the first menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is expanded. This is also the first menu item in the context menu for the Tree when the node selected is expanded.
af_panelCollection.LABEL_MENUITEM_EXPAND_ALL_BELOW Label for the "Expand All Below" menu item. This is the second menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is collapsed. This is also the second menu item in the context menu for the Tree when the node selected is collapsed.
af_panelCollection.LABEL_MENUITEM_COLLAPSE_ALL_BELOW Label for the "Collapse All Below" menu item. This is the second menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is expanded. This is also the second menu item in the context menu for the Tree when the node selected is expanded.
af_panelCollection.LABEL_MENUITEM_EXPAND_ALL Label for the "Expand All" menu item. This is the third menu item under the "View" menu for Tree and Tree Table. This is always enabled.
af_panelCollection.LABEL_MENUITEM_COLLAPSE_ALL Label for the "Collapse All" menu item. This is the third menu item under the "View" menu for Tree and Tree Table. This is always enabled.
af_panelCollection.LABEL_MENUITEM_GO_UP Tooltip for the command button "Go Up". This is located on the tool bar of the panel collection.
af_panelCollection.LABEL_MENUITEM_SHOW_AS_TOP Label for the "Show As Top" menu item. This is the sixth menu item under the "View" menu for Tree and Tree Table. This is always enabled. This is also the tooltip for the command button "Show As Top".
af_panelCollection.LABEL_MENUITEM_GO_TO_TOP Label for the "Go To Top" menu item. This is the seventh menu item under the "View" menu for Tree and Tree Table. This is always enabled. This is also the tooltip for the command button "Go To Top".
af_panelCollection.LABEL_MENUITEM_SCROLL_TO_FIRST Label for the "Scroll To First" menu item. This is the seventh menu item under the "View" menu for Tree and Tree Table. This is always enabled.
af_panelCollection.LABEL_MENUITEM_SCROLL_TO_LAST Label for the "Scroll To Last" menu item. This is the seventh menu item under the "View" menu for Tree and Tree Table. This is always enabled.
af_panelCollection.LABEL_STATUSBARITEM_ROWS_SELECTED Label for the number of rows selected status shown at the bottom of the table or tree table.
af_panelCollection.LABEL_STATUSBARITEM_SELECTED_ALL Value for the number of rows selected status shown at the bottom of the table or tree table. This is shown when all rows have been selected.
af_panelCollection.LABEL_STATUSBARITEM_COLUMNS_HIDDEN label for the number of rows hidden status shown at the bottom of the table or tree table.
af_panelCollection.LABEL_STATUSBARITEM_COLUMNS_FROZEN Label for the frozen column status shown at the bottom of the table or tree table.
af_panelCollection.TIP_BUTTON_DETACH Tooltip for the "Detach" button.
af_panelCollection.TIP_BUTTON_FREEZE Tooltip for the "Freeze" button.
af_panelCollection.TIP_BUTTON_WRAP Tooltip for the "Wrap" button.

af:panelDashboard Component

Style Selectors
Name Description
af|panelDashboard The selector on the root dom element of this component. The root style contains default setting of the width and height in case this component is not placed inside of a parent that will stretch it otherwise the stretched dimensions will take precedence.

The root style contains a skinning property "-tr-insert-delete-animation-duration" that specifies the approximate animation duration for optimized insert and delete changes. This skin property is honored only if the animation is enabled in the system.

The root style contains a skinning property "-tr-reorder-animation-duration" that specifies the approximate animation duration used when the panelBox children have componentDragSource tags inside of them and the user is dragging these panelBox component around within the panelDashboard. This skin property is honored only if the animation is enabled in the system.

af|panelDashboard::drop-target Specifies the style information for the element used to identify the currently chosen location within the panelDashboard that a dragged panelBox child will move to if the user drops the panelBox at this location. Typically, a background-color style is what you will want to customize here.

af:panelFormLayout Component

Style Selectors
Name Description
af|panelFormLayout The selector on the root dom element of this component.
af|panelFormLayout::column Specifies the style information for columns of the panelFormLayout, like vertical-align:top and text-align.
af|panelFormLayout::separator Specifies the style information for separators between groups in the panelFormLayout.
af|panelFormLayout::label-cell Specifies the style information for the label cell of the panelFormLayout when side-by-side with content. This includes .AFLabel:alias.
af|panelFormLayout::label-stacked-cell Specifies the style information for the label cell of the panelFormLayout when stacked above content. This includes af|panelForm::label-cell.
.AFPanelFormLayoutContentCell Specifies the style information for the content cells of form item components when they are placed inside of a panelFormLayout (as opposed to being rendered stand-alone on the page or inside of some other kind of layout component). The panelLabelAndMessage component is an example of one component whose padding needs to be adjusted when placed in a panelFormLayout vs. being stand-alone on the page so it can be specifically changed by making a skin definition like this: af|panelLabelAndMessage::content-cell.AFPanelFormLayoutContentCell { ... }

af:panelGroupLayout Component

Style Selectors
Name Description
af|panelGroupLayout Selector that renders on the root dom element of the component.

af:panelHeader Component

Style Selectors
Name Description
af|panelHeader Selector that renders on the root dom element of the component.
af|panelHeader::title-table The style for the table containing the header. Generally this will not be modified, but this allows for more flexible skinning of the title in general so that under certain curcumstances, it can be styled to match the content container.
The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. The value for "x" is a number between 1 and 5 signifying the five header types.
The style for the title of the header, not including the start and end cells. This is the section that immediately follows the "af|panelHeader::title-startx" key. The value for x is a number between 1 and 5 signifying the five header types.
The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. The value for "x" is a number between 1 and 5 signifying the five header types.
af|panelHeader::icon-style Applied to the element containing the specified icon if messageType is set to null. Otherwise the icon associated with the message type is displayed in the container. Available pseudo-classes are :hover and :active.
Styles the "header" element inside the title of the element specified by the af|panelHeader::titlex key. This element surrounds the header text. Available pseudo-classes are :error, :warning, :info:, :confirmation and are set according to the message type. If no message type is specified or message type is set to none then none of these pseudo-classes will be present
af|panelHeader::context-container The style for the element containing the contents of the context facet. This will be placed directly after the header text.
af|panelHeader::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|panelHeader::toolbar ". It applies to end-aligned toolbars in the title section. This section is only present if there is either a toolbar or menuBar facet (or both) included in the panelHeader.
af|panelHeader::help-link-container If there is "dynamic help" for this header, and there is not a help topic with dynamic content, then this style pertains to the element containing the dynamic help link. This will be place directly after the context facet.
af|panelHeader::info Applied to the element containing the contents of the "info" facet. When help is available, this element may also contain the contents of the legend.
The style for the content region of the header. This is the area where the components children will be rendered. It is located directly below the af|panelHeader::titlex key. The value for x is a number between 1 and 5 signifying the five header types.
Icon Selectors
Name Description
af|panelHeader::confirmation-icon Icon used when the messageType is set to "confirmation". Available pseudo-class is :hover.
af|panelHeader::dynamic-help-icon Icon that can be used instead of a background-image on af|panelHeader::dynamic-help-icon-style. By default this is null. If you use this af|panelHeader::dynamic-help-icon-style can then be used for background colors, etc.
af|panelHeader::error-icon Icon used when the messageType is set to "error". Available pseudo-class is :hover.
af|panelHeader::information-icon Icon used when the messageType is set to "information". Available pseudo-class is :hover.
af|panelHeader::warning-icon Icon used when the messageType is set to "warning". Available pseudo-class is :hover.
Resource Strings
Name Description
af_panelHeader.TIP_DYNAMIC_HELP Tooltip for the dynamic help icon. This is only shown if there is no helpTopicID attribute set on the panel header.
af_panelHeader.LABEL_HELP_DIALOG_TITLE Title for the dynamic help dialog. This is only shown when there is no helpTopicID attribute set on the panel header. The dialog is shown when the dynamic help is selected. This dialog shows JSF messages.

af:panelLabelAndMessage Component

Style Selectors
Name Description
af|panelLabelAndMessage Style on the root element of the af:panelLabelAndMessage component. You can also style using the CSS-2.1 :hover pseudo-class.
af|panelLabelAndMessage::access-key Specifies the style information for the access key, which appears in the label of the panelLabelAndMessage.
af|panelLabelAndMessage::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|panelLabelAndMessage::label Specifies the style information for the label of the panelLabelAndMessage.
af|panelLabelAndMessage::content-cell Specifies the style information for the main content cell, which contains child components and the end facet.
af|panelLabelAndMessage::end-facet Specifies the style information for the end facet of the panelLabelAndMessage.
Icon Selectors
Name Description
af|panelLabelAndMessage::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|panelLabelAndMessage::dynamic-help-icon Icon that can be used instead of a background-image on af|panelLabelAndMessage::dynamic-help-icon-style. By default this is null. If you use this af|panelLabelAndMessage::dynamic-help-icon-style can then be used for background colors, etc.

af:panelList Component

Style Selectors
Name Description
af|panelList Styles the root dom element of the panelList. Note: if you would like to style the bullets, you can set a CSS property/value to the listStyle attribute. For example, listStyle="list-style-type: decimal" changes the list style to decimals. See the w3.org's CSS spec for more options.

af:panelSplitter Component

Style Selectors
Name Description
af|panelSplitter Selector that renders on the root dom element of the panelSplitter component. Skinning the padding and border styles is not supported; doing this may cause the user interface elements to layout incorrectly.

The root style contains a skinning property "-tr-first-border" that is used to specify whether the pane surrounding the "first" facet contents has a border. The value can be "all" if you want splitters to have visible borders in your skin by default or "none" to have no borders by default. In a case-by-case basis, your splitter components can override this skin-based setting by specifying a value in the "firstBorder" component attribute. It is important to note that this attribute (just like inlineStyle) can easily be abused. More times than not, you should not use this attribute because by using it, you are likely optimizing your page design for a specific skin. You should only force the borders on or off for cases where the contents of the pane would either provide enough or not enough delineation among the 2 panes of your splitter. For example, forcing borders off on a splitter that surrounds your entire page or forcing borders on for a pane that needs emphasis. You may want to test your application in a variety of skins to see if your use of these kinds of styling attributes will prevent others from being able to display your application with custom skins.

The root style contains a skinning property "-tr-second-border" that is used to specify whether the pane surrounding the "second" facet contents has a border. The value can be "all" if you want splitters to have visible borders in your skin by default or "none" to have no borders by default. In a case-by-case basis, your splitter components can override this skin-based setting by specifying a value in the "secondBorder" component attribute. It is important to note that this attribute (just like inlineStyle) can easily be abused. More times than not, you should not use this attribute because by using it, you are likely optimizing your page design for a specific skin. You should only force the borders on or off for cases where the contents of the pane would either provide enough or not enough delineation among the 2 panes of your splitter. For example, forcing borders off on a splitter that surrounds your entire page or forcing borders on for a pane that needs emphasis. You may want to test your application in a variety of skins to see if your use of these kinds of styling attributes will prevent others from being able to display your application with custom skins.

af|panelSplitter::pane Styles the dom elements of both panes. Skinning the padding and border styles is not supported; doing this may cause the user interface elements to layout incorrectly.
af|panelSplitter::horizontal-divider Styles the dom element of the divider in the horizontal panelSplitter. Skinning the padding, border and width styles is not supported. Skinning the padding and border styles may cause the user interface elements to layout incorrectly. Skinning the width style will have no effect. Supports states :disclosed and :positioned-from-end.
af|panelSplitter::horizontal-icon-style Styles the dom element of the anchor that holds the collapse/restore icon. This is only for horizontal panelSplitters. You can specify gradient images for the icon for default and hover state. If the height is specified, it needs to match the height of the icon. Skinning the width style is not supported; doing this will have no effect.
af|panelSplitter::horizontal-icon-container Styles the container for the collapse/restore button in horizontal (side-by-side) splitters. Generally defines a vertical-align and padding-top or padding-bottom.
af|panelSplitter::horizontal-highlighter Styles the dom element of the highlighter that shows up inside the divider when hovered. This is only for horizontal panelSplitters.
af|panelSplitter::vertical-divider Styles the dom element of the divider in the vertical panelSplitter. Skinning the padding, border and height styles is not supported. Skinning the padding and border styles may cause the user interface elements to layout incorrectly. Skinning the height style will have no effect. Supports states :disclosed and :positioned-from-end.
af|panelSplitter::vertical-icon-style Styles the dom element of the anchor that holds the collapse/restore icon. This is only for vertical panelSplitters. You can specify gradient images for the icon for default and hover state. If the width is specified, it needs to match the width of the icon. Skinning the height style is not supported; doing this will have no effect.
af|panelSplitter::vertical-icon-container Styles the container for the collapse/restore button in vertical (one above the other) splitters. Generally defines a text-align and padding-left or padding-right.
af|panelSplitter::vertical-highlighter Styles the dom element of the highlighter that shows up inside the divider when hovered. This is only for vertical panelSplitters
ADF Faces Properties
Name Description
-tr-divider-size The number of pixels for the space between the two splitter panes where the divider and collapse/restore button lives.
-tr-collapse-animation-duration The number, in milliseconds, that the collapsing or expanding of the panel splitter is animated.
Icon Selectors
Name Description
af|panelSplitter::horizontal-collapse-icon The collapse icon in the horizontal divider. The width of the icon needs to match the width of the horizontal divider.
af|panelSplitter::horizontal-restore-icon The restore icon in the horizontal divider. The width of the icon needs to match the width of the horizontal divider.
af|panelSplitter::vertical-collapse-icon The collapse icon in the vertical divider. The height of the icon needs to match the height of the vertical divider.
af|panelSplitter::vertical-restore-icon The restore icon in the vertical divider. The height of the icon needs to match the height of the vertical divider.
Resource Strings
Name Description
af_panelSplitter.TIP_COLLAPSE Tooltip for the panel splitter to collapse the splitter. This is only displayed when the splitter is not collapsed.
af_panelSplitter.TIP_RESTORE Tooltip for the panel splitter to restore the splitter to last open position. This is only displayed when the splitter is collapsed.

af:panelStretchLayout Component

Style Selectors
Name Description
af|panelStretchLayout Selector that renders on the root dom element of the component.

af:panelTabbed Component

Style Selectors
Name Description
af|panelTabbed Selector that renders on the root dom element of the component.
af|panelTabbed::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|panelTabbed::header-start Selector for the top left (top right for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the header.
af|panelTabbed::header Style on the header of the panelTabbed component. This is the container for the "above" tabs. When tabs are in the header, the height of this header will come from the height specified in the "-tr-tab-bar-height" property noted below. Otherwise, the height from the property "-tr-height" defined in this selector is used (for a header-specific empty bar height) or if not defined, a generic height from the "-tr-empty-bar-height" property noted below is used.
af|panelTabbed::header-center Selector for the area between the footer-start and footer-end areas. Typically, this defines a background image between the start and end corner images, particularly useful if -tr-tab-bar-layout is set to "full". The height is taken from the height of the header.
af|panelTabbed::header-end Selector for the top right (top left for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the header.
af|panelTabbed::body-start Selector for the left side (right side for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the body.
af|panelTabbed::body Style on the body of the panelTabbed component. This is the area between the header and footer bars.
af|panelTabbed::body-end Selector for the right side (left side for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the body.
af|panelTabbed::footer-start Selector for the bottom left (bottom right for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the footer.
af|panelTabbed::footer Style on the footer of the panelTabbed component. This is the container for the "below" tabs. When tabs are in the footer, the height of this footer will come from the height specified in the "-tr-tab-bar-height" property noted below. Otherwise, the height from the property "-tr-height" defined in this selector is used (for a footer-specific empty bar height) or if not defined, a generic height from the "-tr-empty-bar-height" property noted below is used.
af|panelTabbed::footer-center Selector for the area between the footer-start and footer-end areas. Typically, this defines a background image between the start and end corner images, particularly useful if -tr-tab-bar-layout is set to "full". The height is taken from the height of the footer.
af|panelTabbed::footer-end Selector for the bottom right (bottom left for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the footer.
af|panelTabbed::tab Style on the tabs in the panelTabbed component. This applies to tabs in both the header and the footer. Use pseudo-class :selected to style content for the currently selected tab. Use pseudo-class :disabled to style content for disabled tabs.
af|panelTabbed::tab-start Style on the start of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. You will also probably want to specify separate changes for the ::header and the ::footer, and you may want to specify alternate styling for :disabled and :selected states as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). Here is an example of a full reskinning of the tabs:
  • af|panelTabbed::header af|panelTabbed::tab-start {width: 10px; background-image:url('/images/tab_top_left_black.png');}
  • af|panelTabbed::header af|panelTabbed::tab-end {width: 10px; background-image:url('/images/tab_top_right_black.png');}
  • af|panelTabbed::header af|panelTabbed::tab-content {background-image:url('/images/tab_top_middle_black.png');}
  • af|panelTabbed::footer af|panelTabbed::tab-start {width: 10px; background-image:url('/images/tab_bottom_left_black.png');}
  • af|panelTabbed::footer af|panelTabbed::tab-end {width: 10px; background-image:url('/images/tab_bottom_right_black.png');}
  • af|panelTabbed::footer af|panelTabbed::tab-content {background-image:url('/images/tab_bottom_middle_black.png');}
  • af|panelTabbed::header af|panelTabbed::tab:disabled af|panelTabbed::tab-start {background-image:url('/images/tab_top_left_red.png');}
  • af|panelTabbed::header af|panelTabbed::tab:disabled af|panelTabbed::tab-end {background-image:url('/images/tab_top_right_red.png');}
  • af|panelTabbed::header af|panelTabbed::tab:disabled af|panelTabbed::tab-content {background-image:url('/images/tab_top_middle_red.png');}
  • af|panelTabbed::footer af|panelTabbed::tab:disabled af|panelTabbed::tab-start {background-image:url('/images/tab_bottom_left_red.png');}
  • af|panelTabbed::footer af|panelTabbed::tab:disabled af|panelTabbed::tab-end {background-image:url('/images/tab_bottom_right_red.png');}
  • af|panelTabbed::footer af|panelTabbed::tab:disabled af|panelTabbed::tab-content {background-image:url('/images/tab_bottom_middle_red.png');}
  • af|panelTabbed::header af|panelTabbed::tab:selected af|panelTabbed::tab-start {background-image:url('/images/tab_top_left_blue.png');}
  • af|panelTabbed::header af|panelTabbed::tab:selected af|panelTabbed::tab-end {background-image:url('/images/tab_top_right_blue.png');}
  • af|panelTabbed::header af|panelTabbed::tab:selected af|panelTabbed::tab-content {background-image:url('/images/tab_top_middle_blue.png');}
  • af|panelTabbed::footer af|panelTabbed::tab:selected af|panelTabbed::tab-start {background-image:url('/images/tab_bottom_left_blue.png');}
  • af|panelTabbed::footer af|panelTabbed::tab:selected af|panelTabbed::tab-end {background-image:url('/images/tab_bottom_right_blue.png');}
  • af|panelTabbed::footer af|panelTabbed::tab:selected af|panelTabbed::tab-content {background-image:url('/images/tab_bottom_middle_blue.png');}
af|panelTabbed::tab-end Style on the end of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. You will also probably want to specify separate changes for the ::header and the ::footer, and you may want to specify alternate styling for :disabled and :selected states as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example.
af|panelTabbed::tab-content Style on the middle of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. You will also probably want to specify separate changes for the ::header and the ::footer, and you may want to specify alternate styling for :disabled and :selected states as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example.
af|panelTabbed::tab-text-link Style on the anchor (link) part of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. Disabled tabs do not have a tab-text-link selector.
af|panelTabbed::icon-style Style on the icons (if present) in the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer.
af|panelTabbed::start-overflow-indicator Style on the start overflow indicator that is present when the toolbar tabs are overflowed beyond the first tab displayed. Available pseudo-classes are :hover and :active.
af|panelTabbed::end-overflow-indicator Style on the end overflow indicator that is present when the toolbar tabs are overflowed beyond the last tab displayed. Available pseudo-classes are :hover and :active.
af|panelTabbed::disclosed-remove-icon-style If tab removal is enabled, this is the style of the remove icon used on a disclosed tab item. The icon is specified as a background-image in this key. Available pseudo-classes are :hover and :active.
af|panelTabbed::undisclosed-remove-icon-style If tab removal is enabled, this is the style of the remove icon used on an undisclosed tab item. The icon is specified as a background-image in this key. Available pseudo-classes are :hover and :active.
Icon Selectors
Name Description
af|panelTabbed::start-overflow-icon Overrides the default start overflow icon. Icons can be text or img elements, e.g. af|panelTabbed::start-overflow-icon {content "X"} or af|panelTabbed::start-overflow-icon {content: url(...)}. Use this key instead of the start-overflow-indicator key if you do not want a background-image.
af|panelTabbed::end-overflow-icon Overrides the default end overflow icon. Icons can be text or img elements, e.g. af|panelTabbed:::end-overflow-icon {content "X"} or af|panelTabbed:::end-overflow-icon {content: url(...)}. Use this key instead of the end-overflow-indicator key if you do not want a background-image.
af|panelTabbed::disclosed-remove-icon If tab removal is enabled, this overrides the default remove icon on a disclosed tab item. Icons can be text or img elements, e.g. af|panelTabbed::disclosed-remove-icon {content "X"} or af|panelTabbed::disclosed-remove-icon {content: url(...)}. Use this key instead of the disclosed-remove-icon-style key if you do not want a background-image.
af|panelTabbed::undisclosed-remove-icon If tab removal is enabled, this overrides the default remove icon on an undisclosed tab item. Icons can be text or img elements, e.g. af|panelTabbed::undisclosed-remove-icon {content "X"} or af|panelTabbed::undisclosed-remove-icon {content: url(...)}. Use this key instead of the undisclosed-remove-icon-style key if you do not want a background-image.
ADF Faces Properties
Name Description
-tr-tab-bar-height Sets the value (with units) for the height of the tab bar that displays tabs as well as the height of the tab contents. You can tweak the line-height of the ::tab-start, ::tab-conent, ::tab-end if you want to adjust where the text appears vertically within this bar. Note that you should not assign a font-size on these elements because if your height is in font-relative units, e.g. "em", it may not resolve the a consistent number of pixels unless all elements that get this height value use the same font-size. The panelTabbed component may have up to two tab bars one at the top of the component when the panelTabbed's position is set to above, or one at the bottom when the panelTabbed's position is set to below, and one at both the top and the bottom when the panelTabbed's position is set to both. When the panelTabbed's position is set to above, there will only be one tab bar, the top will then use the value from -tr-tab-bar-height while the space where the bottom tab bar would otherwise exist will end up using the value from -tr-empty-bar-height instead.
-tr-empty-bar-height Sets the value in pixels for the height of tab bars that do not display any tabs. This occurs at the bottom tab bar when the panelTabbed's position is set to above and at the top tab bar when the panelTabbed's position is set to below. So if the panelTabbed's position is set to above, the top bar height is set to the -tr-tab-bar-height value while the bottom bar height is set to the -tr-empty-bar-height value.
-tr-tab-bar-layout Sets whether the tab bars extend into the "start" and "end" areas. If the body area of the tabs have rounded corners, you might want the tabs to only show up in the non-corner areas of the bar. For this, you would specify "center" (the default) as the value for this property. However, if you want the tabs to show up on top of these corner pieces because you wish the tabs to appear flush with the outer edge of the body area, you would specify "full" as the value for this property.

af:noteWindow Component

Style Selectors
Name Description
af|noteWindow The root selector for the server-side noteWindow component. The noteWindow can be used without the server-side component. This selector only applies when using the JSF component. As a result of providing the dual usage, the noteWindow reuses the rest of the .AFNoteWindow global styles.

af:panelWindow Component

Style Selectors
Name Description
af|panelWindow Selector that renders on the root dom element of the component. It contains skinning property "-tr-open-animation-duration" that specifies the animation duration for opening the window. This skin property is honored only if the animation is enabled in the system.

Use pseudo-classes :drag and :inactive to change the inactive and the dragged states of the panelWindow

af|panelWindow::resize-ghost The selector applied to the element temporarily created to animate a mouse drag resize. The element is a div with absolute positioning that floats above the dialog getting resized. The border, background color and opacity are attributes that a custom skin might want to adjust.
af|panelWindow::main Selector for the main element of this panelWindow. This selector along with the pseudo-classes :drag and :inactive on the root element can be used to customize the inactive and drag states of the panelWindow. For e.g. "af|panelWindow:drag af|panelWindow::main{opacity:0.15;} @agent ie {af|panelWindow:drag af|panelWindow::main{filter:alpha(opacity:15);}}" changes the drag state of the panelWindow so that it is only 15% opaque.
af|panelWindow::inactive-background Selector for displaying the background when the panelWindow is not the active window. This selector is used in conjunction with the pseudo-class :inactive on the root element and af|panelWindow::main to achieve an inactive look for the panelWindow. For e.g. "af|panelWindow::inactive-background{ background-color:#FFFFFF;} af|panelWindow:inactive af|panelWindow::main{opacity:0.5;} @agent ie {af|panelWindow:inactive af|panelWindow::main{filter:alpha(opacity:50);}" sets the background to white and lets it bleed into the panelWindow by setting its opacity to 50%.
af|panelWindow::header-start The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|panelWindow::header Styles the "header" element. This element surrounds the header text, icon and close regions. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: n-resize).
af|panelWindow::header-end The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: ew-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|panelWindow::footer-start The style for the starting cell of the footer. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: sw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|panelWindow::footer The style for the center cell of the footer. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: s-resize).
af|panelWindow::footer-end The style for the ending cell of the footer. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: se-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|panelWindow::content-start The style for the starting of the content. This will be located directly below the af|panelWindow::header-start key, above the af|panelWindow::footer-start key and before the af|panelWindow::content key. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: w-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|panelWindow::content The style for the content region of the panelWindow. This is the area where the components children will be rendered. It is located directly below the af|panelWindow::header key, above the af|panelWindow::footer and after the af|panelWindow::content-start key. Use the :resizable pseudo-class to change attributes such as padding when resize mode is on.
af|panelWindow::content-center The center of the panelWindow is marked with this style. It is contained in the af|panelWindow::content node. Padding and color can be adjusted with this style but overflow is managed programmatically. Use of this style is conditional on property values stretchChildren=first or resize=on.
af|panelWindow::content-end The style for the ending of the content. This will be located directly below the af|panelWindow::header-end key, above the af|panelWindow::footer-end key and after the af|panelWindow::content key. Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: e-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode.
af|panelWindow::resize-icon-region Styles the region around the end corner resize icon in af|panelWindow::footer and aligned to end in LTR. It can be used to set paddings, margins around the resize icon.
af|panelWindow::resize-icon-style The style for the resize icon located in the af|panelWindow::resize-icon-region.
af|panelWindow::icon-region Styles the region around the window icon in af|panelWindow::header and aligned to start. It can be used to set paddings, margins around the title icon.
af|panelWindow::title Styles the title of the panelWindow.
af|panelWindow::help-link-container A style containing the "dynamic help" for the window. It will only be displayed if assigned a helpTopicId and will be positioned after the af|panelWindow::title and before af|panelWindow::close-icon-style-region within af|panelWindow::header.
af|panelWindow::dynamic-help-icon-style Style the dynamic help icon located within the help-link-container. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|panelWindow::close-icon-style-region Styles the region around af|panelWindow::close-icon-style in af|panelWindow::header and aligned to end. It can be used to set paddings, margins around the title icon.
af|panelWindow::close-icon-style Style on the panelWindow's close icon. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the close-icon-style and define the icon for the close-icon key.
ADF Faces properties
Name Description
-tr-open-animation-duration The root style, af|panelWindow, 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 default is 300 milliseconds.
-tr-default-content-width The root style, af|panelWIndow, contains skinning property "-tr-default-content-width" that provides the default contentWidth if not provided when stretching is turned on, "stretchChildren=first".
-tr-default-content-height The root style, af|panelWindow, contains skinning property "-tr-default-content-height" that provides the default contentHeight if not provided when stretching is turned on, "stretchChildren=first".
Icon Selectors
Name Description
af|panelWindow::close-icon Overrides the default close icon. Icons can be text or img elements, e.g. af|panelWindow::close-icon {content "X"} or af|panelWindow::close-icon {content: url(...)}. Use this key instead of the close-icon-style key if you do not want a background-image.
af|panelWindow::dynamic-help-icon Icon that can be used instead of a background-image on af|panelWindow::dynamic-help-icon-style. Located in the content-start and only enabled if a helpTopicId is provided.
af|panelWindow::resize-icon Overrides the default resize icon. Icons can be text or img elements, e.g. af|panelWindow::resize-icon {content ">"} or af|panelWindow::resize-icon {content: url(...)}. Use this key instead of the resize-icon-style key if you do not want a background-image.
Resource Strings
Name Description
af_panelWindow.TIP_CLOSE Tooltip for the close icon at the top right of the panel window.

af:popup Component

The af:popup component uses global style selectors and supports setting several skinning attributes that control appearance of drop shadows next to popup type components.

A description of the following global style selectors is given in the global styles selectors section. See:
.AFPopupSelectorHeader
.AFPopupSelectorHeaderStart
.AFPopupSelectorHeaderEnd
.AFPopupSelectorContent
.AFPopupSelectorContentStart
.AFPopupSelectorContentEnd
.AFPopupSelectorFooter
.AFPopupSelectorFooterStart
.AFPopupSelectorFooterEnd
Style Selectors
Name Description
af|popup Used for setting the following skinning properties that effect the appearance of popup drop shadows:

The skinning property "-tr-shadow-pixel-size" controls the pixel size of popup drop shadows. The default value is 4.

The skinning property "-tr-shadow-offset" controls the pixel offset value for popup drop shadows. The default value is 3.

The skinning property "-tr-shadow-starting-black-percent" controls the percentage black for the starting pixel of the drop shadow. You can use a number less than 100 for a lighter drop shadow. The default value is 100.

Resource Strings
Name Description
af_popup.TIP_START_OF_POPUP In screenreader mode, this text marks the top side of the popup. It is also used by af:dialog and af:panelWindow.
af_popup.TIP_END_OF_POPUP In screenreader mode, this text marks the bottom side of the popup selector. It is also used by af:dialog and af:panelWindow.
af_popup.TIP_START_OF_MENU Text that marks the top of a menu contained within an af:popup. It is only displayed in screenreader mode.
af_popup.TIP_END_OF_MENU Text that marks the bottom of a menu contained within an af:popup. It is only displayed in screenreader mode.
af_popup.STATUS_ENTERING_POPUP Status message announced via a WAI-ARIA live region when entering a popup. This message is only used in screenreader mode.
af_popup.STATUS_EXITING_POPUP Status message announced via a WAI-ARIA live region when exiting a popup. This message is only used in screenreader mode.

af:progressIndicator Component

Style Selectors
Name Description
af|progressIndicator Style on the root element of the af:progressIndicator component.
af|progressIndicator::indeterminate Style on the indeterminate model of the af:progressIndicator component. Available pseudo-class are :running and :finished. The indicator image is specified as a background-image in this key.
af|progressIndicator::determinate Style on the determinate model of the af:progressIndicator component. This defines the width and height of the progress bar.
af|progressIndicator::determinate-start-label Style on the label which indicates start percentage of the af:progressIndicator component. This includes .AFTextForeground:alias, .AFDefaultFont:alias and AFEndTextAlign:alias style selectors.
af|progressIndicator::determinate-end-label Style on the label which indicates end percentage of the af:progressIndicator component. This includes .AFTextForeground:alias, .AFDefaultFont:alias and AFEndTextAlign:alias style selectors.
af|progressIndicator::determinate-filled-icon-style Style on the determinate model indicator for percentage completion of the af:progressIndicator component. The indicator image is specified as a background-image in this key. This also defines width and height of the image. This image is repeated in the progress bar according to the percentage completion and will occupy the percentage width of the total width as defined in the af|progressIndicator::determinate key.
af|progressIndicator::determinate-empty-icon-style Style on the determinate model indicator for remaining percentage completion of the af:progressIndicator component. The indicator image is specified as a background-image in this key. This also defines width and height of the image. This image is repeated in the progress bar according to the remaining percentage completion and will occupy the remaining percentage width of the total width as defined in the af|progressIndicator::determinate key.
Icon Selectors
Name Description
af|progressIndicator::indeterminate-running-icon The running state indicator icon for indeterminate model. This renders a <img> or text. You can use af|progressIndicator::indeterminate:running and set background-image instead.
af|progressIndicator::indeterminate-finished-icon The finished state indicator icon for indeterminate model. This renders a <img> or text. You can use af|progressIndicator::indeterminate:finished and set background-image instead.
ADF Faces properties
Name Description
-tr-percent-block-increment Determines the percent block increment in determinate model. Valid value can be a integer >0 and <100. For e.g. af|progressIndicator {-tr-percent-block-increment: 5} will show the progress bar with block increment as 5.
Resource Strings
Name Description
af_progressIndicator.TIP_DETERMINATE Tooltip that represents the % complete. This string can contain {0} in it to be replaced with the percentage completed. This tip is only available when a determination on the percent complete can be made.
af_progressIndicator.LABEL_DETERMINATE_ZERO_PERCENT Tooltip that represents 0% complete. This tip is only available when a determination on the percent complete can be made.
af_progressIndicator.LABEL_DETERMINATE_HUNDRED_PERCENT Tooltip that represents 100% complete. This tip is only available when a determination on the percent complete can be made.
af_progressIndicator.TIP_INDETERMINATE_RUNNING Tooltip that represents the process is running. This is only available when the percent complete can not be determined.
af_progressIndicator.TIP_INDETERMINATE_FINISHED Tooltip that represents the process is completed. This is only available when the percent complete can not be determined.
af_progressIndicator.TIP_SCREEN_READER_DETERMINATE Tooltip that represents the % complete. This string can contain {0} in it to be replaced with the percentage completed. This tip is only available when a determination on the percent complete can be made. This is also only available in screenreader mode.
af_progressIndicator.TIP_SCREEN_READER_INDETERMINATE_RUNNING Tooltip that represents the process is running. This is only available when the percent complete can not be determined. This is only available in screenreader mode.
af_progressIndicator.TIP_SCREEN_READER_INDETERMINATE_FINISHED Tooltip that represents the process is completed. This is only available when the percent complete can not be determined. This is only available in screenreader mode.

af:query Component

Style Selectors
Name Description
af|query Styles the root element of the af:query component. Available pseudo-classes are :compact and :simple. Use the :compact or :simple pseudo-class in the skin key when you want to style the component in compact or simple display mode.
af|query::button Styles the buttons of the query component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus to style the component for different states. The :disabled state is currently not supported. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|query::button-access-key Styles the access-key character in the button text. This includes the .AFButtonAccessKeyStyle:alias style.
Styles the content region of the query component. This includes the area that displays the queryCriteria and the footers. It is located directly below the af|query::titlex key. The value for x is a number between 0 and 5 signifying the six header types. The number is determined by the depth of the query within other headers. If query is nested within one panelHeader, for e.g. then x will be 1.
af|query::content-footer Styles the footer region that encloses any content specified by the footer facet and any content that is rendered, by default, by the query component.
af|query::criteria Styles the container that encloses the conjunction and the criterion search fields
af|query::criteria-column Styles each columns of the criterion rows, like vertical-align:top and text-align.
af|query::criterion Styles each search field based on a criterion. A search field consists of the label, operator, value and an optional delete icon.
af|query::criterion-label Styles the label of the search field. Also supports the rtl pseudo-class
af|query::criterion-label-top Styles the label when it is stacked on top of the operator and value parts of the search field. This is used when the labelAlignment property is set to top. Also supports the rtl pseudo-class
af|query::criterion-content Styles the content of the search field, that includes the operator and value inside.
af|query::criterion-delete-icon-cell Styles the cell that encloses the delete icon within a criterion. This includes .AFEndPadding:alias style selector.
af|query::criterion-delete-icon-style Styles the delete icon. The delete icon is specified as a background-image in this key. Available pseudo-classes are :hover and :active. Includes .AFClickableImageAnchor:alias
af|query::criterion-indexed-icon-style Styles the indexed icon. Available pseudo-classes are :hover and :active.
af|query::dynamic-help-icon-style Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|query::disclosure-link Selector for the anchor element that contains the disclosure icon.
af|query::undisclosed-icon-style Style on the icon that is shown when the panel is undisclosed (collapsed). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the undisclosed-icon-style and define the icon for the undisclosed-icon key.
af|query::disclosed-icon-style Style on the icon that is shown when the panel is disclosed (expanded). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the disclosed-icon-style and define the icon for the disclosed-icon key.
af|query::disclosure-icon-container Styles the container for the disclosure icon.
af|query::disclosure-icon-style Styles the anchor element containing the specified icon if messageType is set to null. Otherwise the icon associated with the message type is displayed in the container. Available pseudo-classes are :hover and :active.
af|query::footer-facet-content-style Styles the cell that contains the footer facet content (or the default Add Fields button).
af|query::info Applied to the element containing the "* required" stamp on the query component.
Styles the main part of the header. It is the section that immediately follows the "af|query::title-startx" key. The value for x is a number between 0 and 5 signifying the six header types.
Styles the ending cell of the header. Generally this is the decoration on the right side of the search panel and can be used to create rounded edges.
af|query::title-table The style for the table containing the header. Generally this will not be modified, but this allows for more flexible skinning of the title in general so that under certain curcumstances, it can be styled to match the content container. This style class supports the :disclosed pseudo-class when the query component is disclosed.
Styles the header text inside the title element specified by the af|query::titlex key. Available pseudo-classes are :error, :warning, :info:, :confirmation and are set according to the message type. If no message type is specified or message type is set to none then none of these pseudo-classes will be present.
Styles the starting cell of the header. Generally this is the decoration on the left side of the search panel and can be used to create rounded edges.
Icon Selectors
Name Description
af|query::criterion-delete-icon Icon that can be used instead of a background-image on af|query::criterion-delete-icon-style. By default this is null.
af|query::disclosed-icon The icon is displayed when the af:query component is rendered in its disclosed state.
af|query::dynamic-help-icon Icon that can be used instead of a background-image on af|query::dynamic-help-icon-style. By default this is null. If you use this af|query::dynamic-help-icon-style can then be used for background colors, etc.
af|query::undisclosed-icon The icon is displayed when the af:query component is rendered in its undisclosed state.
Resource Strings
Name Description
af_query.LABEL_HEADER_TEXT The title text used for the search panel.
af_query.LABEL_REQUIRED_INFO_TEXT The information text used to indicate required fields
af_query.LABEL_INDEXED_INFO_TEXT The information text used to indicate indexed fields
af_query.LABEL_FOOTER_ADD_FIELDS The text used on the Add Fields dropdown on the footer of the search panel.
af_query.LABEL_CONJUNCTION The text used for the label of the conjunction radio button.
af_query.LABEL_CONJUNCTION_AND The text used for the AND conjunction item of the radio button
af_query.LABEL_CONJUNCTION_OR The text used for the OR conjunction item of the radio button
af_query.LABEL_MODE_BASIC The text used for the Mode toggle button when the query component is currently displaying in Advanced mode.
af_query.LABEL_MODE_ADVANCED The text used for the Mode toggle button when the query component is currently displaying in Basic mode.
af_query.LABEL_SCREEN_READER_MODE_BASIC The text used for the Mode toggle button when the query component is currently displaying in Advanced mode. This is only available in screenreader mode.
af_query.LABEL_SCREEN_READER_MODE_ADVANCED The text used for the Mode toggle button when the query component is currently displaying in Basic mode. This is only available in screenreader mode.
af_query.LABEL_SAVE The text used for the Save button typically displayed on the footer of the search panel.
af_query.LABEL_RESET The text used for the Reset button typically displayed on the footer of the search panel.
af_query.LABEL_SEARCH The text used for the Search button typically displayed on the footer of the search panel.
af_query.LABEL_DELETE The text used for the Delete button typically displayed on the "Personalize Saved Searches" dialog.
af_query.LABEL_APPLY The text used for the Apply button typically displayed on the "Personalize Saved Searches" dialog.
af_query.LABEL_SAVED_SEARCH The text used as the label for the Saved Searches dropdown typically displayed on the toolbar (header) of the search panel
af_query.LABEL_SAVED_SEARCH_PERSONALIZE_ENTRY The text used to display the "Personalize" entry in the saved searches dropdown on the search panel.
af_query.LABEL_PERSONALIZE_SAVED_SEARCHES_DLG The text used as the title for the Personalize Saved Searches dialog
af_query.LABEL_CREATE_SAVED_SEARCH_DLG The text used as the title for the Create Saved Search dialog
af_query.LABEL_SAVED_SEARCH_NAME_DLG The text used as the label for the input component that displays the name of the saved search in either dialog.
af_query.LABEL_UIHINT_SAVE_RESULTS_LAYOUT The text used as the label for the uiHint checkbox Save Results Layout in either dialog
af_query.LABEL_UIHINT_AUTO_EXECUTE The text used as the label for the uiHint checkbox Run Automatically in either dialog
af_query.LABEL_UIHINT_SHOW_IN_LIST The text used as the label for the uiHint checkbox Show In List in the personalize dialog
af_query.LABEL_UIHINT_DEFAULT The text used as the label for the uiHint checkbox Default in either dialog
af_query.MSG_SAVED_SEARCH_NAME_UNIQUE_CONSTRAINT The text of the error message used to indicate a unique constraint violation encountered for the name of a newly created saved search.
af_query.MSG_SAVED_SEARCH_NAME_UNIQUE_CONSTRAINT_DETAIL The text of a detail message explaining the action to be taken to correct the unique constraint violation.
af_query.MSG_SAVED_SEARCH_NAME_NOTNULL_CONSTRAINT The text of the error message used to indicate a name is required for a newly created saved search.
af_query.MSG_SAVED_SEARCH_NAME_NOTNULL_CONSTRAINT_DETAIL The text of a detail message explaining the action to be taken to correct the not null constraint for the name of a saved search.
af_query.MSG_SAVED_SEARCH_DELDUP_CONSTRAINT The text of the error message indicating a delete constraint requiring a saved search to be selected before choosing to delete it.
af_query.MSG_SAVED_SEARCH_DELETE_CONSTRAINT_DETAIL The text of the detail message explaining how to satisfy the delete constraint.
af_query.MSG_SAVED_SEARCH_DELETE_WARNING The text of a message warning the user that he/she is about to delete a saved search
af_query.TIP_DELETE_WARNING The text used for the title of the Warning dialog.
af_query.TIP_DELETE_SEARCH_FIELD The text used as the tooltip for the Delete button on the personalize dialog.
af_query.TIP_OPEATOR The text used as the tooltip for the operators dropdown on the search panel
af_query.LABEL_VALUE_LOV_POPUP The text used for the title of the LOV popup when the LOV component is displayed in the search panel.

af:quickQuery Component

Style Selectors
Name Description
af|quickQuery Style on the root element of the af:quickQuery component. Available pseudo-class is :vertical. Use the :vertical pseudo-class in the skin key when you want to style the component with vertical layout. For example, you can style the label in vertical mode like this: "af|quickQuery:vertical::label".
af|quickQuery::label Style on the label of the af:quickQuery component. This includes .AFLabel:alias style selector.
af|quickQuery::criteria-items Style on the criterion items facet of the af:quickQuery component.
af|quickQuery::value Style on the criterion value facet of the af:quickQuery component.
af|quickQuery::end Style on the end facet of the af:quickQuery component.
af|quickQuery::search-icon-cell Style on the search icon cell of af:quickQuery component. This includes .AFEndPadding:alias style selector.
af|quickQuery::search-icon-style Style on the clickable search icon of the af:quickQuery component. By default the search-icon is null and this style has a background-image that you can override. The width and height of the icon will be provided in this key. Available pseudo-classes are :hover and :active. For example, you can style the icon when the component is active by using this selector: "af|quickQuery::search-icon-style:active". Includes .AFClickableImageAnchor:alias
af|quickQuery::disabled-search-icon-style Styles the icon used for the search indicator in disabled state. The icon is specified as a background-image in this key. Use pseudo-classes :hover and :active to customize the look. To use text or an img element instead of a background-image, set {-tr-inhibit: background-image} in this style and define the icon using the disabled-search-icon. Includes .AFClickableImageAnchor:alias
af|quickQuery::dynamic-help-icon-style Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
Icon Selectors
Name Description
af|quickQuery::disabled-search-icon Icon that can be used instead of a background-image on af|quickQuery::disabled-search-icon-style. By default this is null.
af|quickQuery::dynamic-help-icon Icon that can be used instead of a background-image on af|quickQuery::dynamic-help-icon-style. By default this is null. If you use this af|quickQuery::dynamic-help-icon-style can then be used for background colors, etc.
af|quickQuery::search-icon Search icon. You can use af|quickQuery::search-icon-style instead. Available pseudo-class is :hover.
Resource Strings
Name Description
af_quickQuery.LABEL_DEFAULT The text used as the label for the quickQuery component.

af:region Component

Style Selectors
Name Description
af|region Selector that renders on the root dom element of the component.
af|region::disclosure-link Selector for the anchor element that contains the disclosure icon.
Icon Selectors
Name Description
af|region::disclosed-icon The icon is displayed when the af:region component is rendered in its disclosed state.
af|region::undisclosed-icon The icon is displayed when the af:region component is rendered in its undisclosed state.

af:resetButton Component

Style Selectors
Name Description
af|resetButton Style on the root element of the af:resetButton component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled to style the button for different states. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|resetButton::access-key Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style.

af:richTextEditor Component

The richTextEditor component is an input component. It contains a label and content like all input components. The richTextEditor contains a toolbox which contains other components like a selectOneChoice, an inputNumberSpinbox, and toolbar components and they all need to be skinned with their own skinning keys. You can use descendent skinning keys to skin the styles of the richTextEditor's toolbox, selectOneChoice, toolbar, etc separately from other toolboxes in your application. For example, af|richTextEditor::content af|selectOneChoice::content {width: 8em;}. Please note that you cannot skin icon keys contextually, so if you skin a af|inputNumberSpinbox::incremeentor-icon, for example, there is no way to override this with af|richTextEditor::content af|inputNumberSpinbox::incremeentor-icon. The reason we did not create separate keys for all these hooks for this component is because the number of keys would have been huge, and we feel that the given richTextEditor skinning hooks with descendent selectors should be sufficient.

Style Selectors
Name Description
af|richTextEditor Style on the root element of the af:richTextEditor component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info.
af|richTextEditor::content Style on the content of the component, including the toolbar.
af|richTextEditor::content-input Style on the content input field of the component, excluding the toolbar.
af|richTextEditor::content-input-container Style on the container of the content-input element. This is meant for a border; this includes .AFFormControlContentBorder:alias style selector.
af|richTextEditor::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|richTextEditor::label Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Icon Selectors
Name Description
af|richTextEditor::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|richTextEditor::dynamic-help-icon Icon that can be used instead of a background-image on af|richTextEditor::dynamic-help-icon-style. By default this is null. If you use this af|richTextEditor::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_richTextEditor.TIP_FONT_SHORT_DESCRIPTION Tooltip for the font select one choice control of Rich Text Editor.
af_richTextEditor.TIP_FONT_UNSELECTED_LABEL Tooltip for the font select one choice control of Rich Text Editor when the control is not selected.
af_richTextEditor.TIP_FONT_SIZE_SHORT_DESCRIPTION Tooltip for the font size input text.
af_richTextEditor.TIP_COLOR_FOREGROUND Tooltip for the foreground color chooser.
af_richTextEditor.TIP_COLOR_BACKGROUND Tooltip for the background color chooser.
af_richTextEditor.LABEL_SPECIFY_THE_URL Label for the dialog to specify a link to be inserted into the rich text editor.
af_richTextEditor.LABEL_EDITING_REGION_TITLE Label for screenreader mode to identify the editable region.

af:selectBooleanCheckbox Component

Style Selectors
Name Description
af|selectBooleanCheckbox Style on the root element of the af:selectBooleanCheckbox component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectBooleanCheckbox:disabled::content"
af|selectBooleanCheckbox::access-key Style on the access key for the selection. Includes .AFFormAccessKeyStyle:alias.
af|selectBooleanCheckbox::content Style on the content of the component.
af|selectBooleanCheckbox::content-input Style on the input of the component.
af|selectBooleanCheckbox::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectBooleanCheckbox::label Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|selectBooleanCheckbox::item-text Style on the item text associated with the checkbox.
Icon Selectors
Name Description
af|selectBooleanCheckbox::selected-icon An icon used for the "checked" state of a read-only checkbox.
af|selectBooleanCheckbox::unselected-icon An icon used for the "unchecked" state of a read-only checkbox.
af|selectBooleanCheckbox::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectBooleanCheckbox::dynamic-help-icon Icon that can be used instead of a background-image on af|selectBooleanCheckbox::dynamic-help-icon-style. By default this is null. If you use this af|selectBooleanCheckbox::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_selectBooleanCheckbox.TIP_SELECTED Tooltip that indicates the checkbox is selected.
af_selectBooleanCheckbox.TIP_UNSELECTED Tooltip that indicates the checkbox is not selected.

af:selectBooleanRadio Component

Style Selectors
Name Description
af|selectBooleanRadio Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectBooleanRadio:disabled::content"
af|selectBooleanRadio::access-key Style on the access key for the selection. Includes .AFFormAccessKeyStyle:alias.
af|selectBooleanRadio::content Style on the content of the component.
af|selectBooleanRadio::content-input Style on the input of the component.
af|selectBooleanRadior::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectBooleanRadio::label Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|selectBooleanRadio::item-text Style on the item text associated with the radio button.
Icon Selectors
Name Description
af|selectBooleanRadio::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectBooleanRadio::dynamic-help-icon Icon that can be used instead of a background-image on af|selectBooleanRadio::dynamic-help-icon-style. By default this is null. If you use this af|selectBooleanRadio::dynamic-help-icon-style can then be used for background colors, etc.

af:selectManyCheckbox Component

Style Selectors
Name Description
af|selectManyCheckbox Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectManyCheckbox:disabled::content"
af|selectManyCheckbox::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectManyCheckbox::content Style on the content of the af:selectManyCheckbox component.
af|selectManyCheckbox::content-input Style on the input of the af:selectManyCheckbox component.
af|selectManyCheckbox::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectManyCheckbox::label Style on the label of the af:selectManyCheckbox component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|selectManyCheckbox::item-text Style on the item text associated with a single checkbox.
Icon Selectors
Name Description
af|selectManyCheckbox::selected-icon An icon used for the "checked" state of a read-only checkbox.
af|selectManyCheckbox::unselected-icon An icon used for the "unchecked" state of a read-only checkbox.
af|selectManyCheckbox::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectManyCheckbox::dynamic-help-icon Icon that can be used instead of a background-image on af|selectManyCheckbox::dynamic-help-icon-style. By default this is null. If you use this af|selectManyCheckbox::dynamic-help-icon-style can then be used for background colors, etc.

af:selectManyChoice Component

Style Selectors
Name Description
af|selectManyChoice Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectManyChoice:disabled::content"
af|selectManyChoice::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectManyChoice::content Style on the content of the af:selectManyChoice component.
af|selectManyChoice::label Style on the label of the af:selectManyChoice component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|selectManyChoice::dropdown Style of the background of the icon (used for gradient background images of buttons). Available pseudo-classes are :hover, :active, :disabled, :read-only.
af|selectManyChoice::dropdown-icon-style Style of the icon (use background-image: style). For text or foreground image, use the af|selectManChoice::dropdown-icon selector. Available pseudo-classes are :hover, :active, :disabled, :read-only. Includes .AFClickableImageAnchor:alias
af|selectManyChoice::dropdown-panel Style of the parent container of the dropdown items.
af|selectManyChoice::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectManyChoice::item Style of the checkbox items. Available pseudo-classes are :hover, :active, :disabled, :read-only.
af|selectManyChoice::separator Style of the item separator.
Icon Selectors
Name Description
af|selectManyChoice::dropdown-icon Used if a text or foreground image icon is desired. If background image is desired, use the af|selectManyChoice::dropdown-icon-style selector.
af|selectManyChoice::dropdown-disabled-icon Used if a text or alternate image disabled icon is desired.
af|selectManyChoice::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectManyChoice::dynamic-help-icon Icon that can be used instead of a background-image on af|selectManyChoice::dynamic-help-icon-style. By default this is null. If you use this af|selectManyChoice::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_selectManyChoice.LABEL_SELECT_ALL The label on the checkbox that selects all the items in a select many choice.

af:selectManyListbox Component

Style Selectors
Name Description
af|selectManyListbox Style on the root element of the af:selectManyListbox component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|selectManyListbox:read-only::content"
af|selectManyListbox::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectManyListbox::content Style on the content of the af:selectManyListbox component.
af|selectManyListbox::content-input Style on the native checkbox of the af:selectManyListbox component. End user should rarely have to style this.
af|selectManyListbox::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectManyListbox::label Style on the label of the af:selectManyListbox component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|selectManyListbox::options Style of the scrolling element which encompasses the individual items.
af|selectManyListbox::item Style of the individual item which encompasses the checkbox and label of the item.
af|selectManyListbox::separator Style of the separator between items.
Icon Selectors
Name Description
af|selectManyListbox::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectManyListbox::dynamic-help-icon Icon that can be used instead of a background-image on af|selectManyListbox::dynamic-help-icon-style. By default this is null. If you use this af|selectManyListbox::dynamic-help-icon-style can then be used for background colors, etc.
Resource Strings
Name Description
af_selectManyListbox.LABEL_SELECT_ALL The label on the checkbox that selects all the items in a select many listbox.

af:selectManyShuttle Component

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

Style Selectors
Name Description
af|selectManyShuttle The selector on the root dom element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectManyShuttle:disabled::content"
af|selectManyShuttle::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectManyShuttle::container Styles the containers in the shuttle.
af|selectManyShuttle::content Styles the containers in the shuttle.
af|selectManyShuttle::content-input Styles the checkboxes inside the shuttle containers.
af|selectManyShuttle::desc-area Styles the item description inside the description box.
af|selectManyShuttle::desc-cell Styles the description box.
af|selectManyShuttle::description Styles the description header in the description box.
af|selectManyShuttle::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectManyShuttle::fieldset Styles the fieldset on the containers, when running in screenreader mode.
af|selectManyShuttle::header Styles the leading and trailing header.
af|selectManyShuttle::icon-container Styles the icon area between the containers.
af|selectManyShuttle::icon-label Styles the label of the move/remove icons.
af|selectManyShuttle::item-label Styles the label of the items, that are present in the containers.
af|selectManyShuttle::move-horizontal-icon-style Style of the horizontal move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-horizontal-icon-style and define the override icon for the move-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectManyShuttle::move-vertical-icon-style Style of the vertical move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-vertical-icon-style and define the override icon for the move-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectManyShuttle::moveall-horizontal-icon-style Style of the horizontal moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-horizontal-icon-style and define the override icon for the moveall-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectManyShuttle::moveall-vertical-icon-style Style of the vertical moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-vertical-icon-style and define the override icon for the moveall-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectManyShuttle::options Styles the container values.
af|selectManyShuttle::remove-horizontal-icon-style Style of the horizontal remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-horizontal-icon-style and define the override icon for the remove-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectManyShuttle::remove-vertical-icon-style Style of the vertical remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-vertical-icon-style and define the override icon for the remove-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectManyShuttle::removeall-horizontal-icon-style Style of the horizontal removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-horizontal-icon-style and define the override icon for the removeall-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectManyShuttle::removeall-vertical-icon-style Style of the vertical removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-vertical-icon-style and define the override icon for the removeall-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
Icon Selectors
Name Description
af|selectManyShuttle::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectManyShuttle::dynamic-help-icon Icon that can be used instead of a background-image on af|selectManyShuttle::dynamic-help-icon-style. By default this is null. If you use this af|selectManyShuttle::dynamic-help-icon-style can then be used for background colors, etc.
af|selectManyShuttle::move-horizontal-disabled-icon Overrides the default disabled horizontal move icon.
af|selectManyShuttle::move-horizontal-icon Overrides the default horizontal move icon.
af|selectManyShuttle::move-vertical-disabled-icon Overrides the default disabled vertical move icon.
af|selectManyShuttle::move-vertical-icon Overrides the default vertical move icon.
af|selectManyShuttle::moveall-horizontal-icon Overrides the default horizontal moveall icon.
af|selectManyShuttle::moveall-vertical-disabled-icon Overrides the default disabled vertical moveall icon.
af|selectManyShuttle::moveall-vertical-icon Overrides the default vertical moveall icon.
af|selectManyShuttle::remove-horizontal-disabled-icon Overrides the default disabled horizontal remove icon.
af|selectManyShuttle::remove-horizontal-icon Overrides the default horizontal remove icon.
af|selectManyShuttle::remove-vertical-disabled-icon Overrides the default disabled vertical remove icon.
af|selectManyShuttle::remove-vertical-icon Overrides the default vertical remove icon.
af|selectManyShuttle::removeall-horizontal-disabled-icon Overrides the default disabled horizontal removeall icon.
af|selectManyShuttle::removeall-horizontal-icon Overrides the default horizontal removeall icon.
af|selectManyShuttle::removeall-vertical-disabled-icon Overrides the default disabled vertical removeall icon.
af|selectManyShuttle::removeall-vertical-icon Overrides the default vertical removeall icon.
Resource Strings
Name Description
af_selectManyShuttle.DESCRIPTION_LABEL Text above description area.
af_selectManyShuttle.MOVE_ALL_TIP Alt tag for moving all the items
af_selectManyShuttle.MOVE_TIP Alt tag for moving selected items
af_selectManyShuttle.REMOVE_ALL_TIP Alt tag for removing all the items
af_selectManyShuttle.REMOVE_TIP Alt tag for removing selected items
af_selectManyShuttle.MOVE_ALL Link text for moving all the items
af_selectManyShuttle.MOVE Link text for moving selected items
af_selectManyShuttle.REMOVE_ALL Link text for removing all the items
af_selectManyShuttle.REMOVE Link text for removing selected items
af_selectManyShuttle.MSG_SCREEN_READER_INSTRUCTION Screen reader mode only. Instructions on how to use the select many shuttle.

af:selectOneChoice Component

Style Selectors
Name Description
af|selectOneChoice Style on the root element of the af:selectOneChoice component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectOneChoice:disabled::content"
af|selectOneChoice::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectOneChoice::content Style on the content of the af:selectOneChoice component.
af|selectOneChoice::context-content
af|selectOneChoice::compact-content Style on the content of the af:selectOneChoice component in compact mode. Used for error border colors.
af|selectOneChoice::compact-dropdown Style of the background of the icon (used for gradient background images of buttons). Available pseudo-classes are :hover, :active, :disabled, :read-only.
af|selectOneChoice::compact-dropdown-icon-style Style of the icon (use background-image: style). For text or foreground image, use the af|selectOneChoice::compact-dropdown-icon selector. Available pseudo-classes are :hover, :active, :disabled, :read-only. Includes .AFClickableImageAnchor:alias
af|selectOneChoice::dropdown-panel compact mode only for now.
af|selectOneChoice::item Compact mode only for now. Available pseudo-classes are :hover, :active, :disabled, :read-only.
af|selectOneChoice::separator Compact mode only for now.
af|selectOneChoice::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectOneChoice::label Style on the label of the af:selectOneChoice component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Icon Selectors
Name Description
af|selectOneChoice::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectOneChoice::dynamic-help-icon Icon that can be used instead of a background-image on af|selectOneChoice::dynamic-help-icon-style. By default this is null. If you use this af|selectOneChoice::dynamic-help-icon-style can then be used for background colors, etc.

af:selectOneListbox Component

Style Selectors
Name Description
af|selectOneListbox Style on the root element of the af:selectOneListbox component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|selectManyListbox:read-only::content"
af|selectOneListbox::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectOneListbox::content Style on the content of the af:selectOneListbox component.
af|selectOneListbox::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectOneListbox::item Style on the items in the box.
af|selectOneListbox::label Style on the label of the af:selectOneListbox component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|selectOneListbox::separator Style on the separators in the box.
Icon Selectors
Name Description
af|selectOneListbox::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectOneListbox::dynamic-help-icon Icon that can be used instead of a background-image on af|selectOneListbox::dynamic-help-icon-style. By default this is null. If you use this af|selectOneListbox::dynamic-help-icon-style can then be used for background colors, etc.

af:selectOneRadio Component

Style Selectors
Name Description
af|selectOneRadio Style on the root element of the af:selectOneRadio component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectOneRadio:disabled::content"
af|selectOneRadio::access-key Style on the access key character for the selectOneRadio. Includes .AFFormAccessKeyStyle:alias.
af|selectOneRadio::content Style on the content of the af:selectOneRadio component.
af|selectOneRadio::content-input Style on the input of the af:selectOneRadio component.
af|selectOneRadio::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectOneRadio::item-text Style on the item text associated with a single radio button.
af|selectOneRadio::label Style on the label of the af:selectOneRadio component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Icon Selectors
Name Description
af|selectOneRadio::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectOneRadio::dynamic-help-icon Icon that can be used instead of a background-image on af|selectOneRadio::dynamic-help-icon-style. By default this is null. If you use this af|selectOneRadio::dynamic-help-icon-style can then be used for background colors, etc.

af:selectOrderShuttle Component

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

Style Selectors
Name Description
af|selectOrderShuttle The selector on the root dom element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|selectOrderShuttle:disabled::content"
af|selectOrderShuttle::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectOrderShuttle::container Styles the containers in the shuttle.
af|selectOrderShuttle::content Styles the containers in the shuttle.
af|selectOrderShuttle::content-input Styles the checkboxes inside the shuttle containers.
af|selectOrderShuttle::desc-area Styles the item description inside the description box.
af|selectOrderShuttle::desc-cell Styles the description box.
af|selectOrderShuttle::description Styles the description header in the description box.
af|selectOrderShuttle::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|selectOrderShuttle::fieldset Styles the fieldset on the containers, when running in screenreader mode.
af|selectOrderShuttle::header Styles the leading and trailing header.
af|selectOrderShuttle::icon-container Styles the icon area between the containers.
af|selectOrderShuttle::icon-label Styles the label of the move/remove icons.
af|selectOrderShuttle::item-label Styles the label of the items, that are present in the containers.
af|selectOrderShuttle::move-bottom-icon-style Style of the move-bottom icon. The move-bottom icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-bottom-icon-style and define the override icon for the move-bottom-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::move-down-icon-style Style of the move-down icon. The move-down icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-down-icon-style and define the override icon for the move-down-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::move-horizontal-icon-style Style of the horizontal move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-horizontal-icon-style and define the override icon for the move-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::move-top-icon-style Style of the move-top icon. The move-top icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-top-icon-style and define the override icon for the move-top-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::move-up-icon-style Style of the move-up icon. The move-up icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-up-icon-style and define the override icon for the move-up-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::move-vertical-icon-style Style of the vertical move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-vertical-icon-style and define the override icon for the move-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::moveall-horizontal-icon-style Style of the horizontal moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-horizontal-icon-style and define the override icon for the moveall-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::moveall-vertical-icon-style Style of the vertical moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-vertical-icon-style and define the override icon for the moveall-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::options Styles the container values.
af|selectOrderShuttle::remove-horizontal-icon-style Style of the horizontal remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-horizontal-icon-style and define the override icon for the remove-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::remove-vertical-icon-style Style of the vertical remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-vertical-icon-style and define the override icon for the remove-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::removeall-horizontal-icon-style Style of the horizontal removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-horizontal-icon-style and define the override icon for the removeall-horizontal-icon. Available pseudo-class are :disabled, :hover and :active.
af|selectOrderShuttle::removeall-vertical-icon-style Style of the vertical removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-vertical-icon-style and define the override icon for the removeall-vertical-icon. Available pseudo-class are :disabled, :hover and :active.
Icon Selectors
Name Description
af|selectOrderShuttle::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|selectOrderShuttle::dynamic-help-icon Icon that can be used instead of a background-image on af|selectOrderShuttle::dynamic-help-icon-style. By default this is null. If you use this af|selectOrderShuttle::dynamic-help-icon-style can then be used for background colors, etc.
af|selectOrderShuttle::move-bottom-disabled-icon Overrides the default disabled move-bottom icon.
af|selectOrderShuttle::move-bottom-icon Overrides the default move-bottom icon.
af|selectOrderShuttle::move-down-disabled-icon Overrides the default disabled move-down icon.
af|selectOrderShuttle::move-down-icon Overrides the default move-down icon.
af|selectOrderShuttle::move-horizontal-disabled-icon Overrides the default disabled horizontal move icon.
af|selectOrderShuttle::move-horizontal-icon Overrides the default horizontal move icon.
af|selectOrderShuttle::move-top-disabled-icon Overrides the default disabled move-top icon.
af|selectOrderShuttle::move-top-icon Overrides the default move-top icon.
af|selectOrderShuttle::move-up-disabled-icon Overrides the default disabled move-up icon.
af|selectOrderShuttle::move-up-icon Overrides the default move-up icon.
af|selectOrderShuttle::move-vertical-disabled-icon Overrides the default disabled vertical move icon.
af|selectOrderShuttle::move-vertical-icon Overrides the default vertical move icon.
af|selectOrderShuttle::moveall-horizontal-disabled-icon Overrides the default disabled horizontal moveall icon.
af|selectOrderShuttle::moveall-horizontal-icon Overrides the default horizontal moveall icon.
af|selectOrderShuttle::moveall-vertical-disabled-icon Overrides the default disabled vertical moveall icon.
af|selectOrderShuttle::moveall-vertical-icon Overrides the default vertical moveall icon.
af|selectOrderShuttle::remove-horizontal-disabled-icon Overrides the default disabled horizontal remove icon.
af|selectOrderShuttle::remove-horizontal-icon Overrides the default horizontal remove icon.
af|selectOrderShuttle::remove-vertical-disabled-icon Overrides the default disabled vertical remove icon.
af|selectOrderShuttle::remove-vertical-icon Overrides the default vertical remove icon.
af|selectOrderShuttle::removeall-horizontal-disabled-icon Overrides the default disabled horizontal removeall icon.
af|selectOrderShuttle::removeall-horizontal-icon Overrides the default horizontal removeall icon.
af|selectOrderShuttle::removeall-vertical-disabled-icon Overrides the default disabled vertical removeall icon.
af|selectOrderShuttle::removeall-vertical-icon Overrides the default vertical removeall icon.
Resource Strings
Name Description
af_selectOrderShuttle.DESCRIPTION_LABEL Text above description area.
af_selectOrderShuttle.MOVE_ALL_TIP Alt tag for moving all the items
af_selectOrderShuttle.MOVE_TIP Alt tag for moving selected items
af_selectOrderShuttle.REMOVE_ALL_TIP Alt tag for removing all the items
af_selectOrderShuttle.REMOVE_TIP Alt tag for removing selected items
af_selectOrderShuttle.MOVE_ALL Link text for moving all the items
af_selectOrderShuttle.MOVE Link text for moving selected items
af_selectOrderShuttle.REMOVE_ALL Link text for removing all the items
af_selectOrderShuttle.REMOVE Link text for removing selected items
af_selectOrderShuttle.REORDER_UP_ALL_TIP Alt tag for reordering items up to top
af_selectOrderShuttle.REORDER_UP_TIP Alt tag for reordering items up one
af_selectOrderShuttle.REORDER_DOWN_ALL_TIP Alt tag for reordering items down to bottom
af_selectOrderShuttle.REORDER_DOWN_TIP Alt tag for reordering items down one
af_selectOrderShuttle.REORDER_UP_ALL Text for reordering items to top of list
af_selectOrderShuttle.REORDER_UP Text for reordering items up one position in the list
af_selectOrderShuttle.REORDER_DOWN_ALL Text for reordering items to bottom of list
af_selectOrderShuttle.REORDER_DOWN Text for reordering items down one position in the list

af:separator Component

Style Selectors
Name Description
af|separator Style on the root element of the af:separator component. You can also style using the CSS-2.1 :hover pseudo-class.

af:showDetail Component

Icon Selectors
Name Description
af|showDetail::disclosed-icon Icon displayed when the af:showDetail component is rendered in its disclosed state.
af|showDetail::undisclosed-icon Icon displayed when the af:showDetail component is rendered in its undisclosed state.
af|showDetail::disclosure-link Selector for the anchor element that contains the disclosure icon.
Resource Strings
Name Description
af_showDetail.TIP_DISCLOSED Tooltip for the disclosure icon.
af_showDetail.TIP_UNDISCLOSED Tooltip for the collapse icon.

af:showDetailHeader Component

af|showDetailHeader Selector that renders on the root dom element of the component.
af|showDetailHeader::title-table The style for the table containing the header. Generally this will not be modified, but this allows for more flexible skinning of the title in general so that under certain curcumstances, it can be styled to match the content container. This style class supports the :disclosed pseudo-class when the header is disclosed.
The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. The value for "x" is a number between 1 and 5 signifying the five header types.
The style for the main part of the header. It is the section that immediately follows the "af|showDetailHeader::title-startx" key. The value for x is a number between 1 and 5 signifying the five header types.
The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. It will immediately follow the The value for "x" is a number between 1 and 5 signifying the five header types.
af|showDetailHeader::disclosure-icon-container Applied to the container for the disclosure icon.
af|showDetailHeader::disclosure-link Selector for the anchor element that contains the disclosure icon.
af|showDetailHeader::icon-style Applied to the element containing the specified icon if messageType is set to null. Otherwise the icon associated with the message type is displayed in the container. Available pseudo-classes are :hover and :active.
Styles the "header" element inside the title of the element specified by the af|showDetailHeader::titlex key. This element surrounds the header text. Available pseudo-classes are :error, :warning, :info:, :confirmation and are set according to the message type. If no message type is specified or message type is set to none then none of these pseudo-classes will be present
af|showDetailHeader::context-container The style for the element containing the contents of the context facet. This will be placed directly after the header text.
af|showDetailHeader::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
af|showDetailHeader::toolbar ". It applies to end-aligned toolbars in the title section. This section is only present if there is either a toolbar or menuBar facet (or both) included in the showDetailHeader.
af|showDetailHeader::help-link-container If there is "dynamic help" for this header, and there is not a help topic with dynamic content, then this style pertains to the element containing the dynamic help link. This will be place directly after the context facet.
af|showDetailHeader::info Applied to the element containing the contents of the "info" facet. When help is available, this element may also contain the contents of the legend.
The style for the content region of the header. This is the area where the components children will be rendered. It is located directly below the af|showDetailHeader::titlex key. The value for x is a number between 1 and 5 signifying the five header types.
Icon Selectors
Name Description
af|showDetailHeader::confirmation-icon Icon used when the messageType is set to "confirmation". Available pseudo-class is :hover.
af|showDetailHeader::disclosed-icon The icon is displayed when the af:showDetailHeader component is rendered in its disclosed state.
af|showDetailHeader::dynamic-help-icon Icon that can be used instead of a background-image on af|showDetailHeader::dynamic-help-icon-style. By default this is null. If you use this af|showDetailHeader::dynamic-help-icon-style can then be used for background colors, etc.
af|showDetailHeader::error-icon Icon used when the messageType is set to "error". Available pseudo-class is :hover.
af|showDetailHeader::information-icon Icon used when the messageType is set to "information". Available pseudo-class is :hover.
af|showDetailHeader::warning-icon Icon used when the messageType is set to "warning". Available pseudo-class is :hover.
af|showDetailHeader::undisclosed-icon The icon is displayed when the af:showDetailHeader component is rendered in its undisclosed state.

af:showDetailItem Component

Style Selectors
Name Description
n/a This component has no visual since it is an abstract marker for other components such as panelAccordion or panelTabbed. There are no elements on the page for this component and thus it is not skinnable.
Resource Strings
Name Description
af_showDetailItem.TIP_ITEM Identifies an item. This is only used in screenreader mode.
af_showDetailItem.TIP_SELECTED_ITEM Identifies the selected item. This is only used in screenreader mode.
af_showDetailItem.TIP_DISABLED_ITEM Identifies the detail item as being disabled. This is only used in screenreader mode.
af_showDetailItem.TIP_SELECTED_DISABLED_ITEM Identifies the detail item as being selected and disabled. This is only used in screenreader mode.

af:spacer Component

The component cannot be skinned.

af:statusIndicator Component

Style Selectors
Name Description
af|statusIndicator Selector that renders on the root dom element of the component.
Icon Selectors
Name Description
af|statusIndicator::idle-icon The icon that represents the idle state. This icon is generally a non-animated icon that indicates communication is NOT occurring with the server.
af|statusIndicator::processing-icon The icon that represents the processing state. This icon is generally an animated icon that indicates communication IS occurring with the server.
af|statusIndicator::connecting-icon The icon displays when the Active Data Service is in the process of connecting. This icon is generally an animated icon.
af|statusIndicator::connected-icon The icon displays when the Active Data Service is in the connected state. This icon is generally a non-animated icon and may be the same as the idle state icon.
af|statusIndicator::reconnecting-icon The icon displays when the Active Data Service has lost connection and is attempting to reconnect. This icon is generally an animated icon.
af|statusIndicator::disconnected-icon The icon displays when the Active Data Service is in the disconnected state. This icon is generally a non-animated icon used to indicate that no further reconnection attempts will be made without use interaction.
Resource Strings
Name Description
af_statusIndicator.TIP_IDLE Tooltip to indicate when the status indicator is in idle mode.
af_statusIndicator.TIP_BUSY Tooltip to indicate that the status indicator is busy.
af_statusIndicator.TIP_CONNECTING Tooltip to indicate the status indicator is trying to connect.
af_statusIndicator.TIP_CONNECTED Tooltip to indicate that the status indicator is connected.
af_statusIndicator.TIP_RECONNECTING Tooltip to indicate that the status indicator is reconnecting after having lost connection to the server.
af_statusIndicator.TIP_DISCONNECTED Tooltip to indicate that the status indicator is disconnected.

af:subform Component

The subform component has no public skinning keys.

af:switcher Component

Style Selectors
Name Description
n/a This component has no visual representation. It does not generate any elements on the page and thus is not skinnable.

af:table Component

To style the table component, you will use both af|table and af|column skin selectors.

Style Selectors
Name Description
af|table Styles the root dom element of the component.

The root style contains skinning property "-tr-detail-animation-duration" that specifies the animation duration for expand/collapse of the table details. This skin property is honored only if the animation is enabled in the system.

The root style contains skinning property "-tr-column-scroll-animation-duration" that specifies the animation duration for scrolling when the user sets focus inside a cell of a column that is contained inside a column group. This skin property is honored only if the animation is enabled in the system.

The root style contains skinning property "-tr-hover-highlight-row" that specifies if a row should be highlighted on mouse over. The default value is "true". Set it to "false" to disable row highlighting.

The root class contains the following skin properties for sizing: -tr-border-left-width, -tr-border-right-width, -tr-padding-left-width, -tr-padding-right-width.

These skin properties are used to size the table at runtime. These properties must match the paddings/borders in the header/data cell classes. The total width of the borders and paddings of each cell (header and data) must be equal to the total of these four properties. This is tricky to do, so changing paddings and borders is discouraged. The simple skin has -tr-border-left-width: 0; -tr-border-right-width: 1; -tr-padding-left-width: 1; -tr-padding-right-width: 1;

Use the .AFTableCellPadding:alias and .AFTableCellData:alias to set padding and .AFTableCellData:alias and .AFTableCellHeaderBorder:alias to set borders. All table cells, data and headers, include the .AFTableCellPadding:alias. Header cells also include .AFTableCellHeaderBorder:alias. Data cells also include .AFTableCellData:alias. Please note that when no vertical grid lines are present in the table extra padding may need to be added to the AFTableCellData:alias to compensate for the .AFTableCellHeaderBorder:alias (and -tr-border-right-width property).

For e.g. to increase the padding of the data header cells in the table to 8px you extend the skin selectors like below. Remember that the simple skin's CSS properties are the base, and you are extending them, so there is no need to redefine any CSS properties that you are not changing.:

/* change the -tr-padding-left-width and -tr-padding-right-width to 8px */ af|table { -tr-padding-left-width: 8; -tr-padding-right-width: 8; }

/* a table cell (Header and data cell) includes this alias, so change the padding-left and padding-right to 8px to match the -tr-padding properties */ .AFTableCellPadding:alias { padding-left:8px; padding-right:8px; }

/* data-cell and banded-data-cell include this alias as well as the .AFTableCellPadding:alias. .AFTableCellPadding:alias is also in the header cells. For the case when there is no vertical gridline, we need to add an extra pixel to the padding to compensate for no border. If we didn't do this, the header that has a border and the data cells that don not would not line up.*/ .AFTableCellData:alias { /* Use 1px more for padding to compensate for lack of borders in the data cells but their presence in the column headers*/ padding-right: 9px; }

/* When we have a vertical line in the table cell, we don't need the extra pixel we put in .AFTableCellData:alias */ .AFTableCellDataVGrid:alias { padding-right: 8px; }

-tr-detail-column-width defines the width (in pixels) of the detail column (shown when the detail stamp facet is present).
af|table::column-resize-indicator Styles the column resize indicator when the user resizes a column in the table.
af|table::data-row Styles the row of the table that has data (as opposed to the header). Available pseudo-classes are :selected, :inactive (when it doesn't have focus), :drop-target (when you want to drag a row to another row using the drag and drop framework). Use this selector as an ancestor to af|column::data-cell or af|column::banded-data-cell.
af|table::status-message Styles the status message that shows up when the user scrolls the table. Includes the .AFDataCollectionStatusMessage:alias.
af|table::record-range-footer Style used for record range in printable pages.
af|table::detail-area-cell Style for the area where the detail stamp is rendered. This includes the .AFTableCellDataHGridBorder:alias.
af|table::disclosed-icon-style Style of the disclosed icon used with the detailStamp facet in table. The disclosed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the disclosed-icon. Includes .AFClickableImageAnchor:alias
af|table::undisclosed-icon-style Style of the undisclosed icon used with the detailStamp facet in table. The undisclosed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the undisclosed-icon. Includes .AFClickableImageAnchor:alias
.AFTableCellPadding:alias Specifies the padding of the cell in a column/table. If you want to change the padding of a cell, do it with this alias instead of with selectors af|column::column-header-cell, af|column::column-footer-cell, af|column::row-header-cell, af|column::data-cell, and af|column::banded-data-cell. This way you only have to change it in one place. The padding-right and padding-left defined here must match the af|table's skin property -tr-padding-left-width, -tr-padding-right-width. Note that when the header has borders and there are no borders in the table data area, then .AFTableCellData:alias also needs padding set and it needs to compensate for the no borders to keep things lined up.
.AFTableCellData:alias Specifies the border and padding of the data cell in a table. If you want to change the right/left border of a cell, do it with this alias instead of with selectors af|column::data-cell and af|column::banded-data-cell. This way you only have to change it in one place. The border-right and border-left defined here must match the af|table's skin property -tr-border-left-width, -tr-border-right-width. Padding is also set in this alias. By default, the padding-right is one pixel more than that in -tr-padding-right to compensate for no borders.
.AFTableCellHeaderBorder:alias Specifies the borders of the table row header and column header cells. The border-right and border-left defined here must match the af|table's skin property -tr-border-left-width, -tr-border-right-width
.AFTableCellDataHGrid:alias Specifies the border and padding for data cells when horizontal gridding is enabled.
.AFTableCellDataVGrid:alias Specifies the border and padding for data cells when vertical gridding is enabled.
.AFTableCellDataVHGrid:alias Specifies the border and padding for data cells when both horizontal and vertical gridding is enabled. Includes .AFTableCellDataHGrid:alias and .AFTableCellDataVGrid:alias.
.AFTableCellFrozenBorder:alias Specifies the right edge border for column cells that are at frozen. e.g. border-right: 1px solid #9900FF;. Specify .AFTableCellFrozenBorder:alias:rtl as border-left: 1px solid #9900FF;border-right: none;
.AFTableCellDataSelected:alias Specifies the style on the selected data cells; e.g. background-color. This is a shortcut for "af|table::data-row:selected af|column::data-cell" and "af|column::data-cell:selected"
.AFTableCellDataSelectedFocused:alias Specifies the style on the selected data cells that are part of currently active row; e.g. background-color. The active row is the one that was last selected by the user. The active row is valid only when the table has focus. This is a shortcut for "af|table::data-row:selected:focused af|column::data-cell".
.AFTableCellDataSelectedBanded:alias Specifies the style on the selected, banded data cells; e.g. background-color. This is a shortcut for "af|table::data-row:selected af|column::banded-data-cell" and "af|column::banded-data-cell:selected"
.AFTableCellDataSelectedBandedFocused:alias Specifies the style on the selected, banded data cells that are part of currently active row; e.g. background-color. The active row is the one that was last selected by the user. The active row is valid only when the table has focus. This is a shortcut for "af|table::data-row:selected:focused af|column::banded-data-cell".
.AFTableCellDataSelectedInactive:alias Specifies the style on the selected, inactive data cells; e.g. background-color.
.AFTableCellDataSelectedBandedInactive:alias Specifies the style on the selected, inactive, banded data cells; e.g. background-color.
.AFTableCellDataDropTargetColor:alias Specifies the background color for data cells that are a drop target during DnD operation.
.AFTableHeaderCellDataDropTargetColor:alias Specifies the background color for header cells that are a drop target during DnD operation.
Icon Selectors
Name Description
af|table::disclosed-icon Overrides the default disclosed icon used with the detailStamp facet in table.
af|table::undisclosed-icon Overrides the default undisclosed icon used with the detailStamp facet in table.
Resource Strings
Name Description
af_table.LABEL_REORDERING_COLUMN The message that is displayed on the browser while the table is re-fetched following the completion of a table re-order. Also used for af:treeTable.
af_table.LABEL_FETCHING The message that is displayed on the browser while the table is fetching data during initial load of data or while scrolling the table. Also used for af:tree and af:treeTable.
af_table.LABEL_END While scrolling the table quickly we show the row number when you have scrolled to the bottom of the virtual table. It is indicated by this label. This will happen in the known and unknown row counts. Also used for af:tree and af:treeTable.
af_table.LABEL_START While scrolling the table quickly we show the row number when you have scrolled to the top of the virtual table. It is indicated by this label. This will happen in the known and unknown row counts. Also used for af:tree and af:treeTable.
af_table.LABEL_ROW While scrolling the table quickly we show the row number based on the relative position of the cursor of the virtual table. It is indicated by this label. This will happen in the known and unknown row counts. Also used for af:tree and af:treeTable.
af_table.LABEL_SELECT_ROW In screenreader mode when a user has focus on a column header this lets the user know that there are rows selected. This is to warn them that selecting the column will unselect the rows. Also used for af:tree and af:treeTable.
af_table.LABEL_GOING_TO Label used to build the string to show the current location of the cursor in the viewport of the virtual table. This is combined with the LABEL_START, LABEL_END, and LABEL_ROW to produce the message shown during scrolling. Also used for af:tree and af:treeTable.
af_table.LABEL_ROW_RANGE_UNKNOWN_COUNT This is used in design time rendering of the table. This value should never be changed.
af_table.LABEL_ROW_RANGE_KNOWN_COUNT This is used in design time rendering of the table. This value should never be changed.
af_table.TIP_COLLAPSED_NODE Tooltip for the collapse icon used in the table.
af_table.TIP_EXPANDED_NODE Tooltip for the expand icon used in the table.
af_table.LABEL_HEADER_SUMMARY Attached to a table to describe that the table contains column headers. This is only available in screenreader mode.

af:toolbar Component

Style Selectors
Name Description
af|toolbar Selector that renders on the root dom element of the component. This style uses the AFLightAccentBackground and AFTextForeground aliases.
af|toolbar::body The main section of the toolbar where the items are, not including the end space to the right where the overflow-indicator appears.
af|toolbar::item Style applied to the toolbar item that is shown on a toolbar.
af|toolbar::separator Style applied to the toolbar separator. The separator appears on the toolbar when the toolbar has grouped toolbar items. This style uses the AFBarSeparator alias.
af|toolbar::overflow-indicator Style on the overflow indicator that is present when the toolbar items are overflowed beyond the available space. Available pseudo-classes are :hover and :active.
Icon Selectors
Name Description
af|toolbar::overflow-icon Overrides the default toolbar overflow icon. Icons can be text or img elements, e.g. af|toolbar::overflow-icon {content "X"} or af|toolbar::overflow-icon {content: url(...)}. Use this key instead of the af|toolbar::overflow-indicator key if you do not want a background-image.

af:toolbox Component

Style Selectors
Name Description
af|toolbox Selector that renders on the root dom element of the component.
af|toolbox::body Selector that renders on the body of the component, which contains all of the toolbox rows. This is used for the border of the component.
af:toolbox::row This is rendered for each leading row (before the last row) of the component. A border between rows is accomplished by setting border-bottom.
af:toolbox::last-row This is rendered on the last row of the component. A toolbox with only one row will have the last-row style. The border at the bottom of the toolbox is accomplished by setting border-bottom.
af:toolbox::leading-cell This is a leading cell (a cell before the last cell) in a toolbox row. Each toolbox row consists of 0 or more leading cells followed by a single last cell. These cells contain menubars or toolbars.
af:toolbox::last-cell The last cell in a toolbox row. Each toolbox row consists of 0 or more leading cells followed by a single last cell. These cells contain menubars or toolbars.

af:train Component

Style Selectors
Name Description
af|train Top level style class for the entire train component. The number of stops to be displayed step is also specified using the property -tr-visible-stop-count. Valid values must be integers and greater than zero.
af|train::body Styles the container which encloses both the train content and the start and end overflow indicators.
af|train::start-overflow-indicator Styles the start overflow indicator. The start indicator is specified using a background-image.
af|train::end-overflow-indicator Styles the end overflow indicator. The end indicator is specified using a background-image.
af|train::content Styles the container which encloses the train content (excluding the overflow indicators).
af|train::parent-start, af|train::parent-end Styles the block that encloses the parent-start (and parent-end) elements, such as its icon and label.
af|train::parent-start-icon-cell Styles the cell that displays the parent start icon.
af|train::parent-end-icon-cell Styles the cell that displays the parent end icon.
af|train::parent-start-content Styles the cell that displays the parent process name at the beginning of the train.
af|train::parent-end-content Styles the cell that displays the parent process name at the end of the train.
af|train::join Styles all joins between stops. Available pseudo-classes are :disabled, :unvisited, and :train-visited.
af|train::stop Cell that encloses all the stop elements including icon and content.
af|train::stop-icon-cell Styles the cell that displays the stop icon.
af|train::stop-icon-selected Used to set the background image for the selected stop.
af|train::stop-icon-disabled Used to set the background image for a disabled stop.
af|train::stop-icon-unvisited To set the background image for an unvisited enabled stop. Use pseudo-classes :hover and :active to customize look.
af|train::stop-icon-visited To set the background image for a visited stop. Use pseudo-classes :hover and :active to customize look.
af|train::stop-content Content block that displays the stop name. Use pseudo-class :selected to style content for the currently selected stop. :required to style the required indicator, if stop is selected.
af|train::stop-link To skin all links that display the stop name. The pseudo-classes :selected can be used to style a link for the currently selected stop. :disabled to style a disabled link. :visited for a visited enabled stop and :unvisited for an unvisited enabled stop. Due to a bug use :train-visited instead of :visited.
af|train::stop-icon-error To set the background image for a stop that is in error. This is overlaid on top of the stop icon.
af|train::stop-icon-warning To set the background image for a stop that has a warning. This is overlaid on top of the stop icon.
af|train::stop-icon-information To set the background image for a stop that has some information. This is overlaid on top of the stop icon.
af|train::stop-icon-confirmation To set the background image for a stop that has a confirmation status. This is overlaid on top of the stop icon.
Vertical Train Selectors
af|train-vertical Top level class for the train in the vertical layout. -vertical is used as a hint on the af|train root skin rather than a pseudo-class. This is because the layout of the vertical train is different from the horizontal and requires different skin selectors, hence they cannot be shared between the 2.
af|train-vertical::parent-start-icon-cell For the cell that displays the parent-start-icon.
af|train-vertical::parent-end-icon-cell For the cell that displays the parent-end-icon.
af|train-vertical::parent-start-content For the cell that displays the label of the parent train at the top of the vertical train.
af|train-vertical::parent-end-content For the cell that displays the label of the parent train at the bottom of the vertical train.
af|train-vertical::join For joins between stops in the vertical train. Use pseudo-classes :disabled, :unvisited, :train-visited to style joins before a disabled unvisited-enabled and visited-enabled (including the currently selected stop) respectively.
af|train-vertical::stop For a cell that displays the entire stop info. Only used in the vertical layout.
af|train-vertical::stop-icon-cell For the cell that displays the stop icon.
af|train-vertical::stop-icon-selected To set the background image for the currently selected stop.
af|train-vertical::stop-icon-disabled To set the background image for a disabled stop.
af|train-vertical::stop-icon-unvisited To set the background image for an unvisited enabled stop. Use pseudo-classes :rtl, :hover and :active to customize look.
af|train-vertical::stop-icon-visited To set the background image for a visited enabled stop. Use pseudo-classes :rtl, :hover and :active to customize look.
af|train-vertical::stop-content For the cell that displays the label of the stop, in a vertical train. Use pseudo-classes :selected to style content for the currently selected stop. :required to style the required indicator of a stop that is required.
af|train-vertical::stop-link For the link that displays the label of the stop, in a vertical train. Use pseudo-classes :selected, :disabled, :unvisited, :train-visited to style links when a stop is currently selected, disabled, unvisited-enabled and visited-enabled respectively.
af|train-vertical::stop-icon-error To set the background image for a stop that is in error (for vertical train). This is overlaid on top of the stop icon.
af|train-vertical::stop-icon-warning To set the background image for a stop that has a warning (for vertical train). This is overlaid on top of the stop icon.
af|train-vertical::stop-icon-information To set the background image for a stop that has some information (for vertical train). This is overlaid on top of the stop icon.
af|train-vertical::stop-icon-confiramtion To set the background image for a stop that has a confirmation status (for vertical train). This is overlaid on top of the stop icon.
Icon Selectors
Name Description
af|train::start-overflow-icon Overrides the start-overflow-indicator background image with an icon (high contrast mode). Icons can be text or img elements, e.g. af|train::start-overflow-icon {content "X"} or af|train::start-overflow-icon {content: url(...)}. Use this key instead of the start-overflow-indicator key to define the override icon. To inhibit the background-image, set -tr-inhibit: background-image in the start-overflow-indicator key.
af|train::end-overflow-icon Overrides the end-overflow-indicator background image with an icon (high contrast mode). Icons can be text or img elements, e.g. af|train::end-overflow-icon {content "X"} or af|train::end-overflow-icon {content: url(...)}. Use this key instead of the end-overflow-indicator key to define the override icon. To inhibit the background-image, set "-tr-inhibit: background-image" in the end-overflow-indicator key.
af|train::parent-start-icon This icon is displayed in the beginning of a train to indicate that the current train is a subtrain.
af|train::parent-end-icon This icon is displayed in the end of a train to indicate that the current train is a subtrain.
af|train-vertical::parent-start-icon This icon is displayed in the beginning of a train to indicate that the current train is a subtrain. Also supports the :rtl pseudo-class to define an icon in the RTL mode.
af|train-vertical::parent-end-icon This icon is displayed in the end of a train to indicate that the current train is a subtrain. Also supports the :rtl pseudo-class to define an icon in the RTL mode.
af|train::selected-stop-icon Train Stop icon for the currently selected stop. This can be used instead of a background-image on af|train::stop-icon-selected . By default this is null.
af|train::disabled-stop-icon Train Stop icon for a disabled stop. This can be used instead of a background-image on af|train::stop-icon-disabled . By default this is null.
af|train::unvisited-stop-icon Train Stop icon for an unvisited enabled stop. This can be used instead of a background-image on af|train::stop-icon-unvisited . By default this is null.
af|train::visited-stop-icon Train Stop icon for a visited enabled stop. This can be used instead of a background-image on af|train::stop-icon-visited . By default this is null.
af|train::stop-error-icon Message alert icon for a stop that is in error. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-error . By default this is null.
af|train::stop-warning-icon Message alert icon for a stop that has a warning. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-warning .By default this is null.
af|train::stop-information-icon Message alert icon for a stop that has some information. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-information . By default this is null.
af|train::stop-confirmation-icon Message alert icon for a stop that has a confirmation status. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-confirmation . By default this is null.
Icons specific to the vertical train
af|train-vertical::parent-start-icon This icon is displayed at the top of the train to indicate that the current train is a subTrain of another train.
af|train-vertical::parent-end-icon This icon is displayed at the bottom of the train to indicate that the current train is a subTrain of another train.
af|train-vertical::selected-stop-icon Train Stop icon for the currently selected stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-selected . By default this is null.
af|train-vertical::disabled-stop-icon Train Stop icon for a disabled stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-disabled . By default this is null.
af|train-vertical::unvisited-stop-icon Train Stop icon for an unvisited enabled stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-unvisited . By default this is null.
af|train-vertical::visited-stop-icon Train Stop icon for a visited enabled stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-visited . By default this is null.
af|train-vertical::stop-error-icon Message alert icon for a stop that is in error (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-error . By default this is null.
af|train-vertical::stop-warning-icon Message alert icon for a stop that has a warning (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-warning . By default this is null.
af|train-vertical::stop-information-icon Message alert icon for a stop that has some information (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-information . By default this is null.
af|train-vertical::stop-confiramtion-icon Message alert icon for a stop that has a confiramtion (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-confiramtion . By default this is null.
ADF Faces properties
Name Description
-tr-visible-stop-count Default value = 6. Determines the number of visible stops to be displayed in the train. Valid values must be integer and > 0. e.g. af|train {-tr-visible-stop-count:6} displays 6 stops (+ overflows).
Resource Strings
Name Description
af_train.TIP_STOP The hover text for the stop(s) in the train. This is usually prefixed with the text that indicates the state of the stop, like Visited, Current, Disabled and Unvisited. This text is defined below. See af_train_VISITED_STEP for e.g.
af_train.TIP_PARENT_TRAIN The hover text for the parent train indicator. Usually the step names of the parent (and up) are displayed.
af_train.LABEL_PARENT_TRAIN_SEPARATOR The separator used to concatenate the parent step names when the current train is nested more that one level deep. For e.g. Step 1 (separator) Step 1-1
af_train.TIP_STOP_ERROR The hover text for a stop that has one or more errors.
af_train.TIP_STOP_WARNING The hover text for a stop that has one or more warnings.
af_train.TIP_STOP_INFORMATION The hover text for a stop that has some information messages
af_train.TIP_STOP_CONFIRMATION The hover text for a stop that has a confirmation message.
af_train.TIP_SHOW_PREV_STEPS The hover text for the overflow icon (that displays the previous stops).
af_train.TIP_SHOW_NEXT_STEPS The hover text for the overflow icon (that displays the next stops).
af_train.VISITED_STEP The text used to refer to a visited stop. This is used in tooltip mentioned above.
af_train.ACTIVE_STEP The text used to refer to an active stop. This is used in tooltip mentioned above.
af_train.UNVISITED_STEP The text used to refer to an unvisited stop. This is used in tooltip mentioned above.
af_train.DISABLED_STEP The text used to refer to a disabled stop. This is used in tooltip mentioned above.

af:trainButtonBar Component

Style Selectors
Name Description
af|trainButtonBar Top level style class for the trainButtonBar component.
af|trainButtonBar::button-cell Cell that encloses each button in the trainButtonBar component.
af|trainButtonBar::back-button Style class for the Back button in the trainButtonBar component. The pseudo-elements :hover, :active and :disabled can be used with this skin class. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|trainButtonBar::next-button Style class for the Next button in the trainButtonBar component. The pseudo-elements :hover, :active and :disabled can be used with this skin class. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|trainButtonBar::access-key Skin to style the access key character in the button text.
Resource Strings
Name Description
af_trainButtonBar.LABEL_BACK The label and tooltip on the back button.
af_trainButtonBar.LABEL_NEXT The label and tooltip on the next button.

af:tree Component

Style Selectors
Name Description
af|tree Styles the root dom element of the component. The root style contains skinning property "-tr-node-disclosure-animation-duration" that specifies the animation duration for expand/collapse of the tree nodes. This skin property is honored only if the animation is enabled in the system.
af|tree::data-row Specifies styling for text in a tree node. The valid pseudo-classes are :selected, :focused, :inactive and :drop-target. ":selected" pseudo-class is used to specify styling for a selected row. ":selected:inactive" specifies styling for a selected row, when the tree control does not have focus. ":focused" specifies styling for a row that has current focus in the tree (Use CTRL+arrow key to move focus from the selected item). ":drop-target" specifies styling for a row that is a drop target during DnD operation.
af|tree::node-stamp-text The selector for the text of each node stamp. For example, to style the node stamps within a selected row, you can do this: "af|tree::data-row:selected af|tree::node-stamp-text"
af|tree::status-message Styles the status message that shows up when the user scrolls the tree. Includes the .AFDataCollectionStatusMessage:alias.
af|tree::expanded-icon-style Style of the expanded icon used with the tree component. The expanded icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the expanded-icon-style and define the override icon for the expanded-icon. Includes .AFClickableImageAnchor:alias
af|tree::collapsed-icon-style Style of the collapsed icon used with the tree component. The collapsed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the collapsed-icon-style and define the override icon for the collapsed-icon. Includes .AFClickableImageAnchor:alias
af|tree::leaf-icon-style Style of the leaf icon used with the tree component. The leaf icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the leaf-icon-style and define the override icon for the leaf-icon. Includes .AFClickableImageAnchor:alias
af|tree::node-anim-icon-style Style of the animation icon used with the tree component when fetching data for expanded nodes. The animation icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the node-anim-icon-style and define the override icon for the node-anim-icon. Includes .AFClickableImageAnchor:alias
af|tree::selector-icon-style Style of the selector icon used with the tree component. The selector icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the selector-icon-style and define the override icon for the selector-icon. Includes .AFClickableImageAnchor:alias
Icon Selectors
Name Description
af|tree::expanded-icon Overrides the default expanded icon for the tree component.
af|tree::collapsed-icon Overrides the default collapsed icon for the tree component.
af|tree::leaf-icon Overrides the default leaf icon for the tree component.
af|tree::node-anim-icon Overrides the default node animation icon for the tree component.
af|tree::selector-icon Overrides the default selector icon for the tree component.
ADF Faces properties
Name Description
-tr-node-indentation The property used to indicate how much child tree nodes should be indented with respect to the parent nodes. The default value is 16 pixels.
Resource Strings
Name Description
af_tree.TIP_COLLAPSED_NODE Tooltip on the collapse icon. Also used for af:treeTable.
af_tree.TIP_EXPANDED_NODE Tooltip on the expand icon. Also used for af:treeTable.
af_tree.TIP_HIERARCHICAL_SELECTOR Tooltip on the hierarchical selector icon. Also used for af:treeTable.
af_tree.TIP_GO_TO_TOP Tooltip on the go to top icon. Also used for af:treeTable.
af_tree.TIP_NODE_LEVEL Tooltip to identify the node level. This string can contain {0} in it to be replaced with the node level. This is used for screenreader mode only. Also used for af:treeTable.

af:treeTable Component

The treeTable is a table component with a tree in it. Therefore most of the style selectors from af:table apply to af:treeTable as well and you cannot skin the treeTable separately from table. You can skin the treeTable's icons/icon-styles.

Style Selectors
af|treeTable Styles the root dom element of the component. The root style contains skinning property "-tr-node-disclosure-animation-duration" that specifies the animation duration for expand/collapse of the tree nodes. This skin property is honored only if the animation is enabled in the system.
af|treeTable::expanded-icon-style Style of the expanded icon used with the treeTable component. The expanded icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the expanded-icon-style and define the override icon for the expanded-icon. Includes .AFClickableImageAnchor:alias
af|treeTable::collapsed-icon-style Style of the collapsed icon used with the treeTable component. The collapsed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the collapsed-icon-style and define the override icon for the collapsed-icon. Includes .AFClickableImageAnchor:alias
af|treeTable::leaf-icon-style Style of the leaf icon used with the treeTable component. The leaf icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the leaf-icon-style and define the override icon for the leaf-icon. Includes .AFClickableImageAnchor:alias
af|treeTable::node-anim-icon-style Style of the animation icon used with the treeTable component when fetching data for expanded nodes. The animation icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the node-anim-icon-style and define the override icon for the node-anim-icon. Includes .AFClickableImageAnchor:alias
af|treeTable::selector-icon-style Style of the selector icon used with the treeTable component. The selector icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the selector-icon-style and define the override icon for the selector-icon. Includes .AFClickableImageAnchor:alias
Icon Selectors
Name Description
af|treeTable::expanded-icon Overrides the default expanded icon for the treeTable component.
af|treeTable::collapsed-icon Overrides the default collapsed icon for the treeTable component.
af|treeTable::leaf-icon Overrides the default leaf icon for the treeTable component.
af|treeTable::node-anim-icon Overrides the default node animation icon for the treeTable component.
af|treeTable::selector-icon Overrides the default selector icon for the treeTable component.
ADF Faces properties
Name Description
-tr-node-indentation The property used to indicate how much child tree nodes should be indented with respect to the parent nodes. The default value is 16 pixels.
Resource Strings
Name Description
See af:tree and af:table for Resource Strings.