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 */
.AFDarkForeground:alias {color:#035D5C;}
.AFDarkBackground:alias {background-color:Purple;}
/* Selectors to customize buttons. These are global selectors, too, since they affect all buttons. */
.AFButtonServerText:alias {background-color:#CECFCE; color:#25009E}
.AFButtonServerTextDisabled:alias {background-color:#F0F0F0; color:gray;-ora-text-antialias:true}
.AFButtonStartIcon:alias {content:url(/skins/purple/images/btns.gif); width:7px; height:18px}
.AFButtonStartIcon:alias:rtl {content:url(/skins/purple/images/btne.gif); width:7px; height:18px}
/* Component-specific selector. */
af|showOneTab::orientation-top
{
border-bottom: 3px solid black;
}
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.
| Selector Name | Description |
|---|---|
| .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 | A bold version of the .AFDefaultFont:alias. This has the same css properties as the .AFDefaultFont:alias (font-family, font-size, font-weight), but uses a bold font-weight. |
| .AFVerySmallFont:alias | A very small version of the .AFDefaultFont:alias. This has the same css properties as the .AFDefaultFont:alias (font-family, font-size, font-weight), but uses a very small font-size. This style is used for very small text such as inline messages, and copyright and privacy messages. |
| .AFSmallFont:alias | A small version of the .AFDefaultFont:alias. This has the same css properties as the .AFDefaultFont:alias (font-family, font-size, font-weight), but uses a small font-size. This style is used for text which is slightly smaller than the default, such as af:menuPath links. |
| .AFMediumFont:al ias | A version of the .AFDefaultFont:alias which is slightly larger than the default font-size. This has the same css properties as the .AFDefaultFont:alias (font-family, font-size, font-weight), but uses a larger font-size. This is used for medium sized text, such as level 2 headers. |
| .AFLargeFont:alias | A large version of the .AFDefaultFont:alias. This has the same css properties as the .AFDefaultFont:alias (font-family, font-size, font-weight), but uses a larger font-size.This is used for large text, such as level 1 headers. |
| .AFVeryLargeFont:alias | A very large version of the .AFDefaultFont:alias. This has the same css properties as the .AFDefaultFont:alias (font-family, font-size, font-weight), but uses a very large font-size. |
| .AFDarkBackground:alias | The primary background-color in the core color ramp. This uses the background-color css property. The other .AF*[^Accent ] Background:alias selectors are computed relative to this one. So changing this style selector will affect those style selectors unless those styles selectors have been overridden themselves. |
| .AFVeryDarkBackground:alias | The darkest background-color in the core color ramp. This value is computed relative to the .AFDarkBackground:alias color. |
| .AFMediumBackground:alias | A slightly lighter background-color in the core color ram p. This value is computed relative to the .AFDarkBackground:alias color. |
| .AFLightBackground:alias | The lightest background-color in the core color ramp. This value is computed relative to the .AFDarkBackground:alias color. |
| .AFDarkAccentBackground:alias | The primary background-color in the accent color ramp. The other .AF*AccentBackground:alias selectors are computed relative to this one. So changing this style selector will affect those style selectors unless those styles selectors have been overridden themselves. |
| .AFVeryDarkAccentBackground:alias | The darkest background-color in the accent color ramp. This value is computed relative to the .AFDarkAccentBackground:alias color. |
| .AFMediumAccentBackground:alias | A slightly lighter background-color in the accent color ramp. This value is computed relative to the .AFDarkAccentBackground:alias color. Used in .AFPanelBoxMediumBackground:alias. |
| .AFLightAccentBackground:alias | The lightest background-color in the accent color ramp. This value is computed relative to the .AFDarkAccentBackground:alias color. This is used in af|messages::body, .AFButtonServerText, and .AFButtonServerTextDisabled. |
| .AFTextBackground:alias | The default text background-color (white). This uses the background-color css property. |
| .AFDarkForeground:alias | The primary foreground color in the core color ramp. This uses the color css property. |
| .AFVeryDarkForeground:alias | The darkest foreground color in the core color ramp. This value is computed relative to the .AFDarkForeground:alias color. |
| .AFMediumForeground:alias | A slightly lighter foreground color in the core color ramp. This value is computed relative to the .AFDarkForeground:alias color. |
| .AFLightForeground:alias | The lightest foreground color in the core color ramp. This value is computed relative to the .AFDarkForeground:alias color. |
| .AFDarkAccentForeground:alias | The primary foreground color in the accent color ramp. |
| .AFVeryDarkAccentForeground:alias | The darkest foreground color in the accent color ramp. This value is computed relative to the .AFDarkAccentForeground:alias color. |
| .AFMediumAccentForeground:alias | A slightly lighter foreground color in the accent color ramp. This value is computed relative to the .AFDarkAccentForeground:alias color. |
| .AFLightAccentForeground:alias | The lightest foreground color in the accent color ramp. This value is computed relative to the .AFDarkAccentForeground:alias color. |
| .AFDarkBorder:alias | The primary border-color in the core color ramp. By default, it uses the same color as is used in .AFDarkBackground:alias's background-color. This uses the border-color css property. |
| .AFVeryDarkBorder:alias | The darkest border-color in the core color ramp. By default, it uses the same color as is used in .AFVeryDarkBackground:alias's background-color. This uses the border-color css property. |
| .AFMediumBorder:alias | A slightly lighter border-color in the core color ramp. By default, it uses the same color as is used in .AFMediumBackground:alias's background-color. This uses the border-color css property. |
| .AFLightBorder:alias | The lightest border-color in the core color ramp. By default, it uses the same color as is used in .AFLightBackground:alias's background-color. This uses the border-color css property. |
| .AFDarkAccentBorder:alias | The primary border-color in the accent color ramp. By default, it uses the same color as is used in .AFDarkAccentBackground:alias's background-color. This uses the border-color css property. |
| .AFVeryDarkAccentBorder:alias | The darkest border-color in the accent color ramp. By default, it uses the same color as is used in .AFVeryDarkAccentBackground:alias's background-color. This uses the border-color css property. |
| .AFMediumAccentBorder:alias | A slightly lighter border-color in the accent color ramp. By default, it uses the same color as is used in .AFMediumAccentBackground:alias's background-color. This uses the border-color css property. |
| .AFLightAccentBorder:alias | The lightest border-color in the accent color ramp. By default, it uses the same color as is used in .AFLightAccentBackground:alias's background-color. This uses the border-color css property. |
| .AFTextForeground:alias | The default text foreground color (black). This uses the color css property. |
| .AFSelectedTextForeground:alias | The foreground color for selected/highlighted text, or text which is drawn on a dark background. Currently this is not included in other styles; you may include it in styles you skin. This uses the color css property. |
| .AFErrorTextForeground:alias | The foreground color for error text (red). This is included in error styles, like af|panelHeader::error and af|messages::error and .AFErrorIconStyle. This uses the color css property. |
| .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. |
| .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. |
| .AFFieldText | Style class for text displayed in af:select* components and in inputText. Also can be used as a value for the styleClass attribute in outputFormatted and outputText. It includes the .AFDefaultFont:alias and the .AFTextForeground:alias style selectors. |
| .AFFieldTextDisabled | Style class for text displayed in disabled af:select* components and in inputText. Also can be used as a value for the styleClass attribute in outputFormatted and outputText. It includes the .AFDefaultFont:alias style selector and a color css property. |
| .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. The most likely place you would use these styles is on the af:outputText component. |
| .AFLabelText | Style class for text displayed in prompts.This is used in select* components and panelLabelAndMessage. Also can be used as a value for the styleClass attribute in outputFormatted and outputText. You can set any css properties that affect text. For example, font-family, font-size, font-weight, text-align, color. The base implementation includes .AFDefaultFont:alias, .AFEndTextAlign:alias, .AFTextForeground:alias, and font-weight. |
| .AFLabelCell | Style class for cell in which the prompt is displayed. A common style property to set is text-align. This is used in select* components and panelLabelAndMessage. Also can be used as a value for the styleClass attribute in outputFormatted and outputText. You can set any css properties that affect a container element, like < td > . The base implementation includes .AFEndTextAlign:alias. |
| .AFErrorIconStyle | Style class that styles the .AFErrorIcon:alias icons. The base implementation includes .AFErrorTextForeground:alias, font-family and font-weight. |
| .AFWarningIconStyle | Style class that styles the .AFWarningIcon:alias icons. The base implementation includes .AFDarkForeground:alias, font-family and font-weight. |
| .AFInfoIconStyle | Style class that styles the .AFInfoIcon:alias icons. The base implementation includes .AFDarkForeground:alias, font-family and font-weight. |
| .AFRequiredIconStyle | Style class that styles the .AFRequiredIcon icon. he base implementation includes .AFDarkForeground:alias and font-family. |
| .AFLinkForeground:alias | The default foreground color for inactive, unvisited links. This uses the color css property. |
| .AFActiveLinkForeground:alias | The default foreground color for active links. By default, this value is computed relative to the .AFLinkForeground:alias color. This uses the color css property. |
| .AFVisitedLinkForeground:alias | The default foreground color for visited links. By default, this value is computed relative to the .AFLinkForeground:alias color. This uses the color css property. |
| .AFDisabledLinkForeground:alias | The default foreground color for disabled links. By default, this value is computed relative to the .AFLinkForeground:alias color. This uses the color css property. |
| Name | Description |
|---|---|
| .AFErrorIcon:alias | This icon is used by the form components (eg. selectInputText, selectBooleanCheckbox, outputLabel, etc...) to indicate that an error has occurred. |
| .AFErrorAnchorIcon:alias | This icon is a version of the error icon that is displayed when the icon is used as a link to additional information about the error . For example, when outputLabel's messageType is error, and the messageDescUrl is not null, an clickable error icon is rendered. |
| .AFInfoIcon:alias | This icon is used by the form components (eg. selectInputText, selectBooleanCheckbox, outputLabel, etc...) to indicate that an informational message is being displayed to the user. |
| .AFInfoAnchorIcon:alias | This icon is a version of the info icon that is displayed when the icon is used as a link to additional information. |
| .AFRequiredIcon:alias | This icon is used by the form components (eg. selectInputText, selectBooleanCheckbox, outputLabel, etc...) to indicate that a value is required. |
| .AFWarningIcon:alias | This icon is used by the form components (eg. selectInputText, selectBooleanCheckbox, etc...) to indicate that an warning message is being displayed to the user. |
| .AFWarningAnchorIcon:alias | This icon is a version of the warning icon that is displayed when the icon is used as a link to additional information about the warning. |
| .AFQuickSelectIcon | This icon depects a QuickSelect. This is used in LOV tables where a click on a button will act as a shortcut for a select/OK sequence. |
We do not support component-level selectors for buttons. For example, you cannot customize a goButton differently from a commandButton. You can customize buttons in general, and following is the description in how to do that.
Skinning supports two very different button implementations. By default, standard browser buttons are used. However, the skinning also supports dynamic generation of image-based buttons. In order to enable image-based buttons, the following four button icon must be specified:
When these four icons are specified, ADF Faces combines the images specified by these icons into a single button image. (Note: These icons must be specified using either context-image or resource-image icons. Text-based icons are not allowed.)
| Style Selectors | |
|---|---|
| Name | Description |
| .AFButtonServerText:alias | This style is used to provide the foreground color, background color, and font information for server-side generated buttons. You can set attributes background-color, color, -ora-text-antialias, font-size, font-family. |
| .AFButtonServerTextDisabled:alias | This style is used to provide the foreground color, background color, and font information for server-side generated disabled buttons. You can attributes background-color, color, -ora-text-antialias, font-size, font-family. |
| BUTTON | The BUTTON selector is used to apply styles to browser-based buttons. |
| Icon Selectors | |
| Name | Description |
| .AFButtonStartIcon:alias | This icon is rendered at the starting side of the button. That is, this image appears on the left side of the button when the reading direction is right-to-left, and the right side of the button when the reading direction is left-to-right. |
| .AFButtonEndIcon:alias | This icon is rendered at the ending side of the button. That is, this image appears on the right side of the button when the reading direction is right-to-left, and the left side of the button when the reading direction is left-to-right. |
| .AFButtonTopBackgroundIcon:alias | This image is tiled horizontally along the top of the button, providing the button's top border. |
| .AFButtonBottomBackgroundIcon:alias | This image is tiled horizontally along the bottom of the button, providing the button's bottom border. |
| .AFButtonDisabledStartIcon:alias | This icon is rendered at the starting side of disabled buttons. If this icon is not specified, the buttonStart icon will be used instead. |
| .AFButtonDisabledEndIcon:alias | This icon is rendered at the ending side of disabled button. If this ic on is not specified, the buttonEnd icon will be used instead. |
| .AFButtonDisabledTopBackgroundIcon:alias | This icon is tiled horizontally along the top of disabled buttons. If this icon is not specified, the buttonTopBackground icon will be used instead. |
| .AFButtonDisabledBottomBackgroundIcon:alias | This icon is tiled horizontally along the bottom of the disabled buttons. If this icon is not specified, the buttonBottomBackground icon will be used instead. |
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:chooseDate component. If you go to the af:chooseDate Component section of this document, you will see the selectors that you can use to skin the af:chooseDate component. One of the selectors is af|chooseDate::title. The ::title pseudo-element indicates that this is the title portion of the af:chooseDate component. If you want to skin the title of the af:chooseDate component, you would set css properties on the af|chooseDate::title selector in your ADF Faces skin .css file.
You are free to use any css properties you want. You can test how they affect the page by re-running the page. You can also look at the rendered html (View Source from the browser) and compare it to the generated css file (View Source from the browser will show you what the generated css file is).
You may see selector names that end in :alias in the component-level section. These are meant to provide short-cuts to skin more t han one component that share a certain style or icon, or to skin more than one piece of a component. For example, the .AFMenuBarItem:alias style defines skin properties that are shared by all af:menuBar items. This is included by the af|menuBar::enabled and af|menuBar::selected style classes. Therefore, if you change the .AFMenuBarItem:alias style, you will affect the af|menuBar::enabled and af|menuBar::selected style selectors.
| Style Selectors | |
|---|---|
| Name | Description |
| af|body | Styles the afh:body content. You can set any css properties that you would set on an html body tag, like background-color and font-family. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|chooseDate::nav-link | Styles the chooseDate's navigation Previous Month and Next Month links. |
| af|chooseDate::title | Styles the chooseDate title which is month/year choice lists. |
| af|chooseDate::header | Styles the chooseDate header which is the days of week row.. |
| af|chooseDate::content | Styles the chooseDate content. |
| af|chooseDate::selected | Styles the selected date . |
| af|chooseDate::disabled | Styles the disabled dates. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|column::cell-text | Styles the text cells. |
| af|column::cell-text-band | Styles the banded text cells. |
| af|column::cell-number | Styles the numeric cells. |
| af|column::cell-number-band | Styles the banded numeric cells. |
| af|column::cell-icon-format | Styles the icon cells. |
| af|column::cell-icon-format-band | Styles the banded icon cells. |
| af|column::header-text | Styles the column headers. |
| af|column::header-number | Styles the numeric column headers. |
| af|column::header-icon-format | Styles the icon column headers. |
| af|column::row-header-text | Styles the row headers. |
| af|column::total-text | Styles the text total row cells. |
| af|column::total-number | Styles the numeric total row cells. |
| af|column::sortable-header-text | Styles the sortable column headers. |
| af|column::sortable-header-number | Styles the numeric sortable column headers. |
| af|column::sortable-header-icon-format | Styles the icon sortable column headers. |
| .AFTableCellDataText:alias | Specifies the font family, font size and color for table data text. This is included in the af|column::cell* selectors. |
| .AFTableCellDataBackgroundColor:alias | Specifies the background color for data cells. This is included in the af|column::cell* and af|table::control-bar* selectors. |
| .AFTableCellDataBandedBackgroundColor:alias | Specifies the background color for banded data cells. This is included in the af|column::cell*band selectors. |
| .AFTableCellDataBorderColor:alias | Specifies the border color for data cells. This is included in the af|column::cell* and af|table::control-bar* selectors. |
| .AFTableCellDataVerticalAlign:alias | Specifies the vertical alignment for data cells. This is included in the af|column::cell* selectors. |
| Icon Selectors | |
| Name | Description |
| af|column::sort-ascend-icon | This icon is used to indic ate that the column is sorted in ascending order. |
| af|column::sort-descend-icon | This icon is used to indicate that the column is sorted in descending order. |
| af|column::unsorted-icon | This icon is used to indicate that the column is unsorted. Used in the oracle.adf.pda renderKit only. |
The af:menuBar is implemented using an inner table nested within an outer table. The outer table contains cells for the af|menuBar::start-icon and af|menuBar::end-icon icons, as well as a cell for the nested inner table. The inner table contains the actual contents of the menuBar - which includes the af:menuBar items if any items exist, or possibly the af:menuBar title if no items are specified.
Style properties can be applied to either the outer table or the inner table, depending on how the styles are meant to be used. The af|menuBar style can be used to apply styles to the entire menuBar - including the af|menuBar::start-icon/af|menuBar::end-icon icons. Note, however, that if these icons are transparent, then setting the background color or borders on the af|menuBar style class itself is probably not desirable, since the background color will show through any transparent pixels in the icons.
Three other styles can be used to apply styles to the inner contents of the af:menuBar (not including the af|menuBar::start-icon and af|menuBar::end-icon icons). If the af:menuBar contains any items, the af|menuBar::body style class is used to style the inner table which contains the items. Thi s is a good choice for specifying a background color for the af:menuBar, since this background color is not applied to the af:menuBar's outer icons. If no af:menuBar items are present, but the af:menuBar's text attribute is specified, the af|menuBar::title style class is rendered on the inner table instead of af|menuBar::body. If no children are present and there is no title, the af|menuBar::empty title is used.
| Style Selectors | |
|---|---|
| Name | Description |
| af|menuBar | Styles the menuBar container itself. |
| af|menuBar::body | Styles the menuBar's inner table when the menuBar contains child items. |
| af|menuBar::title | Styles the menuBar's inner table when the menuBar does not contain any child items but does have its text attribute set. |
| af|menuBar::empty | Styles empty menuBars - that is, menuBars which do not have any children or a title. |
| af|menuBar::enabled | Styles enabled items in the menuBar. |
| af|menuBar::selected | Styles selected items in the menuBar. |
| af|menuBar::separator | Styles the menuBar separator items. |
| af|menuBar::enabled-link | Styles enabled links in the menuBar. |
| af|menuBar ::selected-link | Styles selected links in the menuBar. |
| .AFMenuBarItem:alias | The .AFMenuBarItem:alias style defines style properties that are shared by all menuBar items. This is included by the af|menuBar::enabled and af|menuBar::selected style classes. Therefore, if you change the .AFMenuBarItem:alias style, you will affect af|menuBar::enabled and af|menuBar::selected. |
| Icon Selectors | |
| Name | Description |
| af|menuBar::start-icon | This icon is rendered at the start of the af|menuBar. |
| af|menuBar::end-icon | This icon is rendered at the end of the af|menuBar. |
| af|menuBar::leading-separator-icon | This icon is rendered before the first item in the af|menuBar. |
| af|menuBar::trailing-separator-icon | This icon is rendered after the last item in the af|menuBar. |
| af|menuBar::background-icon | This icon is rendered as the background of the af|menuBar. |
| af|menuBar::separator-icon | This icon is rendered between items. |
| Style Selector s | |
|---|---|
| Name | Description |
| af|menuButtons::text | Styles the enabled menu buttons text. |
| af|menuButtons::text-selected | Styles the selected menu buttons text. |
| af|menuButtons::text-disabled | Styles the disabled menu buttons text. |
| .AFMenuButtons:alias | The .AFMenuButtons:alias style defines style properties that are shared by all menuButtons selectors: af|menuButtons::text, af|menuButtons::text-selected, and af|menuButtons::text-disabled. |
| Icon Selectors | |
| Name | Description |
| af|menuButtons::separator-icon | The separator icon that is rendered between af:menuButtons. This is typically a text icon, like |. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|menuChoice::label | Styles the af:menuChoice's label. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|menuList | Styles the menuList. |
| af|menuList::selected | Styles the selected menuList. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|menuPath | Styles the af:menuPath content. |
| af|menuPath::selected-step | Styles the selected step of af:menuPath. This step may be hidden if the -ora-show-last-item property is set to false. |
| af|menuPath::step | Styles the af:menuPath steps. |
| .AFPath:alias | The .AFPath:alias style defines style properties that are shared by both af|menuPath and af|treeTable::path. |
| .AFPathStep:alias | The .AFPathStep:alias style defines style properties that are shared by both af|menuPath::step and af|treeTable::path-step |
| .AFPathSelectedStep:alias | The .AFPathSelectedStep:alias style defines style properties that are shared by both af|menuPath::selected-step and af|treeTable::path-selected-step |
| Icon Selectors | |
| Name | Description |
| af|menuPath::separator-icon | The separator icon that is rendered between af:menuPath links. This is typically a text icon, like ' > '. |
| .AFPathSeparatorIcon:alias | Changing this icon changes both af|menuPath::separator-icon and af|treeTable::separator-icon. This makes it easier to keep the icons between the two consistent. |
| ADF Faces properties | |
| Name | Description |
| -ora-show-last-item | Valid values are true or false. Determines whether the last item is displayed or not. e.g., af|menuPath {-ora-show-last-item:false} will not show the last item in the menuPath. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|menuTabs | Styles the af:menuTabs container. |
| af|menuTabs::enabled | Styles the enabled items. |
| af|menuTabs::selected | Styles the selected item. |
| af|menuTabs::disabled | Styles the disabled item. |
| af|menuTabs::enabled-l ink | Styles link-specific styles to enabled links. |
| af|menuTabs::selected-link | Styles link-specific styles to selected links. |
| .AFTabBarItem:alias | The .AFTabBarItem:alias style defines style properties that are shared by all menuTabs items. This alias style is included by the af|menuTabs::enabled, af|menuTabs::selected and af|menuTabs::disabled style classes. |
| .AFTabBarLink:alias | The .AFTabBarLink:alias style defines style properties that are shared by all links within the tabBar. This alias style is included by the "af|menuTabs::enabled-link" and "af|menuTabs::selected-link" selectors. |
| Icon Selectors | |
| Name | Description |
| af|menuTabs::enabled-start-icon | This icon is rendered at the start of each enabled menuTab item. |
| af|menuTabs::enabled-end-icon | This icon is rendered at the end of each enabled menuTab item. |
| af|menuTabs::enabled-background-icon | This icon is rendered in the background each enabled menuTab item. |
| af|menuTabs::selected-start-icon | This icon is rendered at the start of the selected menuTab item. |
| af|menuTabs::selected-end-icon | This icon is rendered at the end of the selected menuTab item. |
| af|menuTabs::selected-background-icon | This icon is rendered in the background the selected menuTab item. |
| af|menuTabs::enabled-join-icon | This icon is rendered in between two enabled menuTab items. |
| af|menuTabs::enabled-selected-join-icon | This icon is rendered in between an enabled tabBar item and the selected menuTab item. That is, when the reading direction is left to right, the join connects an enabled item with a selected item to the right of the enabled item. |
| af|menuTabs::selected-enabled-join-icon | Thisicon is rendered in between the selected menuTab item and an enabled menuTab item. That is, when the reading direction is left to right, the join connects a selected item with an enabled item to the right of the selected item. |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|menuTree::disclosed-icon | This icon is displayed when the af:menuTree component is rendered in its disclosed state. |
| af|menuTree::undisclosed-icon | This icon is displayed when the af:menuTree component is rendered in its undisclosed state. |
| .AFDetailDisclosedIcon:alias | Customizes all of these icons at once: af|table::disclosed-icon, af|showDetail::disclosed-icon, af|showDetailHeader::disclosed-icon, af|menuTree::disclosed-icon |
| .AFDetailUndisclosedIcon:alias | Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|menuTree::undisclosed-icon |
This af:messages component is implemented using an inner table nested within an outer table. The outer container is used to lay out the messages' icons. The inner container contains the actual contents of the messages. If any transparent icons are used, style properties such as the background color should probably be set on the inner table via the af|messages::body selector.
| Style Selectors | |
|---|---|
| Name | Description |
| .AFHeaderLevelOne | This style class is included by af|messages::header and af|messages::error, as well as the af|*::level-one selectors and af|panelHeader::error |
| af|messages | Styles the messages's outer table. Since the messages's icons are rendered within the outer table, the af|message::body selector is probably a better choice for specifying the messages's background color, padding, etc... |
| af|messages::body | Styles the messages's inner table, which does not include any outer icons. |
| Icon Selectors | |
| Name | Description |
| af|messages::top-start-icon | This icon is rendered at the top starting corner of the messages (ie. at the top left corner for left to right languages.) |
| af|messages::top-end-icon | This icon is rendered at the top ending corner of the messages (ie. at the top right corner for left to right languages.) |
| af|messages::top-background-icon | This icon is rendered in the background in between the af|messages::top-start-icon and af|messages::top-end-icon icons. |
| af|messages::bottom-start-icon | This icon is rendered at the bottom starting corner of the messages (ie. at the bottom left corner for left to right languages.) |
| af|messages::bottom-end-icon | This icon is rendered at the bottom ending corner of the messages (ie. at the bottom right corner for left to right languages.) |
| af|messages::bottom-background-icon | This icon is rendered in the background in between the af|messages::bottom-start-icon and af|messages::bottom-end-icon icons. |
| af|messages::start-background-icon | This icon is rendered in the background at the start of the messages. |
| af|messages::end-background-icon | This icon is rendered in the background at the end of the messages. |
| af|messages::error-icon | The icon that is displayed for error messages. |
| af|messages::warning-icon | The icon that is displayed for warning messages. |
| af|messages::info-icon | The icon that is displayed for information messages. |
| af|messages::confirmation-icon | The icon that is displayed for confirmation messages. |
| .AFHeaderErrorIcon:alias | The icon that is displayed for error messages or headers in af:messages and af:panelHeader. Changing this icon changes both af|panelHeader::error-icon and af|messages::error-icon |
| .AFHeaderWarningIcon:alias | The icon that is displayed for warning messages or headers in af:messages and af:panelHeader. Changing this icon changes both af|panelHeader::warning-icon and af|messages::warning-icon |
| .AFHeaderInfoIcon:alias | The icon that is displayed for information messages or headers in af:messages and af:panelHeader. Changing this icon changes both af|panelHeader::info-icon and af|messages::info-icon |
| .AFHeaderConfirmationIcon:alias | The icon that is displayed for confirmation messages or headers in af:messages and af:panelHeader. Changing t his icon changes both af|panelHeader::confirmation-icon and af|messages::confirmation-icon |
| Style Selectors | |
|---|---|
| Name | Description |
| af|objectSeparator | Styles the af:objectSeparator component. |
The panelBox contains two main regions: the body region, which contains the panelBox contents, and the header region, which contains the panelBox header text (set by the text attribute on af:panelBox). Styles can be applied to the body region via the af|panelBox::body selector. Similarly, styles for the header region are specified via the af|panelBox::header selector.
These two regions are themselves rendered within an outer container that can be styled as well. There are two different sets of selectors for the outer region, depending on whether a header is present. If a header is present, one of the following selectors is used, depending on the panelBox background color (background color can be quickly configured to dark, medium, or light using the background attribute on panelBox).
If no header is present , the outer container instead uses the following style classes:
In order to apply a style to the panelBox body or header for a particular background type, a contextual selector can be used. For example, the following selectors can be used to change the properties of dark panelBox header and body regions:
af|panelBox::dark af|panelBox::header {...} af|panelBox::dark
af|panelBox::body {...}
And the following selector can be used to change the properties of the dark panelBox body for panelBox which do not have a header:
af|panelBox::content-dark af|panelBox::body {...}
In order to make it easier to apply common style properties across panelBox of different background types, several alias styles are exposed. For example, the .AFPanelBoxDarkBackground:alias aliased style provides a way to set the background color for all dark panelBox. This aliased style is used regardless of whether the outer container uses the af|panelBox::dark or af|panelBox::content-dark style class (ie. whether or not a header is present).
The panelBox defines four sets of icons: one set for each background type. Customizers are not required to specify icons for all of the different icon names. If an icon is omitted, the panelBox will attempt to expand to fill any empty space.
| Style Selectors | |
|---|---|
| Name | Description |
| af|panelBox::body | Styles the body region. The body region is rendered whether or not the panelBox has a header. |
| af|panelBox::header | Styles the header region. |
| af|panelBox::dark | Styles the outer container of the dark panelBox when there is a header. |
| af|panelBox::medium | Styles the outer container of the medium panelBox when there is a header. |
| af|panelBox::light | Styles the outer container of light panelBox when there is a header. |
| af|panelBox::transparent | Styles the outer container of transparent panelBox when there is a header. |
| af|panelBox::content-dark | Styles the dark panelBox when there is no header. |
| af|panelBox::content-medium | Styles the medium panelBox when there is no header. |
| af|panelBox::content-light | Styles the light panelBox when there is no header. |
| af|panelBox::content-transparent | Styles the transparent panelBox when there is no header. |
| .AFPanelBox:alias | This aliased style can be used to specify common properties that are shared by the af|panelBox::dark, af|panelBox::medium, af|panelBox::light and af|panelBox::transparent style classes (classes when the panelBox has a header). |
| .AFBoxContent:alias | This aliased style can be used to specify common properties that are shared by the af|panelBox::content-dark, af|panelBox::content-medium, af|panelBox::content-light and af|panelBox::content-transparent style classes. AFShuttleBoxContent:alias includes this style. |
| .AFPanelBoxBody:alias | This aliased style class be used to specify common properties that are shared by the four types of the panelBox < Background > body regions. It is included by the following selectors:
|
| .AFBoxContentBody:alias | This aliased style class be used to specify common properties that are shared by the four types of the af|panelBox::content < Background > body regions. It is included by the following selectors:
|
| .AFPanelBoxDarkBackground:alias | This aliased style is used to set the background color for dark panelBox. It is included by the following selectors:
|
| .AFPanelBoxMediumBackground:alias | This aliased style is used to set the background color for medium panelBox. It is included by the following selectors:
|
| .AFBoxBackground:alias | This aliased style is used to set the background color for light panelBox and for the seletMany/selectOrder shuttle's box. It is included by the following selectors:
|
| Icon Selectors | |
| Name | Description |
| af|panelBox::dark-header-start-icon | This icon is rendered at the start of the header region for dark panelBoxes. |
| af|panelBox::dark-header-end-icon | This icon is rendered at the end of the header region for dark panelBoxes. |
| af|panelBox::dark-header-background-icon | This icon is rendered in the background of the header region for dark panelBoxes. |
| af|panelBox::dark-bottom-start-icon | This icon is rendered in the body region of dark panelBoxes at the bottom starting corner (ie. at the bottom left corner for left to right languages.) |
| af|panelBox::dark-bottom-end-icon | This icon is rendered in the body region of dark panelBoxes at the bottom ending corner (ie. at the bottom right corner for left to right languages.) |
| af|panelBox::dark-bottom-background-icon | This icon is rendered in the body region of dark panelBoxes as the background in between the af|panelBox::dark-bottom-start and af|panelBox::dark-bottom-end icons. |
| af|panelBox::dark-top-start-icon | This icon is rendered in the body region of dark panelBoxes at the top starting corner (ie. at the top left corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::dark-top-end-icon | This icon is rendered in the body region of dark panelBoxes at the top ending corner (ie. at the top right corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::dark-top-background-icon | This icon is rendered in the body region of dark panelBoxes as the background in between the af|panelBox::dark-top-start and af|panelBox::dark-top-end icons. Note: the top icons are only rendered for contentContainers which do not have headers. |
| af|panelBox::dark-start-background-icon | This icon is rendered as the background image on the starting side of the body region in dark panelBoxes. |
| af|panelBox::dark-end-background-icon | This icon is rendered as the background image on the ending side of the body region in dark panelBoxes. |
| af|panelBox::medium-header-start-icon | This icon is rendered at the start of the header region for medium panelBoxes. |
| af|panelBox::medium-header-end-icon | This icon is rendered at the end of the header region for medium panelBoxes. |
| af|panelBox::medium-header-background-icon | This icon is rendered in the background of the header region for medium panelBoxes. |
| af|panelBox::medium-bottom-start-icon | This icon is rendered in the body region of medium panelBoxes at the bottom starting corner (ie. at the bottom left corner for left to right languages.) |
| af|panelBox::medium-bottom-end-icon | This icon is rendered in the body region of medium panelBoxes at the bottom ending corner (ie. at the bottom right corner for left to right languages.) |
| af|panelBox::medium-bottom-background-icon | This icon is rendered in the body region of medium panelBoxes as the background in between the af|panelBox::medium-bottom-start and af|panelBox::medium-bottom-end icons. |
| af|panelBox::medium-top-start-icon | This icon is rendered in the body region of medium panelBoxes at the top starting corner (ie. at the top left corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::medium-top-end-icon | This icon is rendered in the body region of medium panelBoxes at the top ending corner (ie. at the top right corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::medium-top-background-icon | This icon is rendered in the body region of medium panelBoxes as the background in between the af|panelBox::medium-top-start and af|panelBox::medium-top-end icons. Note: the top icons are only rendered for contentContainers which do not have headers. |
| af|panelBox::medium-start-background-icon | This icon is rendered as the background image on the starting side of the body region in medium panelBoxes. |
| af|panelBox::medium-end-background-icon | This icon is rendered as the background image on the ending side of the body region in medium panelBoxes. |
| af|panelBox::light-header-start-icon | This icon is rendered at the start of the header region for light panelBoxes. |
| af|panelBox::light-header-end-icon | This icon is rendered at the end of the header region for light panelBoxes. |
| af|panelBox::light-header-background-icon | This icon is rendered in the background of the header region for light panelBoxes. |
| af|panelBox::light-bottom-start-icon | This icon is rendered in the body region of light panelBoxes at the bottom starting corner (ie. at the bottom left corner for left to right languages.) |
| af|panelBox::light-bottom-end-icon | This icon is rendered in the body region of light panelBoxes at the bottom ending corner (ie. at the bottom right corner for left to right languages.) |
| af|panelBox::light-bottom-background-icon | This icon is rendered in the body region of light panelBoxes as the background in between the af|panelBox::light-bottom-start and af|panelBox::light-bottom-end icons. |
| af|panelBox::light-top-start-icon | This icon is rendered in the body region of light panelBoxes at the top starting corner (ie. at the top left corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::light-top-end-icon | This icon is rendered in the body region of light panelBoxes at the top ending corner (ie. at the top right corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::light-top-background-icon | This icon is rendered in the body region of light panelBoxes as the background in between the af|panelBox::light-top-start and af|panelBox::light-top-end icons. Note: the top icons are only rendered for panelBoxes which do not have headers.w |
| af|panelBox::light-start-background-icon | This icon is rendered as the background image on the starting side of the body region in light panelBoxes. |
| af|panelBox::light-end-background-icon | This icon is rendered as the background image on the ending side of the body region in light panelBoxes. |
| af|panelBox::transparent-header-start-icon | This icon is rendered at the start of the header region for transparent panelBoxes. |
| af|panelBox::transparent-header-end-icon | This icon is rendered at the end of the header region for transparent panelBoxes. |
| af|panelBox::transparent-header-background-icon | This icon is rendered in the background of the header region for transparent panelBoxes. |
| af|panelBox::transparent-bottom-start-icon | This icon is rendered in the body region of transparent panelBoxes at the bottom starting corner (ie. at the bottom left corner for left to right languages.) |
| af|panelBox::transparent-bottom-end-icon | This icon is rendered in the body region of transparent panelBoxes at the bottom ending corner (ie. at the bottom right corner for left to right languages.) |
| af|panelBox::transparent-bottom-background-icon | This icon is rendered in the body region of transparent panelBoxes as the background in between the af|panelBox::transparent-bottom-start and af|panelBox::transparent-bottom-end icons. |
| af|panelBox::transparent-top-start-icon | This icon is rendered in the body region of transparent panelBoxes at the top starting corner (ie. at the top left corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::transparent-top-end-icon | This icon is rendered in the body region of transparent panelBoxes at the top ending corner (ie. at the top right corner for left to right languages.) Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::transparent-top-background-icon | This icon is rendered in the body region of transparent panelBoxes as the background in between the af|panelBox::transparent-top-start and af|panelBox::transparent-top-end icons. Note: the top icons are only rendered for panelBoxes which do not have headers. |
| af|panelBox::transparent-start-background-icon | This icon is rendered as the background image on the starting side of the body region in transparent panelBoxes. |
| af|panelBox::transparent-end-background-icon | This icon is rendered as the background ima ge on the ending side of the body region in transparent panelBoxes. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|panelForm::body | Specifies the style information for body of the panelForm. |
| af|panelForm::cell | Specifies the style information for each cell of the panelForm. |
| af|panelForm::label-cell | Specifies the style information for the label cell of the panelForm. This includes .AFEndTextAlign:alias. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|panelList | Styles the content. |
| af:panelList::link | Styles the links. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|panelHeader | This can be used to set common properties that are shared across all header levels. |
| af|panelHeader::icon-style | Styles the header icon. |
| af|panelHeader::level-one | Styles level one headers. |
| af|panelHeader::level-two | Styles level two headers. |
| af|panelHeader::level-three | Styles level three headers. |
| af|panelHeader::level-four | Styles level four headers. |
| af|panelHeader::level-five | Styles level five headers. |
| af|panelHeader::level-six | Styles level six headers. |
| af|panelHeader::error | Styles level one header when messageType is error. |
| .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 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|panelHeader::error-icon | The icon that is displayed for headers with messageType "error". |
| af|panelHeader::warning-icon | The icon that is displayed for headers with messageType "warning". |
| af|panelHeader::info-icon | The icon that is displayed for headers with messageType "info". |
| af|panelHeader::confirmation-icon | The icon that is displayed for headers with messageType "confirmation". |
| af|panelHeader::processing-icon | The icon that is displayed for headers with messageType "processing". |
| .AFHeaderErrorIcon:alias | The icon that is displayed for error messages or headers in af:messages and af:panelHeader. Changing this icon changes both af|panelHeader::error-icon and af|messages::error-icon |
| .AFHeaderWarningIcon:alias | The icon that is displayed for warning messages or headers in af:messages and af:panelHeader. Changing this icon changes both af|panelHeader::warning-icon and af|messages::warning-icon |
| .AFHeaderInfoIcon:alias | The icon that is displayed for information messages or headers in af:messages and af:panelHeader. Changing th is icon changes both af|panelHeader::info-icon and af|messages::info-icon |
| .AFHeaderConfirmationIcon:alias | The icon that is displayed for confirmation messages or headers in af:messages and af:panelHeader. Changing this icon changes both af|panelHeader::confirmation-icon and af|messages::confirmation-icon |
| Style Selectors | |
|---|---|
| Name | Description |
| .AFFooterMessageText:alias | This defines style properties that are shared by af|panelPage::about, af|panelPage::copyright, and af|panelPage::privacy style selectors. |
| .AFFooterMessageLink:alias | This defines style properties that are shared by af|panelPage::about-link, af|panelPage::copyright-link, and af|panelPage::privacy-link style selectors. |
| af|panelPage::about | Styles the "appAbout" facet. |
| af|panelPage::about-link | Styles the links within the "appAbout" facet. |
| af|panelPage::copyright | Styles the "appCopyright" facet. |
| af|panelPage::copyright-link | Styles the links within the "appCopyright" facet. |
| af|panelPage::privacy | Styles the "appPrivacy" facet. |
| af|panelPage::privacy-link | Styles the links within the "privacy" facet. |
This af:panelSideBar component is implemented using an inner table nested within an outer table. The outer container is used to lay out the panelSideBar's icons. The inner container contains the actual contents of the panelSideBar. If any transparent icons are used, style properties such as the background color should probably be set on the inner table via the af|panelSideBar::body style class.
| Style Selectors | |
|---|---|
| Name | Description |
| af|panelSideBar | This style class is rendered on the panelSideBar's outer table. Since the panelSideBar's icons are rendered within the outer table, the af|panelSideBar::body style is probably a better choice for specifying the panelSideBar's background color, padding, etc... |
| af|panelSideBar::body | This style class is rendered on the panelSideBar's inner table, which does not include any outer icons. |
| Icon Selectors | |
| Name | Description |
| af|panelSideBar::top-start-icon | This icon is rendered at the top starting corner of the panelSideBar (ie. at the top left corner for left to right langua ges.) |
| af|panelSideBar::top-end-icon | This icon is rendered at the top ending corner of the panelSideBar (ie. at the top right corner for left to right languages.) |
| af|panelSideBar::top-background-icon | This icon is rendered in the background in between the af|panelSideBar::top-start and af|panelSideBar::top-end icons. |
| af|panelSideBar::bottom-start-icon | This icon is rendered at the bottom starting corner of the panelSideBar (ie. at the bottom left corner for left to right languages.) |
| af|panelSideBar::bottom-end-icon | This icon is rendered at the bottom ending corner of the panelSideBar (ie. at the bottom right corner for left to right languages.) |
| af|panelSideBar::bottom-background-icon | This icon is rendered in the background in between the af|panelSideBar::bottom-start and af|panelSideBar::bottom-end icons. |
| af|panelSideBar::start-background-icon | This icon is rendered in the background at the start of the panelSideBar. |
| af|panelSideBar::end-background-icon | This icon is rendered in the background at the end of the panelSideBar. |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|selectInputColor::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|selectInputColor::swatch-overlay-icon | The icon that is overlayed on top of the selectInputColor's color swatch to indicate that the color swatch is clickable. |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|selectInputDate::launch-icon | The button icon which is used to launch the secondary date picker dialog. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|selectManyShuttle::box-body | Styles the body region of the box around the shuttle. This is inside of the af|selectManyShuttle::box-content style. |
| af|selectManyShuttle::box-content | Styles the outer container of box around the shuttle. |
| .AFShuttleBoxContent:alias | This style defines style properties that are shared by af|selectOrderShuttle::box-content and af|selectManyShuttle::box-content |
| .AFShuttleBoxContentBody:alias | This style defines style properties that are included by the following selectors:
|
| .AFShuttleBoxBackground:alias | Styles the background color for shuttle's box. It is included by the following selectors:
|
| .AFBoxBackground:alias | This style is used to set the background color for light panelBox and for the selectMany/selectOrder shuttle's box. It is included by the following selectors:
|
| Icon Selectors | |
| Name | Description |
| .AFShuttleMoveIcon:alias | Customizes both af|selectManyShuttle::move-icon and a af|selectOrderShuttle::move-icon. |
| .AFShuttleMoveAllIcon:alias | Customizes both af|selectManyShuttle::move-all-icon and a af|selectOrderShuttle::move-all-icon. |
| .AFShuttleRemoveIcon:alias | Customizes both af|selectManyShuttle::remove-icon and a af|selectOrderShuttle::remove-icon. |
| .AFShuttleRemoveAllIcon:alias | Customizes both af|selectManyShuttle::remove-all-icon and a af|selectOrderShuttle::remove-all-icon. |
| af|selectManyShuttle::move-icon | The icon for the af:selectManyShuttle's "Move" action. |
| af|selectManyShuttle::move-all-icon | The icon for the af:selectManyShuttle's "Move All" action. |
| af|selectManyShuttle::remove-icon | The icon for the af:selectManyShuttle's "Remove" action. |
| af|selectManyShuttle::remove-all-icon | The icon for the af:selectManyShuttle's "Remove All" action. |
| af|selectManyShuttle::bottom-start-icon | This icon is rendered in the body region at the bottom starting corner (ie. at the bottom left corner for left to right languages.) |
| af|selectManyShuttle::bottom-end-icon | This icon is rendered in the body region at the bot tom ending corner (ie. at the bottom right corner for left to right languages.) |
| af|selectManyShuttle::bottom-background-icon | This icon is rendered in the body region as the background in between the af|selectManyShuttle::bottom-start and af|selectManyShuttle::bottom-end icons. |
| af|selectManyShuttle::top-start-icon | This icon is rendered in the body region at the top starting corner (ie. at the top left corner for left to right languages.) |
| af|selectManyShuttle::top-end-icon | This icon is rendered in the body region at the top ending corner (ie. at the top right corner for left to right languages.) |
| af|selectManyShuttle::top-background-icon | This icon is rendered in the body region as the background in between the af|selectManyShuttle::top-start and af|selectManyShuttle::top-end icons. This needs to be an icon with an url. |
| af|selectManyShuttle::start-background-icon | This icon is rendered as the background image on the starting side of the body region. This needs to be an icon with an url. |
| af|selectManyShuttle::end-background-icon | This icon is rendered as the background image on the ending side of the body region. This needs to be an icon with an url. |
| Style Sel ectors | |
|---|---|
| Name | Description |
| af|selectOrderShuttle::box-body | Styles the body region of the box around the shuttle. This is inside of the af|selectOrderShuttle::box-content style. |
| af|selectOrderShuttle::box-content | Styles the outer container of box around the shuttle. |
| .AFShuttleBoxContent:alias | This style defines style properties that are shared by af|selectOrderShuttle::box-content and af|selectManyShuttle::box-content |
| .AFShuttleBoxContentBody:alias | This style defines style properties that are included by the following selectors:
|
| .AFShuttleBoxBackground:alias | This style is used to set the background color for shuttle's box. It is included by the following selectors:
|
| Icon Selectors | |
| Name | De scription |
| .AFShuttleMoveIcon:alias | Customizes both af|selectManyShuttle::move-icon and a af|selectOrderShuttle::move-icon. |
| .AFShuttleMoveAllIcon:alias | Customizes both af|selectManyShuttle::move-all-icon and a af|selectOrderShuttle::move-all-icon. |
| .AFShuttleRemoveIcon:alias | Customizes both af|selectManyShuttle::remove-icon and a af|selectOrderShuttle::remove-icon. |
| .AFShuttleRemoveAllIcon:alias | Customizes both af|selectManyShuttle::remove-all-icon and a af|selectOrderShuttle::remove-all-icon. |
| af|selectOrderShuttle::move-icon | The icon for the af:selectOrderShuttle's "Move" action. |
| af|selectOrderShuttle::move-all-icon | The icon for the af:selectOrderShuttle's "Move All" action. |
| af|selectOrderShuttle::remove-icon | The icon for the af:selectOrderShuttle's "Remove" action. |
| af|selectOrderShuttle::remove-all-icon | The icon for the af:selectOrderShuttle's "Remove All" action. |
| af|selectOrderShuttle::reorder-top-icon | The icon for moving the currently selected item to the top. |
| af|selectOrderShuttle::reorder-up-icon | The icon for moving the currently selected item up by one item. |
| af|selectOrderShuttle::reorder-down-icon | The icon for moving the currently selected item down by one item. |
| af|selectOrderShuttle::reorder-bottom-icon | The icon for moving the currently selected item to the bottom. |
| af|selectOrderShuttle::bottom-start-icon | This icon is rendered in the body region at the bottom starting corner (ie. at the bottom left corner for left to right languages.) |
| af|selectOrderShuttle::bottom-end-icon | This icon is rendered in the body region at the bottom ending corner (ie. at the bottom right corner for left to right languages.) |
| af|selectOrderShuttle::bottom-background-icon | This icon is rendered in the body region as the background in between the af|selectManyShuttle::bottom-start and af|selectManyShuttle::bottom-end icons. |
| af|selectOrderShuttle::top-start-icon | This icon is rendered in the body region at the top starting corner (ie. at the top left corner for left to right languages.) |
| af|selectOrderShuttle::top-end-icon | This icon is rendered in the body region at the top ending corner (ie. at the top right corner for left to right languages.) |
| af|selectOrderShuttle::top-background-icon | This icon is rendered in the body region as the background in between the af|selectManyShuttle::top-start and af|selectManyShuttle::top-end icons. This needs to be an icon with an url. |
| af|selectOrderShuttle::start-background-icon | This icon is rendered as the background image on the starting side of the body region. This needs to be an icon with an url. |
| af|selectOrderShuttle::end-background-icon | This icon is rendered as the background image on the ending side of the body region. This needs to be an icon with an url. |
| 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|table::disclosed-icon, af|showDetail::disclosed-icon, af|showDetailHeader::disclosed-icon, af|menuTree::disclosed-icon |
| .AFDetailUndisclosedIcon:alias | Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|menuTree::undisclosed-icon |
| 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-t wo, 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|table::disclosed-icon, af|showDetail::disclosed-icon, af|showDetailHeader::disclosed-icon, af|menuTree::disclosed-icon |
| .AFDetailUndisclosedIcon:alias | Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|menuTree::undisclosed-icon |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|selectInputText::button-icon | The icon which is used to launch the secondary list of values dialog. |
| Style Selectors | |
|---|---|
| Name | Description |
| .AFShowOneTab:alias | This style is included in both af|showOneTab::orientation-top and af|showOneTab::orientation-bottom. |
| af|showOneTab::orientation-top | This styles the top showOneTab. You can use this to add padding and margins and borders, for example. |
| af|showOneTab::orientation-bottom | This styles the bottom showOneTab. You can use this to add padding and margins and borders, for example. |
| af|showOneTab::tab | This styles each unselected tab. |
| af|showOneTab::tab-link | This styles each unselected tab link. |
| af|showOneTab::tab-selected | This styles each selected tab. |
| af|showOneTab::tab-selected-link | This styles each selected tab link. |
| af|showOneTab::separator-before-selected | This is a cell with no content that renders before the selected cell. You can style this cell to highlight the selected cell, if desired. |
| af|showOneTab::separator-after-selected | This is a cell with no content that rend ers after the selected cell. You can style this cell to highlight the selected cell, if desired. |
| af|showOneTab::separator | This style is on the cells between each unselected step. |
| af|showOneTab::cell-start | The style on the first cell. You can left-align by setting width:0% on this, and width:100% on cell-end. |
| af|showOneTab::cell-end | The style on the last cell. |
| af|showOneTab::body | The style on the body of the showOneTab; ie., the contents. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|table::content | This style class is applied to the inner HTML table which contains the table data (column headers, row headers, and data cells). |
| af|table::control-bar-top | This style class is applied to the table's top control bar. |
| af|table::control-bar-bottom | This style class is applied to the table's bottom control bar. |
| af|table::sub-control-bar | This style class is applied to the table's sub control bar. |
| af|table::detail | Specifies properties for detail disclosure cells. |
| af|table::column-footer | Specifies properties for column footers. |
| .AFTableCellDataBackgroundColor:alias | Specifies the background color for data cells. This is included in the af|column::cell* and af|table::control-bar* selectors. |
| .AFTableCellDataBandedBackgroundColor:alias | Specifies the background color for banded data cells. This is included in the af|column::cell*band selectors. |
| .AFTableCellDataBorderColor:alias | Specifies the border color for data cells. This is included in the af|column::cell* and af|table::control-bar* selectors. |
| Icon Selectors | |
| Name | Description |
| af|table::disclosed-icon | The af|table::disclosed-icon icon is displayed when the af:table's showDetail is rendered in its disclosed state. |
| af|table::undisclosed-icon | The af|table::undisclosed-icon icon is displayed when the af:table's showDetail is rendered in its undisclosed state. |
| .AFDetailDisclosedIcon:alias | Customizes all of these icons at once: af|table::disclosed-icon, af|showDetail::disclosed-icon, af|showDetailHeader::disclosed-icon, af|menuTree::disclosed-icon |
| .AFDetailUndisclosedIcon:alias | Customizes all of these icons at once: af|table::undisclosed-ico n, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|menuTree::undisclosed-icon |
| af|table::prev-icon | The previous icon which is used to go back to previous step. |
| af|table::next-icon | The next icon which is used to go back to next step. |
| af|table::prev-disabled-icon | The previous icon disabled. |
| af|table::next-disabled-icon | The next icon disabled. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|processTrain::active | Styles the active train station. |
| af|processTrain::visited | Styles the visited train stations. |
| af|processTrain::disabled | Styles the disabled train stations. |
| af|processTrain::unvisited | Styles the unvisited train stations. |
| .AFTrainStation:alias | Style that is included by all of the af|processTrain* style classes. |
| af|processTrain::visited-link | Styles the visited train stations links. |
| af|processTrain::unvisited-link | Styles the unvisited train stations links. |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|progressIndicator::indeterminate-icon | The icon which is displayed when the progressIndicator's value is -1. |
| af|progressIndicator::zero-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is zero percent. |
| af|progressIndicator::five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is five percent. |
| af|progressIndicator::ten-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is ten percent. |
| af|progressIndicator::fifteen-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is fifteen percent. |
| af|progressIndicator::twenty-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is twenty percent. |
| af|progressIndicator::twenty-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is twenty-five percent. |
| af|progressIndicato r::thirty-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is thirty percent. |
| af|progressIndicator::thirty-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is thirty-five percent. |
| af|progressIndicator::forty-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is forty percent. |
| af|progressIndicator::forty-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is forty-five percent. |
| af|progressIndicator::fifty-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is fifty percent. |
| af|progressIndicator::fifty-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is fifty-five percent. |
| af|progressIndicator::sixty-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is sixty percent. |
| af|progressIndicator::sixty-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is sixty-five percent. |
| af|progressIndicator::seventy-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is seventy percent. |
| af|progressIndicator::seventy-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is seventy-five percent. |
| af|progressIndicator::eighty-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is eighty percent. |
| af|progressIndicator::eighty-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is eighty-five percent. |
| af|progressIndicator::ninety-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is ninety percent. |
| af|progressIndicator::ninety-five-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is ninety-five percent. |
| af|progressIndicator::one-hundred-percent-icon | The icon which is displayed when the progressIndicator's value divided by maximum is one-hundred percent. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|selectInputDate::nav-link | Styles the selectInputDate's navigation Previous Month and Next Month l inks. |
| af|selectInputDate::title | Styles the selectInputDate title which is month/year choice lists.. |
| af|selectInputDate::header | Styles the selectInputDate header which is the days of week row. |
| af|selectInputDate::content | Styles the selectInputDate content. |
| af|selectInputDate::selected | Styles the selected date. |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|selectBooleanCheckbox::disabled-checked-icon | The icon that is displayed when the checkbox is readOnly, disabled, and checked. |
| af|selectBooleanCheckbox::disabled-unchecked-icon | The icon that is displayed when the checkbox is readOnly, disabled, and unchecked. |
| af|selectBooleanCheckbox::read-only-checked-icon | The icon that is displayed when the checkbox is read-only and checked. |
| af|selectBooleanCheckbox::read-only-unchecked-icon | The icon that is displayed when the checkbox is read-only and unchecked. |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|selectBooleanRadio::disabled-selected-icon | The icon that is displayed when the radio is readOnly, disabled, and selected. |
| af|selectBooleanRadio::disabled-unselected-icon | The icon that is displayed when the radio is readOnly, disabled, and not selected. |
| af|selectBooleanRadio::read-only-selected-icon | The icon that is displayed when the radio is read-only and selected. |
| af|selectBooleanRadio::read-only-unselected-icon | The icon that is displayed when the radio is read-only and not selected. |
| Icon Selectors | |
|---|---|
| Name | Description |
| af|selectRangeChoiceBar::prev-icon | The previous icon which is used to go back to previous step. |
| af|selectRangeChoiceBar::next-icon | The next icon which is used to go back to next step. |
| af|selectRangeChoiceBar::prev-disabled-icon | The previous icon in its disabled state. |
| af|selectRangeChoiceBar::next-disabled-icon | The next icon in its disabled state. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|tableSelectMany::cell-icon-format | Styles the tableSelectMany column. |
| af|tableSelectMany::cell-icon-format-band | Styles the banded tableSelectMany column. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|tableSelectOne::cell-icon-format | Styles the tableSelectOne column. |
| af|tableSelectOne::cell-icon-format-band | Styles the banded tableSelectOne column. |
| Style Selectors | |
|---|---|
| Name | Description |
| af|treeTable::expansion | Styles the treeTable's expanded and collapsed icons. |
| af|treeTable::focus | Styles the treeTable's focus icon. |
| af|treeTable::locator | Styles the treeTable's locator icon. |
| af|treeTable::pa th | Styles the path content. |
| af|treeTable::path-selected-step | Styles the selected path step. This step may be hidden. |
| af|treeTable::path-step | Styles the path steps. |
| af|treeTable::content | Styles the inner HTML table which contains the treeTable data (column headers, row headers, and data cells). |
| af|treeTable::control-bar-top | Styles the treeTable's top control bar. |
| af|treeTable::control-bar-bottom | Styles the treeTable's bottom control bar. |
| af|treeTable::sub-control-bar | Styles the treeTable's sub control bar. |
| .AFPath:alias | This style is included in both af|menuPath and af|treeTable::path |
| .AFPathStep:alias | This style is included in both af|menuPath::step and af|treeTable::path-step |
| .AFPathSelectedStep:alias | This style is included in both af|menuPath::selected-step and af|treeTable::path-selected-step |
| Icon Selectors | |
| Name | Description |
| af|treeTable::expanded-icon | This icon is displayed in expanded treeTable rows. |
| af|treeTable::collapsed-icon | This icon is displayed in collapsed treeTable rows. |
| af|treeTable::focus-icon | This icon is displayed in the focus column for focusable rows. |
| af|treeTable::locator-icon | This icon is displayed next to the treeTable's locator bread crumbs which display the treeTable's focus path. |
| af|treeTable::separator-icon | The separator icon that is rendered between the path links. This is typically a text icon. |
| .AFPathSeparatorIcon:alias | Changing this icon changes both af|menuPath::separator-icon and af|treeTable::separator-icon |
JDeveloper 10.1.3.4