Trinidad
Foundation
Modules
Project Documentation

Selectors for Skinning Trinidad Components

Overview

This document lists the selectors that can be used in an Trinidad skin .css file to skin Trinidad components. NOTE: This document is not currently up-to-date! 

     Examples of some Trinidad Skin selectors:
     /* Global selectors affect more than one component */
     .AFDarkForeground:alias {color:#035D5C;}
     .AFDarkBackground:alias {background-color:Purple;}

     /* Component-specific selector.  */
     af|panelTabbed::orientation-top
      {
         border-bottom: 3px solid black;
      }

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.

Global Style Selectors

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 default font.
.AFVerySmallFont:alias A very small version of the default font. This style is used for very small text such as inline messages, and copyright and privacy messages.
.AFSmallFont:alias A small version of the default font. This style is used for text which is slightly smaller than the default, such as tr:breadCrumbs links.
.AFMediumFont:alias A version of the default font which is slightly larger than the default size. This is used for medium sized text, such as level 2 headers.
.AFLargeFont:alias A large version of the default font. This is used for large text, such as level 1 headers.
.AFVeryLargeFont:alias A very large version of the default font.
.AFDarkBackground:alias The primary background color in the core color ramp.
.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 ramp. 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 accent background colors are computed relative to this one. So changing this style properties will affect those styles.
.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.
.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.
.AFTextBackground:alias The default text background color (white).
.AFDarkForeground:alias The primary foreground color in the core color ramp.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.AFTextForeground:alias The default text foreground color (black).
.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.
.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.
.AFStartTextAlign:alias Sets the text-align property to "left" for left-to-right reading direction and "right" for right-to-left reading direction.
.AFEndTextAlign:alias Sets the text-align property to "right" for left-to-right reading direction and "left" for right-to-left reading direction.
.AFEndPadding:alias Sets the padding property to pad on the "right" for the left-to-right reading direction and "left" for right-to-left reading direction. e.g,: padding: 0px 8px 0px 0px; (for 'right' padding).
.AFStartPadding:alias Sets the padding property to pad on the "left" left-to-right reading direction and "right" for right-to-left reading direction. e.g,: padding: 0px 0px 0px 8px; (for 'left' 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.
.AFFieldText Style class for text displayed in tr:select* components and in inputText. Also can be used as a value for the styleClass attribute in outputFormatted and outputText.
.AFFieldTextDisabled Style class for text displayed in disabled tr:select* components and in inputText. Also can be used as a value for the styleClass attribute in outputFormatted and outputText.
.AFLabelText Style class for text displayed in label.This is used in select* components and panelLabelAndMessage. Also can be used as a value for the styleClass attribute in outputFormatted and outputText.
.AFLabelCell Style class for cell in which the label 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.
.AFLabelTextForeground:alias Use the property 'color' to style the color of the label. By default, this includes the AFTextForeground:alias style. This is used in the .AFLabel:alias style which styles the label for all form components, like tr:inputText and tr:selectOne/selectMany components.
.AFLabelTextForegroundDisabled:alias Use the property 'color' to style the color of the label when it is disabled. By default, this includes the AFTextForeground:alias style. This is used in the .AFLabelDisabled:alias style which styles the label for all form components (like tr:inputText and tr:selectOne/selectMany) when they are disabled.
.AFLabel:alias Aliased style class that is included in the label selector for all the form components. e.g., "af|inputText::label".
.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".
.AFErrorIconStyle Style class that styles the .AFErrorIcon:alias icons.
.AFWarningIconStyle Style class that styles the .AFWarningIcon:alias icons.
.AFInfoIconStyle Style class that styles the .AFInfoIcon:alias icons.
.AFRequiredIconStyle Style class that styles the .AFRequiredIcon icon.
.AFRequiredIconStyle:alias Alias style class that styles the required icon for form components. It is included in the ::required-icon-style pseudo-element for the form components (e.g. af|inputText::required-icon-style)
.AFLinkForeground:alias The default foreground color for inactive, unvisited 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.
.AFDisabledLinkForeground:alias The default foreground color for disabled links. By default, this value is computed relative to the .AFLinkForeground:alias color.
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 tr:inputText components, you should use the styleClasses that end in 'Marker' instead. The style classes listed here will affect the entire tr: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.

Global Icon Selectors

Name Description
.AFErrorIcon:alias This icon is used by the form components (eg. inputText, 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. inputText, 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. inputText, selectBooleanCheckbox, outputLabel, etc...) to indicate that a value is required.
.AFWarningIcon:alias This icon is used by the form components (eg. inputText, 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.

Component-level Selectors

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

You may see selector names that end in :alias in the component-level section. These are meant to provide short-cuts to skin more than 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 tr: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.

trh:body Component

Style Selectors
Name Description
af|body Styles the trh:body content.

tr:breadCrumbs Component

Style Selectors
Name Description
af|breadCrumbs Styles the tr:breadCrumbs content.
af|breadCrumbs::disabled-step Styles the disabled step of tr:breadCrumbs.
af|breadCrumbs::separator Styles the tr:breadCrumbs steps.
af|breadCrumbs::selected-step Styles the selected step of tr:breadCrumbs. This step may be hidden if the -tr-show-last-item property is set to false.
af|breadCrumbs::step Styles the tr:breadCrumbs steps.
.AFPath:alias The .AFPath:alias style defines style properties that are shared by both af|breadCrumbs and af|treeTable::path.
.AFPathSeparator:alias The .AFPathSeparator:alias style defines style properties that used by both af|breadCrumbs::separator.
.AFPathStep:alias The .AFPathStep:alias style defines style properties that are shared by both af|breadCrumbs::step and af|treeTable::path-step
.AFPathSelectedStep:alias The .AFPathSelectedStep:alias style defines style properties that are shared by both af|breadCrumbs::selected-step and af|treeTable::path-selected-step
Icon Selectors
Name Description
af|breadCrumbs::separator-icon The separator icon that is rendered between tr:breadCrumbs links. This is typically a text icon, like '>'.
.AFPathSeparatorIcon:alias Changing this icon changes both af|breadCrumbs::separator-icon and af|treeTable::separator-icon. This makes it easier to keep the icons between the two consistent.
Trinidad 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.
-tr-separator-on-new-line Valid values are true or false. In the case the orientation is vertical, it determines whether the separator will be shown on the new line (in front of the next path element)
-tr-indent-spaces Valid values are positive integers. In the case the orientation is vertical, it determines whether the number of nbsp's rendered as an indent

tr:chooseDate Component

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.
Icon Selectors
Name Description
af|chooseDate::prev-icon The previous icon which is used to go back to previous month.
af|chooseDate::next-icon The next icon which is used to go back to next month.
af|chooseDate::prev-disabled-icon The previous icon disabled.
af|chooseDate::next-disabled-icon The next icon disabled.

tr:column Component

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. You can style the borders with this selector as well.
af|column::sortable-header-number Styles the numeric sortable column headers. This includes the af|column::sortable-header-text selector.
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 indicate 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.

tr:commandButton Component

Style Selectors
Name Description
af|commandButton Styles the commandButton.
af|commandButton:disabled Styles the commandButton when disabled.

tr:goButton Component

Style Selectors
Name Description
af|goButton Styles the goButton.
af|goButton:disabled Styles the goButton when disabled.

tr:inputColor Component

Style Selectors
Name Description
af|inputColor Style on the root element of the tr:inputColor component.
af|inputColor:disabled Style on the root element of the tr:inputColor 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|inputColor:disabled::label"
af|inputColor:read-only Style on the root element of the tr:inputColor 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|inputColor:read-only::label"
af|inputColor::content Styles the inputColor content.
af|inputColor::label Styles the inputColor label.
Icon Selectors
Name Description
af|inputColor::launch-icon The button icon which is used to launch the secondary color picker dialog. Note: This af|inputColor's color swatch is now used to launch the secondary dialog on most browsers. The af|inputColor::launch-icon icon is only displayed on browsers which do not display the color swatch, such as Netscape 4.x.
af|inputColor::swatch-overlay-icon The icon that is overlayed on top of the inputColor's color swatch to indicate that the color swatch is clickable.

tr:inputDate Component

Style Selectors
Name Description
af|inputDate Style on the root element of the tr:inputDate component.
af|inputDate:disabled Style on the root element of the tr:inputDate 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|inputDate:disabled::label"
af|inputDate:read-only Style on the root element of the tr:inputDate 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|inputDate:read-only::label"
af|inputDate::content Styles the inputDate content.
af|inputDate::label Styles the inputDate label.
af|inputDate::nav-link Styles the inputDate's navigation Previous Month and Next Month links.
af|inputDate::title Styles the inputDate title which is month/year choice lists..
af|inputDate::header Styles the inputDate header which is the days of week row.
af|inputDate::selected Styles the selected date.
Icon Selectors
Name Description
af|inputDate::launch-icon The button icon which is used to launch the secondary date picker dialog.

tr:inputListOfValues Component

Style Selectors
Name Description
af|inputListOfValues Style on the root element of the tr:inputListOfValues component.
af|inputListOfValues:disabled Style on the root element of the tr:inputListOfValues 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|inputListOfValues:disabled::label"
af|inputListOfValues:read-only Style on the root element of the tr:inputListOfValues 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|inputListOfValues:read-only::label"
af|inputListOfValues::content Styles the inputListOfValues content.
af|inputListOfValues::label Styles the inputListOfValues label.
Icon Selectors
Name Description
af|inputListOfValues::button-icon The icon which is used to launch the secondary list of values dialog.

tr:inputNumberSpinbox Component

Style Selectors
Name Description
af|inputNumberSpinbox Style on the root element of the tr:inputNumberSpinbox component.
af|inputNumberSpinbox:disabled Style on the root element of the tr:inputNumberSpinbox 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|inputNumberSpinbox:disabled::label"
af|inputNumberSpinbox:read-only Style on the root element of the tr:inputNumberSpinbox 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|inputNumberSpinbox:read-only::label"
af|inputNumberSpinbox::content Style on the content of the tr:inputNumberSpinbox component. You can set the width of the content piece that will be used when the columns attribute on tr:inputNumberSpinbox is not set.
af|inputNumberSpinbox::label Style on the label of the tr:inputNumberSpinbox component. This includes .AFLabel:alias style selector.
To style the input piece of inputNumberSpinbox 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 AFFieldNumberMarker to AFFieldNumber by defining this skin definition for you in our base skin: af|inputNumberSpinbox.AFFieldNumberMarker af|inputNumberSpinbox::content {-tr-rule-ref: selector(".AFFieldNumber")}. If you set styleClass="AFFieldNumber", 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, AFFieldNumberMarker

tr:inputText Component

Style Selectors
Name Description
af|inputText Style on the root element of the tr:inputText component.
af|inputText:disabled Style on the root element of the tr:inputText 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|inputText:disabled::label"
af|inputText:read-only Style on the root element of the tr:inputText 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|inputText:read-only::label"
af|inputText::content Style on the content of the tr:inputText component. You can set the width of the content piece that will be used when the columns attribute on tr:inputText is not set.
af|inputText::label Style on the label of the tr: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

tr:messages Component

This tr:messages component is implemented using an inner div 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. The overall width of the outer table is also configured through this selector. Since the messages's icons are rendered within the outer table, the af|messages::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.
af|messages::message-text Styles the 'text' attribute of tr:messages if present.
af|messages::list Styles the list of messages inside of af|messages::body
af|messages::list-single This selector is used in addition to af|messages::list when there is only a single message displayed. It can be used to remove the numbering from the list.
Icon Selectors
Name Description
af|messages::top-start 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 This icon is rendered in the background in between the af|messages::top-start-icon and af|messages::top-end-icon icons.
af|messages::top-end 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::start This icon is rendered in the background at the start of the messages.
af|messages::end This icon is rendered in the background at the end of the messages.
af|messages::bottom-start 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 This icon is rendered in the background in between the af|messages::bottom-start-icon and af|messages::bottom-end-icon icons.
af|messages::bottom-end 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::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 tr:messages and tr: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 tr:messages and tr: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 tr:messages and tr: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 tr:messages and tr:panelHeader. Changing this icon changes both af|panelHeader::confirmation-icon and af|messages::confirmation-icon

tr:navigationPane hint='bar'

Style Selectors
Name Description
af|navigationPane::bar The style on the root dom element of the navigationPane hint="bar".
af|navigationPane::bar-active-disabled The style on a table around the item when the item is active and disabled.
af|navigationPane::bar-active-enabled The style on a table around the item when the item is active and enabled.
af|navigationPane::bar-inactive-disabled The style on a table around the item when the item is inactive and disabled.
af|navigationPane::bar-inactive-enabled The style on a table around the item when the item is inactive and enabled.
af|navigationPane::bar-content Styles the cell of the bar content. To change the style (like font-style) of the active disabled item, you can use descendent selector like af|navigationPane::bar-active-enabled af|navigationPane::bar-content. To affect the link itself, like you need to do if you change the color, you can use af|navigationPane::bar-active-enabled af|navigationPane::bar-content A
af|navigationPane::bar-separator Styles the separator between items in the navigationPane bar.

tr:navigationPane hint='buttons'

Style Selectors
Name Description
af|navigationPane::buttons The style on the root dom element of the navigationPane hint="buttons"
af|navigationPane::buttons-active-disabled The style on a table around the item when the item is active and disabled.
af|navigationPane::buttons-active-enabled The style on a table around the item when the item is active and enabled.
af|navigationPane::buttons-inactive-disabled The style on a table around the item when the item is inactive and disabled.
af|navigationPane::buttons-inactive-enabled The style on a table around the item when the item is inactive and enabled.
af|navigationPane::buttons-content Styles the cell of the buttons content. To change the style of an individual item eg. an active and disabled item, you can use descendent selectors such as "af|navigationPane::buttons-active-disabled af|navigationPane::buttons-content".
af|navigationPane::buttons-separator Styles the separator bar between the items in the navigationPane buttons.

tr:navigationPane hint='choice'

Style Selectors
Name Description
af|navigationPane::choice-label The style on the label of navigationPane hint="choice".
af|navigationPane::choice-options The style on the option items of navigationPane hint="choice".
af|navigationPane::choice-button The style on the button item of navigationPane hint="choice".

tr:navigationPane hint='list'

Style Selectors
Name Description
af|navigationPane::list The style on the root dom element of the navigationPane hint="list".
af|navigationPane::list-active-disabled The style on a table around the item when the item is active and disabled.
af|navigationPane::list-active-enabled The style on a table around the item when the item is active and enabled.
af|navigationPane::list-inactive-disabled The style on a table around the item when the item is inactive and disabled.
af|navigationPane::list-inactive-enabled The style on a table around the item when the item is inactive and enabled.
af|navigationPane::list-content Styles the cell of the list content. To change the style of an individual item eg. an active and disabled item, you can use descendent selectors such as "af|navigationPane::list-active-disabled af|navigationPane::list-content".
af|navigationPane::list-bullet The style on the cell which contains the bullet for list of the component with hint "list".

tr:navigationPane hint='tabs'

The navigationPane hint="tabs" renders nested tables. The af|navigationPane::tabs is the root dom element style selector. Within the root dom element are tables denoting af|navigationPane::tabs-active and af|navigationPane::tabs-inactive. Within each of these tables are more tables that break the active or inactive tab into skinnable pieces, so you can skin the start 1/3, the middle, or the end 1/3 of the tab, and each of these pieces have a top and a bottom row.. There are also hooks for joining an active tab to an inactive tab or an inactive tab to another inactive tab, hooks for the very first tab shown and hooks for the very last tab shown.

By default, the tabs use background image. If you need to use background-color instead, use -tr-inhibit: background-image or background-image: none. Remember CSS specificity rules if you find these don't work. If you want to use background-images to get a rounded look, it is easiest to start with the images that are used by default or in the beach skin.

For help in skinning the tabs, look at one of the demos: purple skin or beach skin. Also, it will help to view the html and selectors that are rendered when the active tab is the first tab, a middle tab, or an end tab, because the selectors change slightly. Make sure the styleclass compression that is on by default is turned off as this will help your debugging. This is one of the most complicated components to skin. Looking at the examples or at the base skin's css (see generated css file or base-desktop.xss) will help. Also, hopefully this documentation will help.

Style Selectors
Name Description
af|navigationPane::tabs The style root dom element of the tabs. It is unlikely you'll need to use this selector to skin the tabs, unless you want to skin an instance of a tab component using composite selectors, like af|navigationPane::tabs.MyStyleClass
af|navigationPane::tabs-active The style on the root of the active tab. Available pseudo-class is :disabled. For example, to change the color of all disabled tabs, you can do this: af|navigationPane::tabs-active:disabled af|navigationPane::tabs-mid, af|navigationPane::tabs-inactive:disabled af|navigationPane::tabs-mid {color: pink}
af|navigationPane::tabs-inactive This is the style that is on the root of each inactive tab. Available pseudo-class is :disabled. For example, to change the color of all disabled tabs, you can do this: af|navigationPane::tabs-active:disabled af|navigationPane::tabs-mid, af|navigationPane::tabs-inactive:disabled af|navigationPane::tabs-mid {color: pink}. To color a non-disabled tab's text, you need to do this: af|navigationPane::tabs-active af|navigationPane::tabs-mid A {color: white;} Note the A. The reason is a disabled tab does not render an A element.
af|navigationPane::tabs-start This styles the FIRST tab only, not the middle tabs, and not the last tab. This styles the start 1/3 of an active tab that is the FIRST tab. This is typically the part that styles the background-image that shows the start of the tab. For example, if using images, it's the ramp-up image. There is a different selector for hte 'start' piece that isn't the first tab. See ::tabs-start-join-from-inactive and ::tabs-start-join-from-active Examples: af|navigationPane::tabs-active af|navigationPane::tabs-start {background-image: url('darkrampup.gif');} af|navigationPane::tabs-inactive af|navigationPane::tabs-start {background-image: url('lightrampup.gif');}
af|navigationPane::tabs-mid This styles the middle/top portion of all tabs. This is typically the part that holds the text of the tab and it usually has a background-image or background-color.
af|navigationPane::tabs-end This selector is for the LAST tab in all the tabs and it is the end 1/3 of that last tab. There is a different selector for the 'end' piece of tabs that are not the last tab. The end piece of the tab that comes before an inactive tab has pseudo-element ::tabs-end-join-to-inactive. There is no 'end' piece for an inactive tab that comes before an active tab.
af|navigationPane::tabs-start-join This styles a tab when it isn't the first tab and it isn't the last tab. Use like this: af|navigationPane::tabs-active af|navigationPane::tabs-start-join{} to style the start of a selected tab when the previous tab is unselected. By default it contain an image that depicts the end of the unselected tab image (light accent color) and the start of a selected tab (dark color) where the start of the selected tab overlaps in front of the end of the unselected tab.
af|navigationPane::tabs-start-join-from-active This styles an inactive tab when it follows an active tab. This is the start 1/3 of a tab that is inactive and follows an active tab. By default, this image is only 14 pixels wide. It's similar to ::tabs-start, but that is for the FIRST tab, and thus that image is probably wider.
af|navigationPane::tabs-start-join-from-inactive This styles an inactive tab when it follows an inactive tab. This is the start 1/3 of a tab that is inactive and follows an inactive tab. You can use the same image as what you defined in ::tabs-start-join-from-active
af|navigationPane::tabs-end-join-to-inactive This styles last 1/3 of a tab that isn't the LAST tab. By default, this is the end background-image of a tab. Note: there is no ::end-join-to-active selector because an inactive tab that precedes an active tab only has 2 pieces (start and mid). Instead you'd use ::tabs-start-join
af|navigationPane::tabs-bottom-start This selector styles the bottom bit of the first 1/3 of a tab that is either the active tab or if it in an inactive tab, it has to be be the first tab. For example, af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-start {} will skin the bottom bit of the first tab if it is inactive. Otherwise, you will see no effect. af|navigationPane::tabs-active af|navigationPane::tabs-bottom-start {} will skin the bottom bit of the first 1/3 of the active tab, regardless of which tab it is.
af|navigationPane::tabs-bottom-start-content This selector is the empty div inside of tabs-bottom-start. The best thing to do is set background-image to none and let the container style take over.
af|navigationPane::tabs-bottom-end The bottom portion, start 1/3 a tab as long as it isn't the FIRST tab. If the last tab is inactive, then this key is on BOTH the start 1/3 and the end 1/3. This key name and its usage needs to be cleaned up, since it is obviously confusing. (The start 1/3 of the FIRST tab is af|navigatonPane::tabs-inactive af|navigationPane::tabs-bottom-start.) In the active tab, this is only the last 1/3 on the LAST tab. Otherwise it is nothing. (see ::tabs-bottom-end-join)
af|navigationPane::tabs-bottom-end-content This selector is the empty div inside of tabs-bottom-end. The best thing to do is set background-image to none and let the container style take over.
af|navigationPane::tabs-bottom-end-join This is the last 1/3 of a tab, the bottom portion, when it is joining another tab. In the active tab, this is the bottom portion, the last 1/3 that isn't the LAST tab. In the inactive tab, this is the bottom portion, the last 1/3 when joining to another inactive tab (therefore it can't be the LAST tab). For an inactive tab that is joining an active tab, the active tab's bottom start overlaps, so there is no ::tabs-bottom-end-join selector.
af|navigationPane::tabs-bottom-mid This is the middle 1/3 of a tab, the bottom bit. If you want to style an inactive tab's middle portion differently than an active tab, then you set af|navigatonPane::tabs-inactive before it.

tr:navigationTree

Icon Selectors
Name Description
af|navigationTree::disclosed-icon This icon is displayed when the tr:navigationTree component is rendered in its disclosed state.
af|navigationTree::undisclosed-icon This icon is displayed when the tr:navigationTree 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|navigationTree::disclosed-icon
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|navigationTree::undisclosed-icon

tr:outputDocument Component

Style Selectors
Name Description
af|outputDocument Styles the tr:outputDocument component's container element.
af|outputDocument::title Styles the tr:outputDocument component's title element.
af|outputDocument::paragraph Styles the tr:outputDocument component's paragraphs.
af|outputDocument::separator Styles the tr:outputDocument component's separator placed between paragraphes.

tr:panelAccordion Component

Style Selectors
Name Description
af|panelAccordion This can be used to style the root element of a panelAccordion.
af|panelAccordion::content This can be used to style the parent element of each showDetailItem in a panelAccordion.
af|panelAccordion::header-collapsed This can be used to style the header region of each collapsed showDetailItem in a panelAccordion.
af|panelAccordion::header-disabled This can be used to style the header region of each disabled showDetailItem in a panelAccordion.
af|panelAccordion::header-expanded This can be used to style the header region of each expanded showDetailItem in a panelAccordion.
af|panelAccordion::title-link This can be used to style the link element for the title of each enabled showDetailItem in a panelAccordion.
af|panelAccordion::title-disabled-link This can be used to style the link element for the title of each disabled showDetailItem in a panelAccordion.
af|panelAccordion::toolbar This can be used to style the toolbar facet of a showDetailItem in a panelAccordion.

tr:panelBorderLayout

The panel border layout currently only has skin selectors for the positioned layout.

Style Selectors
Name Description
af|panelBorderLayout-positioned The default style class for the root element
af|panelBorderLayout-positioned::top The style class for the top facet element
af|panelBorderLayout-positioned::inner-top The style class for the inner top facet element
af|panelBorderLayout-positioned::bottom The style class for the bottom facet element
af|panelBorderLayout-positioned::inner-bottom The style class for the bottom facet element
af|panelBorderLayout-positioned::start The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::inner-start The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::end The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::inner-end The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::center The style class for the center element that contains the inner facets and content
af|panelBorderLayout-positioned::inner-center The style class for the element that holds the component children

tr:panelBox

The panelBox contains the body region, which contains the panelBox header which contains the panelBox header text (set by the text attribute on tr:panelBox) and the panelBox contents. Styles can be applied to the body region via the af|panelBox::content selector. Similarly, styles for the header region are specified via the af|panelBox::header selector. Both section can be skinned with the af|panelBox::body selector

The content is rendered within a layout container that allow round edges and such. You can access this container using af|panelBox::top, af|panelBox::bottom, af|panelBox::start, af|panelBox::end, af|panelBox::top-start, af|panelBox::top-end, af|panelBox::bottom-start and af|panelBox::bottom-end. To use round edges, set a background image on each of the corners and set the width and height of those corners to the used image's size. Here're some conditions for it to work properly:

  • The top edge background image should have the same height as both top corner images.
  • The bottom edge background image should have the same height as both bottom corner images.
  • The start edge background image should have the same width as the top start corner image and the bottom start corner widths.
  • The end edge background image should have the same width as the top end corner image and the bottom end corner widths.

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 {...}
Style Selectors
Name Description
af|panelBox::transparent Styles the container of transparent panelBox. This is on the root dom element. It includes .AFPanelBox:alias
af|panelBox::light Styles the container of light panelBox. This is on the root dom element. It includes .AFPanelBox:alias
af|panelBox::medium Styles the container of the medium panelBox. This is on the root dom element. It includes .AFPanelBox:alias
af|panelBox::dark Styles the container of the dark panelBox. This is on the root dom element. It includes .AFPanelBox:alias
af|panelBox::body Styles the body region, that is the central frame of the box, including both the header and the content. To skin the body of a particular background panelBox, you can do use descendent selectors like: af|panelBox::light af|panelBox::body.
af|panelBox::header Styles the header region within the body when there is a header.
af|panelBox::content Styles the content region within the body.
af|panelBox::top-start Styles the top start corner of the box's container. In LTR this is the upper left corner. For rounded-corners you can set background-image and width and height css properties.
af|panelBox::top Styles the top edge of the box's container.
af|panelBox::top-end Styles the top end corner of the box's container. In LTR this is the upper right corner. . For rounded-corners you can set background-image and width and height css properties.
af|panelBox::start Styles the start edge of the box's container. In LTR this is the left side of the box.
af|panelBox::end Styles the end edge of the box's container. In LTR this is the right side of the box.
af|panelBox::bottom-start Styles the bottom start corner of the box's container. In LTR this is the lower left corner. . For rounded-corners you can set background-image and width and height css properties.
af|panelBox::bottom Styles the bottom edge of the box's container.
af|panelBox::bottom-end Styles the bottom end corner of the box's container. In LTR this is the lower right corner. . For rounded-corners you can set background-image and width and height css properties.
.AFPanelBox:alias Alias style that styles the root dom element of the panelBox for all values of the background attribute. It is included in af|panelBox::transparent, af|panelBox::light, af|panelBox::medium, and af|panelBox::dark. Use this to add styles common to all panelBoxes.
.AFPanelBoxBody:alias Alias style that styles the af|panelBox::body dom element for all values of the background attribute. It is included in af|panelBox::body, af|panelBox::transparent af|panelBox::body, af|panelBox::light af|panelBox::body, af|panelBox::medium af|panelBox::body, and af|panelBox::dark af|panelBox::body. Use this to add styles common to all 'af|panelBox::body' regardless of the panelBox background attribute.

tr:panelCaptionGroup Component

Style Selectors
Name Description
af|panelCaptionGroup Specifies the style information for caption group. Use this to style the border and padding for the group.
af|panelCaptionGroup::caption Specifies the style information for caption text.

tr:panelFormLayout Component

Style Selectors
Name Description
af|panelFormLayout This can be used to set common properties that are shared across all panel form layouts.
af|panelFormLayout::column Specifies the style information for columns of the panelForm.
af|panelFormLayout::separator Specifies the style information for separators between groups in the panelForm.
af|panelFormLayout::cell Specifies the style information for each cell of the panelForm.
af|panelFormLayout::label-cell Specifies the style information for the label cell of the panelForm when side-by-side with content. This includes .AFEndTextAlign:alias.
af|panelFormLayout::content-cell Specifies the style information for the input cell of the panelForm when side-by-side with content. Use this in combination with af|panelFormLayout::label-cell to space out the inputs horizontally. This includes .AFEndTextAlign:alias.
af|panelFormLayout::label-stacked-cell Specifies the style information for the label cell of the panelForm when stacked above content.

tr:panelGroupLayout Component

Style Selectors
Name Description
af|panelGroupLayout This can be used to set common properties that are shared across all panel group layouts.

tr:panelHeader Component

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 tr:messages and tr: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 tr:messages and tr: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 tr:messages and tr: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 tr:messages and tr:panelHeader. Changing this icon changes both af|panelHeader::confirmation-icon and af|messages::confirmation-icon

tr:panelLabelAndMessage Component

Style Selectors
Name Description
af|panelLabelAndMessage::help-facet Specifies the style information for the help-facet text of a panelLabelAndMessage.

tr: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.

tr:panelPage Component

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::branding Styles the "branding" 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.

tr:panelPopup Component

Style Selectors
Name Description
af|panelPopup::trigger Styles the trigger facet of the panelPopup. Use this selector to control border and margin/padding around the trigger.
af|panelPopup::link Styles the link element of the trigger. Use this selector to control border, color and background around the trigger-link.
af|panelPopup::container Styles the outer element of the popup. Use this selector to control border and margin/padding around the entire popup.
af|panelPopup::content Styles the content area of the popup, meaning the area beneath the title-bar.
af|panelPopup::title-bar Styles the title-bar of the popup. Use this selectors to control the size the baackground color of the title-bar.
af|panelPopup::title-text Styles the text within the title-bar.
af|panelPopup::icon-style Styles the trigger icon that is rendered alongwith trigger-text.
af|panelPopup::close-icon Styles the clickable icon that closes the popup.

tr:panelSideBar Component

This tr: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 languages.)
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.

tr:panelTabbed Component

Style Selectors
Name Description
.AFShowOneTab:alias This style is included in both af|panelTabbed::orientation-top and af|panelTabbed::orientation-bottom.
af|panelTabbed::orientation-top This styles the top panelTabbed. You can use this to add padding and margins and borders, for example.
af|panelTabbed::orientation-bottom This styles the bottom panelTabbed. You can use this to add padding and margins and borders, for example.
af|panelTabbed::tab This styles each unselected tab.
af|panelTabbed::tab-link This styles each unselected tab link.
af|panelTabbed::tab-selected This styles each selected tab.
af|panelTabbed::tab-selected-link This styles each selected tab link.
af|panelTabbed::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|panelTabbed::separator-after-selected This is a cell with no content that renders after the selected cell. You can style this cell to highlight the selected cell, if desired.
af|panelTabbed::separator This style is on the cells between each unselected step.
af|panelTabbed::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|panelTabbed::cell-end The style on the last cell.
af|panelTabbed::body The style on the body of the panelTabbed; ie., the contents.

tr:panelTip Component

The tr:panelTip has two regions - a label and the main content.

Style Selectors
Name Description
af|panelTip This style class is rendered on the outer content of the panelTip.
af|panelTip::label This style class is rendered on the label of the panelTip.
af|panelTip::content This style class is rendered on the content of the panelTip.

tr:progressIndicator Component

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|progressIndicator::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.

tr:selectBooleanCheckbox Component

Style Selectors
Name Description
af|selectBooleanCheckbox Style on the root element of the tr:selectBooleanCheckbox component.
af|selectBooleanCheckbox:disabled Style on the root element of the tr:selectBooleanCheckbox 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|selectBooleanCheckbox:disabled af|selectBooleanCheckbox::label"
af|selectBooleanCheckbox:read-only Style on the root element of the tr:selectBooleanCheckbox 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|selectBooleanCheckbox:read-only af|selectBooleanCheckbox::label"
af|selectBooleanCheckbox::content Style on the content of the tr:selectBooleanCheckbox component.
af|selectBooleanCheckbox::label Style on the label of the tr:selectBooleanCheckbox component. This includes .AFLabel:alias style selector.
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.

tr:selectBooleanRadio Component

Style Selectors
Name Description
af|selectBooleanRadio Style on the root element of the tr:selectBooleanRadio component.
af|selectBooleanRadio:disabled Style on the root element of the tr:selectBooleanRadio 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|selectBooleanRadio:disabled af|selectBooleanRadio::label"
af|selectBooleanRadio:read-only Style on the root element of the tr:selectBooleanRadio 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|selectBooleanRadio:read-only af|selectBooleanRadio::label"
af|selectBooleanRadio::content Style on the content of the tr:selectBooleanRadio component.
af|selectBooleanRadio::label Style on the label of the tr:selectBooleanRadio component. This includes .AFLabel:alias style selector.
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.

tr:selectManyCheckbox Component

Style Selectors
Name Description
af|selectManyCheckbox Style on the root element of the tr:selectManyCheckbox component.
af|selectManyCheckbox:disabled Style on the root element of the tr: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:disabled af|selectManyCheckbox::label"
af|selectManyCheckbox:read-only Style on the root element of the tr: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 af|selectManyCheckbox::label"
af|selectManyCheckbox::content Style on the content of the tr:selectManyCheckbox component.
af|selectManyCheckbox::label Style on the label of the tr:selectManyCheckbox component. This includes .AFLabel:alias style selector.

tr:selectManyListbox Component

Style Selectors
Name Description
af|selectManyListbox Style on the root element of the tr:selectManyListbox component.
af|selectManyListbox:disabled Style on the root element of the tr: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 af|selectManyListbox::label"
af|selectManyListbox:read-only Style on the root element of the tr: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 af|selectManyListbox::label"
af|selectManyListbox::content Style on the content of the tr:selectManyListbox component.
af|selectManyListbox::label Style on the label of the tr:selectManyListbox component. This includes .AFLabel:alias style selector.

tr:selectManyShuttle Component

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:

  • af|selectManyShuttle::box-content af|selectManyShuttle::box-body
  • af|selectOrderShuttle::box-content af|selectOrderShuttle::box-body
.AFShuttleBoxBackground:alias

Styles the background color for shuttle's box. It is included by the following selectors:

  • af|selectManyShuttle::box-content af|selectManyShuttle::box-body
  • af|selectOrderShuttle::box-content af|selectOrderShuttle::panel-box-body
.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:

  • af|panelBox::light af|panelBox::body
  • af|panelBox::content-light af|panelBox::body
  • .AFShuttleBoxLightBackground:alias
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 tr:selectManyShuttle's "Move" action.
af|selectManyShuttle::move-all-icon The icon for the tr:selectManyShuttle's "Move All" action.
af|selectManyShuttle::remove-icon The icon for the tr:selectManyShuttle's "Remove" action.
af|selectManyShuttle::remove-all-icon The icon for the tr: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 bottom 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.

tr:selectOneChoice Component

Style Selectors
Name Description
af|selectOneChoice Style on the root element of the tr:selectOneChoice component.
af|selectOneChoice:disabled Style on the root element of the tr: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 af|selectOneChoice::label"
af|selectOneChoice:read-only Style on the root element of the tr: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 af|selectOneChoice::label"
af|selectOneChoice::content Style on the content of the tr:selectOneChoice component.
af|selectOneChoice::label Style on the label of the tr:selectOneChoice component. This includes .AFLabel:alias style selector.

tr:selectOneListbox Component

Style Selectors
Name Description
af|selectOneListbox Style on the root element of the tr:selectOneListbox component.
af|selectOneListbox:disabled Style on the root element of the tr: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 af|selectOneListbox::label"
af|selectOneListbox:read-only Style on the root element of the tr: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 af|selectOneListbox::label"
af|selectOneListbox::content Style on the content of the tr:selectOneListbox component.
af|selectOneListbox::label Style on the label of the tr:selectOneListbox component. This includes .AFLabel:alias style selector.

tr:selectOneRadio Component

Style Selectors
Name Description
af|selectOneRadio Style on the root element of the tr:selectOneRadio component.
af|selectOneRadio:disabled Style on the root element of the tr: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 af|selectOneRadio::label"
af|selectOneRadio:read-only Style on the root element of the tr: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 af|selectOneRadio::label"
af|selectOneRadio::content Style on the content of the tr:selectOneListbox component.
af|selectOneRadio::label Style on the label of the tr:selectOneListbox component. This includes .AFLabel:alias style selector.

tr:selectOrderShuttle Component

Style Selectors
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:

  • af|selectManyShuttle::box-content af|selectManyShuttle::box-body
  • af|selectOrderShuttle::box-content af|selectOrderShuttle::box-body
.AFShuttleBoxBackground:alias

This style is used to set the background color for shuttle's box. It is included by the following selectors:

  • af|selectManyShuttle::box-content af|selectManyShuttle::box-body
  • af|selectOrderShuttle::box-content af|selectOrderShuttle::box-body
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|selectOrderShuttle::move-icon The icon for the tr:selectOrderShuttle's "Move" action.
af|selectOrderShuttle::move-all-icon The icon for the tr:selectOrderShuttle's "Move All" action.
af|selectOrderShuttle::remove-icon The icon for the tr:selectOrderShuttle's "Remove" action.
af|selectOrderShuttle::remove-all-icon The icon for the tr: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.

tr:selectRangeChoiceBar Component

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.

tr:separator Component

Style Selectors
Name Description
af|separator Styles the tr:separator component.

tr:showDetail Component

Style Selectors
Name Description
af|showDetail::prompt-disclosed Styles the prompt when the component is rendered in its disclosed state.
af|showDetail::prompt-undisclosed Styles the prompt when the component is rendered in its undisclosed state.
af|showDetail::prompt-link Styles the prompt-link.
af|showDetail::disclosure-icon-link Styles the disclosure-icon-link.
Icon Selectors
Name Description
af|showDetail::disclosed-icon The af|showDetail::disclosed-icon icon is displayed when the tr:showDetail component is rendered in its disclosed state.
af|showDetail::undisclosed-icon The af|showDetail::disclosed-icon icon is displayed when the tr: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|navigationTree::disclosed-icon
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|navigationTree::undisclosed-icon

tr: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 tr:showDetailHeader component is rendered in its disclosed state.
af|showDetailHeader::undisclosed-icon The icon is displayed when the tr: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|navigationTree::disclosed-icon
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|navigationTree::undisclosed-icon

tr:statusIndicator Component

Style Selectors
Name Description
af|statusIndicator Styles the status indicator as a whole.
af|statusIndicator::busy Styles the status indicator's busy facet
af|statusIndicator::ready Styles the status indicator's ready facet
Icon Selectors
Name Description
af|statusIndicator::busy-icon The icon that is displayed when the page is busy. The icon will only be rendered if no facet was specified. Simple skin references the ".AFBusyIcon:alias" icon.
af|statusIndicator::ready-icon The icon that is displayed when the page is not busy. The icon will only be rendered if no facet was specified. Simple skin references the ".AFReadyIcon:alias" icon.
.AFBusyIcon:alias A named icon that's used by af|statusIndicator::busy-icon and is also usable in with <tr:icon>. That ability is important to include the icon even when a facet is specified on the statusIndicator.
.AFReadyIcon:alias A named icon that's used by af|statusIndicator::ready-icon and is also usable in with <tr:icon>. That ability is important to include the icon even when a facet is specified on the statusIndicator.

tr:table Component

Properties
Name Description
-tr-repeat-control-bar Boolean value that specifies whether the the table navigation bar appears on both the bottom and top of the table.
Style Selectors
Name Description
af|table Style on the root element of the tr:table component.
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 tr:table's showDetail is rendered in its disclosed state.
af|table::undisclosed-icon The af|table::undisclosed-icon icon is displayed when the tr: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|navigationTree::disclosed-icon
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon, af|navigationTree::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.
af|table::select-all-icon The select-all link icon.
af|table::select-none-icon The select-none link icon.

tr:train Component

Properties
Name Description
-tr-render-parent-train Boolean value that specifies if parent train icons should be rendered if this train is a sub-train. A sub-train is a process not located at the root of its TreeModel.
-tr-visible-stop-count Strictly positive integer value specifying the maximum amount of stops visible at a time.
Aliases
Name Description
.AFTrainContent:alias Styles all train station content.
.AFTrainIconCell:alias Styles all train station icons.
.AFTrainJoin:alias Styles all train station joins.
Style Selectors
Name Description
af|train Styles the whole train.
af|train::stop Styles a train stop. A stop include both the icon and its content. This selector is often combined with one or more station pseudo-classes like :selected, :unvisited, :disabled, :read-only and .p_AFVisited and used in descendant selector, e.g. "af|train::stop:unvisited af|train::link" would style the link generated for an unvisited stop.
af|train::stop-icon-cell Styles the icon section of the stop. This selector is combinable with state pseudo-classes. This selector includes .AFTrainIconCell:alias.
af|train::stop-content Styles the content section of the stop. This selector is combinable with state pseudo-classes. This selector includes .AFTrainContent:alias.
af|train::join Styles the join between stop icons. This selector is combinable with state pseudo-classes, except :selected. This selector includes .AFTrainJoin:alias.
af|train::overflow-start Styles a train start overflow. A start overflow is generated when the amount of steps in the process is higher than the amount of visibled stop defined by the -tr-visible-stop-count property. In LTR mode, this selector represents the left side overflow (previous step group). This selector includes both the icon and its content. This selector is combinable with state pseudo-classes.
af|train::overflow-start-icon-cell Styles the icon section of the overflow-start. This selector is combinable with state pseudo-classes. This selector includes .AFTrainIconCell:alias.
af|train::overflow-start-content Styles the content section of the overflow-start. This selector is combinable with state pseudo-classes. This selector includes .AFTrainContent:alias.
af|train::overflow-end Styles a train end overflow. A end overflow is generated when the amount of steps in the process is higher than the amount of visibled stop defined by the -tr-visible-stop-count property. In LTR mode, this selector represents the right side overflow (next step group). This selector includes both the icon and its content. This selector is combinable with state pseudo-classes.
af|train::overflow-end-icon-cell Styles the icon section of the overflow-end. This selector is combinable with state pseudo-classes. This selector includes .AFTrainIconCell:alias.
af|train::overflow-end-content Styles the content section of the overflow-end. This selector is combinable with state pseudo-classes. This selector includes .AFTrainContent:alias.
af|train::join-overflow Styles the join between overflows and stop icons. This selector is combinable with state pseudo-classes, except :selected. This selector includes .AFTrainJoin:alias.
af|train::parent-start Styles a train start parent. A parent is generated when the current train is not located at the root of its TreeModel and that -tr-render-parent-train property is set to true. In LTR mode this will be rendered to the left of the first step's stop. This selector includes both the icon and its content. This selector is NOT combinable with state pseudo-classes.
af|train::parent-start-icon-cell Styles the icon section of the parent-start. This selector is NOT combinable with state pseudo-classes. This selector includes .AFTrainIconCell:alias.
af|train::parent-start-content Styles the content section of the parent-start. This selector is NOT combinable with state pseudo-classes. This selector includes .AFTrainContent:alias.
af|train::parent-end Styles a train end parent. A parent is generated when the current train is not located at the root of its TreeModel and that -tr-render-parent-train property is set to true. In LTR mode this will be rendered to the right of the last step's stop. This selector includes both the icon and its content. This selector is NOT combinable with state pseudo-classes.
af|train::parent-end-icon-cell Styles the icon section of the parent-end. This selector is NOT combinable with state pseudo-classes. This selector includes .AFTrainIconCell:alias.
af|train::parent-end-content Styles the content section of the parent-end. This selector is NOT combinable with state pseudo-classes. This selector includes .AFTrainContent:alias.
af|train::join-parent Styles the join between parent and stop icons. This selector is NOT combinable with state pseudo-classes. This selector includes .AFTrainJoin:alias.
af|train::link Styles the links generated within the stop's content. This selector is NOT combinable with state pseudo-classes
Icons
Name Description
Stop and overflow icons are combinable with one or more state pseudo-classes. For example, it's possible to build icons for a very specific situations like a read-only visited stop being different from a read-only unvisited stop. The valid classes are:
  • :visited for steps that were already completed (assumed to be all steps before the current one, this might change in the future);
  • :selected for the current step. This state is not available to overflows;
  • :unvisited for steps that were not completed by the user (assumed to be all steps after the current one, this might change in the future);
  • :read-only for steps that cannot be accessed directly by the user by clicking on the link (clicking on the icon is not implemented at this time). This state is combinable with any of the previous three states, but must be placed after them, e.g. :selected:read-only-icon is valid, while :read-only:selected is not;
  • :disabled for steps that cannot be accessed by the user using the link and should theorically not be accessible at all until some condition is met. This state has absolute priority and is not combinable with any other state.
af|train::stop<states>-icon Define the icons for stops. At least one state must be specified. For example:
  • VALID: af|train::stop:selected-icon;
  • INVALID: af|train::stop-icon;
af|train::overflow-start<states>-icon Define the icons for overflows toward the previous step group. At least one state must be specified. For example:
  • VALID: af|train::overflow-start:read-only-icon;
  • INVALID: af|train::overflow-start-icon;
af|train::overflow-end<states>-icon Define the icons for overflows toward the next step group. At least one state must be specified. For example:
  • VALID: af|train::overflow-end:read-only-icon;
  • INVALID: af|train::overflow-end-icon;
af|train::parent-start<states>-icon Define the icons for the parent train that include this train. It appears before the first stop's icon. This icon is NOT combinable with state pseudo-classes. For example:
  • VALID: af|train::parent-start-icon;
  • INVALID: af|train::parent-start:read-only-icon;
af|train::parent-end<states>-icon Define the icons for the parent train that follow the parent train including this train. It appears after the last stop's icon. This icon is NOT combinable with state pseudo-classes. For example:
  • VALID: af|train::parent-end-icon;
  • INVALID: af|train::parent-end:read-only-icon;

tr:tree Component

Icon Selectors
Name Description
af|tree::expanded-icon This icon is displayed before the expanded tree node.
af|tree::collapsed-icon This icon is displayed before the collapsed tree node.
af|tree::no-children-icon This icon is displayed instead of the expanded/collapsed icon, when the node has no children
af|tree::line-icon This icon is used as a vertical line between the nodes.
af|tree::line-middle-icon This icon is used as the horizontal line in the background of the expand/collapse icon of the node, in the case the node is not the last sibling of its parent node.
af|tree::line-last-icon This icon is used as the horizontal line in the background of the expand/collapse icon of the node, in the case the node is the last sibling of its parent node.
af|tree::node-icon This icon selector is used in the case the Node class has a getNodeType() method that returns the node type as string. The nodetype gets added to this selector, separated by a ':'. If the node is a container (has children) the following suffixes get added depending on the expanded/collapsed state: '-expanded' / '-collapsed'. e.g. "af|tree::node-icon:container-collapsed", "af|tree::node-icon:container-expanded", "af|tree::node-icon:noncontainer".
Trinidad properties
Name Description
-tr-show-lines Valid values are true or false (default true). Determines whether the tree lines are displayed or not. e.g., af|tree {-tr-show-lines:false} will not show the lines of the tree.

tr:treeTable Component

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::path 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|breadCrumbs and af|treeTable::path
.AFPathStep:alias This style is included in both af|breadCrumbs::step and af|treeTable::path-step
.AFPathSelectedStep:alias This style is included in both af|breadCrumbs::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.
af|treeTable::prev-icon The previous icon which is used to go back to previous step.
af|treeTable::next-icon The next icon which is used to go back to next step.
af|treeTable::prev-disabled-icon The previous icon disabled.
af|treeTable::next-disabled-icon The next icon disabled.
.AFPathSeparatorIcon:alias Changing this icon changes both af|breadCrumbs::separator-icon and af|treeTable::separator-icon
af|treeTable::expand-all-icon The expand-all link icon.
af|treeTable::collapse-all-icon The collapse-all link icon.
af|treeTable::select-all-icon The select-all link icon.
af|treeTable::select-none-icon The select-none link icon.
af|treeTable::node-icon This icon selector is used in the case the Node class has a getNodeType() method that returns the node type as string. The nodetype gets added to this selector separated by a ':'. If the node is a container (has children) the following suffixes get added depending on the expanded/collapsed state: '-expanded' / '-collapsed'. i.e. "af|treeTable::node-icon:container-collapsed", "af|treeTable::node-icon:container-expanded", "af|treeTable::node-icon:noncontainer".

Miscellaneous Selectors

Lightweight Dialog Selectors

The following selectors enable styling of specific elements of the dialog box when lightweight dialogs are configured.

Style Selectors
Name Description
af|dialog::container Styles the outer element of the dialog. Use this selector to control border and margin/padding around the entire dialog, including title-bar.
af|dialog::content Styles the content area of the dialog, meaning the area beneath the title-bar.
af|dialog::title-bar Styles the title-bar of the dialog. Use this selectors to control the size the baackground color of the title-bar.
af|dialog::title-text Styles the text within the title-bar.
af|dialog::close-icon Styles the clickable icon that closes the dialog. Note - this selector must use an image, it cannot be styled with content text.
af|dialog::blocked-area Styles the blocked area (behind the opened modal dialog). Note - at the moment the usage of !important is required to overwrite the following inline styles: background-color, display, position, z-index, top, left, cursor