Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors
12c (12.2.1.4.0)

E81452-01
Selectors for Skinning ADF Faces Components

Overview

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

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

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

Global Selectors

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.

Color

are included in other components. Then to change the color scheme, you would change these core/accent color ramps and it will affect all the components it is including in.

Color->Unclassified Color

Colors that are not classified as either Anchor, Derivative, or Specialty colors.
Selector Name Description Conditions
.AFVeryDarkBackground:alias The darkest background color in the core color ramp. Only used by fusion skins.
.AFVeryDarkForeground:alias The darkest foreground color in the core color ramp. Only used by fusion skins.
.AFDarkBackground:alias The dark background color in the core color ramp. Only used by fusion skins.
.AFDarkForeground:alias The dark foreground color in the core color ramp. Only used by fusion skins.
.AFMediumBackground:alias The medium background color in the core color ramp. Only used by fusion skins.
.AFMediumForeground:alias The medium foreground color in the core color ramp. Only used by fusion skins.
.AFLightBackground:alias The light background color in the core color ramp. Only used by fusion skins.
.AFLightForeground:alias The light foreground color in the core color ramp. Only used by fusion skins.
.AFVeryLightBackground:alias The very light background color in the core color ramp. Only used by fusion skins.
.AFVeryLightForeground:alias The very light foreground color in the core color ramp. Only used by fusion skins.
.AFVeryDarkAccentBackground:alias The darkest background color in the accent color ramp. Only used by fusion skins.
.AFVeryDarkAccentForeground:alias The darkest foreground color in the accent color ramp. Only used by fusion skins.
.AFDarkAccentBackground:alias The dark background color in the accent color ramp. Only used by fusion skins.
.AFDarkAccentForeground:alias The dark foreground color in the accent color ramp. Only used by fusion skins.
.AFMediumAccentBackground:alias The medium background color in the accent color ramp. Only used by fusion skins.
.AFMediumAccentForeground:alias The medium foreground color in the accent color ramp. Only used by fusion skins.
.AFLightAccentBackground:alias The light background color in the accent color ramp. Only used by fusion skins.
.AFLightAccentForeground:alias The light foreground color in the accent color ramp. Only used by fusion skins.
.AFVeryLightAccentBackground:alias The lightest background color in the accent color ramp. Only used by fusion skins.
.AFVeryLightAccentForeground:alias The lightest foreground color in the accent color ramp. Only used by fusion skins.
.AFBrightBackground:alias A bright background color that is often used when hovering Only used by fusion skins.
.AFBrightForeground:alias A bright foreground color that is often used when hovering Only used by fusion skins.
.AFLightBrightBackground:alias A light bright background color that is often used when hovering Only used by fusion skins.
.AFLightBrightForeground:alias A light bright foreground color that is often used when hovering Only used by fusion skins.
.AFHighlightBackground:alias A light color that often indicates "inactive selected", for example this color might be used on a table row that is selected when the table does not have focus. Only used by fusion skins.
.AFDarkestNeutralBackground:alias This is the darkest background color in the neutral color ramp, for example black. Only used by fusion skins.
.AFDarkestNeutralForeground:alias This is the darkest foreground color in the neutral color ramp, for example black. Only used by fusion skins.
.AFLightNeutralBackground:alias The light background color in the neutral color ramp. Only used by fusion skins.
.AFLightNeutralForeground:alias The light foreground color in the neutral color ramp. Only used by fusion skins.
.AFLightestNeutralBackground:alias The lightest background color in the neutral color ramp, for example white. Only used by fusion skins.
.AFLightestNeutralForeground:alias The lightest foreground color in the neutral color ramp, for example white. Only used by fusion skins.
.AFDisabledBackground:alias The disabled background color used to color components in a disabled state, like disabled buttons or content in a disabled inputText. Only used by fusion skins.

Color->Anchor Color

The core anchor color aliases.
Selector Name Description Conditions
.AFAccordionHeaderGradientStartColor:alias Accordion header start gradient background color. Only used by alta skins.
.AFActiveColor:alias Color used when the component is active Only used by alta skins.
.AFBackground2Color:alias A background color used in the main content area of your page. This background color is typically used when providing a layered look in the content area. For example, the background color for the decorative box theme = medium. See also AFBackgroundColor. Only used by alta skins.
.AFBackgroundBorderColor:alias A border color used for the main content area of your page. For example, the border color for the content area of the selected tab or the the background color for the decorative box theme = default/light. See also AFBackgroundBorder2Color. Only used by alta skins.
.AFBackgroundColor:alias A background color used for the main content area of your page. For example, the background color for the content area of the selected tab or the the background color for the decorative box theme = default/light. See also AFBackground2Color. Only used by alta skins.
.AFBrandingBackgroundColor:alias Background color for the branding area. Only used by alta skins.
.AFBrandingBorderColor:alias Border color for the branding area. Only used by alta skins.
.AFBrandingLinkActiveColor:alias Color for active links in the branding area. Only used by alta skins.
.AFBrandingLinkColor:alias Color for visited links in the branding area. Only used by alta skins.
.AFBrandingLinkDisabledColor:alias Color of disabled links in branding area. Only used by alta skins.
.AFBrandingLinkVisitedColor:alias Color for visited links in the branding area. Only used by alta skins.
.AFBrandingTextColor:alias Color of the text in the branding area. Only used by alta skins.
.AFButtonBorderColor:alias Left, top, and right border color for a button. Only used by alta skins.
.AFButtonDisabledColor:alias Color for the Disabled button. Only used by alta skins.
.AFButtonGradientStartColor:alias The start gradient color for a button. Only used by alta skins.
.AFButtonHoverColor:alias The hover color for a button. Only used by alta skins.
.AFComponentBackgroundColor:alias Color used in many of our data view and container components for the background of their content areas. For example, the content body background of the PanelAccordion or the background of cells in a table. By default, this is the same color as the AFBackgroundColor. Only used by alta skins.
.AFDecorativeColor:alias Color used as decoration background for the document. Only used by alta skins.
.AFDropTargetColor:alias Color used during drag and drop. Specifically, the backround color of the drop target. Only used by alta skins.
.AFFormControlContentBorderColor:alias Border color for form control content. Only used by alta skins.
.AFFormControlContentColor:alias Background color for form control content. Only used by alta skins.
.AFFormControlContentDisabledColor:alias Disabled form control content background color. Only used by alta skins.
.AFGridCellActiveColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). Specifically, the background color for a grid cell in active state. Only used by alta skins.
.AFGridCellSelectedInactiveColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). Specifically, the grid cell background color when selected and inactive. Only used by alta skins.
.AFGridControl2Color:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). For example, the row headers in the table or the filter bar in the pivot table. Only used by alta skins.
.AFGridControlColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). For example, the background of the column header, status bar, footer row of the table and the legend area and header in Scheduling Gantt. Only used by alta skins.
.AFGridDragLineColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). Specifically, the grid drag line color. Only used by alta skins.
.AFHeaderTextColor:alias Color used as for header text across our components. For example, the titles in PanelHeader, Query, and PanelAccordion. Only used by alta skins.
.AFHoverPrimaryColor:alias An accent color used sparingly in select components, generally for highlighting on hover. For example, splitter control highlight on hover or table row header on hover. Only used by alta skins.
.AFHoverSecondaryColor:alias An accent color used sparingly in select components, generally for highlighting on hover. For example, table cell background color on hover. Only used by alta skins.
.AFIconColor:alias Color used for Icons Only used by alta skins.
.AFIconDisabledColor:alias Color used for disabled Icons Only used by alta skins.
.AFLinkActiveColor:alias Color for links in the active state. Only used by alta skins.
.AFLinkColor:alias The default foreground color for links. Only used by alta skins.
.AFLinkVisitedColor:alias Color for links in the visited state. Only used by alta skins.
.AFPanelBorderColor:alias Border color used in many of our panel components such as panelBox, panelHeader etc. Only used by alta skins.
.AFRequiredColor:alias Color of required field indicator for form components. Only used by alta skins.
.AFSelectedColor:alias Color used to indicate a selected state. For example, background color for the selected node in a tree or background of selected choice in a dropdown. Only used by alta skins.
.AFShadowColor:alias Shadow color for popup and windows. Only used by alta skins.
.AFSliderTickMarkColor:alias Slider tick mark color. Only used by alta skins.
.AFTabBorderColor:alias Default tab border color. Only used by alta skins.
.AFTabColor:alias Default background color of tabs in PanelTabbed and NavigationPane (hint=tabs). Only used by alta skins.
.AFTabDisabledColor:alias Disabled Tab background color. Only used by alta skins.
.AFTextAltColor:alias Color of the foreground of badge. Only used by alta skins.
.AFTextColor:alias Color of the default font for text. Only used by alta skins.
.AFTextDisabledColor:alias Color of disabled text. Only used by alta skins.
.AFTextShadowColor:alias Color for the text shadow used in components like Button. Only used by alta skins.
.AFWindowBorderColor:alias Window barder color. Only used by alta skins.

Color->Derivative Color

Color aliases are are derivatives of the core anchor color aliases.
Selector Name Description Conditions
.AFAccordionBorderColor:alias Accordion border color. Only used by alta skins.
.AFAccordionHeaderGradientEndColor:alias Accordion header end gradient background color. Only used by alta skins.
.AFBackground2BorderColor:alias Background left, top, and right border color. Only used by alta skins.
.AFButtonActiveColor:alias Color for active buttons. Only used by alta skins.
.AFButtonBorderActiveColor:alias Left, top, and right border color for an active button. Only used by alta skins.
.AFButtonBorderDisabledColor:alias Specifies the border for buttons in the disabled state. Only used by alta skins.
.AFButtonBorderHoverColor:alias Specifies the border for buttons in the hover state. Only used by alta skins.
.AFButtonGradientEndColor:alias The end gradient color for a button. Only used by alta skins.
.AFButtonGradientStop1Color:alias The 1st gradient stop color for a button. Only used by alta skins.
.AFButtonGradientStop2Color:alias The 2nd gradient stop color for a button. Only used by alta skins.
.AFButtonHoverSecondaryColor:alias Secondary Hover color used by buttons Only used by alta skins.
.AFButtonTextActiveColor:alias Text color for buttons when they are in active state. Only used by alta skins.
.AFButtonTextHoverColor:alias Text color for buttons when the use does a mouse hover on them. Only used by alta skins.
.AFCodeEditorLineNumberTextColor:alias Line number text color for code editor. Only used by alta skins.
.AFComponentBackground2Color:alias A secondary color used in some of our data view and container components. This is slightly stronger color than the AFComponentBackgroundColor to provide contrast. For example, the background of the banded data cells of the background color of a modal dialog. Only used by alta skins.
.AFDropTarget2Color:alias Second drop target color used during drag and drop in some components. Only used by alta skins.
.AFFormControlContentBorderDisabledColor:alias Disabled form control content border color. Only used by alta skins.
.AFGridCellBorderColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). Specifically, the grid cell border color. Only used by alta skins.
.AFGridControlActiveColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). For example, the background color for the header when in active state. Only used by alta skins.
.AFGridControlSelectedColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). For example, the background color for the header when in selected state. Only used by alta skins.
.AFGridControlSelectedInactiveColor:alias Color used in many of our grid style components (ie. Table, Pivot Table, Calendar, Scheduling Gannt). Specifically, the background color for the header when selected and inactive. Only used by alta skins.
.AFHelpBorderColor:alias Help border color. Only used by alta skins.
.AFIconActiveColor:alias Color for inactive icons. Only used by alta skins.
.AFIconHoverColor:alias Color for hover icon Only used by alta skins.
.AFLabelColor:alias Color used for form control labels. It is slightly lighter than the default font color. Only used by alta skins.
.AFLinkDisabledColor:alias Disabled link color. Only used by alta skins.
.AFSliderHighlightDisabledColor:alias Highlight color for the slider Only used by alta skins.
.AFSliderTickMarkZeroColor:alias Slider tick mark at zero color. Only used by alta skins.
.AFTabBorderDisabledColor:alias Disabled tab border color. Only used by alta skins.
.AFTextPrimaryColor:alias Color used sparingly in select components. It is stronger than the default font color. For example, the header, row and footer labels in the table and the selected tab text. Only used by alta skins.
.AFTextSecondaryColor:alias Color used sparingly in select components. It is slightly lighter than the default font color. For example, instrucional text. Only used by alta skins.
.AFTextTertiaryColor:alias Color used sparingly in select components. It is lighter than the default font color. For example, placeholder text in inputText. Only used by alta skins.
.AFDialogShadowColor:alias Defines the color and opacity (rgba) used by the dialog and panelWindow popup shadows. Only used by alta skins.
.AFNoteWindowShadowColor:alias Defines the color and opacity (rgba) used by the noteWindow popup shadows. Only used by alta skins.
.AFInlineSelectorShadowColor:alias Defines the color and opacity (rgba) used by the inline selector popup shadows. Only used by alta skins.

Color->Specialty Color

Infrequently used specialty color aliases.
Selector Name Description Conditions
.AFActiveDataColor:alias Active data background color when twinkle is on. Only used by alta skins.
.AFCalendarTodayBackgroundColor:alias Background color of the element that represents today in the Calendar. Only used by alta skins.
.AFCodeEditorAreaActiveColor:alias Background color for code editor active area. Only used by alta skins.
.AFCodeEditorAreaHighlightColor:alias Code editor highlight color. Only used by alta skins.
.AFCodeEditorBackgroundColor:alias Background color for the code editor. Only used by alta skins.
.AFCodeEditorBackgroundDisabledColor:alias Code Editor disabled background color. Only used by alta skins.
.AFCodeEditorBackgroundReadOnlyColor:alias Code Editor read only background color. Only used by alta skins.
.AFCodeEditorBorderColor:alias Code Editor border color. Only used by alta skins.
.AFCodeEditorErrorColor:alias Color to distinguish errors in code editor. Only used by alta skins.
.AFCodeEditorLineGutterBackgroundColor:alias Background color in the code editor Line Gutter. Only used by alta skins.
.AFCodeEditorLineGutterBorderColor:alias Border color for the code editor Line Gutter. Only used by alta skins.
.AFCodeEditorLineNumberBorderColor:alias Border color for the code editor Line Number column. Only used by alta skins.
.AFCodeEditorTextColor:alias Color for the text in the code editor. Only used by alta skins.
.AFCodeEditorTextDisabledColor:alias Color for the disabled text in the code editor. Only used by alta skins.
.AFCodeEditorToolbarBackgroundColor:alias Background color for the toolbar in the code editor Only used by alta skins.
.AFCodeEditorWarningColor:alias Color to distinguish warnings in code editor. Only used by alta skins.
.AFDateDisabledColor:alias Color used for numeral text of for disabled days in the inputDate component. It is lighter than the default font color. Only used by alta skins.
.AFDateNextColor:alias Next date color. Only used by alta skins.
.AFErrorColor:alias Color to distinguish errors. Only used by alta skins.
.AFFreezeLineColor:alias Freeze line color. Only used by alta skins.
.AFPageStampTextColor:alias Page stamp text color. Only used by alta skins.
.AFPanelBoxCoreLightColor:alias Background color used in the panel box. Only used by alta skins.
.AFPanelBoxCoreMediumColor:alias Background color used in the panel box. Only used by alta skins.
.AFSliderDisabledColor:alias Color used for disabled tick mark in the slider. It is lighter than the default font color. Only used by alta skins.
.AFSwatchBorderColor:alias Swatch border color. Only used by alta skins.
.AFWarningColor:alias Color to distinguish warnings. Only used by alta skins.
.AFSelectBorderColor:alias Border color of select components. Only used by alta skins.
.AFSelectActiveBorderColor:alias Border color of select components in active state. Only used by alta skins.
.AFSelectBackgroundActiveColor:alias Background color of select components in active state. Only used by alta skins.
.AFSelectSelectedMarkerBackgroundColor:alias Background color of selected marker element of select components. Only used by alta skins.

Font

Selector Name Description Conditions
.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.
.AFDefaultBoldFont:alias Includes AFDefaultFont:alias, and sets the font-weight to bold.
.AFDefaultFontFamily:alias Specifies the default font family list ("font-family" property) for the skin.
.AFDefaultFontSize:alias Specifies the default font size ("font-size" property) for the skin (new in alta).
.AFSmallHeaderFont:alias Specifies the font for small sized header text.
.AFMediumHeaderFont:alias Specifies the font for medium sized header text.
.AFLargeHeaderFont:alias Specifies the font for large sized header text.

Text

Selector Name Description Conditions
.AFTextForeground:alias Specifies the color of the font for text. Only used by fusion skins.
.AFLightTextForeground:alias Specifies the color of lighter text in the page, typically used against darker themes background. Only used by fusion skins.
.AFLightLabelTextForeground:alias Specifies the color of lighter label text in the page, typically used against darker themes background. Only used by fusion skins.
.AFTextBackground:alias Specifies the background-color of the font for text. Only used by fusion skins.
.AFErrorTextForeground:alias Style that is used for the color of error text. Only used by fusion skins.
.AFInstructionText Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFInstructionTextDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFFieldText Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFFieldTextDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFFieldTextLTR Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFFieldTextLTRDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFPhoneFieldText Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFPhoneFieldTextDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFPostalCodeFieldText Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFPostalCodeFieldTextDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFAddressFieldText Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFAddressFieldTextDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFDataText Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFDataTextDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFDataNumber Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFDataNumberDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFFieldNumber Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.
.AFFieldNumberDisabled Built-in style that can be used as a styleClass attribute value. To style input components, you would use the style classes that end in 'Marker'. See skinning doc for af:inputText for details.

Icons

To render as text, you specify a string for the content, e.g., content:"X". To specify an image, you set the content to an url, e.g., content: url('/afr/fusion/dbd_topShadow.png');". The remaining styles get rendered as inline styles on the dom element.
Selector Name Description Conditions
.AFChangedIcon:alias An alias that defines the changed icon, e.g., .AFChangedIcon:alias {content:"C"; color: Aqua; font-weight: bold; padding: 3px}
.AFRequiredIcon:alias An alias that defines the required icon. This icon shows up if a component is set to be required or if you set the af:icon's name attribute to required.
.AFLogoIcon:alias An alias that defines the logo icon. This icon shows up if you set the af:icon's name attribute to logo.
.AFFatalIcon:alias An alias that defines the fatal icon. This icon shows up if a fatal error has occurred on the page or if you set the af:icon's name attribute to fatal.
.AFErrorIcon:alias An alias that defines the error icon. This icon shows up if an error has occurred on the page or if you set the af:icon's name attribute to error.
.AFWarningIcon:alias An alias that defines the warning icon. This icon shows up if a warning has occurred on the page or if you set the af:icon's name attribute to error.
.AFInfoIcon:alias An alias that defines the info icon. This icon shows up if you set the af:icon's name attribute to info.
.AFConfirmationIcon:alias An alias that defines the confirmation icon. This icon shows up if you set the af:icon's name attribute to confirmation.
.AFIndexedIcon:alias An alias that defines the indexed field icon. This icon shows up before the selectively required fields in the af:query.
.AFStatusIcon:alias This icon gives a graphical representation that content is loading (e.g. carousel, inlineFrame). If you are editing this alias, you should also edit .AFStatusIconStyle:alias and .AFBackgroundImageStatus:alias since components will choose among these icons automatically under the necessary circumstances. This typically defines a content URL for an animated image, the width of this image, and the height of this image.

Component Group: Button

Selector Name Description Conditions
.AFButtonAccessKeyStyle:alias Specifies the access key style for af|Button, af|commandButton, af|goButton, af|resetButton.
.AFButtonBackground:alias Specifies the background for buttons that include this style alias, like af|button, 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).
.AFButtonForeground:alias Specifies the foreground for buttons.
.AFButtonForegroundHover:alias Specifies the foreground for buttons in the hover state.
.AFButtonForegroundDepressed:alias Specifies the foreground for buttons in the depressed state.
.AFButtonForegroundDepressedHover:alias Specifies the foreground for buttons in the depressed as well as hover state.
.AFButtonForegroundDisabled:alias Specifies the foreground for buttons in the disabled state.
.AFButtonBorder:alias Specifies the border for buttons that include this style alias, like af|button, af|commandButton, af|goButton, af|resetButton.
.AFButtonBorderActive:alias Specifies the border for buttons in the active state.
.AFButtonBorderDepressed:alias Specifies the border for buttons in the depressed state.
.AFButtonBorderDisabled:alias Specifies the border for buttons in the disabled state.
.AFButtonBorderHover:alias Specifies the border for buttons in the hover state.
.AFButtonGradient:alias Gradient alias. Only used in the blafplus skins.
.AFButtonGradientHover:alias Gradient alias. Only used in the blafplus skins.
.AFButtonGradientActive:alias Gradient alias. Only used in the blafplus skins.

Component Group: Link

Selector Name Description Conditions
.AFLinkAccessKeyStyle:alias Highlight the Access Key for the link, e.g. bold it.
.AFLinkForeground:alias The default foreground color for links. Only used by fusion skins.
.AFLinkHover:alias Specifies the style for links in hover state.
.AFLinkDisabled:alias Styles the disabled link.
.AFVisitedLinkBackground:alias The default background color for links. Only used by fusion skins.
.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. Only used by fusion skins.
.AFVisitedLinkForeground:alias The foreground color for visited links. This value may be or may not be computed relative to the .AFLinkForeground:alias color. Only used by fusion skins.
.AFLightVisitedLinkForeground:alias The light foreground color for visited links. This value may be or may not be computed relative to the .AFLinkForeground:alias color. Only used by fusion skins.
.AFDisabledLinkForeground:alias The foreground color for disabled links. This value may be or may not be computed relative to the .AFLinkForeground:alias color. Only used by fusion skins.
.AFGlobalLink:alias The default foreground color for 'global' links, like navigationPane's links. Only used by fusion skins.

Component Group: Form Controls

Selector Name Description Conditions
.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. Only used by fusion skins.
.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. Only used by fusion skins.
.AFFormAccessKeyStyle:alias Style the access key (like underline or bold) for form components. Affects output labels, input, panelLabelAndMessage, af:select* components.
.AFFormControlContentBackground:alias Style the background of form control content like af|inputText::content.
.AFFormControlContentBackgroundDisabled:alias Style the background of form control content for the disabled state like af|inputText:disabled::content.
.AFFormControlContentForegroundDisabled:alias Style the foreground of form control content for the disabled state like af|selectBooleanRadio:disabled::content.
.AFFormControlContentBorder:alias Style the border of form control content like af|inputText::content.

Component Group: Menu

Selector Name Description Conditions
.AFMenuItem:alias Style class that applies to menu items. Valid menu items are either commandMenuItems, goMenuItems, or submenus (menus in menus).
.AFMenuTextForeground:alias Style class that applies to menu items. Valid menu items are either commandMenuItems, goMenuItems, or submenus (menus in menus). The default foreground color for menu items. By default, this value is set to the .AFTextForeground:alias color. Only used by fusion skins.
.AFMenuItemDisabled:alias Style class that applies to disabled menu items. Valid menu items are either commandMenuItems, goMenuItems, or submenus (menus in menus).

Component Group: PanelBox and Region

Selector Name Description Conditions
.AFPanelBoxHeaderStartDefault:alias Alias for the style for the start corner in the header of the panel box and region. Usually the curve image. Only used by fusion skins.
.AFPanelBoxHeaderEndDefault:alias Alias for the style for the end corner in the header of the panel box and region. Usually the curved image. Only used by fusion skins.
.AFPanelBoxHeaderCenterDefault:alias Alias for the style for the center area in the header of the panel box and region. Only used by fusion skins.
.AFPanelBoxFooterStartDefault:alias Alias for the style for the start corner in the footer of the panel box and region. Usually the curved image. Only used by fusion skins.
.AFPanelBoxFooterEndDefault:alias Alias for the style for the end corner in the footer of the panel box and region. Usually the curve image. Only used by fusion skins.
.AFPanelBoxFooterCenterDefault:alias Alias for the style for the center area in the footer of the panel box and region. Only used by fusion skins.
.AFPanelBoxContentCenterDefault:alias Alias for the style for the content area of the panel box and region.
.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. Only used by fusion skins.
.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. Only used by fusion skins.
.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. Only used by fusion skins.

Component Group: PanelHeader

Selector Name Description Conditions
.AFPanelHeaderTitleStartLevel1:alias Specifies style for the start corner of the title area in a level 1 panel header. Usually the curved image.
.AFPanelHeaderTitleCenterLevel1:alias Specifies style for the center of the title area in a level 1 panel header.
.AFPanelHeaderTitleEndLevel1:alias Specifies style for the end corner of the title area in a level 1 panel header. Usually just the curved image.
.AFPanelHeaderTitleStartSubLevels:alias Specifies style for the start corner of the title area in a panel header that is not at the first level. Usually the curved image.
.AFPanelHeaderTitleCenterSubLevels:alias Specifies style for the center of the title area in a panel header that is not at the first level.
.AFPanelHeaderTitleEndSubLevels:alias Specifies style for the end corner of the title area in a panel header that is not at the first level. Usually the curved image.
.AFPanelHeaderContentLevel1:alias Specifies style for the content area of the panel header at the first level.

Component Group: Tabs

Component Group: Tabs->Default

Default aliases for Tabs.
Default->Selected
Default aliases for selected Tabs.
Selector Name Description Conditions
.AFTabAboveStartSelectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the above start portion of an selected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleSelectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the above middle portion of an selected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndSelectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the above end portion of an selected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartSelectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the below start portion of an selected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleSelectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the below middle portion of an selected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndSelectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the below end portion of an selected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
Default->Unselected
Default aliases for unselected Tabs.
Selector Name Description Conditions
.AFTabAboveStartUnselectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the above start portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleUnselectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the above middle portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndUnselectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the above end portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartUnselectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the below start portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleUnselectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the below middle portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndUnselectedBackground:alias Selector used only in the blafplus and fusion skins to define the background-image of the below end portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabAboveStartUnselectedDisabledBackground:alias Selector used only in the fusion skins to define the background-image of the disabled above start portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleUnselectedDisabledBackground:alias Selector used only in the fusion skins to define the background-image of the disabled above middle portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndUnselectedDisabledBackground:alias Selector used only in the fusion skins to define the background-image of the disabled above end portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartUnselectedDisabledBackground:alias Selector used only in the fusion skins to define the background-image of the disabled below start portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleUnselectedDisabledBackground:alias Selector used only in the fusion skins to define the background-image of the disabled below middle portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndUnselectedDisabledBackground:alias Selector used only in the fusion skins to define the background-image of the disabled below end portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabAboveStartUnselectedHoverBackground:alias Selector used only in the blafplus skins to define the background-image of the hover above start portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleUnselectedHoverBackground:alias Selector used only in the blafplus skins to define the background-image of the hover above middle portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndUnselectedHoverBackground:alias Selector used only in the blafplus skins to define the background-image of the hover above end portion of an unselected level 3 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartUnselectedHoverBackground:alias Selector used only in the blafplus skins to define the background-image of the hover below start portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleUnselectedHoverBackground:alias Selector used only in the blafplus skins to define the background-image of the hover below middle portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndUnselectedHoverBackground:alias Selector used only in the blafplus skins to define the background-image of the hover below end portion of an unselected level 3 section of a tab created by af:panelTabbed. Only used by fusion skins.

Component Group: Tabs->Level One

Aliases for level one Tabs.
Level One->Selected
Aliases for level one selected Tabs.
Selector Name Description Conditions
.AFTabAboveStartSelectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above start portion of an selected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleSelectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above middle portion of an selected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndSelectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above end portion of an selected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartSelectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below start portion of an selected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleSelectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below middle portion of an selected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndSelectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below end portion of an selected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
Level One->Unselected
Aliases for level one unselected Tabs.
Selector Name Description Conditions
.AFTabAboveStartUnselectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above start portion of an unselected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleUnselectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above middle portion of an unselected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndUnselectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above end portion of an unselected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartUnselectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below start portion of an unselected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleUnselectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below middle portion of an unselected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndUnselectedLevel1Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below end portion of an unselected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabAboveStartUnselectedDisabledLevel1Background:alias Selector used only in the fusion skins to define the background-image of the disabled above start portion of an unselected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleUnselectedDisabledLevel1Background:alias Selector used only in the fusion skins to define the background-image of the disabled above middle portion of an unselected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndUnselectedDisabledLevel1Background:alias Selector used only in the fusion skins to define the background-image of the disabled above end portion of an unselected level 1 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartUnselectedDisabledLevel1Background:alias Selector used only in the fusion skins to define the background-image of the disabled below start portion of an unselected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleUnselectedDisabledLevel1Background:alias Selector used only in the fusion skins to define the background-image of the disabled below middle portion of an unselected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndUnselectedDisabledLevel1Background:alias Selector used only in the fusion skins to define the background-image of the disabled below end portion of an unselected level 1 section of a tab created by af:panelTabbed. Only used by fusion skins.

Component Group: Tabs->Level Two

Aliases for level two Tabs.
Level Two->Selected
Aliases for level two selected Tabs.
Selector Name Description Conditions
.AFTabAboveStartSelectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above start portion of an selected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleSelectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above middle portion of an selected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndSelectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above end portion of an selected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartSelectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below start portion of an selected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleSelectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below middle portion of an selected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndSelectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below end portion of an selected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
Level Two->Unselected
Aliases for level two unselected Tabs.
Selector Name Description Conditions
.AFTabAboveStartUnselectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above start portion of an unselected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleUnselectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above middle portion of an unselected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndUnselectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the above end portion of an unselected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartUnselectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below start portion of an unselected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleUnselectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below middle portion of an unselected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndUnselectedLevel2Background:alias Selector used only in the blafplus and fusion skins to define the background-image of the below end portion of an unselected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabAboveStartUnselectedDisabledLevel2Background:alias Selector used only in the fusion skins to define the background-image of the disabled above start portion of an unselected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveMiddleUnselectedDisabledLevel2Background:alias Selector used only in the fusion skins to define the background-image of the disabled above middle portion of an unselected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabAboveEndUnselectedDisabledLevel2Background:alias Selector used only in the fusion skins to define the background-image of the disabled above end portion of an unselected level 2 section of a tab created by af:navigationPane hint="tabs" or af:panelTabbed. Only used by fusion skins.
.AFTabBelowStartUnselectedDisabledLevel2Background:alias Selector used only in the fusion skins to define the background-image of the disabled below start portion of an unselected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowMiddleUnselectedDisabledLevel2Background:alias Selector used only in the fusion skins to define the background-image of the disabled below middle portion of an unselected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.
.AFTabBelowEndUnselectedDisabledLevel2Background:alias Selector used only in the fusion skins to define the background-image of the disabled below end portion of an unselected level 2 section of a tab created by af:panelTabbed. Only used by fusion skins.

Miscellaneous

Selector Name Description Conditions
.AFTabRemoveImageDisclosed:alias The disclosed tab remove image.
.AFTabRemoveImageUndisclosed:alias The undisclosed tab remove image.
.AFTabRemoveImageHover:alias The hover remove image (mouseover on an enabled remove image).
.AFTabRemoveImageActive:alias The active remove image (mousedown on an enabled remove image).
.AFTabDisabledRemoveImage:alias The tab remove image shown on disabled tabs.
.AFTabRemoveImageDisabledDisclosed:alias The tab remove image shown on disclosed tabs that have remove feature set to disabled.
.AFTabRemoveImageDisabledUndisclosed:alias The tab remove image shown on undisclosed tabs that have remove feature set to disabled.
.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.
.AFDynamicHelpIconStyleDisabled:alias Style that is used for the dynamic help icon in the disabled state.
.AFRequiredIconStyle A style class that styles the required icon for form components. You cannot currently style this icon for each component.
.AFDisclosedIconStyle:alias The disclosed icon used in components like panelBox, region, panelAccordion, query and showDetailheader.
.AFDisclosedIconStyleHover:alias The disclosed icon for hover state used in components like panelBox, region, panelAccordion, query and showDetailheader.
.AFDisclosedIconStyleActive:alias The disclosed icon for active state used in components like panelBox, region, panelAccordion, query and showDetailheader.
.AFUndisclosedIconStyle:alias The undisclosed icon used in components like panelBox, region, panelAccordion, query and showDetailheader.
.AFUndisclosedIconStyleHover:alias The undisclosed icon for hover state used in components like panelBox, region, panelAccordion, query and showDetailheader
.AFUndisclosedIconStyleActive:alias The undisclosed icon for active state used in components like panelBox, region, panelAccordion, query and showDetailheader.
.AFMaximizedIconStyle:alias The maximize icon used in panelBox.
.AFMaximizedIconStyleActive:alias The maximize icon for active state used in panelBox.
.AFMaximizedIconStyleHover:alias The maximize icon for hover state used in panelBox.
.AFMaximizedIconStyleDarkBackground:alias The maximize icon used with dark background in panelBox.
.AFUnmaximizedIconStyle:alias The unmaximize icon used in panelBox.
.AFUnmaximizedIconStyleActive:alias The unmaximize icon for active state used in panelBox.
.AFUnmaximizedIconStyleHover:alias The unmaximize icon for hover state used in panelBox.
.AFUnmaximizedIconStyleDarkBackground:alias The unmaximize icon used with dark background in panelBox.
.AFBarSeparator:alias Specifies the separator bar used by af|menuBar, af|toolbar, and af|query. The separator bar is used to demarcate the end of a group of buttons (components) from the beginning of another group.
.AFDropDownIconBorder:alias Border of the dropdown cells for the blafplus skins. Generally the dropdown cells do not have borders in the fusion skins.
.AFDropDownIconBorderHover:alias Border of the dropdown cells when hovering for the blafplus skins. Generally the dropdown cells do not have borders in the fusion skins.
.AFDropDownIconBorderActive:alias Border of the dropdown cells when active for the blafplus skins. Generally the dropdown cells do not have borders in the fusion skins.
.AFDataCollectionStatusMessage:alias Styles the status message that shows up when the user scrolls a data collection type component (i.e., table and tree).
.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 "right" for left-to-right reading direction and "left" for right-to-left reading direction. e.g,: padding: 0px 8px 0px 0px; (for "right" padding). This is used in the .AFLabel:alias.
.AFStartPadding:alias Sets the padding property to pad on the "left" for left-to-right reading direction and "right" for right-to-left reading direction. e.g,: padding: 0px 0px 0px 8px; (for "left" padding).
.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.
.AFConveyorBeltImageHorizontalStart:alias Styles the conveyor belt indicator at the start side of a horizontal list
.AFConveyorBeltImageHorizontalStartHover:alias Styles the conveyor belt indicator at the start side of a horizontal list on hover
.AFConveyorBeltImageHorizontalStartDepressed:alias Styles the conveyor belt indicator at the start side of a horizontal list on depress
.AFConveyorBeltImageHorizontalStartDisabled:alias Styles the disabled conveyor belt indicator at the start side of a horizontal list
.AFConveyorBeltImageHorizontalEnd:alias Styles the conveyor belt indicator at the end side of a horizontal list
.AFConveyorBeltImageHorizontalEndHover:alias Styles the conveyor belt indicator at the end side of a horizontal list on hover
.AFConveyorBeltImageHorizontalEndDepressed:alias Styles the conveyor belt indicator at the end side of a horizontal list on depress
.AFConveyorBeltImageHorizontalEndDisabled:alias Styles the disabled conveyor belt indicator at the end side of a horizontal list
.AFConveyorBeltImageVerticalTop:alias Styles the conveyor belt indicator at the top of a vertical list
.AFConveyorBeltImageVerticalTopHover:alias Styles the conveyor belt indicator at the top of a vertical list on hover
.AFConveyorBeltImageVerticalTopDepressed:alias Styles the conveyor belt indicator at the top of a vertical list on depress
.AFConveyorBeltImageVerticalBottom:alias Styles the conveyor belt indicator at the bottom of a vertical list
.AFConveyorBeltImageVerticalBottomHover:alias Styles the conveyor belt indicator at the bottom of a vertical list on hover
.AFConveyorBeltImageVerticalBottomDepressed:alias Styles the conveyor belt indicator at the bottom of a vertical list on depress
.AFDroplistImage:alias Styles the droplist indicator used with conveyor belt
.AFDroplistImageHover:alias Styles the droplist indicator used with conveyor belt on hover
.AFDroplistImageDepressed:alias Styles the droplist indicator used with conveyor belt on depress
.AFOverflowImageHorizontalStart:alias Styles the overflow indicator at the start side of a horizontal list
.AFOverflowImageHorizontalStartHover:alias Styles the overflow indicator at the start side of a horizontal list on hover
.AFOverflowImageHorizontalStartDepressed:alias Styles the overflow indicator at the start side of a horizontal list on depress
.AFOverflowImageHorizontalEnd:alias Styles the overflow indicator at the end side of a horizontal list
.AFOverflowImageHorizontalEndHover:alias Styles the overflow indicator at the end side of a horizontal list on hover
.AFOverflowImageHorizontalEndDepressed:alias Styles the overflow indicator at the end side of a horizontal list on depress
.AFOverflowImageVerticalStart:alias Styles the overflow indicator at the start side of a vertical list
.AFOverflowImageVerticalStartHover:alias Styles the overflow indicator at the start side of a vertical list on hover
.AFOverflowImageVerticalStartDepressed:alias Styles the overflow indicator at the start side of a vertical list on depress
.AFOverflowImageVerticalEnd:alias Styles the overflow indicator at the end side of a vertical list
.AFOverflowImageVerticalEndHover:alias Styles the overflow indicator at the end side of a vertical list on hover
.AFOverflowImageVerticalEndDepressed:alias Styles the overflow indicator at the end side of a vertical list on depress
.AFLinkIEWorkaround Built-in style that can be used as a styleClass attribute value to work around the IE bug in which the bottom 1px of image is clipped in some use-cases. Users should set styleClass="AFLinkIEWorkaround" on the clipping commandImageLink
.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.
.AFContentCell This selector specifies the content element of a label/content pair of html elements. Not often used as a selector by itself but in addition to other component selectors, usually for alignment padding.
.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).
.AFLabelTopAlign Marker style class to help top align the label element rendered by panelLabelAndMessage component. This is helpful to align the labels of components like selectOneRadio and selectManyCheckbox when rendered in vertical mode.
.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).
.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.
.AFBrandingBarCompact A style class used for a branding bar that is compacted due to size of application navigation bar.
.AFBrandingBarTall A style class used for a branding bar that is taller than the normal. This is used when there is Application Navigation Bar in the Branding Bar.
.AFBrandingLogoTitleContainer A style class used for styling the logo and title container.
.AFBrandingLogo A style class used for styling the branding logo alone
.AFAppNavbarContainer A style class used for styling the container of buttons that appear on an application navigation bar
.AFAppNavbarButton A style class used for a styling the buttons that appear on an application navigation bar
.AFGlobalNavbarButton A style class used for a styling the golbal toolbar. This buttons border and background is transparent. The text color depends on the background.
.AFFooterBar A style class used for a styling the Footer container. A typical definiton includes height and margin.
.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. Note: The style uses background image which will not render under high contrast mode in some browsers.
.AFBrandingBarLogoLarge Similar to AFBrandingBarLogo. But shows a larger logo. This is used when the branding bar is taller.
.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.
.AFBrandingSplitter A style class used on a splitter that separates out the branding area. This typically is placed on a panelSplitter so that the background of the middle splitter area can be assigned to match the background branding color.
.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. Only used by fusion skins.
.AFTwinkleForeground:alias Specifies the foreground of active data when twinkle is on. Only used by fusion skins.
.AFInlineSelected:alias Alias used in *:inline-selected
.AFStatusIconStyle:alias This style is for the element that contains a .AFStatusIcon:alias icon (e.g. carousel, inlineFrame). If you are editing this alias, you should also edit .AFStatusIcon:alias and .AFBackgroundImageStatus:alias since components will choose among these icons automatically under the necessary circumstances. This typically defines a background-image to an alpha-transparent image that lets a binary-transparent animated status-icon image blend well on any background when these 2 images are stacked. It also typically defines a width and height are for the dimensions of this element.
.AFBackgroundImageStatus:alias This style is for an element that displays a loading status icon when the other loading status icon selectors (.AFStatusIcon:alias and .AFStatusIconStyle:alias) cannot be used (like an inlineFrame that isn't being stretched by its parent component). If you are editing this alias, you should also edit .AFStatusIcon:alias and .AFStatusIconStyle:alias since components will choose among these icons automatically under the necessary circumstances. This typically defines a background-image that references a single image file that is animated and binary-transparent. However, in browsers that support it, you can use this to define multiple concurrent background images where one image is animated and binary-transparent and the other image is non-animated and alpha-transparent so that the overall combined icon will blend smoothly with whatever coloring is behind the icon.
.AFAutoSuggestItemsContainer Style class on container for the suggested items
.AFAutoSuggestItem Style class on each of the suggested items
.AFAutoSuggestMoreLink Style to apply on the More... label rendered in the auto suggest popup
.AFAutoSuggestBusyStyle Style Class of the busy icon shown in the autosuggest popup while fetching data. This style also uses the .AFBackgroundImageStatus:alias rule ref.
.AFTaskStampTextLabel Selector used to apply to a task stamp text label. This selector is used for implementation of blafplus Page Stamp specification.
.AFTaskStampTextValue Selector used to apply to a task stamp text value. This selector is used for implementation of blafplus Page Stamp specification.
.AFUserStampTextLabel Selector used to apply to a user stamp text label. This selector is used for implementation of blafplus Page Stamp specification.
.AFUserStampTextValue Selector used to apply to a user stamp text value. This selector is used for implementation of blafplus Page Stamp specification.
.AFUserStampSeparator Selector used to apply to a user stamp label and value separator. This selector is used for implementation of blafplus Page Stamp specification.
.AFUserStampSwitcher Selector used to apply to a user stamp switcher. This selector is used for implementation of blafplus Page Stamp specification.
.AFKeyNotationText Selector used to apply to key notation main text. This selector is used for implementation of blafplus Key Notation specification.
.AFSmallBorderRadius:alias Specifies a small border radius.
.AFMediumBorderRadius:alias Specifies a medium border radius.
.AFLargeBorderRadius:alias Specifies a large border radius.
.AFExtraLargeBorderRadius:alias Specifies an extra large border radius.

Global Resource Strings

The text is abstracted as a resource string that has skins applied. For example, af_dialog.LABEL_OK is a resource string for the text label of an af:dialog component when the OK button has been configured. Resource strings do not have skins in the CSS skin file, but in a resource bundle referenced from the skin definition file in the trinidad-skins.xml file using the bundle-name parameter. You can also use the translation-source parameter for an EL binding to point to a Map or ResourceBundle. Global resource strings are resource strings that are not component-specific, but apply to more than one component.

Popup Selectors

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

However, if the popup's first child is a

  • af:menu,
  • af:dialog,
  • af:panelWindow, or
  • af:noteWindow,
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

Selector Name Description Conditions
.AFPopupSelectorHeader Styles for inline popup.
.AFPopupSelectorHeaderStart Styles for inline popup. Only used by fusion skins.
.AFPopupSelectorHeaderEnd Styles for inline popup. Only used by fusion skins.
.AFPopupSelectorContent Styles for inline popup.
.AFPopupSelectorContentStart Styles for inline popup. Only used by fusion skins.
.AFPopupSelectorContentEnd Styles for inline popup. Only used by fusion skins.
.AFPopupSelectorFooter Styles for inline popup.
.AFPopupSelectorFooterStart Styles for inline popup. Only used by fusion skins.
.AFPopupSelectorFooterEnd Styles for inline popup. Only used by fusion skins.
.AFPopupTail Styles for popup tail.
.AFPopupTailTopLeft Style applied to tail placed in top left of the popup.
.AFPopupTailTopRight Style applied to tail placed in top right of the popup.
.AFPopupTailTopCenter Style applied to tail placed in top center of the popup.
.AFPopupTailBottomLeft Style applied to tail placed in top left of the popup.
.AFPopupTailBottomRight Style applied to tail placed in top right of the popup.
.AFPopupTailBottomCenter Style applied to tail placed in top center of the popup.
.AFPopupTailMiddleLeft Style applied to tail placed in middle left of the popup.
.AFPopupTailMiddleRight Style applied to tail placed in middle right of the popup.
.AFPopupTailSimple Style class applied to inline popup which contains tail.
.AFDialogTailSimple Style class applied to dialog and panelWindow which contains tail.

Note Window Selectors

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.
Selector Name Description Conditions
.AFNoteWindow styles the root dom element of the component

Poll component timeout Pseudo-classes

poll component timed out. The classes are applied to those component that were updated by the last poll update, before it timed out.

Inline Editing Pseudo-classes

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.

Drag and Drop Pseudo-classes

and drop operations.
Selector Name Description Conditions
   

Message Selectors

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

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

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

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

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

See also

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

Selector Name Description Conditions
.AFFormComponentOutlineFatal:alias The border around a form component to indicate something fatal occurred.
.AFFormComponentOutlineError:alias The border around a form component to indicate an error.
.AFFormComponentOutlineWarning:alias The border around a form component to indicate a warning.
.AFFatalBackground:alias Background color to indicate something fatal occurred; used on checkboxes and radio boxes. Used in simple skin on all browsers, or for fusion skin in IE7.
.AFErrorBackground:alias Background color to indicate an error; used on checkboxes and radio boxes. Used in simple skin on all browsers, or for fusion skin in IE7.
.AFWarningBackground:alias Background color to indicate a warning; used on checkboxes and radio boxes. Used in simple skin on all browsers, or for fusion skin in IE7.

Component Group: CodeEditor

Selector Name Description Conditions
.AFCodeEditorJump Specifies the text style for the Go To Line inputText box in the toolbar.
.AFCodeEditorReplace Specifies the text style for the Replace inputText box.
.AFCodeEditorSearch Specifies the text style for the Search inputText box.
.AFCodeEditorSearchToolbar Specifies the text style for the Search inputText box in the toolbar.
.AFCodeEditorToolbox Specifies the styling for the toolbox.
.AFCodeEditorToolboxDisabled Specifies the styling for the toolbox when disabled.

Common Pseudo-classes

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

Themes

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

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

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

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

The Fusion and BLAF Plus skins support the following themes:

  • Dark
  • Medium
  • Light
  • None (default)

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

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

Renderer Selectors

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

The activeCommandToolbarButton component was added for a very specific use case and we expect very few application developers to use this component.

af:activeImage

The activeImage component was added for a very specific use case and we expect very few application developers to use this component.

af:activeOutputText

Style Selectors Description Conditions
af|activeOutputText Style on the root element of the af:activeOutputText component.

af:breadCrumbs

Style Selectors Description Conditions
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. If you skin the background-image, you may also want to skin it for :hover.
Icon Selectors 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.

af:button

Style Selectors Description Conditions
af|button Style on the root element of the af:button component. This style includes the .AFDefaultFont:alias style. Tip: You may also want to skin it for :hover. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
af|button::link Style on the button link on the af:button component.
af|button::text Style on the button text on the af:button component.
af|button::leading-text Styles the button text when the text precedes the icon.
af|button::access-key Style on the access key for the label of the af:button component. For example, underline the access key. Includes .AFButtonAccessKeyStyle:alias.
af|button::dropdown-cell Style on the cell containing the dropdown icon used for the popup button of the af:button component.
af|button::dropdown-icon-style Style of the icon used for the popup button of the af:button 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 Description
af|button::dropdown-icon Overrides the default dropdown icon used for the popup button of the af:button component.

af:body

Style Selectors Description Conditions

af:calendar

Style Selectors Description Conditions
.AFCalendarLightBackground:alias alias for the background color for the light portions of the calendar.
.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
.AFCalendarCategory1 Calendar color scheme 1
.AFCalendarCategory1LightColor:alias Light color configuration for calendar color scheme 1
.AFCalendarCategory1MediumColor:alias Medium color configuration for calendar color scheme 1
.AFCalendarCategory1TextColor:alias Text color configuration for calendar color scheme 1
.AFCalendarCategory2 Calendar color scheme 2
.AFCalendarCategory2LightColor:alias Light color configuration for calendar color scheme 2
.AFCalendarCategory2MediumColor:alias Medium color configuration for calendar color scheme 2
.AFCalendarCategory2TextColor:alias Text color configuration for calendar color scheme 2
.AFCalendarCategory3 Calendar color scheme 3
.AFCalendarCategory3LightColor:alias Light color configuration for calendar color scheme 3
.AFCalendarCategory3MediumColor:alias Medium color configuration for calendar color scheme 3
.AFCalendarCategory3TextColor:alias Text color configuration for calendar color scheme 3
.AFCalendarCategory4 Calendar color scheme 4
.AFCalendarCategory4LightColor:alias Light color configuration for calendar color scheme 4
.AFCalendarCategory4MediumColor:alias Medium color configuration for calendar color scheme 4
.AFCalendarCategory4TextColor:alias Text color configuration for calendar color scheme 4
.AFCalendarCategory5 Calendar color scheme 5
.AFCalendarCategory5LightColor:alias Light color configuration for calendar color scheme 5
.AFCalendarCategory5MediumColor:alias Medium color configuration for calendar color scheme 5
.AFCalendarCategory5TextColor:alias Text color configuration for calendar color scheme 5
.AFCalendarCategory6 Calendar color scheme 6
.AFCalendarCategory6LightColor:alias Light color configuration for calendar color scheme 6
.AFCalendarCategory6MediumColor:alias Medium color configuration for calendar color scheme 6
.AFCalendarCategory6TextColor:alias Text color configuration for calendar color scheme 6
.AFCalendarCategory7 Calendar color scheme 7
.AFCalendarCategory7LightColor:alias Light color configuration for calendar color scheme 7
.AFCalendarCategory7MediumColor:alias Medium color configuration for calendar color scheme 7
.AFCalendarCategory7TextColor:alias Text color configuration for calendar color scheme 7
.AFCalendarCategory8 Calendar color scheme 8
.AFCalendarCategory8LightColor:alias Light color configuration for calendar color scheme 8
.AFCalendarCategory8MediumColor:alias Medium color configuration for calendar color scheme 8
.AFCalendarCategory8TextColor:alias Text color configuration for calendar color scheme 8
.AFCalendarCategory9 Calendar color scheme 9
.AFCalendarCategory9LightColor:alias Light color configuration for calendar color scheme 9
.AFCalendarCategory9MediumColor:alias Medium color configuration for calendar color scheme 9
.AFCalendarCategory9TextColor:alias Text color configuration for calendar color scheme 9
.AFCalendarCategory10 Calendar color scheme 10
.AFCalendarCategory10LightColor:alias Light color configuration for calendar color scheme 10
.AFCalendarCategory10MediumColor:alias Medium color configuration for calendar color scheme 10
.AFCalendarCategory10TextColor:alias Text color configuration for calendar color scheme 10
.AFCalendarCategory11 Calendar color scheme 11
.AFCalendarCategory11LightColor:alias Light color configuration for calendar color scheme 11
.AFCalendarCategory11MediumColor:alias Medium color configuration for calendar color scheme 11
.AFCalendarCategory11TextColor:alias Text color configuration for calendar color scheme 11
.AFCalendarCategory12 Calendar color scheme 11
.AFCalendarCategory12LightColor:alias Light color configuration for calendar color scheme 12
.AFCalendarCategory12MediumColor:alias Medium color configuration for calendar color scheme 12
.AFCalendarCategory12TextColor:alias Text color configuration for calendar color scheme 12
.AFShortDuration Marker selector to identify short (sub-24 hour) duration activities when they are rendered in the top region in day and week view.
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::toolbar-prev-next-button-style style the prev-next buttons 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.
af|calendar::hgrid-major day and week view: style the major horizontal grid lines.
af|calendar::day-of-week day and week view: style the day of the week.
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::duration-activity-text day and week: style on text in short duration 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-date-header day: style for the day date header
af|calendar::day-header-row day: style for the header area in day view
af|calendar::day-header-row-misc day: Provides styling for custom text in the day view header. To style the custom header for today's date you could do something like "af|calendar::day-header-row:today af|calendar::day-header-row-misc{background-color:blue}"
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-date-header week: style for the week date header
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-cell-misc week: Provides styling for the custom text in the week view header. To style the custom header for today's date you could do something like "af|calendar::week-header-cell:today af|calendar::week-header-cell-misc{background-color:blue}"
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.
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.
af|calendar::month-grid-cell-date-header month: style for the month date header
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
af|calendar::list-cell list: style for a cell in the list view
af|calendar::list-activity-icons-cell list: style for the cell holding activity icons like recurring, reminder etc in the list view
af|calendar::list-activity-provider-name-cell list: style for the cell containing the provider name in the list view
af|calendar::list-day-of-week-date-header list: style for the list day of the week header
af|calendar::list-day-of-week-column list: style for the day of the week column
af|calendar::list-day-of-week-column-misc list: Provides styling for the custom text beneath the day of the week in the left list column. To style the custom header for today's date you could do something like "af|calendar::list-row:today af|calendar::list-day-of-week-column-misc{background-color:blue}"
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 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.

af:carousel

Style Selectors Description Conditions
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.
af|carousel::view Styles the wrapper around all carouselItem components. Typically a border or shadow style would be defined in this selector but only for the one-by-one pseudo-class, never for the circular pseudo-class. Includes the .AFCarouselItemBorder:alias for the one-by-one pseudo-class.
af|carousel::control-area Styles the wrapper around all spin controls, item text, and spin info when the control area is non-full. Typically a border or shadow style and background color would be defined in this selector but usually only for the vertical pseudo-class in combination with small or compact.
af|carousel::item Styles the wrapper around each carouselItem component. Typically a border or shadow style would be defined in this selector but only for the circular pseudo-class, never for the one-by-one pseudo-class. Includes the .AFCarouselItemBorder:alias for the circular pseudo-class.
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.
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. There is a pseudo-class for :small but not :compact because this info is not present when compact.
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.
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.
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.
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.
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.
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.
af|carousel::status-icon-style This style is for the element that contains the status-icon (if used). This typically defines a background-image to an alpha-transparent image that lets a binary-transparent animated status-icon image blend well on any background when these 2 images are stacked. Also typically a width and height are defined for the dimensions of this container. It is suggested to use the .AFStatusIconStyle:alias rule ref in this selector.
af|carousel::status-message Styles the status message that shows up when the user spins the carousel. Includes the .AFDataCollectionStatusMessage:alias.
.AFCarouselItemBorder:alias Styles the border or shadows around the carousel item or view (depending on how the items are displayed).
Icon Selectors 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.
af|carousel::status-icon This icon (that is an alternative to the af|carousel::status-message) gives a graphical representation that the carousel content is loading if the af|carousel skin property -tr-status-type is set to icon. This typically defines a content URL for an animated image, the width of this image, and the height of this image. It is suggested to use the .AFStatusIcon:alias rule ref in this selector.

af:carouselItem

Style Selectors Description Conditions
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

Style Selectors Description Conditions
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.Includes .AFButtonBorderDisabled:alias
af|chooseColor::swatch Styles the margin and width/height of color swatch. Includes .AFButtonBorder:alias.
af|chooseColor::swatch-cell Styles the swatch cell on standard color palette; typically this would be the border properties.
af|chooseColor::swatch-button Styles the button that contains a swatch.
af|chooseColor::swatch-table Styles the table that holds the swatch cells in the main selection area.
af|chooseColor::lower-swatch-table Styles the table that holds the swatch cells in the lower selection area.

af:chooseDate

Style Selectors Description Conditions
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.
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-content-input The appearance of an individual AM/PM radio button within chooseDate. Used mostly for alignment.
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.
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::calendar-grid Styles the appearance of the date picker grid.
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::decrement-cell Styles the decrement-cell of the inputNumberSpinbox internal child component used for changing the year.
af|chooseDate::increment-cell Styles the increment-cell of the inputNumberSpinbox internal child component used for changing the year.
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. You can put a background-image here. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|chooseDate::next-month-arrow-cell Styles the next-month icon cell. This cell is commonly used for gradient styles for buttons that have gradients.
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.
af|chooseDate::prev-month-arrow Styles the previous-month icon. You can put a background-image here. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|chooseDate::prev-month-arrow-cell Styles the previous-month icon cell. cell. This cell is commonly used for gradient styles for buttons that have gradients.
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.
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.
af|chooseDate::spinbox The root style for spinboxes within chooseDate (year, hours, minutes, seconds).
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.
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.
af|chooseDate::spinwheel-time-selectors-row Styles the appearance of the spinwheel time selectors row
af|chooseDate::footer-button-date Styles the appearance of the select date toggle button in the footer of the picker dialog
af|chooseDate::footer-button-time Styles the appearance of the select time toggle button in the footer of the picker dialog
af|chooseDate::now-row Styles the appearance of the today/now button in the picker dialog
af|chooseDate::navigator-row Styles the appearance of the year/month selection rows in the navigation panel
af|chooseDate::navigator-cell Styles the appearance of the year/month selection cells in the navigation panel
af|chooseDate::time-separator Styles the appearance of the time separator character ':' shown between the hours/minutes/seconds display.
af|chooseDate::year-selector-cell Styles the cell that contains the spinbox that is used to select the year.
Icon Selectors 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:chooseNumberSpinwheel

This is a client only internal component. The tag doesn't exist.
Style Selectors Description Conditions
af|chooseNumberSpinwheel The selector on the root dom element of the component.
af|chooseNumberSpinwheel::item The individual spin item

af:column

To style the table component, you will use both af|table and af|column skin selectors.
Style Selectors Description Conditions
af|column This is the base selector for the component.
af|column::column-header-cell Styles the column header cell. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
af|column::column-header-cell-content Styles the content in a header cell.
af|column::column-header-table The table(s) used for the column headers. This selector can be used to provide a single gradient background for all table column headers.
af|column::select-all-header Styles the column header cell used to do select all for a table with multiple row selection enabled.
af|column::row-column-header-cell Styles the column header cell that is a row header as well.
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. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias. To style a highlighted row's header cell, use "af|table::data-row:highlighted af|column::row-header-cell".
af|column::data-cell Styles a column's data cell that is not banded. 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 highlighted row's data cell, use "af|table::data-row:highlighted af|column::data-cell". 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).
af|column::banded-data-cell Styles a column's data cell that is banded. To style a selected row's banded data cell, use "af|table::data-row:selected af|column::banded-data-cell". This includes .AFTableCellPadding:alias and .AFTableCellDataBorder:alias. To style a highlighted column's banded data cell, use "af|table::data-row:highlighted af|column::banded-data-cell".
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|column::filter-clear-all-icon-style Styles the icon associated with clearing the filter fields, when displayed with the -tr-display-filter-clear-icon directive for tables. The image is set as a background-image that you can override. Supports :hover and :active pseudo-classes.
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. 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. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
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. 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. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
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.
af|column::filter-clear-all-icon-style Styles the icon used for the clearing all filter fields in the table filter row. 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 filter-clear-all-icon-style and define the icon for the filter-clear-all-icon.
Icon Selectors 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::filter-column-clear-all-icon Overrides the default sort ascending indicator. Icons can be text or img elements, e.g. af|column::filter-column-clear-all-icon {content "X"} or af|column::filter-column-clear-all-icon {content: url(...)}. Use this key instead of the filter-column-clear-all-icon-style key if you do not want background-image.
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.
af|column::filter-clear-all-icon Overrides the default icon for clearing all filter fields in the table filter row. Icons can be text or img elements, e.g. af|column::filter-clear-all-icon{content: "X"} or af|column::filter-clear-all-icon {content: url(...)}. Use this key instead of the filter-clear-all-icon-style key if you do not want background-image.

af:commandButton

Style Selectors Description Conditions
af|commandButton Style on the root element of the af:commandButton component. Tip: If you skin this selector's background-image or color, you may also want to skin a different background-image or color for :hover, :active, :focus, :disabled, and :text-only. 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.

af:commandImageLink

Style Selectors Description Conditions
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.If you skin the background-image, you may also want to skin it for :hover.
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

Style Selectors Description Conditions
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. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
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

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 Description Conditions
af|commandMenuItem Selector that renders on the root dom element of the component.
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-radio-icon-style Style on the radio icon for a radio type command menu item shown on a menu bar. 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-radio-icon-style and define the icon for the bar-item-radio-icon key.
af|commandMenuItem::bar-item-check-icon-style Style on the check icon for a check type command menu item shown on a menu bar. 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-check-icon-style and define the icon for the bar-item-check-icon key.
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::bar-item-antonym-text-default Style applied to the text of an antonym type commandMenuItem in its default state, as shown on the menu bar.
af|commandMenuItem::bar-item-antonym-text-selected Style applied to the selected text of an antonym type commandMenuItem in its selected state, 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 Description
af|commandMenuItem::bar-item-radio-icon Overrides the default radio icon for a radio type command menu item shown on the menu bar. Icons can be text or img elements, e.g. af|commandMenuItem::bar-item-radio-icon {content "X"} or af|commandMenuItem::bar-item-radio-icon {content: url(...)}. Use this key instead of the af|commandMenuItem::bar-item-radio-icon-style key if you do not want a background-image.
af|commandMenuItem::bar-item-check-icon Overrides the default check icon for a check type command menu item shown on the menu bar. Icons can be text or img elements, e.g. af|commandMenuItem::bar-item-check-icon {content "X"} or af|commandMenuItem::bar-item-check-icon {content: url(...)}. Use this key instead of the af|commandMenuItem::bar-item-check-icon-style key if you do not want a background-image.
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.

af:commandNavigationItem

Style Selectors Description Conditions
af|commandNavigationItem Style on the root element of the af:commandNavigationItem component. 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.

af:commandToolbarButton

Style Selectors Description Conditions
af|commandToolbarButton Style on the root element of the af:commandToolbarButton component. This style includes the .AFDefaultFont:alias style. Tip: You may also want to skin it for :hover.
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 Description
af|commandToolbarButton::dropdown-icon Overrides the default dropdown icon used for the popup button of the af:commandToolbarButton component.

af:contextInfo

Style Selectors Description Conditions
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-cell Can be used to skin a gradient for the launch icon.
af|contextInfo::launch-icon-style used to control the launch icon. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
Icon Selectors 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.

af:conveyorBelt

Style Selectors Description Conditions
af|conveyorBelt Selector that renders on the root dom element of the component.
af|conveyorBelt::start-overflow-indicator Style on the start overflow indicator when the conveyor belt is in horizontal orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|conveyorBelt::end-overflow-indicator Style on the end overflow indicator when the conveyor belt is in horizontal orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|conveyorBelt::top-overflow-indicator Style on the top overflow indicator when the conveyor belt is in vertical orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|conveyorBelt::bottom-overflow-indicator Style on the bottom overflow indicator when the conveyor belt is in vertical orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
Icon Selectors Description
af|conveyorBelt::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|conveyorBelt::start-overflow-icon {content "X"} or af|conveyorBelt::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|conveyorBelt::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|conveyorBelt::end-overflow-icon {content "X"} or af|conveyorBelt::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|conveyorBelt::top-overflow-icon Overrides the top-overflow-indicator background image with an icon (high contrast mode). Icons can be text or img elements, e.g. af|conveyorBelt::top-overflow-icon {content "X"} or af|conveyorBelt::top-overflow-icon {content: url(...)}. Use this key instead of the top-overflow-indicator key to define the override icon. To inhibit the background-image, set -tr-inhibit: background-image in the top-overflow-indicator key.
af|conveyorBelt::bottom-overflow-icon Overrides the bottom-overflow-indicator background image with an icon (high contrast mode). Icons can be text or img elements, e.g. af|conveyorBelt::bottom-overflow-icon {content "X"} or af|conveyorBelt::bottom-overflow-icon {content: url(...)}. Use this key instead of the bottom-overflow-indicator key to define the override icon. To inhibit the background-image, set -tr-inhibit: background-image in the bottom-overflow-indicator key.

af:decorativeBox

Style Selectors Description Conditions
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. Only used by fusion skins.
af|decorativeBox::top Selector for the top container DIV that shows the decorative top image border. 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. Only used by fusion skins.
af|decorativeBox::start Selector for the left (right for RTL) DIV. The property "-tr-width" is supported to specify the width. Only used by fusion skins.
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. Only used by fusion skins.
af|decorativeBox::frame Selector for the indented content in the center of the decorative box, where the borders are shown. The properties -tr-top-padding, -tr-bottom-padding, -tr-start-padding, and -tr-end-padding are supported to specify the amount of padding present inside the border. Only used by altaskyros skins.
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. Only used by fusion skins.
af|decorativeBox::bottom Selector for the bottom container DIV that shows the decorative bottom image border. The property "-tr-height" is supported to specify the height. Only used by fusion skins.
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. Only used by fusion skins.
af|decorativeBox::center-icons Wrapper element used to house the extra icons that are placed into the center of the decorative box when -tr-center-icon or -tr-additional-center-icon are is use.
.AFDecorativeBoxDarkTopShadowIcon:alias Used by dark themed boxes for the shadow at the top of the center facet.
.AFDecorativeBoxDarkGradientIcon:alias Used by dark themed boxes to produce the gradient of the center and bottom of the decorativeBox.

af:deck

Style Selectors Description Conditions
af|deck Selector that renders on the root dom element of the component.
af|deck::swipe-loading-panel The selector applied to the element that is displayed while performing the swipe transition

af:dialog

Style Selectors Description Conditions
af|dialog Selector that renders on the root dom element of the component.
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 is used in conjunction with the pseudo-class :drag on the root element and af|dialog::main to achieve an drag look for the dialog.
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.
af|dialog::header Styles the "header" element. This element surrounds the header text, icon and close regions.
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.
af|dialog::footer-start  
af|dialog::footer The style for the center cell of the footer.
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.
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.
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.
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.
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/af|dialog::pin-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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|dialog::close-icon-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::pin-icon-region Styles the region around af|dialog::pin-icon-style in af|dialog::header and aligned to end. It can be used to set paddings, margins around the title icon.
af|dialog::pin-icon-style Style on the dialog's pin 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 pin-icon-style and define the icon for the pin-icon key.
af|dialog::footer-button Styles the root element of the button in the footer of the dialog. Note that this skin selector is only present when the skin selector -tr-button-type is set to 'old', and the footer buttons are rendered as af:commandButtons. When the -tr-button-type is set to 'unified', the footer buttons are rendered as af:buttons and have the default stylings for af:button applied, so that footer buttons have the same look and feel as all other buttons. Please note that for commandButtons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled af:commandButtons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
af|dialog::footer-button-affirmative Styles the root element of the "Yes" and "OK" buttons in the footer of the dialog. These buttons are dependent on the dialog components type property. Please note that for commandButtons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled af:commandButtons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
af|dialog::footer-button-cancel Styles the root element of the "Cancel" button in the footer of the dialog. This button is dependent on the dialog components type property. Please note that for commandButtons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled af:commandButtons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
af|dialog::footer-button-no Styles the root element of the "No" button in the footer of the dialog. This button is dependent on the dialog components type property. Please note that for commandButtons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled af:commandButtons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
af|dialog::footer-button-icon-style When -tr-button-type is set to 'old', styles the footer commandButton icon, if there is an icon on the commandButton.
af|dialog::footer-button-access-key When -tr-button-type is set to 'old', styles the access key text of the footer commandButton. This includes the .AFButtonAccessKeyStyle:alias style.
Icon Selectors 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::pin-icon Overrides the default pin icon. Icons can be text or img elements, e.g. af|dialog::pin-icon {content "X"} or af|dialog::pin-icon {content: url(...)}. Use this key instead of the pin-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.

af:document

Style Selectors Description Conditions
af|document Selector that renders on the root dom element of 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 Description
af|document::splash-screen-icon Icon displayed within the splash screen contents.

af:form

The form component has no public skinning keys.

af:goButton

Style Selectors Description Conditions
af|goButton Style on the root element of the af:goButton component. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, :focus, and :disabled. 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

Style Selectors Description Conditions
af|goImageLink Style on the root element of the goImageLink component. This style includes the .AFDefaultFont:alias style. Tip: If you skin the background-image, you may also want to skin it for :hover.
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

Style Selectors Description Conditions
af|goLink Style on the root element of the af:goLink component. 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. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
af|goLink::access-key Styles the access key character for go links, default bold. This style includes .AFLinkAccessKeyStyle:alias

af:goMenuItem

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

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

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

Style Selectors Description Conditions
af|goMenuItem Selector that renders on the root dom element of the component.
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.

af:group

not generate any elements on the page and thus is not skinnable.

af:help

Special tag for configuring properties for dynamic help.

Style Selectors Description Conditions
af|help Properties for dynamic help.

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

Style Selectors Description Conditions af|image Style on the root dom element of the component.

af:inlineFrame

Style Selectors Description Conditions
af|inlineFrame Style for the root element of the inlineFrame component. Typically no styles would be defined with this selector but for backward-compatibility purposes, this can be used for defining a background-image that will be displayed as a loading indicator when the iframe is not being stretched by an ancestor using af|inlineFrame:busy. See af|inlineFrame::status-icon and af|inlineFrame::status-icon-style for the case when it is being stretched by an ancestor. It is suggested to use the .AFBackgroundImageStatus:alias rule ref in this selector when the busy pseudo-class is used.
af|inlineFrame::status-icon-style This style is for the element that contains the status-icon. This typically defines a background-image to an alpha-transparent image that lets a binary-transparent animated status-icon image blend well on any background when these 2 images are stacked. Also typically a width and height are defined for the dimensions of this container. It is suggested to use the .AFStatusIconStyle:alias rule ref in this selector. For backward-compatibility purposes, this selector is only used on inlineFrames that are stretched by their ancestor.
Icon Selectors Description
af|inlineFrame::status-icon This icon gives a graphical representation that the inlineFrame content is loading. This typically defines a content URL for an animated image, the width of this image, and the height of this image. It is suggested to use the .AFStatusIcon:alias rule ref in this selector. For backward-compatibility purposes, this selector is only used on inlineFrames that are stretched by their ancestor.

af:inputColor

Style Selectors Description Conditions
af|inputColor Style on the root element of the component.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputColor::input-chooser-wrapper Style the parent container of all the child elements. Used for adding an error border style.
af|inputColor::launch-icon-style Style the clickable icon of the component. Tip: If you skin the background-image, you may also want to skin it for :hover.
Icon Selectors 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.

af:inputComboboxListOfValues

Style Selectors Description Conditions
af|inputComboboxListOfValues Style on the root element of the inputComboboxListOfValues component.
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 Style that goes around both the context facet and the content. Can be used to control the content padding when the context facet is set, For example:af|inputComboboxListOfValues::context-content af|inputComboboxListOfValues::content{padding-left:7px;}
af|inputComboboxListOfValues::dialog Selector applied on the root element of the search dialog of inputComboboxListOfValues component
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputComboboxListOfValues::label Style on the label of the af:inputComboboxListOfValues component. This includes .AFLabel:alias style selector.
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. Includes .AFClickableImageAnchor:alias. If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Icon Selectors Description
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.

af:inputDate

Style Selectors Description Conditions
af|inputDate Style on the root element of the component.
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::label Style on the label of the af:inputDate component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
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. 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. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputDate::cancel-button .
af|inputDate::retry-button .
af|inputDate::delete-button .
Icon Selectors 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.

af:inputFile

Style Selectors Description Conditions
af|inputFile Style on the root element of the af:inputFile component.
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::multiple-content Style on the content of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-content Style on the content of the upload area of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-content-container Style on the content container of the upload area of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-pane Style on the upload pane of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-filelist Style on the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-dropzone Style on the drop zone of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-drag Style on the drag color of the drop zone of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-filename Style on the filenames in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-filesize Style on the file sizes in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-progress Style on the upload progress bar area in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-progress-done Style on the upload progress done text in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-progress-failed Style on the upload progress failed text in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-action Style on the upload action area (cancel, retry and delete) in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-progressbar-determinate Style on the determinate upload progress bar in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-progressbar-determinate-start-label Style on the determinate upload progress bar start label in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-progressbar-determinate-end-label Style on the determinate upload progress bar end label in the upload file list of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-toolbar Style on the upload toolbar (which contains the Upload/Stop Uploading button) of the af:inputFile component in multiple file mode.
af|inputFile::text Style on the link text on 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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputFile::label Style on the label of the af:inputFile component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|inputFile::multiple-upload-cancel-button Icon for the upload cancel button of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-retry-button Icon for the upload retry button of the af:inputFile component in multiple file mode.
af|inputFile::multiple-upload-delete-button Icon for the upload delete button of the af:inputFile component in multiple file mode.
Icon Selectors Description
af|inputFile::multiple-upload-progressbar-indeterminate-icon Icon for the indeterminate upload progress bar in the upload file list of the af:inputFile component in multiple file mode.
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.
af|inputFile::multiple-upload-droparea-icon Icon for the drop area of the af:inputFile component in multiple file mode.

af:inputListOfValues

Style Selectors Description Conditions
af|inputListOfValues Style on the root element of the af:inputListOfValues component.
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::context-content Style that goes around both the context facet and the content.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
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. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputListOfValues::popup-icon-container Used to provide additional style control to the search popup icons. For example, if separate gradient button backgrounds are desired.
af|inputListOfValues::dialog Selector applied on the root element of the search dialog of inputListOfValues component
Icon Selectors Description
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.

af:inputNumberSlider

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

Style Selectors Description Conditions
af|inputNumberSlider Style on the root element of the component.
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.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
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"}.
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"}.
af|inputNumberSlider::play-icon-style Uses background-image to set the play button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::play-icon {content:"Text"}.
af|inputNumberSlider::pause-icon-style Uses background-image to set the pause button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::pause-icon {content:"Text"}.
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"}.
af|inputNumberSlider::thumb-value-line Styles the line drawn from the thumb to the displayed value of the current thumb position.
af|inputNumberSlider::thumb-value Styles the value of the current thumb position.
af|inputNumberSlider::ticks Styles the basic tick marks for the slider. This is used to set the positioning of the ticks.
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.
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.
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.
af|inputNumberSlider::tick-value Styles the value for major tick marks for the slider.
af|inputNumberSlider::tick-value-zero 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.
Icon Selectors 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::play-icon Overrides the default play icon.
af|inputNumberSlider::pause-icon Overrides the default pause 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::minus-disabled-icon Overrides the default disabled minus icon.
af|inputNumberSlider::pause-disabled-icon Overrides the default disabled pause 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.

af:inputNumberSpinbox

Style Selectors Description Conditions
af|inputNumberSpinbox Style on the root element of the component.
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::decrement-cell Style on the parent of the decrement icon. Used to provide additional styles, e.g. separate background gradients.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputNumberSpinbox::increment-cell Style on the parent of the increment icon. Used to provide additional styles, e.g. separate background gradients.
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"}.
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"}.
af|inputNumberSpinbox::spinbox-cell Styles the cell for the decrementor/incrementor icons. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Icon Selectors 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.

af:inputRangeSlider

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

Style Selectors Description Conditions
af|inputRangeSlider Style on the root element of the component.
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.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
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"}.
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"}.
af|inputRangeSlider::play-icon-style Uses background-image to set the play button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::play-icon {content:"Text"}.
af|inputRangeSlider::pause-icon-style Uses background-image to set the pause button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::pause-icon {content:"Text"}.
af|inputRangeSlider::bar Styles the bar size of the slider.
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.
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.
af|inputRangeSlider::highlight Styles the region contained within the bar between the minimum and maximum thumb values of the current range.
af|inputRangeSlider::range Styles the portion of the bar that is between the two range values.
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.
af|inputRangeSlider::thumb-value-line Styles the line drawn from the thumb to the displayed value of the current minimum and maximum thumb positions.
af|inputRangeSlider::thumb-value Styles the value of the current minimum and maximum thumb positions.
af|inputRangeSlider::ticks Styles the basic tick marks for the slider. This is used to set the positioning of the ticks.
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.
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.
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.
af|inputRangeSlider::tick-value Styles the value for major tick marks for the slider.
af|inputRangeSlider::tick-value-zero 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.
Icon Selectors 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::play-icon Overrides the default play icon.
af|inputRangeSlider::pause-icon Overrides the default pause 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::minus-disabled-icon Overrides the default disabled minus icon.
af|inputRangeSlider::pause-disabled-icon Overrides the default disabled pause 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.

af:inputSearch

Style Selectors Description Conditions
af|inputSearch Style on the root element of the af:inputSearch component.
af|inputSearch::access-key Style on the access key for the label of the af:inputSearch component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputSearch::content Style on the content of the af:inputSearch component. You can set the width of the content piece that will be used when the columns attribute on af:inputSearch is not set.
af|inputSearch::context-content Style that goes around both the context facet and the content. Can be used to control the content padding when the context facet is set, For example:af|inputSearch::context-content af|inputSearch::content{padding-left:7px;}
af|inputSearch::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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputSearch::label Style on the label of the af:inputSearch component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|inputSearch::button Style on the associated button
af|inputSearch::selections-button Style on the selected list count button
af|inputSearch::input-container Style on the container of content and the associated button
af|inputSearch::list-items-container Style on the suggestions popup content if the suggestions display mode is of type list
af|inputSearch::loading-indicator Style on the loading indicator
af|inputSearch::server-filtering-indicator Style on the loading indicator shown when the client filtered results are displayed and server filtering is still in progress
af|inputSearch::no-suggestions-message Style on the no suggestions message
af|inputSearch::row-items-container Style on the suggestions popup content if the suggestions display mode is of type table
af|inputSearch::suggestion-list-item Style on the each suggestion item if the suggestions display mode is of type list
af|inputSearch::suggestion-row-header Style on the header of the suggestions list if the suggestions display mode is of type table
af|inputSearch::suggestion-row-item Style on the each suggestion item if the suggestions display mode is of type table
af|inputSearch::suggestion-item-matching-text Style on the matched portion of the suggestion item's text
af|inputSearch::suggestions-container Style on the suggestions popup
.AFTltWrapper The styleclass around the element wrapped around the developer provided template. Currently used only in multi-select mode.
.AFTltSideAlign Styleclass to align two elements side-by-sde in list templating
.AFTltCheckboxCntnr Styleclass on wrapper element of checkbox in multi-selection mode
.AFTltCheckbox Styleclass on native checkbox element in multi-selection mode
.AFTltCheckbox Styleclass on native checkbox element in multi-selection mode
.AFTltVirtualCheckbox Styleclass on skinned checkbox in multi-selection mode
Icon Selectors Description
af|inputSearch::changed-icon The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias.
af|inputSearch::dynamic-help-icon Icon that can be used instead of a background-image on af|inputSearch::dynamic-help-icon-style. By default this is null. If you use this af|inputSearch::dynamic-help-icon-style can then be used for background colors, etc.

af:inputText

Style Selectors Description Conditions
af|inputText Style on the root element of the af:inputText component.
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 Style that goes around both the context facet and the content. Can be used to control the content padding when the context facet is set, For example:af|inputText::context-content af|inputText::content{padding-left:7px;}
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|inputText::label Style on the label of the af:inputText component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
.AFFieldTextMarker 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.
.AFFieldTextLTRMarker Styles the content piece of the component as a ltr field text.
.AFPhoneFieldTextMarker Styles the content piece of the component as a phone field text.
.AFPostalCodeFieldTextMarker Styles the content piece of the component as a postal code field text.
.AFAddressFieldTextMarker Styles the content piece of the component as an address field text.
.AFFieldNumberMarker Styles the content piece of the component as a number field text.
Icon Selectors 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:link

Style Selectors Description Conditions
af|link Style on the root element of the af:link 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 an action (command) type link 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 generated by a destination (go) type link 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 :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. When the link has a context facet this style is placed around all content with the exception of the context facet content. See af|link::context for more information. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
af|link::access-key Styles the access key character for links, default bold. This style includes .AFLinkAccessKeyStyle:alias
af|link::context Placed around the context facet content. A compound selector like "af|link::context af|contextInfo" can be used to control padding so that the icon doesn't overlap the link text
af|link::image Style of the image used inside of the af:link component.
af|link::text Style on the link text on the af:link component.

af:listItem

Style Selectors Description Conditions
af|listItem Styles the root dom element of the component. This component is not intended for use outside of the listView component. You could define a background-color or border style in this selector to style an inidividual item.
af|listItem::icon-container Styles the container for expand/collapse icons in the group header for listItem.
af|listItem::expanded-icon-style Style of the expanded icon used with the listItem component in a group header. 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|listItem::collapsed-icon-style Style of the collapsed icon used with the listItem component in a group header. 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|listItem::start-facet Styles the start-facet node if swipe feature is enabled on list item.
af|listItem::end-facet Styles the end-facet node if swipe feature is enabled on list item.
af|listItem::actions-wrapper Styles the outer container for actions in start and end facets.
af|listItem::actions-outer Styles the outer div containing the link. This can be used to style the action links differently with respect to width, background color etc.
af|listItem::action Styles the immediate parent of the action link and link text.
Icon Selectors Description
af|listItem::expanded-icon Overrides the default expanded icon for the listItem component in a group header.
af|listItem::collapsed-icon Overrides the default collapsed icon the listItem component in a group header.

af:listView

Style Selectors Description Conditions
af|listView 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.
af|listView::data-container Styles the wrapper around all listItem components.
af|listView::navbar Used to style the items navigation bar.
af|listView::navbar-item-range-text Used to style message displaying the number of items in the record navigation bar.
af|listView::navbar-load-more-link Used to style link for fetching more items in the record navigation bar.
af|listView::empty-text Used to style the container around the empty text displayed when the listView component has no items.

af:masonryLayout

Style Selectors Description Conditions
af|masonryLayout Selector that renders on the root dom element of the component.
af|masonryLayout::drop-target Specifies the style of the element used to identify the currently chosen location within the masonryLayout at which a drop will occur. Typically, a background-color style is what you will want to customize here.
.AFMasonryLayoutTransitionResizeTo Selector applied to animate the transition when the masonryLayout component is resized due to a layout change.
.AFMasonryLayoutTransitionResizeToFast Selector applied to animate the transition when the masonryLayout component is resized due to an interactive layout change, for example while the uer is reordering child tiles.
.AFMasonryTileTransitionMoveTo Selector applied to animate the transition when a child tile of the masonryLayout component is moved during layout.
.AFMasonryTileTransitionMoveToFast Selector applied to animate the transition when a child tile of the masonryLayout component is moved during an interactive layout, for example while the uer is reordering child tiles.
.AFMasonryTileTransitionResizeTo Selector applied to animate the transition when a child tile of the masonryLayout component is resized.
.AFMasonryTileTransitionHideFrom Selector applied as the initial state before an animated transition when a child tile of the masonryLayout component is about to be deleted.
.AFMasonryTileTransitionHideTo Selector applied to animate the transition when a child tile of the masonryLayout component is deleted.
.AFMasonryTileTransitionShowFrom Selector applied as the initial state before an animated transition when a child tile of the masonryLayout component is about to be inserted.
.AFMasonryTileTransitionShowTo Selector applied to animate the transition when a child tile of the masonryLayout component is inserted.
.AFMasonryTileSizeBase:alias Selector used to specify styles common to all masonryLayout tile size selectors. This selector is included by all masonryLayout tile size selectors.
.AFMasonryTileSize1x1 Selector that specifies that a child tile of a masonryLayout component spans 1 column and 1 row. Includes .AFMasonryTileSizeBase:alias
.AFMasonryTileSize1x2 Selector that specifies that a child tile of a masonryLayout component spans 1 column and 2 rows. Includes .AFMasonryTileSizeBase:alias
.AFMasonryTileSize1x3 Selector that specifies that a child tile of a masonryLayout component spans 1 column and 3 rows. Includes .AFMasonryTileSizeBase:alias
.AFMasonryTileSize2x1 Selector that specifies that a child tile of a masonryLayout component spans 2 columns and 1 row. Includes .AFMasonryTileSizeBase:alias
.AFMasonryTileSize2x2 Selector that specifies that a child tile of a masonryLayout component spans 2 columns and 2 rows. Includes .AFMasonryTileSizeBase:alias
.AFMasonryTileSize2x3 Selector that specifies that a child tile of a masonryLayout component spans 2 columns and 3 rows. Includes .AFMasonryTileSizeBase:alias
.AFMasonryTileSize3x1 Selector that specifies that a child tile of a masonryLayout component spans 3 columns and 1 row. Includes .AFMasonryTileSizeBase:alias
.AFMasonryTileSize3x2 Selector that specifies that a child tile of a masonryLayout component spans 3 columns and 2 rows. Includes .AFMasonryTileSizeBase:alias

af:media

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

af:menu

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

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

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

Style Selectors Description Conditions
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, :active and :disabled style classes.
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-content Style applied to the menu scroll container.
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 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.

af:menuBar

Style Selectors Description Conditions
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. The body is only present on menubars with overflow, so you should not style padding or margins here. You should instead style on the items element.
af|menuBar::items The direct container of the menuBar items. For a menuBar that uses overflow, this does not include the end space to the right where the overflow-indicator appears. The items element is present on menubars both with and without overflow, so it is a safe place to style padding or margins.
af|menuBar::item Style applied to the menuBar item that is shown on a menuBar. This does not apply when using a menuModel.
af|menuBar::model-nav-item-text Style applied to the text of the navigation item when using menuBar with a menu model.
af|menuBar::model-bar-nav-item Style applied to navigation item rendered inside the bar when using menuBar with a menu model.
af|menuBar::model-inner-nav-item Style applied to navigation item rendered inside the popups when using menuBar with a menu model.
af|menuBar::separator Styles the separator icon that is used to separate grouped children. This does not apply when using a menuModel.
af|menuBar::overflow-indicator Style on the overflow indicator that is present when the menuBar items are overflowed beyond the available space. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
Icon Selectors 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

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

Style Selectors Description Conditions
af|message This is the base selector for the component.
Icon Selectors 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.

af:messages

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

Style Selectors Description Conditions
af|messages This is the base selector for the component.
af|messages::header-text Style the container of the header element.
Icon Selectors 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.

af:navigationPane

Style Selectors Description Conditions
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". Tip: If you skin the background-image, you may also want to skin it for :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. Tip: If you skin the background-image, you may also want to skin it for :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. Tip: If you skin the background-image, you may also want to skin it for :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". Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
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". This includes .AFTextForeground:alias, .AFLinkForeground:alias, .AFDefaultFont:alias and .AFStartTextAlign:alias style selectors. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, :focus, etc.
af|navigationPane-choice::dropdown-cell Style on the cell of dropdown icon for gradient style. This includes .AFButtonGradient:alias, AFDropDownIconBorder:alias, .AFButtonGradientHover:alias, .AFButtonGradientActive:alias and .AFDropDownIconBorderActive:alias style selectors. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
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. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for s.
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". Tip: You may also want to skin :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.
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');} Only used by fusion skins.
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. Only used by fusion skins.
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). This element is only present when overflow compressed layout is enabled.
af|navigationPane-tabs::conveyor-belt-container Style for container of drop list items.
af|navigationPane-tabs::start-overflow-indicator Style on the start overflow indicator that is present when the toolbar tabs have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|navigationPane-tabs::end-overflow-indicator Style on the end overflow indicator that is present when the toolbar tabs have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|navigationPane-tabs::start-conveyor-belt-indicator Style on the start conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|navigationPane-tabs::end-conveyor-belt-indicator Style on the end conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|navigationPane-tabs::droplist-indicator Style on the droplist indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt or overflow droplist. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|navigationPane-tabs::disclosed-remove-icon-style If item removal is enabled, this is the style of the remove icon used on a selected tab item. The icon is specified as a background-image in this key. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|navigationPane-tabs::undisclosed-remove-icon-style If item removal is enabled, this is the style of the remove icon used on a nonselected tab item. The icon is specified as a background-image in this key. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|navigationPane-tabs::disclosed-remove-disabled-icon-style If item removal is enabled, this is the style of the disabled remove icon used on a disclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key.
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style If item removal is enabled, this is the style of the disabled remove icon used on an undisclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key.
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 Description
af|navigationPane-bar::separator-icon Allows setting of an alternate separator icon for navigationPane component with hint "bar".
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-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.
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-tabs::disclosed-remove-icon If item removal is enabled, this overrides the default remove icon on a selected tab item. Icons can be text or img elements, e.g. af|navigationPane-tabs::disclosed-remove-icon {content "X"} or af|navigationPane-tabs::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|navigationPane-tabs::undisclosed-remove-icon If item removal is enabled, this overrides the default remove icon on a nonselected tab item. Icons can be text or img elements, e.g. af|navigationPane-tabs::undisclosed-remove-icon {content "X"} or af|navigationPane-tabs::undisclosed-remove-icon {content: url(...)}. Use this key instead of the undisclosed-remove-icon-style key if you do not want a background-image.
af|navigationPane-tabs::remove-disabled-icon If item removal is enabled, this overrides the default disabled remove icon on an tab item that is set to remove disabled. Icons can be text or img elements, e.g. af|navigationPane-tabs::remove-disabled-icon {content "X"} or af|navigationPane-tabs::remove-disabled-icon {content: url(...)}. Use this key instead of the disclosed-remove-disabled-icon-style and undisclosed-remove-disabled-icon-style keys if you do not want a background-image.
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.

af:noteWindow

Style Selectors Description Conditions
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:outputFormatted

Style Selectors Description Conditions
af|outputFormatted Selector that renders on the root dom element of the component. Note: For performance sake, we usually do not render selectors on af:outputFormatted since you can use styleClass or inlineStyle attributes instead. Only under certain circumstances do we render this selector, like if the outputFormatted component's context facet contains a contextInfo component. This way we can use the selector to style "af|outputFormatted af|contextInfo"

af:outputLabel

Style Selectors Description Conditions
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:outputText

Style Selectors Description Conditions
af|outputText Selector that renders on the root dom element of the component. Note: For performance sake, we usually do not render selectors on af:outputText since you can use styleClass or inlineStyle attributes instead. Only under certain circumstances do we render this selector, like when in emailable page mode or if the outputText component is within a contextInfo component.

af:pageTemplate

not generate any elements on the page and thus is not skinnable.

af:panelAccordion

Style Selectors Description Conditions
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. If your top/bottom borders for the headers are bigger than 1px per header total, use the -tr-header-border-height property to set it.
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.
af|panelAccordion::header-subsequent Style on the subsequent headers (all except the first) included in the panelAccordion component.
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. Only used by fusion skins.
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. Only used by fusion skins.
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.
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. Tip: If you skin the background-image, you may also want to skin it for :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. Tip: If you skin the background-image, you may also want to skin it for :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.
.AFPanelAccordionHeaderBackground:alias Used by the fusion skins to skin the background image of the panelAccordion header
.AFPanelAccordionHeaderDisclosedBackground:alias Used by the fusion skins to skin the background image of the panelAccordion disclosed header
.AFPanelAccordionBodyMultipleBackgroundImage:alias Used by the fusion skins to skin multiple background-images in the af|panelAccordion::body-content pseudo-element when the browser supports multiple background images. This is unused in older browsers that do not support multiple background-images.
Icon Selectors 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.

af:panelBorderLayout

Style Selectors Description Conditions
af|panelBorderLayout Style on the root element of the af:panelBorderLayout component.

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 Description Conditions
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%.
af|panelBox::header-start Style the start side of the header of the panel box. Used to render rounded corners for the panelBox. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-start:core:default includes .AFPanelBoxHeaderCoreDefault:alias. Only used by fusion skins.
af|panelBox::header-center Style the center side of the header of the panel box. Used to render rounded corners for the panelBox. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-center:core:default includes .AFPanelBoxHeaderCoreDefault:alias. Only used by fusion skins.
af|panelBox::header-text Style the container of the header element.
af|panelBox::header-element Style the header element that contains the header text.
af|panelBox::header-end Style the end side of the header of the panel box. Used to render rounded corners for the panelBox. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-end:core:default includes .AFPanelBoxHeaderCoreDefault:alias. Only used by fusion skins.
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).
af|panelBox::content Style the content area of the panel box. 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. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-start:core:default includes .AFPanelBoxFooterCoreDefault:alias. Only used by fusion skins.
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. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-center:core:default includes .AFPanelBoxFooterCoreDefault:alias. Only used by fusion skins.
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. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-end:core:default includes .AFPanelBoxFooterCoreDefault:alias. Only used by fusion skins.
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::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|panelBox::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|panelBox::unmaximized-icon-style Style on the icon that is shown when the panel is maximized. 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 unmaximize-icon-style and define the icon for the unmaximize-icon key.
af|panelBox::maximized-icon-style Style on the icon that is shown when the panel is normal size. 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 maximize-icon-style and define the icon for the maximize-icon key.
af|panelBox::maximize-link Selector for the anchor element that contains the maximize icon.
af|panelBox::disclosure-icon-container Styles the container for the disclosure icon.
af|panelBox::instruction-text Styles the text that might come from the helpTopicId.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Icon Selectors 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

Style Selectors Description Conditions
af|panelCollection The selector on the root dom element of this component.
Icon Selectors 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::go-to-top-disabled-icon Toolbar Icon for showing the root node of the model 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.)

af:panelDashboard

Style Selectors Description Conditions
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.
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:panelDrawer

Style Selectors Description Conditions
af|panelDrawer Selector that renders on the root dom element of the component.
af|panelDrawer::body Style on the body of the panelDrawer component.
af|panelDrawer::tabs Style around the tabs.
af|panelDrawer::tab Style on each tab in the panelDrawer component.
af|panelDrawer::tab-content Style on the tab content.
af|panelDrawer::icon-style Style on the icon in the tab.

af:panelFormLayout

Style Selectors Description Conditions
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 when a group title is not specified.
af|panelFormLayout::group-title-text Specifies the style information for the text in a titled group separator in the panelFormLayout.
af|panelFormLayout::group-title-separator Specifies the style information for the separator that follows the title text for a titled group separator 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.
af|panelFormLayout::container Specifies the style information for the container of the form fields. Applicable when layout="responsive".
af|panelFormLayout::footer Specifies the style information for the footer facet. Applicable when layout="responsive".
af|panelFormLayout::group Specifies the style information for the af:group container. Applicable when layout="responsive".
af|panelFormLayout::member Specifies the style information for the form layout member/field. Applicable when layout="responsive".
af|panelFormLayout::responsive-label-cell Specifies the style information for the label cell of the form member. Applicable when layout="responsive".
af|panelFormLayout::group-title-wrapper Specifies the style information for the group title wrapper. Applicable when layout="responsive".
.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 { ... }
.AFTopAlignLabelCell:alias Alias to top align the label
.AFStartAlignLabelCell:alias Alias to start align the label
.AFStartAlignLabelReadOnlyCell:alias Alias to start align the label in read only mode
.AFTopAlignLabelReadOnlyCell:alias Alias to top align label in read only mode
.AFTopAlignLabelContentCell:alias Alias to align the content cell in top aligned label state

af:panelGridLayout

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

af:panelGroupLayout

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

af:panelHeader

Style Selectors Description Conditions
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.
af|panelHeader::title-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. The value for "$" is a number between 1 and 5 signifying the five header types. Only used by fusion skins.
af|panelHeader::title$ 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 $ is a number between 1 and 5 signifying the five header types.
af|panelHeader::title-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. The value for "$" is a number between 1 and 5 signifying the five header types. Only used by fusion skins.
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. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelHeader::title-text$ Styles the "header" element inside the title of the element specified by the af|panelHeader::title$ key. This element surrounds the header text. The value for "$" is a number between 1 and 5 signifying the five header types. 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::instruction-text Styles the text that might come from the helpTopicId.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|panelHeader::toolbar This is a potential sub section of the "af|panelHeader::titlex". 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.
af|panelHeader::content$ 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 $ is a number between 1 and 5 signifying the five header types.
Icon Selectors Description
af|panelHeader::confirmation-icon Icon used when the messageType is set to "confirmation".
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".
af|panelHeader::information-icon Icon used when the messageType is set to "information".
af|panelHeader::warning-icon Icon used when the messageType is set to "warning".

af:panelLabelAndMessage

Style Selectors Description Conditions
af|panelLabelAndMessage Style on the root element of the af:panelLabelAndMessage component.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
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 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

Style Selectors Description Conditions
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|panelList::item Style applied to items in the panelList.
af|panelList::link Style applied on the links present inside the panelList component.

af:panelSplitter

Style Selectors Description Conditions
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.
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.
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.
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
Icon Selectors 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.

af:panelSpringboard

Style Selectors Description Conditions
af|panelSpringboard Selector that renders on the root dom element of the component.
af|panelSpringboard::body Style on the body of the panelSpringboard component.
af|panelSpringboard::items Style around the items of the panelSpringboard.
af|panelSpringboard::item Style on each item in the panelSpringboard component.
af|panelSpringboard::canvas Style on canvas in the panelSpringboard component.
af|panelSpringboard::badge Style on the badge element in the panelSpringboard.
af|panelSpringboard::item-icon-style Style on the image in the panelSpringboard.
af|panelSpringboard::item-text Style on the text of the item in the panelSpringboard.
af|panelSpringboard::selected-pointer Style on the div that points to selected arrow in the panelSpringboard. we can also skin the background-image of the selected-pointer to show an arrow.
af|panelSpringboard::conveyor Style on the conveyor area of panelSpringboard.
af|panelSpringboard::conveyor-belt-container Style on the conveyor belt panelSpringboard.
af|panelSpringboard::conveyor-belt-content Style on the conveyor belt content area panelSpringboard.
af|panelSpringboard::start-conveyor-belt-indicator Style on the start of conveyor belt indicator panelSpringboard.
af|panelSpringboard::end-conveyor-belt-indicator Style on the end of conveyor belt indicator panelSpringboard.
af|panelSpringboard::start-conveyor-belt-indicator-container Style on the start of conveyor belt container panelSpringboard.
af|panelSpringboard::end-conveyor-belt-indicator-container Style on the end of conveyor belt container panelSpringboard.

af:panelStretchLayout

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

af:panelTabbed

Style Selectors Description Conditions
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. Only used by fusion skins.
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. 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 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. Only used by fusion skins.
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. Only used by fusion skins.
af|panelTabbed::content Style on the wrapper element of the body content (area between the header and footer bars) of the panelTabbed component.
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. Only used by fusion skins.
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. Only used by fusion skins.
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. Only used by fusion skins.
af|panelTabbed::tabs Style around the vertically positioned tabs.
af|panelTabbed::tab Style on the tabs in the panelTabbed component. This applies to tabs in both the header and the footer.
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');} Only used by fusion skins.
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. Only used by fusion skins.
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.
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 have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::end-overflow-indicator Style on the end overflow indicator that is present when the toolbar tabs have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::start-conveyor-belt-indicator Style on the start conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::end-conveyor-belt-indicator Style on the end conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::droplist-indicator Style on the droplist indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt or overflow droplist. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::top-conveyor-belt-indicator Style on the top conveyor belt indicator that is present when the tabs are vertical and are in a compressed layout. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::bottom-conveyor-belt-indicator Style on the bottom conveyor belt indicator that is present when the tabs are vertical and are in a compressed layout. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::conveyor-belt-container Style on the conveyor belt droplist popup container.
af|panelTabbed::toggle Style on the toggle tab text icon container.
af|panelTabbed::toggle-icon-style If toggle tab text icon is enabled, this is the style of the toggle icon used on a vertical tab list. The icon is specified as a background-image in this key. Tip: If you skin the background-image, you may also want to skin it for :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. Tip: If you skin the background-image, you may also want to skin it for :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. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|panelTabbed::disclosed-remove-disabled-icon-style If tab removal is enabled, this is the style of the disabled remove icon used on a disclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key.
af|panelTabbed::undisclosed-remove-disabled-icon-style If tab removal is enabled, this is the style of the disabled remove icon used on an undisclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key.
Icon Selectors 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.
af|panelTabbed::remove-disabled-icon If tab removal is enabled, this overrides the default disabled remove icon on an tab item that is set to remove disabled. Icons can be text or img elements, e.g. af|panelTabbed::remove-disabled-icon {content "X"} or af|panelTabbed::remove-disabled-icon {content: url(...)}. Use this key instead of the disclosed-remove-disabled-icon-style and undisclosed-remove-disabled-icon-style keys if you do not want a background-image.

af:panelWindow

Style Selectors Description Conditions
af|panelWindow Selector that renders on the root dom element of the component.
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.
af|panelWindow::header Styles the "header" element. This element surrounds the header text, icon and close regions.
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.
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.
af|panelWindow::footer The style for the center cell of the footer.
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.
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.
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.
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.
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-region/af|panelWindow::pin-icon-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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|panelWindow::close-icon-region Styles the region around the end corner close icon aligned to end in LTR. It can be used to set borders, margins, and background colors for the close icon region.
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.
af|panelWindow::pin-icon-region Styles the region around the end corner pin icon aligned to end in LTR. It can be used to set borders, margins, and background colors for the pin icon region.
af|panelWindow::pin-icon-style Style on the panelWindow's pin 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 pin-icon-style and define the icon for the pin-icon key.
Icon Selectors 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::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::pin-icon Overrides the default pin icon. Icons can be text or img elements, e.g. af|panelWindow::pin-icon {content "X"} or af|panelWindow::pin-icon {content: url(...)}. Use this key instead of the pin-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.

af:popup

Style Selectors Description Conditions
af|popup Used for setting the following skinning properties that effect the appearance of popup drop shadows.

af:progressIndicator

Style Selectors Description Conditions
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. 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 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.

af:query

Style Selectors Description Conditions
af|query Styles the root element of the af:query component.
af|query::button Styles the buttons of the query component. Note that this skin selector is only present when the skin selector -tr-button-type is set to 'old', and the query buttons are rendered as af:commandButtons. When the -tr-button-type is set to 'unified', the query buttons are rendered as af:buttons and have the default stylings for af:button applied, so that query buttons have the same look and feel as all other buttons. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, :focus. 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 When -tr-button-type is set to 'old', styles the access key text of the query commandButton. This includes the .AFButtonAccessKeyStyle:alias style.
af|query::content$ 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::title$ key. The value for $ 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 $ 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-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. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|query::criterion-indexed-icon-style Styles the indexed icon. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
af|query::instruction-text Styles the text that might come from the helpTopicId.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
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. Tip: If you skin the background-image, you may also want to skin it for :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.
af|query::title$ Styles the main part of the header. It is the section that immediately follows the "af|query::title-start$" key. The value for $ is a number between 0 and 5 signifying the six header types.
af|query::title-end$ 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. The value for $ is a number between 0 and 5 signifying the six header types.
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.
af|query::title-text$ Styles the header text inside the title element specified by the af|query::title$ 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.
af|query::title-start$ 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.
af|query::move-top-icon-style Styles move top button in reorder dialog
af|query::move-up-icon-style Styles move up button in reorder dialog
af|query::move-bottom-icon-style Styles move bottom button in reorder dialog
af|query::move-down-icon-style Styles move down button in reorder dialog
af|query::separator-icon-style Style of the icon used as the bar item separator.
af|query::group-criterion-cell Styles the cell of each group of search fields inthe search panel
af|query::group-criterion-name-text Styles the name of the "Search Field" group
af|query::group-criterion-name-cell Styles the cell that encloses the name of the "Search Field" group
af|query::group-criterion-delete-icon-cell Styles the cell that encloses the delete icon within a criterion.
af|query::reorder-search-tree Styles the reorder tree in the reorder dialog .
.AFBetweenSeparatorIcon:alias Specifies the icon between the two components that get rendered when the 'Between ..." operator is chosen for the search field of the af:query component.
Icon Selectors 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.
af|query::attribute-presence-indicator-icon Icon used for indicating that an attribute (in "Add Fields" button) is already present in the query panel
af|query::move-top-icon Styles the move to top shuttle button in the reorder dialog .

af:quickQuery

Style Selectors Description Conditions
af|quickQuery Style on the root element of the af:quickQuery component.
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. 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. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
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. 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. Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Icon Selectors 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.

af:region

Style Selectors Description Conditions
af|region Selector that renders on the root dom element of the component.
af|region::header-start Style the start side of the header of the region. Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. For example, the ramp is set to "core" and background set to "default" the style used for this is "af|region::header-start:core:default". This includes the .AFPanelBoxHeader* alias, for example af|region::header-start:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|region::header-center Style the center side of the header of the region. Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxHeader* alias, for example af|region::header-center:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|region::header-text Style the container of the header element.
af|region::header-element Style the header element that contains the header text.
af|region::header-end Style the end side of the header of the region. Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxHeader* alias, for example af|region::header-end:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|region::center Style the center area of the region that wraps the content area of the region. 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 pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component.
af|region::content Style the content area of the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxContent* alias, for example af|region::content:core:default includes .AFPanelBoxContentCoreDefault:alias.
af|region::footer-start Style the start side of the footer of the region (used only if -tr-footer-height is not 0px). Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. For example, the ramp is set to "core" and background set to "default" the style used for this is "af|region::footer-start:core:default". This includes the .AFPanelBoxFooter* alias, for example af|region::footer-start:core:default includes .AFPanelBoxFooterCoreDefault:alias.
af|region::footer-center Style the center side of the footer of the region (used only if -tr-footer-height is not 0px). Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxFooter* alias, for example af|region::footer-center:core:default includes .AFPanelBoxFooterCoreDefault:alias.
af|region::footer-end Style the end side of the footer of the region (used only if -tr-footer-height is not 0px). Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxFooter* alias, for example af|region::footer-end:core:default includes .AFPanelBoxFooterCoreDefault:alias.
af|region::disclosure-link Selector for the anchor element that contains the disclosure icon.
af|region::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|region::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|region::maximize-icon-container Styles the container for the maximize icon.
af|region::maximize-link Selector for the anchor element that contains the maximize icon.
af|region::unmaximized-icon-style Style on the icon that is shown when the panel is maximized. 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 unmaximize-icon-style and define the icon for the unmaximize-icon key.
af|region::maximized-icon-style Style on the icon that is shown when the panel is normal size. 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 maximize-icon-style and define the icon for the maximize-icon key.
af|region::instruction-text Styles the text that might come from the helpTopicId.
af|region::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 Description
af|region::maximized-icon The icon is displayed when the af:region component is rendered in its normal state.
af|region::unmaximized-icon The icon is displayed when the af:region component is rendered in its maximized state.
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|region::dynamic-help-icon Icon that can be used instead of a background-image on af|region::dynamic-help-icon-style. By default this is null. If you use this af|region::dynamic-help-icon-style can then be used for background colors, etc.

af:resetButton

Style Selectors Description Conditions
af|resetButton Style on the root element of the af:resetButton component. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, :focus, and :disabled. 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

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::incrementor-icon, for example, there is no way to override this with af|richTextEditor::content af|inputNumberSpinbox::incrementor-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 Description Conditions
af|richTextEditor Style on the root element of the af:richTextEditor component.
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. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
af|richTextEditor::label Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
af|richTextEditor::footer-facet Style on the footer facet's container.
af|richTextEditor::content-input-container-addendum-with-footer Additional CSS to be applied to content input container when footer is present.
Icon Selectors 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.
af|richTextEditor::add-link-active-icon Icon for the add-link button in active state.
af|richTextEditor::add-link-disabled-icon Icon for the add-link button in disabled state.
af|richTextEditor::add-link-hover-icon Icon for the add-link button in hover state.
af|richTextEditor::add-link-icon Icon for add link button.
af|richTextEditor::bold-active-icon Icon for bold button in active state.
af|richTextEditor::bold-disabled-icon Icon for bold button in disabled state.
af|richTextEditor::bold-hover-icon Icon for bold button in hover state.
af|richTextEditor::bold-icon Icon for bold button.
af|richTextEditor::clear-styling-active-icon Icon for clear-style button in active state.
af|richTextEditor::clear-styling-disabled-icon Icon for clear-style button in disabled state.
af|richTextEditor::clear-styling-hover-icon Icon for clear-style button in hover state.
af|richTextEditor::clear-styling-icon Icon for clear-style button.
af|richTextEditor::indent-active-icon Icon for indent button in active state.
af|richTextEditor::indent-disabled-icon Icon for indent button in disabled state.
af|richTextEditor::indent-hover-icon Icon for indent button in hover state.
af|richTextEditor::indent-icon Icon for indent button.
af|richTextEditor::italic-active-icon Icon for italic button in active state.
af|richTextEditor::italic-disabled-icon Icon for italic button in disabled state.
af|richTextEditor::italic-hover-icon Icon for italiv button in hover state.
af|richTextEditor::italic-icon Icon for italic button.
af|richTextEditor::justify-center-active-icon Icon for justify-center button in active state.
af|richTextEditor::justify-center-disabled-icon Icon for justify-center button in disabled state.
af|richTextEditor::justify-center-hover-icon Icon for justify-center button in hover state.
af|richTextEditor::justify-center-icon Icon for justify-center button.
af|richTextEditor::justify-full-active-icon Icon for justify-full button in active state.
af|richTextEditor::justify-full-disabled-icon Icon for justify-full button in disabled state.
af|richTextEditor::justify-full-hover-icon Icon for justify-full button in hover state.
af|richTextEditor::justify-full-icon Icon for justify-full button.
af|richTextEditor::justify-left-active-icon Icon for justify-left button in active state.
af|richTextEditor::justify-left-disabled-icon Icon for justify-left button in disabled state.
af|richTextEditor::justify-left-hover-icon Icon for justify-left button in hover state.
af|richTextEditor::justify-left-icon Icon for justify-left button.
af|richTextEditor::justify-right-active-icon Icon for justify-right button in active state.
af|richTextEditor::justify-right-disabled-icon Icon for justify-right button in disabled state.
af|richTextEditor::justify-right-hover-icon Icon for justify-right button in hover state.
af|richTextEditor::justify-right-icon Icon for justify-right button.
af|richTextEditor::list-ordered-active-icon Icon for list-ordered button in active state.