Oracle ADF Faces - Selectors for Skinning ADF Faces subsections

Selectors for Skinning Fusion's ADF Faces Components

NOTICE: These skin selectors still need to be reviewed, and they are subject to change. Also, this skin document is incomplete. We have not yet documented the skinning keys for all skinnable components. Any developers using these skinning keys must do so with the knowledge that all such skinning code may need to be rewritten.

Overview

This document lists the selectors that can be used in an ADF Faces skin .css file to skin ADF Faces components.
     Examples of some ADF Faces Skin selectors:
     /* Global selectors affect more than one component */
     .AFDefaultFontFamily:alias {
       font-family: Tahoma, Verdana, Helvetica, sans-serif;
      }

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

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.

Global Style Selectors

Selector Name Description
.AFButtonAccessKeyStyle:alias Specifies the access key style for af|commandButton, af|goButton, af|resetButton.
.AFDefaultFontFamily:alias Specifies the default font family list ("font-family" property) for the skin.
.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.
.AFStartTextAlign:alias Sets the text-align property to "left" for left-to-right reading direction and "right" for right-to-left reading direction.
.AFEndTextAlign:alias Sets the text-align property to "right" for left-to-right reading direction and "left" for right-to-left reading direction.
.AFEndPadding:alias Sets the padding property to pad on the left-to-right reading direction and "left" for right-to-left reading direction. e.g,: padding: 0px 8px 0px 0px; (for 'right' padding).
.AFLeftTextAlign:alias Sets the text-align property to "left" regardless of the reading direction.
.AFRightTextAlign:alias Sets the text-align property to "right" regardless of the reading direction.
.AFCenterTextAlign:alias Sets the text-align property to "center" regardless of the reading direction.
.AFClickableImageAnchor:alias Specifies the CSS properties needed to display an image which is clickable and which has inline-mode display. This style should be applied on an empty anchor, i.e. no text between the and tags. The attributes control the appearance, e.g. font-size and padding-right give the image room to display inline. By default, this alias is included in style selectors that use 16x16 images and need to display inline background-images for both IE and Firefox. To customize, you can include this alias in your selector and override its properties. For example, you can change font-size and padding-right for an image with different height and width, or you can set "display: block" together with height, width attributes to display in block mode.
.AFFormAccessKeyStyle:alias Style the access key (like underline or bold) for form components. Affects output labels, input, panelLabelAndMessage, af:select* components.
.AFLabel:alias Aliased style class that is included in the label selector for all the form components. e.g., "af|inputText::label". Uses .AFDefaultFont:alias, .AFEndTextAlign:alias, .AFEndPadding:alias, .AFLabelTextForeground:alias,
.AFLabelDisabled:alias Aliased style class that is included in the label selector for all the form components when they are disabled. It is a quick way to style disabled form components' labels the same, instead of for each component: .AFLabelDisabled:alias instead of e.g., "af|inputText:disabled af|inputText::label".
.AFLabelTextForeground:alias Colors the label. Use the css property 'color' to style the color of the label. This is used in the .AFLabel:alias style which styles the label for all form components, like af:inputText and af:selectOne/selectMany components.
.AFLabelTextForegroundDisabled:alias Use the property 'color' to style the color of the label when it is disabled. This is used in the .AFLabelDisabled:alias style which styles the label for all form components (like af:inputText and af:selectOne/selectMany) when they are disabled.
.AFStandardIconStyle:alias Aliased style class that defines styles for a standard icon that is defined as a background image (like .AFInfoIconStyle:alias). The Rich Client has a number of components that need to be changed dynamically on the client. Appending images to dom elements as backgrounds allows us to switch the icon by changing the style class rather then having to switch out the graphical image itself.
.AFConfirmationIconStyle:alias Aliased style class that defines the "confirmation" icon as a background image. When used in conjunction with a <div /> tag and the .AFStandardIconStyle:alias alias this will output the skinned graphic image.
.AFInfoIconStyle:alias Aliased style class that defines the "info" icon as a background image. When used in conjunction with a <div /> tag and the .AFStandardIconStyle:alias alias this will output the skinned graphic image.
.AFWarningIconStyle:alias Aliased style class that defines the "warning" icon as a background image. When used in conjunction with a <div /> tag and the .AFStandardIconStyle:alias alias this will output the skinned graphic image.
.AFErrorIconStyle:alias Aliased style class that defines the "error" icon as a background image. When used in conjunction with a <div /> tag and the .AFStandardIconStyle:alias alias this will output the skinned graphic image.
.AFLinkAccessKeyStyle:alias Highlight the Access Key for the link, e.g. bold it.
.AFLinkForeground:alias The default foreground color for links.
.AFActiveLinkBorder:alias The default border information (color, size, style) for active links.
.AFActiveLinkForeground:alias The default foreground color for active links. By default, this value is computed relative to the .AFLinkForeground:alias color.
.AFVisitedLinkForeground:alias The default foreground color for visited links. By default, this value is computed relative to the .AFLinkForeground:alias color.
.AFRequiredIconStyle A style class that styles the required icon for form components. You cannot currently style this icon for each component.
.AFInstructionText, .AFFieldText, .AFFieldTextLTR, .AFPhoneFieldText, .AFPostalCodeFieldText, .AFAddressFieldText, .AFInstructionTextDisabled, .AFFieldTextDisabled, .AFFieldTextLTRDisabled, .AFPhoneFieldTextDisabled, .AFPostalCodeFieldTextDisabled, .AFAddressFieldTextDisabled, .AFDataText, .AFDataTextDisabled, .AFDataNumber, .AFDataNumberDisabled, .AFFieldNumber, .AFFieldNumberDisabled, .AFLabelTextDisabled Built-in styles that can be used as a styleClass attribute value.

Please note: For the af:inputText components, you should use the styleClasses that end in 'Marker' instead. The style classes listed here will affect the entire af:inputText components, and the 'Marker' styles affect only the 'content' piece of the components. See af|inputText below for the list of public styleClasses to use for those components.
.AFDarkTone, .AFMediumTone, .AFLightTone, .AFDefaultTone Built-in styles that can be used as a styleClass attribute value.

Please note: These do absolutely nothing on their own.

You can use them in your skin to specify alternative containment styles to make components have alternative appearances when placed in a container that has this style as a parent. You will most like want to use these in your page templates.

For example, use AFDarkTone to signify bright text colors in dark containers or use AFLightTone to specify dark text colors in light containers.

The AFDefaultTone can be used as a way to revert overridden styles back to their original settings as if the component were in no tonal container.

The simple skin has no definitions with these container styles.



Example:
  af|foo,
  .AFDarkTone .AFMediumTone af|foo,
  .AFDarkTone .AFLightTone af|foo,
  .AFDarkTone .AFDefaultTone af|foo {
    color: black;
  }
  .AFDarkTone af|foo {
    color: white;
  }


Note that the BLAF+ skin will only have style definitions that work with the assumption that the tonal container style classes are in the following hierarchy:



AFDarkTone - AFMediumTone - AFLightTone - AFDefaultTone



If you do not wish to have this structure, you will need to create your own skin. In this skin, you will define your own tonal style definitions for every component that you want to have alternate appearances for, using your personalized tonal container hierarchy.
.AFVisualRoot A style class that styles the outer-most visual root element of a page template.
.AFBranding A style class that styles the branding area of a page template.
.AFDecorativeBoxTopStart, .AFDecorativeBoxTop, .AFDecorativeBoxTopEnd, .AFDecorativeBoxCenterStart, .AFDecorativeBoxCenter, .AFDecorativeBoxCenterEnd, .AFDecorativeBoxBottomStart, .AFDecorativeBoxBottom, .AFDecorativeBoxBottomEnd Built-in styles that can be used to create a decorative box.

These are handy for use in page templates where you might want to insert components in the outer sides of the box.



Intended box structure:
.AFDecorativeBoxTopStart .AFDecorativeBoxTop .AFDecorativeBoxTopEnd
.AFDecorativeBoxCenterStart .AFDecorativeBoxCenter .AFDecorativeBoxCenterEnd
.AFDecorativeBoxBottomStart .AFDecorativeBoxBottom .AFDecorativeBoxBottomEnd
.AFPopupSelectorHeader, .AFPopupSelectorHeaderStart, .AFPopupSelectorHeaderEnd, .AFPopupSelectorContent, .AFPopupSelectorContentStart, .AFPopupSelectorContentEnd, .AFPopupSelectorFooter, .AFPopupSelectorFooterStart, .AFPopupSelectorFooterEnd A Popup selector displays arbitrary content as a popup on the screen. for e.g.:

                <af:popup id="popup">
                  <af:panelGroupLayout layout="vertical">
                    Hi! I am displayed in a popup.
                  </af:panelGroupLayout>
                </af:popup>
                <af:commandButton text="Show Skinned Popup" id="button">
                  <af:showPopupBehavior popupId="popup"
                      align="afterEnd" alignId="button"/>
                </af:commandButton>
            
The rounded corners in the popup selector are achieved by dividing it into a 3x3 cell display. These styles can be used to style each of the cell in 3x3 matrix, with the AFPopupSelectorContent occupying the middle-center cell.

Message Selectors

Defining Component-level Message Styles

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

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

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

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

Rich Message Formatting Selectors

The following selectors are used to format messages in the rich client and may be skinned as needed.

Style Selectors
Name Description
af|message::icon The default icon for messages that are not of type info, confirmation, warning, error, or fatal. This icon is rendered as a background image. Includes .AFStandardIconStyle:alias
af|message::icon-info The default icon for messages that are of type info. This icon is rendered as a background image. Includes .AFInfoIconStyle:alias
af|message::icon-confirmation The default icon for messages that are of type confirmation. This icon is rendered as a background image. Includes .AFConfirmationIconStyle:alias
af|message::icon-warning The default icon for messages that are of type warning. This icon is rendered as a background image. Includes .AFWarningIconStyle:alias
af|message::icon-error The default icon for messages that are of type error. This icon is rendered as a background image. Includes .AFErrorIconStyle:alias
af|message::icon-fatal The default icon for messages that are of type fatal. This icon is rendered as a background image. Includes .AFErrorIconStyle:alias
af|message::type The style for the messages "type" text. The "type" text appears next to the icon at the top of the message saying what level of message is present.
af|message::summary The style for the message summary.
af|message::detail The style for the message detail.
af|mesage::header The style for the message header. The message header contains the message icon and the message type text

BIDI and :rtl pseudo-class

You can add the :rtl pseudo-class to your selector when you want it to be rendered in right-to-left mode. This is most useful for non-symmetrical images. An example of the skinning key format is : af|panelAccordion::header-start:rtl

status pseudo-classes

You can add :hover and :active pseudo-class to your selector to change display style when mouse hovered and mouse pressed. There are also skinning keys for other status, such as disabled. If :active and :disabled are specified, make sure to specify :disabled:active to prevent disabled element from showing mouse down status when pressed by mouse. :disabled:active style should be the same as :disabled style. An example of the skinning key format is : af|inputDate::launch-icon-style:disabled:active.

Component-level Selectors

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

af:breadCrumbs Component

Style Selectors
Name Description
af|breadCrumbs Styles the root dom element of the component.
af|breadCrumbs::access-key Style on the access key character of commandNavigationItem, when it is used inside a breadCrumbs. Includes .AFFormAccessKeyStyle:alias
af|breadCrumbs::icon-style Style on the icon of commandNavigationItem, when it is used inside a breadCrumbs.
af|breadCrumbs::separator Styles the separator icon.
af|breadCrumbs::step Styles the step. Available pseudo-classes are :selected and :disabled and pseudo-classes that are allowed in an a tag, like :hover. (e.g., af|breadCrumbs::step:selected)
Icon Selectors
Name Description
af|breadCrumbs::separator-icon This is the separator icon itself.
ADF Faces properties
Name Description
-tr-show-last-item Valid values are true or false. Determines whether the last item is displayed or not. e.g., af|breadCrumbs {-tr-show-last-item:false} will not show the last item in the breadCrumbs.

af:chooseColor Component

Style Selectors
Name Description
af|chooseColor Styles the root dom element of the component.
af|chooseColor::button Styles the standard color palette buttons.
af|chooseColor::button-swatch Styles the color swatch on standard color palette buttons. And :empty and :rtl are potential pseudo-classes for this class.
af|chooseColor::swatch Styles the margin and width/height of color swatch. And :empty is a potential pseudo-class for this class.
af|chooseColor::swatch-cell Styles the swatch cell on standard color palette; typically this would be the border properties. And :selected is a potential pseudo-class for this class.

af:chooseDate Component

Style Selectors
Name Description
af|chooseDate The selector on the root dom element of the component.
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::days-row Styles the appearance of the dates within the calendar grid. Individual day types (previous or next month, selected, regular) can override the properties defined here. For example, this can be set to a uniform font-size for all the days.
af|chooseDate::month-list-content Styles the appearance of the dropdown month selector. For example, this can be set to a different font size
af|chooseDate::next-month-arrow Styles the next-month icon cell. You can put a background-image here. Available pseudo-classes are those that are allow on the html a tag, like :hover and :active.
af|chooseDate::prev-month-arrow Styles the previous-month icon cell. You can put a background-image here. Available pseudo-classes are those that are allow on the html a tag, like :hover and :active.
af|chooseDate::prev-month-day Styles the appearance of the table cell for dates in the previous or next month. For example, you can add background color or border to the cell. :selected pseudo-class available as well.
af|chooseDate::regular-day Styles the appearance of the table cell for dates in the current month. For example, you can add background color or border to the cell. :selected pseudo-class available as well.
af|chooseDate::spinbox-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::timezone-list-content Styles the appearance for the dropdown timezone selector. For example, this can be set to a different font size
af|chooseDate::today Styles the appearance of the table cell for the current date (today). For example, you can add background color or border to the cell. :selected pseudo-class available as well.
af|chooseDate::week-header-row The appearance of the weekday headers of the calendar. For example, this can be set to a different font-size or background color.
Icon Selectors
Name Description
af|chooseDate::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:column Component

Style Selectors
Name Description
.AFTableCellHeaderText:alias Specifies the font family, font size and font-weight for table column and row header text. Includes .AFDefaultFont:alias.
.AFTableCellDataText:alias Specifies the font family, font size and font-weight for table column and row header text. Includes .AFDefaultFont:alias.
.AFTableCellPadding:alias Specifies the padding of the table cell. This must match the skin property -tr-padding-left-width, -tr-padding-right-width for the table.
.AFTableCellHeaderBorder:alias Specifies the borders of the table row header and column header cells. This must match the skin property -tr-border-left-width, -tr-border-right-width for the table.
.AFTableCellHeaderBackground:alias Specifies the background for table row header and column header cells.
.AFTableCellDataBackgroundColor:alias Specifies the background color for data cells.
.AFTableCellDataBandedBackgroundColor:alias Specifies the background color for banded data cells.
.AFTableCellDataBorder:alias Specifies the border for data cells.
.AFTableCellDataHGridBorder:alias Specifies the border for data cells when horizontal gridding is enabled.
.AFTableCellDataVGridBorder:alias Specifies the border for data cells when vertical gridding is enabled.
.AFTableCellDataVHGridBorder:alias Specifies the border for data cells when both horizontal and vertical gridding is enabled.
.AFTableCellFrozenBorder:alias Specifies the right edge border for column cells that are at frozen.
Icon Selectors
Name Description

af:commandButton Component

Style Selectors
Name Description
af|commandButton Style on the root element of the af:commandButton component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled to style the button for different states.
af|commandButton::icon-style Style on the button icon, if icon on the button.
af|commandButton::access-key Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style.

af:commandLink Component

Style Selectors
Name Description
af|commandLink Style on the root element of the af:commandLink component. This style includes the .AFLinkForeground:alias and .AFDefaultFont:alias styles. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, :visited as well as :disabled to style the component for different states.
af|commandLink::access-key Styles the access key character for command links, default bold.

af:commandNavigationItem Component

Style Selectors
Name Description
af|commandNavigationItem Style on the root element of the af:commandNavigationItem component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :selected and :disabled to style the component for different states.
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 Component

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

af:dialog Component

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

af:document Component

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

af:goButton Component

Style Selectors
Name Description
af|goButton Style on the root element of the af:goButton component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled to style the component for different states.
af|goButton::icon-style Style on the button icon, if icon on the button.
af|goButton::access-key Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style.

af:goLink Component

Style Selectors
Name Description
af|goLink Style on the root element of the af:goLink component. Available pseudo-classes are those that can go on an html A tag, like :hover, :active, :focus, :visited, as well as :disabled. This style includes the .AFLinkForeground:alias and .AFDefaultFont:alias styles.
af|goLink::access-key Styles the access key character for go links, default bold.

af:group Component

Style Selectors
Name Description
n/a This component generates no elements on the page and thus is not skinnable.

af:inlineFrame Component

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

af:inputColor Component

Style Selectors
Name Description
af|inputColor Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|inputColor:read-only::content"
af|inputColor::access-key Style on the access key character for inputColor. Includes .AFFormAccessKeyStyle:alias
af|inputColor::content Style on the content of the component. You can set the width of the content piece and border colors.
af|inputColor::swatch-container Style the container element that holds both the swatch and the glyth of the component.
af|inputColor::launch-icon-style Style the clickable icon of the component. Available pseudo-class is hover.
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:inputDate Component

Style Selectors
Name Description
af|inputDate Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is disabled by using this selector: "af|inputDate:disabled::content"
af|inputDate::access-key Style on the access key character for inputDate. Includes .AFFormAccessKeyStyle:alias
af|inputDate::content Style on the content of the component. You can set the width of the content piece and border colors.
af|inputDate::timezone Style on the timezone that appears beside the input field. You can hide the entire timezone string by setting 'display:none'.
af|inputDate::launch-icon-style Style of the clickable launch icon. Available pseudo-classes are :disabled, :hover and :active. For example, you can style the icon when the component is disabled by using this selector: "af|inputDate::launch-icon-style:disabled".
Icon Selectors
Name Description
af|inputDate::launch-icon The button icon which is used to launch the secondary date picker dialog. For example, you can replace the glyph with a text icon.
af|inputDate::launch-icon-style Style of the clickable launch icon. Available pseudo-classes are disabled, hover and active. For example, you can replace the background image with another image - if so, you may need to modify the 'font-height' and 'padding-right' attributes to ensure there is enough height and width respectively for the image to show up. You can also style the icon when the component is disabled by using this selector: "af|inputDate::launch-icon-style:disabled".

af:inputFile Component

Style Selectors
Name Description
af|inputFile Style on the root element of the af:inputFile component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation.
af|inputFile::access-key Style on the access key for the label of the af:inputFile component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputFile::content Style on the content of the af:inputFile component.
af|inputFile::label Style on the label of the af:inputFile component. This includes .AFLabel:alias style selector.

af:inputNumberSpinbox Component

Style Selectors
Name Description
af|inputNumberSpinbox Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the content when the component is readOnly by using this selector: "af|inputNumberSpinbox:read-only::content"
af|inputNumberSpinbox::access-key Style on the access key for the label of the af:inputNumberSpinbox component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputNumberSpinbox::content Style on the content of the component. Common properties are height and border colors.
af|inputNumberSpinbox::incrementor-icon-style This key uses background-image to set the increment image. If you want to use text instead of a background-image, you can use af|inputNumberSpinbox::incrementor-icon {content:"Text"}. There is a :disabled pseudo-class available.
af|inputNumberSpinbox::decrementor-icon-style This key uses background-image to set the decrement image. If you want to use text instead of a background-image, you can use af|inputNumberSpinbox::decrementor-icon {content:"Text"}. There is a :disabled pseudo-class available.
af|inputNumberSpinbox::spinbox-cell This key styles the cell for the decrementor/incrementor icons. Available pseudo-classes are :disabled, :hover and :active. For example, you can style the icon when the component is disabled by using this selector: "af|inputNumberSpinbox:disabled::spinbox-cell".

af:inputText Component

Style Selectors
Name Description
af|inputText Style on the root element of the af:inputText component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info, and :confirmation. For example, you can style the label when the component is disabled by using this selector: "af|inputText:disabled::label"
af|inputText::access-key Style on the access key for the label of the af:inputText component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias.
af|inputText::content Style on the content of the af:inputText component. You can set the width of the content piece that will be used when the columns attribute on af:inputText is not set.
af|inputText::label Style on the label of the af:inputText component. This includes .AFLabel:alias style selector.
To style the input piece of inputText without creating a skin definition, you can set the following public style classes on the styleClass attribute. The 'Marker' style classes are rendered on the root dom element, they have no style properties of its 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 AFFieldTextMarker, AFFieldTextLTRMarker, AFPhoneFieldTextMarker, AFPostalCodeFieldTextMarker, AFAddressFieldTextMarker, AFFieldNumberMarker

af:menu Component

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

af:menuBar Component

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

af:navigationPane Component

Style Selectors
Name Description
af|navigationPane Styles the root dom element of the component.
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-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-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-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-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-bar::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint 'bar'
af|navigationPane-buttons::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint 'buttons'
af|navigationPane-choice::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint 'choice'
af|navigationPane-list::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint 'list'
af|navigationPane-tabs::icon-style Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint 'tabs'

af:outputLabel Component

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

af:pageTemplate Component

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

af:panelAccordion Component

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

af:panelBorderLayout Component

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

af:panelBox

Style Selectors
Name Description

af:panelCollection Component

Style Selectors
Name Description
af|panelCollection The selector on the root dom element of this component. The root style contains -tr-toolbar-height and -tr-statusbar-height skin properties to specify the heights of toolbar and statusbar facets when present.
Icon Selectors
Name Description
af|panelCollection::qbe-icon Toolbar Icon for hiding/showing filter row in the table.
af|panelCollection::freeze-icon Toolbar Icon for freezing a column in the table.
af|panelCollection::maximize-icon Toolbar Icon for maximizing the table.
af|panelCollection::wrap-icon Toolbar Icon for wrapping a column in the table.
af|panelCollection::go-up-icon Toolbar Icon for moving up a node in display as root for tree/treeTable.
af|panelCollection::go-to-top-icon Toolbar Icon for showing the root node of the model as root for tree/treeTable.
af|panelCollection::show-as-top-icon Toolbar Icon for showing the currently selected node as root for tree/treeTable.

af:panelFormLayout Component

Style Selectors
Name Description
af|panelFormLayout The selector on the root dom element of this component.
af|panelFormLayout::column Specifies the style information for columns of the panelFormLayout, like vertical-align:top and text-align.
af|panelForm::separator Specifies the style information for separators between groups in the panelFormLayout
af|panelForm::cell Specifies the style information for each cell of the panelFormLayout.
af|panelForm::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:panelGroupLayout Component

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

af:panelHeader Component

Style Selectors
Name Description
af|panelHeader Selector that renders on the root dom element of the component.
af|panelHeader::dynamic-help-icon-style Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :hover and :active.
Icon Selectors
Name Description
af|panelHeader::dynamic-help-icon Dynamic help icon. You can use af|panelHeader::dynamic-help-icon-style instead. Available pseudo-class is :hover.

af:panelLabelAndMessage Component

Style Selectors
Name Description
af|panelLabelAndMessage::access-key Define the style on the access key for the label.

af:panelList Component

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

af:panelSplitter Component

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

af:panelTabbed Component

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

af:panelWindow Component

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

af:popup Component

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

af:progressIndicator Component

Style Selectors
Name Description
af|progressIndicator Style on the root element of the af:progressIndicator component.
af|progressIndicator::indeterminate Style on the indeterminate model of the af:progressIndicator component. Available pseudo-class are :running and :finished. The indicator image is specified as a background-image in this key.
af|progressIndicator::determinate Style on the determinate model of the af:progressIndicator component. This defines the width and height of the progress bar.
af|progressIndicator::determinate-start-label Style on the label which indicates start percentage of the af:progressIndicator component.This includes .AFTextForeground:alias, .AFDefaultFont:alias and AFEndTextAlign:alias style selectors.
af|progressIndicator::determinate-end-label Style on the label which indicates end percentage of the af:progressIndicator component.This includes .AFTextForeground:alias, .AFDefaultFont:alias and AFEndTextAlign:alias style selectors.
af|progressIndicator::determinate-filled-icon-style Style on the determinate model indicator for percentage completion of the af:progressIndicator component.The indicator image is specified as a background-image in this key. This also defines width and height of the image. This image is repeated in the prgress 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 prgress 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.
ADF Faces properties
Name Description
-tr-percent-block-increment Determines the percent block increment in determinate model. Valid value can be a integer >0 and <100. For e.g., af|progressIndicator {-tr-percent-block-increment: 5} will show the progress bar with block increment as 5.

af:query Component

Style Selectors
Name Description
af|query Style on the root element of the af:query component.
af|query::footer-content Style on the footer facet of the af:query component.
af|query::disclose-icon Style on the disclosure icon of af:query component.

af:queryCriteria Component

Style Selectors
Name Description
af|queryCriteria Style on the root element of the af|queryCriteria component.
af|queryCriteria::column Specifies the style information for columns of the queryCriteria, like vertical-align:top and text-align.
af|queryCriteriaItem Style on the item of the queryCriteria, which contains label and query content in it.
af|queryCriteriaItem::label Style on the label of the queryCriteria's item
af|queryCriteriaItem::content Style on the content of the queryCriteria's item, which contains operator and value inside.
af|queryCriteria::delete-icon-cell Style on the delete icon cell of af:queryCriteria component. This includes .AFEndPadding:alias style selector.
af|queryCriteria::delete-icon-style Style on the delete icon of the af:quickQuery component. The delete icon is specified as a background-image in this key.

af:quickQuery Component

Style Selectors
Name Description
af|quickQuery Style on the root element of the af:quickQuery component. Available pseudo-class is :vertical. Use the :vertical pseudo-class in the skin key when you want to style the component with vertical layout.For example, you can style the label in vertical mode like this: 'af|quickQuery:vertical::label'.
af|quickQuery::label Style on the label of the af:quickQuery component. This includes .AFLabel:alias style selector.
af|quickQuery::criteria-items Style on the criterion items facet of the af:quickQuery component.
af|quickQuery::value Style on the criterion value facet of the af:quickQuery component.
af|quickQuery::end Style on the end facet of the af:quickQuery component.
af|quickQuery::search-icon-cell Style on the search icon cell of af:quickQuery component. This includes .AFEndPadding:alias style selector.
af|quickQuery::search-icon-style Style on the clickable search icon of the af:quickQuery component. The search icon is specified as a background-image in this key. The width and height of the icon will be provided in this key.Available pseudo-classes are :hover and :active. For example, you can style the icon when the component is active by using this selector: "af|quickQuery::search-icon-style:active".

af:region Component

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

af:resetButton Component

Style Selectors
Name Description
af|resetButton Style on the root element of the af:resetButton component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled to style the button for different states.
af|resetButton::access-key Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style.

af:selectBooleanCheckbox Component

Style Selectors
Name Description
af|selectBooleanCheckbox Style on the root element of the af:selectBooleanCheckbox component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info. For example, you can style the content when the component is disabled by using this selector: "af|selectBooleanCheckbox:disabled::content"
af|selectBooleanCheckbox::access-key Style on the access key for the selection. Includes .AFFormAccessKeyStyle:alias.
af|selectBooleanCheckbox::content Style on the content of the component.
af|selectBooleanCheckbox::content-input Style on the input of the component.
af|selectBooleanCheckbox::label Style on the label of the component. This includes .AFLabel:alias style selector.
af|selectBooleanCheckbox::item-text Style on the item text associated with the checkbox.

af:selectBooleanRadio Component

Style Selectors
Name Description
af|selectBooleanRadio Style on the root element of the component. Available pseudo-classes are :disabled, :read-only, :error, :fatal, :warning, :info. For example, you can style the content when the component is disabled by using this selector: "af|selectBooleanRadio:disabled::content"
af|selectBooleanRadio::access-key Style on the access key for the selection. Includes .AFFormAccessKeyStyle:alias.
af|selectBooleanRadio::content Style on the content of the component.
af|selectBooleanRadio::content-input Style on the input of the component.
af|selectBooleanRadio::label Style on the label of the component. This includes .AFLabel:alias style selector.
af|selectBooleanRadio::item-text Style on the item text associated with the radio button.

af:selectManyCheckbox Component

Style Selectors
Name Description
af|selectManyCheckbox Style on the root element of the component.
af|selectManyCheckbox:disabled Style on the root element of the af:selectManyCheckbox component when its disabled attribute is set to 'true'. For example, you can style the label when the component is disabled by using this selector: "af|selectManyCheckbox:disable::label"
af|selectManyCheckbox:read-only Style on the root element of the af:selectManyCheckbox component when its readOnly attribute is set to 'true'. For example, you can style the label when the component is readOnly by using this selector: "af|selectManyCheckbox:read-only::label"
af|selectManyCheckbox::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectManyCheckbox::content Style on the content of the af:selectManyCheckbox component.
af|selectManyCheckbox::content-input Style on the input of the af:selectManyCheckbox component.
af|selectManyCheckbox::label Style on the label of the af:selectManyCheckbox component. This includes .AFLabel:alias style selector.
af|selectManyCheckbox::item-text Style on the item text associated with a single checkbox.

af:selectManyListbox Component

Style Selectors
Name Description
af|selectManyListbox Style on the root element of the af:selectManyListbox component.
af|selectManyListbox:disabled Style on the root element of the af:selectManyListbox component when its disabled attribute is set to 'true'. For example, you can style the label when the component is disabled by using this selector: "af|selectManyListbox:disabled::label"
af|selectManyListbox:read-only Style on the root element of the af:selectManyListbox component when its readOnly attribute is set to 'true'. For example, you can style the label when the component is readOnly by using this selector: "af|selectManyListbox:read-only::label"
af|selectManyListbox::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectManyListbox::content Style on the content of the af:selectManyListbox component.
af|selectManyListbox::content-input Style on the input of the af:selectManyListbox component.
af|selectManyListbox::label Style on the label of the af:selectManyListbox component. This includes .AFLabel:alias style selector.

af:selectManyShuttle Component

Style Selectors
Name Description
af|selectManyShuttle The selector on the root dom element of the component.
af|selectManyShuttle::content Styles the outer container of box around the shuttle.
Icon Selectors
Name Description

af:selectOneChoice Component

Style Selectors
Name Description
af|selectOneChoice Style on the root element of the af:selectOneChoice component.
af|selectOneChoice:disabled Style on the root element of the af:selectOneChoice component when its disabled attribute is set to 'true'. For example, you can style the label when the component is disabled by using this selector: "af|selectOneChoice:disabled::label"
af|selectOneChoice:read-only Style on the root element of the af:selectOneChoice component when its readOnly attribute is set to 'true'. For example, you can style the label when the component is readOnly by using this selector: "af|selectOneChoice:read-only::label"
af|selectOneChoice::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectOneChoice::content Style on the content of the af:selectOneChoice component.
af|selectOneChoice::label Style on the label of the af:selectOneChoice component. This includes .AFLabel:alias style selector.

af:selectOneListbox Component

Style Selectors
Name Description
af|selectOneListbox Style on the root element of the af:selectOneListbox component.
af|selectOneListbox:disabled Style on the root element of the af:selectOneListbox component when its disabled attribute is set to 'true'. For example, you can style the label when the component is disabled by using this selector: "af|selectOneListbox:disabled::label"
af|selectOneListbox:readOnly Style on the root element of the af:selectOneListbox component when its readOnly attribute is set to 'true'. For example, you can style the label when the component is readOnly by using this selector: "af|selectOneListbox:read-only::label"
af|selectOneListbox::access-key Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias.
af|selectOneListbox::content Style on the content of the af:selectOneListbox component.
af|selectOneListbox::label Style on the label of the af:selectOneListbox component. This includes .AFLabel:alias style selector.
af|selectOneListbox::item Style on the items in the box.
af|selectOneListbox::separator Style on the separators in the box.

af:selectOneRadio Component

Style Selectors
Name Description
af|selectOneRadio Style on the root element of the af:selectOneRadio component.
af|selectOneRadio:disabled Style on the root element of the af:selectOneRadio component when its disabled attribute is set to 'true'. For example, you can style the label when the component is disabled by using this selector: "af|selectOneRadio:disabled::label"
af|selectOneRadio:read-only Style on the root element of the af:selectOneRadio component when its readOnly attribute is set to 'true'. For example, you can style the label when the component is readOnly by using this selector: "af|selectOneRadio:read-only::label"
af|selectOneRadio::access-key Style on the access key character for the selectOneRadio. Includes .AFFormAccessKeyStyle:alias.
af|selectOneRadio::content Style on the content of the af:selectOneRadio component.
af|selectOneRadio::content-input Style on the input of the af:selectOneRadio component.
af|selectOneRadio::label Style on the label of the af:selectOneRadio component. This includes .AFLabel:alias style selector.
af|selectOneRadio::item-text Style on the item text associated with a single radio button.

af:selectOrderShuttle Component

Style Selectors
Name Description
Icon Selectors
Name Description

af:separator Component

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

af:showDetail Component

Icon Selectors
Name Description
af|showDetail::disclosed-icon The af|showDetail::disclosed-icon icon is displayed when the af:showDetail component is rendered in its disclosed state.
af|showDetail::undisclosed-icon The af|showDetail::disclosed-icon icon is displayed when the af:showDetail component is rendered in its undisclosed state.
.AFDetailDisclosedIcon:alias Customizes all of these icons at once: af|showDetail::disclosed-icon, af|showDetailHeader::disclosed-icon, af|navigationTree::disclosed-icon
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|navigationTree::undisclosed-icon

af:showDetailHeader Component

Style Selectors
Name Description
af|showDetailHeader This can be used to set common properties that are shared across all header levels.
af|showDetailHeader::level-one Styles level one headers.
af|showDetailHeader::level-two Styles level two headers.
af|showDetailHeader::level-three Styles level three headers.
af|showDetailHeader::level-four Styles level four headers.
af|showDetailHeader::level-five Styles level five headers.
af|showDetailHeader::level-six Styles level six headers.
.AFHeaderText:alias This style is included by all the AFHeaderLevel* style classes, which in turn is included in other header style selectors.
.AFHeaderLevelOne This style class is included by the af|*::level-one selectors and af|messages::header, af|panelHeader::error and af|messages::error (e.g., af|panelHeader::level-one, af|showDetailHeader::level-one)
.AFHeaderLevelTwo This style class is included by the af|*::level-two selectors (e.g., af|panelHeader::level-two, af|showDetailHeader::level-two)
.AFHeaderLevelThreePlus This style class is included by all of the af|*::level-three, af|*::level-four, af|*::level-five, and af|*::level-six selectors
Icon Selectors
Name Description
af|showDetailHeader::disclosed-icon The icon is displayed when the af:showDetailHeader component is rendered in its disclosed state.
af|showDetailHeader::undisclosed-icon The icon is displayed when the af:showDetailHeader component is rendered in its undisclosed state.
.AFDetailDisclosedIcon:alias Customizes all of these icons at once: af|showDetail::disclosed-icon, af|showDetailHeader::disclosed-icon, af|navigationTree::disclosed-icon
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|navigationTree::undisclosed-icon

af:showDetailItem Component

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

af:spacer Component

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

af:statusIndicator Component

Style Selectors
Name Description
af|statusIndicator Selector that renders on the root dom element of the component.
Icon Selectors
Name Description
af|statusIndicator::idle-icon This is the icon that represents the idle state. This icon is generally a non-animated icon that indicates communication is NOT occuring with the server.
af|statusIndicator::processing-icon This is the icon that represents the processing state. This icon is generally an animated icon that indicates communication IS occuring with the server.
af|statusIndicator::connecting-icon This is the icon displays when the Active Data Service is in the process of connecting. This icon is generally an animated icon.
af|statusIndicator::connected-icon This is the icon displays when the Active Data Service is in the connected state. This icon is generally a non-animated icon and may be the same as the idle state icon.
af|statusIndicator::reconnecting-icon This is the icon displays when the Active Data Service has lost connection and is attempting to reconnect. This icon is generally an animated icon.
af|statusIndicator::disconnected-icon This is the icon displays when the Active Data Service is in the disconnected state. This icon is generally a non-animated icon used to indicate that no further reconnection atempts will be made without use interaction.

af:switcher Component

Style Selectors
Name Description
n/a This component generates no elements on the page and thus is not skinnable.

af:table Component

Style Selectors
Name Description
af|table Styles the root dom element of the component. The root class contains the following skin properties: -tr-border-left-width, -tr-border-right-width, -tr-padding-left-width, -tr-padding-right-width. These skin properties are used to size the table at runtime. These properties must match the paddings/borders in the header/data cell classes.
.AFTableCellHeaderText:alias Specifies the font family, font size and color for table column and row header text.
.AFTableCellDataText:alias Specifies the font family, font size and color for table data text.
.AFTableCellPadding:alias Specifies the padding of the table cell. This must match the skin property -tr-padding-left-width, -tr-padding-right-width for the table.
.AFTableCellHeaderBorder:alias Specifies the borders of the table row header and column header cells. This must match the skin property -tr-border-left-width, -tr-border-right-width for the table.
.AFTableCellHeaderBorder:alias Specifies the borders of the table row header and column header cells. This must match the skin property -tr-border-left-width, -tr-border-right-width for the table.
.AFTableCellFilterBackground:alias Specifies the background for table filter cells.
.AFTableCellDataBackgroundColor:alias Specifies the background color for data cells.
.AFTableCellDataBandedBackgroundColor:alias Specifies the background color for banded data cells.
.AFTableCellDataBorder:alias Specifies the border for data cells.
.AFTableCellDataHGridBorder:alias Specifies the border for data cells when horizontal gridding is enabled.
.AFTableCellDataVGridBorder:alias Specifies the border for data cells when vertical gridding is enabled.
.AFTableCellDataVHGridBorder:alias Specifies the border for data cells when both horizontal and vertical gridding is enabled.
.AFTableCellFrozenBorder:alias Specifies the right edge border for column cells that are at frozen.
.AFTableCellDataSelectedColor:alias Specifies the background color for selected data cells.
.AFTableCellDataSelectedBandedColor:alias Specifies the background color for selected data cells that are banded.
.AFTableCellDataSelectedInactiveColor:alias Specifies the background color for selected data cells, when the table does not have focus.
.AFTableCellDataSelectedBandedInactiveColor:alias Specifies the background color for selected data cells that are banded, when the table does not have focus.
.AFTableCellDataDropTargetColor:alias Specifies the background color for data cells that are a drop target during DnD operation.
af|table::column-resize-indicator Specifies the styling of the column resize indicator when the user resizes a column in the table.
af|column::column-header-cell:focused Specifies the styling of the column header cell that has current focus.
af|column::row-header-cell:focused Specifies the styling of the row header cell that has current focus.
af|table::status-message Specifies the styling of the status message that shows up when the user scrolls the table.
af|column::column-header-cell:drag Specifies the styling of the column header cell when it is drag and drop reordered.
.AFColumnDropTarget:alias Specifies the styling of the drop target displayed during drag and drop reordering of columns.
af|column::sort-ascending-icon-style Specifies the icon (through background image) for sort ascending indicator. Use pseudo-classes :hover and :active to customize look.
af|column::sort-descending-icon-style Specifies the icon (through background image) for sort ascending indicator. Use pseudo-classes :hover and :active to customize look.

af:toolbar Component

Style Selectors
Name Description
af|toolbar Top level style class for the entire toolbar component.
af|toolbar::separator The separator that is placed between groups of elements.
af|toolbar::overflow-indicator The icon that is displayed when the toolbar is overflowing. You can use the :hover and :active pseudo-classes to style the icon.
af|toolbar::overflow-container The container that holds the overflowed elements.

af:toolbox Component

Style Selectors
Name Description
af|toolbox Selector that renders on the root dom element of the component. Skinners should not override the overflow property, it is needed for correct functionality.
af|toolbox::body Selector that renders on the body of the component. This is used for the border of the component.
af:toolbox::row This is rendered for each row of the component. The border between rows is accomplished by setting border-bottom.

af:train Component

Style Selectors
Name Description
af|train Top level style class for the entire train component. The number of stops to be displayed step is also specified using the property -tr-visible-stop-count. Valid values must be integers and greater than zero.
af|train::parent-start, af|train::parent-end Block that encloses all the parent-start (and parent-end) elements, such as icons and label.
af|train::parent-start-icon-cell Cell that displays the parent start icon.
af|train::parent-end-icon-cell Cell that displays the parent end icon.
af|train::parent-start-content Content cell in the beginning of the train, to display the parent process name.
af|train::parent-end-content Content block in the end of the train, to display the parent process name.
af|train::join-overflow For joins between an overflow icon and a stop or vice versa.
af|train::join For all joins between stops. Available psuedo-classes are :disabled, :unvisited, and :trainVisited.
af|train::overflow-icon-cell Cell that encloses the overflow-start or overflow-end icon.
af|train::overflow-icon-start Style to set the background image for the the start overflow. Use pseudo-classes :hover and :active to customize look.
af|train::overflow-icon-end To set the background image for the the end overflow. Use pseudo-classes :hover and :active to customize look.
af|train::stop Cell that encloses all the stop elements including icon and content.
af|train::stop-icon-cell Cell that displays a stop icon.
af|train::stop-icon-selected To set the background image for the the selected stop.
af|train::stop-icon-disabled To set the background image for a disabled stop.
af|train::stop-icon-unvisited To set the background image for an unvisited enabled stop. Use pseudo-classes :hover and :active to customize look.
af|train::stop-icon-visited To set the background image for a visited stop. Use pseudo-classes :hover and :active to customize look.
af|train::stop-content Content block that displays the stop name. Use pseudoClass :selected to style content for the currently selected stop. :required to style the required indicator, if stop is selected.
af|train::stop-link To skin all links that display the stop name. The pseudo-classes :selected can be used to style a link for the currently selected stop. :disabled to style a disabled link. :visited for a visited enabled stop and :unvisited for an unvisited enabled stop. Due to a bug use :trainVisited instead of :visited.
af|train::stop-icon-error To set the background image for a stop that is in error. This is overlaid on top of the stop icon.
af|train::stop-icon-warning To set the background image for a stop that has a warning. This is overlaid on top of the stop icon.
af|train::stop-icon-information To set the background image for a stop that has some information. This is overlaid on top of the stop icon.
af|train::stop-icon-confirmation To set the background image for a stop that has a confirmation status. This is overlaid on top of the stop icon.
Vertical Train Selectors
af|train-vertical Top level class for the train in the vertical layout. -vertical is used as a hint on the train rather than a pseudo-class. This is so that we can reuse the Trinidad skin selectors for af|train and define new selectors for the vertical train.
af|train-vertical::parent-start-icon-cell For the cell that displays the parent-start-icon.
af|train-vertical::parent-end-icon-cell For the cell that displays the parent-end-icon.
af|train-vertical::parent-start-content For the cell that displays the label of the parent train at the top of the vertical train.
af|train-vertical::parent-end-content for the cell that displays the label of the parent train at the bottom of the vertical train.
af|train-vertical::join-overflow for joins between the overflow icon and the stops in the vertical train.
af|train-vertical::join for joins between stops in the vertical train. Use pseudoClasses :disabled, :unvisited, :visited to style joins before a disabled , unvisited-enabled and visited-enabled or currently selected stop respectively.
af|train-vertical::overflow-icon-cell for a cell that displays the overflow icon.
af|train-vertical::overflow-icon-start To set the background image for the start overflow icon. Use pseudoClasses :hover and :active to customize look.
af|train-vertical::overflow-icon-end To set the background image for the end overflow icon. Use pseudoClasses :hover and :active to customize look.
af|train-vertical::stop-cell for a cell that displays the entire stop info. Only used in the vertical layout.
af|train-vertical::stop-icon-cell for the cell that displays the stop icon.
af|train-vertical::stop-icon-selected To set the background image for the currently selected stop.
af|train-vertical::stop-icon-disabled To set the background image for a disabled stop.
af|train-vertical::stop-icon-unvisited To set the background image for an unvisited enabled stop. Use pseudoClasses :hover and :active to customize look.
af|train-vertical::stop-icon-visited To set the background image for a visited enabled stop. Use pseudoClasses :hover and :active to customize look.
af|train-vertical::stop-content for the cell that displays the label of the stop, in a vertical train. Use pseudoClasses :selected to style content for the currently selected stop. :required to style the required indicator of a stop that is required.
af|train-vertical::stop-link for the link that displays the label of the stop, in a vertical train. Use pseudoClasses :selected, :disabled, :unvisited, :visited to style links when a stop is currently selected, disabled, unvisited-enabled and visited-enabled respectively.
af|train-vertical::stop-icon-error To set the background image for a stop that is in error (for vertical train). This is overlaid on top of the stop icon.
af|train-vertical::stop-icon-warning To set the background image for a stop that has a warning (for vertical train). This is overlaid on top of the stop icon.
af|train-vertical::stop-icon-information To set the background image for a stop that has some information (for vertical train). This is overlaid on top of the stop icon.
af|train-vertical::stop-icon-confiramtion To set the background image for a stop that has a confirmation status (for vertical train). This is overlaid on top of the stop icon.
Icon Selectors
Name Description
af|train::parent-start-icon This icon is displayed in the beginning of a train to indicate that the current train is a subtrain.
af|train::parent-end-icon This icon is displayed in the end of a train to indicate that the current train is a subtrain.
Icons specific to the vertical train
af|train-vertical::parent-start-icon This icon is displayed at the top of the train to indicate that the current train is a subTrain of another train.
af|train-vertical::parent-end-icon This icon is displayed at the bottom of the train to indicate that the current train is a subTrain of another train.
ADF Faces properties
Name Description
-tr-visible-stop-count Default value = 6. Determines the number of visible stops to be displayed in the train. Valid values must be integer and > 0. E.g., af|train {-tr-visible-stop-count:6} displays 6 stops (+ overflows).

af:trainButtonBar Component

Style Selectors
Name Description
af|trainButtonBar Top level style class for the trainButtonBar component.
af|trainButtonBar::button-cell Cell that encloses each button in the trainButtonBar component.
af|trainButtonBar::back-button Style class for the Back button in the trainButtonBar component. The pseudo-elements :hover, :active and :disabled can be used with this skin class.
af|trainButtonBar::next-button Style class for the Next button in the trainButtonBar component. The pseudo-elements :hover, :active and :disabled can be used with this skin class.
af|trainButtonBar::access-key Skin to style the access key character in the button text.

af:treeTable Component

Style Selectors. Please Note that most of the style selectors from af:table apply to af:treeTable as well
Icon Selectors.
Name Description
af|treeTable::expanded-icon-style Style of the expanded icon used with the tree and treeTable components. 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 expanceded-icon.
af|treeTable::expanded-icon Style used to override the default expanded icon used with the tree and treeTable components.
af|treeTable::collapsed-icon-style Style of the collapsed icon used with the tree and treeTable components. 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.
af|treeTable::collapsed-icon Style used to override the default collapsed icon used with the tree and treeTable components.
af|treeTable::leaf-icon-style Style of the leaf icon used with the tree and treeTable components. The leaf icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the leaf-icon-style and define the override icon for the leaf-icon.
af|treeTable::leaf-icon Style used to override the default leaf icon used with the tree and treeTable components.
af|treeTable::selector-icon-style Style of the selector icon used with the tree and treeTable components. The selector icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the selector-icon-style and define the override icon for the selector-icon.
af|treeTable::selector-icon Style used to override the default selector icon used with the tree and treeTable components.

af:tree Component

Style Selectors.
Name Description
af|tree Styles the root dom element of the component.
af|tree::data-row Specifies styling for text in a tree node. The valid pseudo-classes are :selected, :focused, :inactive and :drop-target. ":selected" pseudo class is used to specify styling for a selected row. ":selected:inactive" specifies styling for a selected row, when the tree control does not have focus. ":focused" specifies styling for a row that has current focus in the tree. ":drop-target" specifies styling for a row that is a drop target during DnD operation.
af|tree::node-stamp-text This is the selector for the text of each node stamp. To style the node stamps within a selected row, you can do this: "af|tree::data-row:selected af|tree::node-stamp-text"
af|tree::h-selector-connector Specifies the background image for the connectors used to draw hierarchical selector in the tree and treeTable.

E-mail this page
Printer View Printer View
Oracle Is The Information Company About Oracle | Oracle RSS Feeds | Careers | Contact Us | Site Maps | Legal Notices | Terms of Use | Privacy