Documente Academic
Documente Profesional
Documente Cultură
html
ASF
/* Component-specific selector. */
Sponsorship
af|panelTabbed::orientation-top
Thanks
{
border-bottom: 3px solid black;
}
Modules
Project Documentation
Project Information
Project Reports
.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 A FDefaultFontFamily 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 .A FDarkBackground:alias color.
.AFMediumBackground:alias A slightly lighter background color in the core color ramp. This
value is computed relative to the .A FDarkBackground:alias color.
.AFLightBackground:alias The lightest background color in the core color ramp. This value is
computed relative to the .A FDarkBackground:alias color.
.AFDarkA ccentBackground: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.
.AFVeryDarkA ccentBackground:alias The darkest background color in the accent color ramp. This value
is computed relative to the .AFDarkAccentBackground:alias color.
.AFMediumA ccentBackground:alias A slightly lighter background color in the accent color ramp. This
value is computed relative to the .A FDarkA ccentBackground:alias
color.
.AFLightA ccentBackground: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 .A FDarkForeground:alias color.
.AFMediumForeground:alias A slightly lighter foreground color in the core color ramp. This
value is computed relative to the .A FDarkForeground:alias color.
.AFLightForeground:alias The lightest foreground color in the core color ramp. This value is
computed relative to the .A FDarkForeground:alias color.
.AFDarkA ccentForeground:alias The primary foreground color in the accent color ramp.
.AFVeryDarkA ccentForeground:alias The darkest foreground color in the accent color ramp. This value
is computed relative to the .AFDarkAccentForeground:alias color.
.AFMediumA ccentForeground:alias A slightly lighter foreground color in the accent color ramp. This
value is computed relative to the .A FDarkA ccentForeground:alias
color.
.AFLightA ccentForeground: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.
.AFDarkA ccentBorder: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.
.AFVeryDarkA ccentBorder:alias The darkest border color in the accent color ramp. By default, it
uses the same color as is used in
.A FVeryDarkAccentBackground:alias's background-color.
.AFMediumA ccentBorder:alias A slightly lighter border color in the accent color ramp. By default,
it uses the same color as is used in
.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
tr:breadCrumbs Component
Style Selectors
Name Description
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
tr:column Component
Style Selectors
Name Description
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
tr:goButton Component
Style Selectors
Name Description
tr:inputColor Component
Style Selectors
Name Description
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- The icon that is overlayed on top of the inputColor's color swatch to indicate that the color swatch is clickable.
overlay-icon
tr:inputDate Component
Style Selectors
Name Description
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
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
tr:inputText Component
Style Selectors
Name Description
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- The style on a table around the item when the item is active and disabled.
active-disabled
af|navigationPane::bar- The style on a table around the item when the item is active and enabled.
active-enabled
af|navigationPane::bar- The style on a table around the item when the item is inactive and disabled.
inactive-disabled
af|navigationPane::bar- The style on a table around the item when the item is inactive and enabled.
inactive-enabled
af|navigationPane::bar- Styles the cell of the bar content. To change the style (like font-style) of the active disabled item, you can use
content 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- Styles the separator between items in the navigationPane bar.
separator
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- The style on a table around the item when the item is active and disabled.
active-disabled
af|navigationPane::buttons- The style on a table around the item when the item is active and enabled.
active-enabled
af|navigationPane::buttons- The style on a table around the item when the item is inactive and disabled.
inactive-disabled
af|navigationPane::buttons- The style on a table around the item when the item is inactive and enabled.
inactive-enabled
af|navigationPane::buttons- Styles the cell of the buttons content. To change the style of an individual item eg. an active and disabled
content item, you can use descendent selectors such as "af|navigationPane::buttons-active-disabled
af|navigationPane::buttons-content".
af|navigationPane::buttons- Styles the separator bar between the items in the navigationPane buttons.
separator
tr:navigationPane hint='choice'
Style Selectors
Name Description
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- The style on a table around the item when the item is active and disabled.
disabled
af|navigationPane::list-active- The style on a table around the item when the item is active and enabled.
enabled
af|navigationPane::list- The style on a table around the item when the item is inactive and disabled.
inactive-disabled
af|navigationPane::list- The style on a table around the item when the item is inactive and enabled.
inactive-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. A vailable 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- This is the style that is on the root of each inactive tab. Available pseudo-class is :disabled. For example, to
inactive 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- 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
start-join 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- 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
join-from-active 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- This styles an inactive tab when it follows an inactive tab. This is the start 1/3 of a tab that is inactive and
join-from-inactive follows an inactive tab. You can use the same image as what you defined in ::tabs-start-join-from-active
af|navigationPane::tabs- This styles last 1/3 of a tab that isn't the LA ST tab. By default, this is the end background-image of a tab. Note:
end-join-to-inactive 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- 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
bottom-start 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- This selector is the empty div inside of tabs-bottom-start. The best thing to do is set background-image to none
bottom-start-content and let the container style take over.
af|navigationPane::tabs- 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
bottom-end 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- This selector is the empty div inside of tabs-bottom-end. The best thing to do is set background-image to none
bottom-end-content and let the container style take over.
af|navigationPane::tabs- 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-end-join bottom portion, the last 1/3 that isn't the LA ST 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 LA ST tab). For an inactive tab that is joining an
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
tr:panelAccordion Component
Style Selectors
Name Description
af|panelA ccordion This can be used to style the root element of a panelAccordion.
af|panelA ccordion::content This can be used to style the parent element of each showDetailItem in a panelA ccordion.
af|panelA ccordion::header-collapsed This can be used to style the header region of each collapsed showDetailItem in a panelAccordion.
af|panelA ccordion::header-disabled This can be used to style the header region of each disabled showDetailItem in a panelAccordion.
af|panelA ccordion::header- This can be used to style the header region of each expanded showDetailItem in a panelAccordion.
expanded
af|panelA ccordion::title-link This can be used to style the link element for the title of each enabled showDetailItem in a
panelAccordion.
af|panelA ccordion::title-disabled-link This can be used to style the link element for the title of each disabled showDetailItem in a
panelAccordion.
af|panelA ccordion::toolbar This can be used to style the toolbar facet of a showDetailItem in a panelA ccordion.
tr:panelBorderLayout
The panel border layout currently only has skin selectors for the positioned layout.
Style Selectors
Name Description
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 .A FPanelBox: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 .A FEndTextA lign: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
.A FEndTextAlign:alias.
af|panelFormLayout::label- Specifies the style information for the label cell of the panelForm when stacked above content.
stacked-cell
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|panelLabelA ndMessage::help-facet Specifies the style information for the help-facet text of a panelLabelA ndMessage.
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 "appA bout" 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- This icon is rendered in the background in between the af|panelSideBar::top-start and af|panelSideBar::top-end
background-icon icons.
af|panelSideBar::bottom- This icon is rendered at the bottom starting corner of the panelSideBar (ie. at the bottom left corner for left to
start-icon right languages.)
af|panelSideBar::bottom- This icon is rendered at the bottom ending corner of the panelSideBar (ie. at the bottom right corner for left to
end-icon right languages.)
af|panelSideBar::bottom- This icon is rendered in the background in between the af|panelSideBar::bottom-start and
background-icon af|panelSideBar::bottom-end icons.
af|panelSideBar::start- This icon is rendered in the background at the start of the panelSideBar.
background-icon
af|panelSideBar::end- This icon is rendered in the background at the end of the panelSideBar.
background-icon
tr:panelTabbed Component
Style Selectors
Name Description
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- The icon which is displayed when the progressIndicator's value divided by maximum is
five-percent-icon 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- The icon which is displayed when the progressIndicator's value divided by maximum is
percent-icon one-hundred percent.
tr:selectBooleanCheckbox Component
Style Selectors
Name Description
Icon Selectors
Name Description
af|selectBooleanCheckbox::disabled- The icon that is displayed when the checkbox is readOnly, disabled, and checked.
checked-icon
af|selectBooleanCheckbox::disabled- The icon that is displayed when the checkbox is readOnly, disabled, and unchecked.
unchecked-icon
af|selectBooleanCheckbox::read- The icon that is displayed when the checkbox is read-only and checked.
only-checked-icon
af|selectBooleanCheckbox::read- The icon that is displayed when the checkbox is read-only and unchecked.
only-unchecked-icon
tr:selectBooleanRadio Component
Style Selectors
Name Description
Icon Selectors
Name Description
af|selectBooleanRadio::disabled- The icon that is displayed when the radio is readOnly, disabled, and selected.
selected-icon
af|selectBooleanRadio::disabled- The icon that is displayed when the radio is readOnly, disabled, and not selected.
unselected-icon
af|selectBooleanRadio::read- The icon that is displayed when the radio is read-only and selected.
only-selected-icon
af|selectBooleanRadio::read- The icon that is displayed when the radio is read-only and not selected.
only-unselected-icon
tr:selectManyCheckbox Component
Style Selectors
Name Description
tr:selectManyListbox Component
Style Selectors
Name Description
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
tr:selectOneChoice Component
Style Selectors
Name Description
tr:selectOneListbox Component
Style Selectors
Name Description
tr:selectOneRadio Component
Style Selectors
Name Description
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
tr:selectRangeChoiceBar Component
Icon Selectors
Name Description
tr:separator Component
Style Selectors
Name Description
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
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 ".A FReadyIcon: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
Style Selectors
Name Description
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.
tr:train Component
Properties
Name Description
-tr-render- 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
parent-train located at the root of its TreeModel.
-tr-visible- Strictly positive integer value specifying the maximum amount of stops visible at a time.
stop-count
Aliases
Name Description
Style Selectors
Name Description
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
tr:tree Component
Icon Selectors
Name Description
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
Icon Selectors
Name Description
Miscellaneous 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