Pseudo classes |
Description |
drag-source |
Pseudo-class applied to the component initiating the drag and removed once the drag is over. |
drop-target |
Pseudo-class applied to a component willing to accept the drop of the current drag. Note that the cursor is under the control of the drag and drop framework during drag and drop operations. |
drag-ready |
Pseudo-class applied to elements that are ready to be dragged. Used in tablet devices during a tap and hold operation to indicate to the user that the item is ready to be dragged. Pseudo-class is removed if the drag is either started on canceled. |
drag-ghost |
Pseudo-class applied to elements that are shown as being dragged. |
The rich client allows rich components to be styled based on whether or not they have certain levels of messages associated with them. When a message of a particular type is added to a component (using the FacesMessage framework), the styles of that component are automatically modified to reflect the new status. If styles are not defined for the status in question, then the default stles are used.
In order to define styles for your components based on message levels that are tied to them, you would append a style pseudo-class to your component definition. For example:
af|inputText::content {
/*defines the base style for the content region of the af:inputText tag*/
}
af|inputText:error::content {
/*defines the base style for the content region of the ad:inputText tag
whem an error message is present. The default will also be processed
in addition to this special "error" style.
}
The valid message properties are: fatal, error, warning, confirmation, and info. Typically these styles will only be defined on input elements, and they are of the form of a CSS pseudo-class (:fatal, :error, etc).
It is recommended that you use the aliases for the messages, if possible, since they will affect all the components, and you will have to style fewer selectors.
See also
- message Component - These styles may also be used when automatically displaying messaging for components even when no message component is on the page.
- messages Component - These styles may also be used when automatically displaying messaging for the page even when no messages component is on the page.
Selector Name |
Description |
Conditions |
.AFFormComponentOutlineFatal:alias |
The border around a form component to indicate something fatal occurred. |
.AFFormComponentOutlineError:alias |
The border around a form component to indicate an error. |
.AFFormComponentOutlineWarning:alias |
The border around a form component to indicate a warning. |
.AFFatalBackground:alias |
Background color to indicate something fatal occurred; used on checkboxes and radio boxes. Used in simple skin on all browsers, or for fusion skin in IE7. |
.AFErrorBackground:alias |
Background color to indicate an error; used on checkboxes and radio boxes. Used in simple skin on all browsers, or for fusion skin in IE7. |
.AFWarningBackground:alias |
Background color to indicate a warning; used on checkboxes and radio boxes. Used in simple skin on all browsers, or for fusion skin in IE7. |
Several CSS pseudo-classes apply to almost every component. Some of these, such as :active
and :hover
are defined by the CSS specification. Most, are specific to ADF Faces and apply in well-defined cases. When combined together in the same selector, the selector applies only when all states are statisfied. Thus, :hover
applies to any component with the mouse hovered over it, while :disabled:hover
applies to components that are both disabled and have the mouse hovered over them.
Pseudo classes |
Description |
busy |
Pseudo-class used to select a component with a current outstanding server event. |
disabled |
Pseudo-class used to change display style when component is disabled. Use :disabled:active if :active and :disabled are specified to prevent a disabled element from showing mouse down status when pressed by the mouse. The :disabled:active style should be the same as :disabled style. An example of the skinning key format is: af|inputDate::launch-icon-style:disabled:active. |
hover-target |
Pseudo-class used to change display style when mouse hovered, but only over the innermost component. It is different from hover because hover will be applied to the innermost component, as well as all its ancestor components.
Limitations:
- This is only applied when there is a client component.
- Due to an IE bug, it is not supported on IE in right to left mode. See Bug 6931294 - ie7 setting styles in rtl cause scroll bar to reset position.
|
The purpose of themes is to provide a consistent look and feel across multiple components for a portion of a page. A common usage for themes is in a page template where certain areas have a distinct look. For example, a page may have a branding area at the top with a dark background and light text, a navigation component with a lighter background, and a main content area with a light background.
A component that sets a theme exposes that theme to its child components and therefore the theme is inherited. Themes can be set (started or changed) by the following components:
- af:document
- af:decorativeBox
- af:panelStretchLayout
- af:panelGroupLayout
The Fusion and BLAF Plus skins support the following themes:
- Dark
- Medium
- Light
- None (default)
In the JSPX page, the theme is started by the af:document component, as in: <af:document theme="dark"> <af:panelTabbed>...lt;/af:panelTabbed> </af:document>
To set the theme for a component, specify a theme attribute in the skin selector in the CSS file. For example, the selector to change the text color under an af:panelTabbed component to a dark theme is: af|panelTabbed[theme="dark"] { color: red; }
Attribute selector |
Values |
theme |
dark medium light default |
Skin properties |
Description |
-tr-children-theme |
If you do not want a child component to inherit modifications made to a parent component in a JSPX page, set a value for the -tr-children-theme property in the CSS file. For example, you do not want the af:panelTabbed child component to inherit the dark theme defined for the af:document parent component in the JSPX page. Set the -tr-children-theme property in the CSS file as follows:
af|panelTabbed[theme="dark"] { -tr-children-theme: default; }
Note that the property may only be assigned to the default style class of the component (the class returned by the RichRenderer.getDefaultStyleClass method). Should the component not have a default style class, it will also look for properties underneath the root state style classes (any of the classes returned by the RichRenderer.getRootStateStyleClasses method).
The children theme is based on the current theme, so the selector takes into account the default style class or root state style class. So, should you always want the children of a component to be in the dark theme, regardless of the current theme you could use this code:
af|panelTabbed,
af|panelTabbed[theme="medium"],
af|panelTabbed[theme="light"] {
-tr-children-theme: dark;
}
In the above example, the panel tabbed component in a default, medium or light theme would force the theme of the children of the panel tabbed to the dark theme.
|
-tr-enable-themes |
Themes are enabled on a per-component basis in the skin. The purpose to selectively enable themes for certain compoments is to not add unneccessary HTML for attributes that will not be used by the generated CSS files.
Themes are enabled using the "-tr-enable-themes" value for a skin selector. Example of adding support for themes on the outputLabel component:
af|outputLabel {-tr-enable-themes: true;}
Note that the property may only be assigned to the default style class of the component (the class returned by the RichRenderer.getDefaultStyleClass method). Should the component not have a default style class, it will also look for properties underneath the root state style classes (any of the classes returned by the RichRenderer.getRootStateStyleClasses method).
|
Renderer Selectors
skin a particular ADF Faces component. The selectors defined below are specified by the component they affect. Let's say you want to skin the af:inputText component. If you go to the af:inputText Component section of this document, you will see the selectors that you can use to skin the af:inputText component. One of the selectors is af|inputText::content. The ::content pseudo-element indicates that this is the content portion of the af:inputText component; the input. To skin this you would set CSS properties on the af|inputText::content selector in your ADF Faces skin .css file.
The activeCommandToolbarButton component was added for a very specific use case and we expect very few application developers to use this component.
The activeImage component was added for a very specific use case and we expect very few application developers to use this component.
Style Selectors |
Description |
Conditions |
af|activeOutputText |
Style on the root element of the af:activeOutputText component.
Pseudo classes |
Description |
twinkle-on |
To style an active output text to twinkle, use "af|activeOutputText:twinkle-on". |
|
Style Selectors |
Description |
Conditions |
af|breadCrumbs |
Skin properties |
Description |
-tr-show-last-item |
Valid values are true or false. Determines whether the last item is displayed or not. e.g. af|breadCrumbs {-tr-show-last-item:false} will not show the last item in the breadCrumbs. |
|
af|breadCrumbs::access-key |
Style on the access key character of commandNavigationItem, when it is used inside a breadCrumbs. Includes .AFFormAccessKeyStyle:alias |
af|breadCrumbs::body |
Style on the container which encloses both the breadCrumbs content and the overflow indicator. |
af|breadCrumbs::content |
Style on the container which encloses the breadCrumbs content. |
af|breadCrumbs::overflow-indicator |
Style on the overflow indicator. The indicator is specified using a background-image in this key. |
af|breadCrumbs::icon-style |
Style on the icon of commandNavigationItem, when it is used inside a breadCrumbs. |
af|breadCrumbs::separator |
Styles the separator icon. |
af|breadCrumbs::step |
Styles the step. If you skin the background-image, you may also want to skin it for :hover.
Pseudo classes |
Description |
selected |
e.g. af|breadCrumbs::step:selected |
disabled |
|
|
Icon Selectors |
Description |
af|breadCrumbs::separator-icon |
The separator icon itself. |
af|breadCrumbs::overflow-icon |
Overrides the default overflow indicator image. Icons can be text or img elements, e.g. af|breadCrumbs::overflow-icon {content "X"} or af|breadCrumbs::overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the overflow-indicator key and defining the override icon in this key. |
Resource Strings |
Description |
af_breadCrumbs.TIP_SHOW_MORE_LINKS |
The hover text for the overflow icon. |
Style Selectors |
Description |
Conditions |
.AFCalendarLightBackground:alias |
alias for the background color for the light portions of the calendar. |
.AFCalendarTodayBackground:alias |
alias for the background color for today's date |
.AFCalendarTodayHeaderBackground:alias |
alias for the background color for headers for today's date |
.AFCalendarActiveDayHeaderBackground:alias |
alias for the background color for headers for the active day |
af|calendar |
The selector on the root dom element of the component.
Skin properties |
Description |
-tr-time-slots-per-hour |
Positive integer value specifying the number of time slots to be displayed per hour. e.g. af|calendar {-tr-time-slots-per-hour: 4} will render a minor division (dotted line) at 15 minute intervals. The value is referred by day and week views only and will not affect month and list views. |
|
af|calendar::view |
style the portion of the calendar showing a particular view, meaning the part of the calendar that does not include the toolbar. |
af|calendar::toolbar-display-range |
style the date range string in the toolbar |
af|calendar::toolbar-prev-next-button-style |
style the prev-next buttons in the toolbar |
af|calendar::header-all-day-container |
day and week view: style area containing header and all day activity area |
af|calendar::all-day-container |
day and week view:style container for the all day area |
af|calendar::time-activity-grid-container |
day and week view:style container for the time column and timed activity 'grid' |
af|calendar::activity-grid-column |
day and week view: style container for the activity grid column |
af|calendar::time-column |
day and week view: style time column |
af|calendar::time-cell |
day and week view: style cell in time column |
af|calendar::time-text |
day and week view:style text in time column |
af|calendar::hgrid-minor |
day and week view: style the minor horizontal grid lines.
Pseudo classes |
Description |
drop-target |
Applied as the chosen location for a drop. |
|
af|calendar::hgrid-major |
day and week view: style the major horizontal grid lines.
Pseudo classes |
Description |
drop-target |
Applied as the chosen location for a drop. |
|
af|calendar::day-of-week |
day and week view: style the day of the week.
Pseudo classes |
Description |
drop-target |
Applied as the chosen location for a drop. |
today |
Applied to the cell for today's date |
active-day |
Applied to the cell for date matching the calendar's activeDay attribute. |
|
af|calendar::time-activity-container |
day and week view: style for the container of a time based activity |
af|calendar::time-activity-header |
day and week view: style for the header portion of a time based activity |
af|calendar::time-activity-content |
day and week view:style for the content portion of a time based activity |
af|calendar::time-activity-resize-grip |
day and week view: style for the resize grip on a time based activity. The background image can be styled to change the grip image. |
af|calendar::time-activity-resize |
day and week view: style for the resize grip on a time based activity. |
af|calendar::all-day-activity |
day, week and month: style on all day activity container |
af|calendar::all-day-activity-text |
day, week and month: style on text in all day activity |
af|calendar::duration-activity-text |
day and week: style on text in short duration activity |
af|calendar::all-day-activity-time |
day, week and month: style on time in 'all day' activity. For skinning purposes 'all day' can also apply to multiday timed activities |
af|calendar::day |
day: style for the day root container |
af|calendar::day-header-row |
day: style for the header area in day view |
af|calendar::week |
week: style for the week root container |
af|calendar::week-header-row |
week: style for the header row in week view |
af|calendar::week-header-cell |
week: style for the header cell in week view. The 'today' pseudo-class is applied to this style for today's date. |
af|calendar::week-header-day-link |
week: style for the day links in the header |
af|calendar::week-vgrid |
week: style for the vertical grid in week |
af|calendar::month |
month: style for the month root container |
af|calendar::month-header-row |
month: style for the month header row |
af|calendar::month-header-cell |
month: style for the cells in the month header row.
Pseudo classes |
Description |
today |
Applied to the cell for today's date |
|
af|calendar::month-grid |
month: style for the month grid container |
af|calendar::month-grid-cell |
month: style for a cell in the month grid.
Pseudo classes |
Description |
today |
Applied to the cell for today's date |
active-day |
Applied to the cell for date matching the calendar's activeDay attribute. |
prev-month |
applied to cells in the previous month. For example let's say the activeDay is September 1, 2008. In month view you will see days in August (the previous month) and October(the next month). |
next-month |
applied to cells in the next month. For example let's say the activeDay is September 1, 2008. In month view you will see days in August (the previous month) and October(the next month). |
drop-target |
Applied as the chosen location for a drop. |
|
af|calendar::month-grid-cell-header |
month: style for the header area of a month grid cell. To style the cell header for today's date you could do something like "af|calendar::month-grid-cell:today af|calendar::month-grid-cell-header{background-color:orange}" |
af|calendar::month-grid-cell-header-misc |
month: style for miscellaneous text that can be added to the month grid cell header using the calendar's dateCustomizer attribute. |
af|calendar::month-grid-cell-header-day-link |
month: style for the month grid cell header day of the month link |
af|calendar::month-overflow-link |
month: style for the overflow link which appears if there are too many activities to show. |
af|calendar::month-time-activity |
month: style applied to time activity in month view. This is for single day time activities. A mulitiday time activity will not use this style, because for skinning purposes a multiday time activity uses 'all-day' styles. |
af|calendar::list |
list: style for the list root container |
af|calendar::list-row |
list: style for a row in the list view
Pseudo classes |
Description |
today |
Applied to the cell for today's date |
active-day |
Applied to the cell for date matching the calendar's activeDay attribute. |
|
af|calendar::list-cell |
list: style for a cell in the list view |
af|calendar::list-activity-icons-cell |
list: style for the cell holding activity icons like recurring, reminder etc in the list view |
af|calendar::list-activity-provider-name-cell |
list: style for the cell containing the provider name in the list view |
af|calendar::list-day-of-week-column |
list: style for the day of the week column |
af|calendar::list-day-of-month-column |
list: style for the day of the month column |
af|calendar::list-time-column |
list: style for the time column |
af|calendar::list-day-of-month-link |
list: style for the day of the month link |
af|calendar::list-title-link |
list: style for the title link |
af|calendar::list-swatch-container |
list: style for the calendar provider color swatch |
af|calendar::list-date-separator |
list: style for the separator between days |
Icon Selectors |
Description |
af|calendar::toolbar-day-icon |
Icon for the 'day' toolbar button. |
af|calendar::toolbar-day-hover-icon |
Icon for the 'day' toolbar button when hovering. |
af|calendar::toolbar-day-active-icon |
Icon for the 'day' toolbar button when active. |
af|calendar::toolbar-week-icon |
Icon for the 'week' toolbar button. |
af|calendar::toolbar-week-hover-icon |
Icon for the 'week' toolbar button when hovering. |
af|calendar::toolbar-week-active-icon |
Icon for the 'week' toolbar button when active. |
af|calendar::toolbar-month-icon |
Icon for the 'month' toolbar button. |
af|calendar::toolbar-month-hover-icon |
Icon for the 'month' toolbar button when hovering. |
af|calendar::toolbar-month-active-icon |
Icon for the 'month' toolbar button when active. |
af|calendar::toolbar-list-icon |
Icon for the 'list' toolbar button. |
af|calendar::toolbar-list-hover-icon |
Icon for the 'list' toolbar button when hovering. |
af|calendar::toolbar-list-active-icon |
Icon for the 'list' toolbar button when active. |
af|calendar::toolbar-prev-icon |
Icon for the 'previous' toolbar button which moves the date back. |
af|calendar::toolbar-prev-hover-icon |
Hover icon for the 'previous' toolbar button which moves the date back. |
af|calendar::toolbar-prev-active-icon |
Active icon for the 'previous' toolbar button which moves the date back. |
af|calendar::toolbar-next-icon |
Icon for the 'next' toolbar button which moves the date forward. |
af|calendar::toolbar-next-hover-icon |
Hover icon for the 'next' toolbar button which moves the date forward. |
af|calendar::toolbar-next-active-icon |
Active icon for the 'next' toolbar button which moves the date forward. |
af|calendar::reminder-light-icon |
Icon indicating an activity has a reminder.This is the light version of the icon, which will be placed on a dark background. |
af|calendar::reminder-dark-icon |
Icon indicating an activity has a reminder.This is the dark version of the icon, which will be placed on a light background. |
af|calendar::recurring-light-icon |
Icon indicating an activity is recurring.This is the light version of the icon, which will be placed on a dark background. |
af|calendar::recurring-dark-icon |
Icon indicating an activity is recurring.This is the dark version of the icon, which will be placed on a light background. |
af|calendar::recurring-change-light-icon |
Icon indicating an activity is no longer part of a recurring series.This is the light version of the icon, which will be placed on a dark background. |
af|calendar::recurring-change-dark-icon |
Icon indicating an activity is no longer part of a recurring series.This is the dark version of the icon, which will be placed on a light background. |
af|calendar::all-day-activity-prev-icon |
In day, week, and month views the icon indicating an activity continues from a previous date. |
af|calendar::all-day-activity-next-icon |
In day, week, and month views the icon indicating an activity will continue to a later date. |
af|calendar::list-activity-prev-icon |
In list view, the icon indicating an activity continues from a previous date. |
af|calendar::list-activity-next-icon |
In list view, the icon indicating an activity will continue to a later date. |
Resource Strings |
Description |
af_calendar.TIP_NEXT |
Tip for the 'next' toolbar button. |
af_calendar.TIP_PREVIOUS |
Tip for the 'previous' toolbar button. |
af_calendar.TIP_DAY |
Tip for the 'day' toolbar button. |
af_calendar.TIP_WEEK |
Tip for the 'week' toolbar button. |
af_calendar.TIP_MONTH |
Tip for the 'month' toolbar button. |
af_calendar.TIP_LIST |
Tip for the 'list' toolbar button. |
af_calendar.LABEL_TODAY |
Text for the 'today' toolbar button |
af_calendar.LABEL_EMPTY |
Text seen in list view when there are no activities found. |
af_calendar.LABEL_ACTIVITY_TITLE_LOCATION |
Message that displays the title and location of an activity where {0} is the title and {1} is the location. For example: "{0} -- {1}" will turn into "meeting with Jane -- Ivy Restaurant" when {0} ="meeting with Jane" and {1} = "Ivy Restaurant". |
af_calendar.TIP_REMINDER |
Tip for the icon indicating an activity has a reminder |
af_calendar.TIP_RECURRING |
Tip for the icon indicating an activity is recurring |
af_calendar.TIP_RECURRING_CHANGE |
Tip for the icon indicating an activity is no longer part of recurring series. |
af_calendar.LABEL_OVERFLOW |
Label for the overflow link indicating there are more activities. {0} will be replaced with the number of unseen activities. |
Style Selectors |
Description |
Conditions |
af|carousel |
Styles the root dom element of the component. Typically a background-color, color, width dimension, or non-percent height dimension would be defined in this selector.
Pseudo classes |
Description |
vertical |
styles when the carousel orientation is set to vertical. |
Skin properties |
Description |
-tr-spin-animation-duration |
The minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for the carousel spin. This skin property is honored only if animation is enabled in the system. |
-tr-pop-out-animation-duration |
The minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for the carousel pop-out. This skin property is honored only if animation is enabled in the system. |
-tr-overlay-opacity |
Specify 'none' if you do not want the carousel to apply various levels of opaque overlays over the auxiliary carousel items. |
-tr-status-type |
Specify 'icon' if you want the carousel to display its fetching data status as an icon, otherwise use 'text' to display it as a textual message. |
|
af|carousel::view |
Styles the wrapper around all carouselItem components. Typically a border or shadow style would be defined in this selector but only for the one-by-one pseudo-class, never for the circular pseudo-class. Includes the .AFCarouselItemBorder:alias for the one-by-one pseudo-class.
Pseudo classes |
Description |
circular |
styles when the carousel displayItems is set to circular. |
one-by-one |
styles when the carousel displayItems is set to oneByOne. |
|
af|carousel::control-area |
Styles the wrapper around all spin controls, item text, and spin info when the control area is non-full. Typically a border or shadow style and background color would be defined in this selector but usually only for the vertical pseudo-class in combination with small or compact.
Pseudo classes |
Description |
vertical |
styles when the carousel orientation is set to vertical. |
small |
styles when the carousel controlArea is set to small. |
compact |
styles when the carousel controlArea is set to compact. |
circular |
styles when the carousel displayItems is set to circular. |
one-by-one |
styles when the carousel displayItems is set to oneByOne. |
|
af|carousel::item |
Styles the wrapper around each carouselItem component. Typically a border or shadow style would be defined in this selector but only for the circular pseudo-class, never for the one-by-one pseudo-class. Includes the .AFCarouselItemBorder:alias for the circular pseudo-class.
Pseudo classes |
Description |
circular |
styles when the carousel displayItems is set to circular. |
one-by-one |
styles when the carousel displayItems is set to oneByOne. |
selected |
styles when the carousel displayItems is set to circular and the item is the selected item. |
|
af|carousel::item-overlay |
Styles the element that covers every carouselItem except for the current item (since only the current item should be interactive to the user; clicking the overlay will cause the carousel to spin to this particular item). Typically a background-color would be defined in this selector. |
af|carousel::item-text |
Styles the text for the current item in the carousel. Typically a background-color, color, font-family, font-size, font-weight, border, padding, or shadow style would be defined in this selector.
Pseudo classes |
Description |
vertical |
Styles when the carousel orientation is set to vertical. |
small |
styles when the carousel controlArea is set to small. |
compact |
styles when the carousel controlArea is set to compact. |
circular |
styles when the carousel displayItems is set to circular. |
one-by-one |
styles when the carousel displayItems is set to oneByOne. |
|
af|carousel::spin-info |
Styles the text that identifies the current item number and the total number of items that the carousel has (if known). Typically a color, font-family, font-size, font-weight would be defined in this selector. The pseudo-class :vertical is used when the carousel orientation is set to vertical. There is a pseudo-class for :small but not :compact because this info is not present when compact.
Pseudo classes |
Description |
vertical |
Styles when the carousel orientation is set to vertical. |
small |
styles when the carousel controlArea is set to small. |
|
af|carousel::spin-bar |
Styles the bar that appears behind the spin thumb, representing the list of items in the carousel. Typically a background-image, background-repeat, background-position would be defined in this selector. For a horizontal orientation, a non-auto left, right, and height and auto top, bottom, and width would be defined. For a vertical orientation, a non-auto top, bottom, and width and auto left, right, and width would be defined to configure the sizing of the bar. These dimensions should correspond to those of the previous and next icons so they appear adjacent to the bar. The pseudo-class :vertical is used when the carousel orientation is set to vertical and :disabled is used when the carousel is disabled.
Pseudo classes |
Description |
disabled |
Styles when the carousel is disabled. |
vertical |
Styles when the carousel orientation is set to vertical. |
|
af|carousel::spin-h-previous-icon-style |
Style of the horizontally-oriented previous button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. For the :ltr pseudo-class, a right style would be defined in this selector. For the :rtl pseudo-class, a left style would be defined in this selector.
Pseudo classes |
Description |
disabled |
Styles when the carousel is disabled. |
small |
styles when the carousel controlArea is set to small. |
compact |
styles when the carousel controlArea is set to compact. |
|
af|carousel::spin-h-next-icon-style |
Style of the horizontally-oriented next button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. For the :ltr pseudo-class, a left style would be defined in this selector. For the :rtl pseudo-class, a right style would be defined in this selector.
Pseudo classes |
Description |
disabled |
Styles when the carousel is disabled. |
small |
styles when the carousel controlArea is set to small. |
compact |
styles when the carousel controlArea is set to compact. |
|
af|carousel::spin-h-thumb-icon-style |
Style of the horizontally-oriented spin thumb button icon used with the carousel component. This icon is used for identifying where the current item resides along the spin slider bar. The selector icon is specified as a background-image, width, and height in this key.
Pseudo classes |
Description |
disabled |
Styles when the carousel is disabled. |
|
af|carousel::spin-v-previous-icon-style |
Style of the vertically-oriented previous button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. A bottom style would be defined in this selector.
Pseudo classes |
Description |
disabled |
Styles when the carousel is disabled. |
small |
styles when the carousel controlArea is set to small. |
compact |
styles when the carousel controlArea is set to compact. |
|
af|carousel::spin-v-next-icon-style |
Style of the vertically-oriented next button icon used with the carousel component. This icon is intended to appear next to the spin bar. The selector icon is specified as a background-image in this key. A top style would be defined in this selector.
Pseudo classes |
Description |
disabled |
Styles when the carousel is disabled. |
small |
styles when the carousel controlArea is set to small. |
compact |
styles when the carousel controlArea is set to compact. |
|
af|carousel::spin-v-thumb-icon-style |
Style of the vertically-oriented spin thumb button icon used with the carousel component. This icon is used for identifying where the current item resides along the spin slider bar. The selector icon is specified as a background-image, width, and height in this key.
Pseudo classes |
Description |
disabled |
Styles when the carousel is disabled. |
|
af|carousel::status-icon-style |
This style is for the element that contains the status-icon (if used). This typically defines a background-image to an alpha-transparent image that lets a binary-transparent animated status-icon image blend well on any background when these 2 images are stacked. Also typically a width and height are defined for the dimensions of this container. It is suggested to use the .AFStatusIconStyle:alias rule ref in this selector. |
af|carousel::status-message |
Styles the status message that shows up when the user spins the carousel. Includes the .AFDataCollectionStatusMessage:alias. |
.AFCarouselItemBorder:alias |
Styles the border or shadows around the carousel item or view (depending on how the items are displayed). |
Icon Selectors |
Description |
af|carousel::spin-h-previous-icon |
Overrides the carousel's default horizontal orientation icon for spinning the carousel to the previous item. |
af|carousel::spin-h-thumb-icon |
Overrides the carousel's default horizontal orientation icon for identifying where the current item resides along the slider bar. |
af|carousel::spin-h-next-icon |
Overrides the carousel's default horizontal orientation icon for spinning the carousel to the next item. |
af|carousel::spin-v-previous-icon |
Overrides the carousel's default vertical orientation icon for spinning the carousel to the previous item. |
af|carousel::spin-v-thumb-icon |
Overrides the carousel's default vertical orientation icon for identifying where the current item resides along the slider bar. |
af|carousel::spin-v-next-icon |
Overrides the carousel's default vertical orientation icon for spinning the carousel to the next item. |
af|carousel::status-icon |
This icon (that is an alternative to the af|carousel::status-message) gives a graphical representation that the carousel content is loading if the af|carousel skin property -tr-status-type is set to icon. This typically defines a content URL for an animated image, the width of this image, and the height of this image. It is suggested to use the .AFStatusIcon:alias rule ref in this selector. |
Resource Strings |
Description |
af_carousel.LABEL_FETCHING |
Label shown to the user when the carousel is busy fetching items from the server. |
af_carousel.LABEL_GOING_TO |
Label shown to the user when the carousel is busy spinning to a specific part of the carousel items. This string can contain {0} in it to be replaced with a label identifying the start or end of the set of items or a label identifying a specific item number. |
af_carousel.LABEL_START |
Label shown to the user in place of {0} of the af_carousel.LABEL_GOING_TO resource string when the carousel is busy spinning to a the starting side of the list of carousel items. |
af_carousel.LABEL_END |
Label shown to the user in place of {0} of the af_carousel.LABEL_GOING_TO resource string when the carousel is busy spinning to a the ending side of the list of carousel items. |
af_carousel.LABEL_ITEM |
Label shown to the user in place of {0} of the af_carousel.LABEL_GOING_TO resource string when the carousel is busy spinning to a specific item number in the list of carousel items. This string can contain {0} in it to be replaced with the specific item number. |
af_carousel.MSG_NO_DATA |
Message used to notify the user that the carousel has no items to display. |
af_carousel.MSG_SCREEN_READER_SPIN_INFO_X |
Message used in screen reader mode that explains what item number is currently being displayed out of an unknown total number of items. This string can contain {0} in it to be replaced with the current item number. |
af_carousel.MSG_SCREEN_READER_SPIN_INFO_X_OF_Y |
Message used in screen reader mode that explains what item number is currently being displayed out of a known total number of items. This string can contain {0} in it to be replaced with the current item number and {1} to be replaced with the total number of items. |
af_carousel.TIP_SPIN_TO_PREVIOUS_ITEM |
Tooltip on the button that spins the carousel to the previous item in the list. |
af_carousel.TIP_SPIN_THUMB |
Tooltip on the slider thumb pointer that identifies where the current item resides along the slider bar. |
af_carousel.TIP_SPIN_INFO_X_OF_Y |
Tooltip to identify the current item number and the total number of items that the carousel has. This string can contain {0} in it to be replaced with the current item number and {1} to be replaced with the total number of items. |
af_carousel.TIP_SPIN_TO_NEXT_ITEM |
Tooltip on the button that spins the carousel to the next item in the list. |
Style Selectors |
Description |
Conditions |
af|carouselItem |
Styles the root dom element of the component. This component is not intended for use outside of the carousel component. Typically nothing would be customized in this selector because the carousel component uses its own wrapper elements for styling its items. However, you could define a background-color or border style in this selector. |
Style Selectors |
Description |
Conditions |
af|chooseColor |
Styles the root dom element of the component. |
af|chooseColor::button |
Styles the standard color palette buttons. Includes .AFButtonBorder:alias, .AFButtonBackground:alias, and .AFButtonForeground:alias. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. |
af|chooseColor::button-swatch |
Styles the color swatch on standard color palette buttons.Includes .AFButtonBorderDisabled:alias
Pseudo classes |
Description |
empty |
|
|
af|chooseColor::swatch |
Styles the margin and width/height of color swatch. Includes .AFButtonBorder:alias.
Pseudo classes |
Description |
empty |
|
|
af|chooseColor::swatch-cell |
Styles the swatch cell on standard color palette; typically this would be the border properties.
Pseudo classes |
Description |
selected |
|
|
af|chooseColor::swatch-button |
Styles the button that contains a swatch. |
af|chooseColor::swatch-table |
Styles the table that holds the swatch cells in the main selection area. |
af|chooseColor::lower-swatch-table |
Styles the table that holds the swatch cells in the lower selection area. |
Resource Strings |
Description |
af_chooseColor.LABEL_CUSTOM_COLOR |
The button label and hover text for the button that is used to bring up the select custom color dialog. |
af_chooseColor.LABEL_DEFAULT_COLOR |
Label and hover text for the default color button. |
af_chooseColor.LABEL_HEX |
The label for the input text field on the select custom color dialog used to entering a new color as a single RGB string |
af_chooseColor.LABEL_LAST_USED_COLOR |
Label and hover text for the last used color button. |
af_chooseColor.LABEL_RED |
The label for the input text field on the select custom color dialog used to entering a new Red color as an integer between 0 and 255. |
af_chooseColor.LABEL_GREEN |
The label for the input text field on the select custom color dialog used to entering a new Green color as an integer between 0 and 255. |
af_chooseColor.LABEL_BLUE |
The label for the input text field on the select custom color dialog used to entering a new Blue color as an integer between 0 and 255. |
af_chooseColor.MSG_RGB_INVALID |
The error text for when a user enters an invalid value for a color into the Red, Green, and Blue input boxes on the Select Custom Color dialog. The error text can contain {0} in it to be replaced with the invalid data entered in the Red, Green, Blue input field. |
af_chooseColor.MSG_HEX_INVALID |
The error text for when a user enters an invalid hexadecimal value for a color. The error text can contain {0} in it to be replaced with the invalid data entered in the Hex input field |
af_chooseColor.TIP_CURRENT_COLOR |
The hover text for the color swatch on the select custom color dialog. This is directly below the new color swatch. |
af_chooseColor.TIP_NEW_COLOR |
The hover text for the new color swatch on the select custom color dialog. This is directly above the color swatch. |
af_chooseColor.TIP_NO_COLOR |
The hover text for all color swatches that are not associated with a color. The swatch has an "x" through it. |
af_chooseColor.TIP_TRAN_NO_COLOR |
Transparent |
af_chooseColor.TITLE_CUSTOM_DLG |
The dialog title for the custom color dialog. |
Style Selectors |
Description |
Conditions |
af|chooseDate |
The selector on the root dom element of the component. |
af|chooseDate::ampm |
Style on the root element of the AM/PM radio buttons within chooseDate.
Pseudo classes |
Description |
disabled |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|chooseDate::ampm-content |
The appearance of the AM/PM radio buttons within chooseDate. For example, this can be set to a different font-size. |
af|chooseDate::ampm-content-input |
The appearance of an individual AM/PM radio button within chooseDate. Used mostly for alignment. |
af|chooseDate::ampm-item-text |
Style on the item text associated with the AM/PM radio buttons. |
af|chooseDate::choice-list |
Style on the root element of the dropdown month selector and the dropdown timezone selector.
Pseudo classes |
Description |
disabled |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|chooseDate::choice-list-content |
Styles the appearance of the dropdown month selector and the dropdown timezone selector. For example, this can be set to a different font size. |
af|chooseDate::choice-list-dropdown |
Styles the background of the dropdown icon. |
af|chooseDate::choice-list-dropdown-icon-style |
Styles the dropdown icon for the month selector and the timezone selector. The icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the dropdown-icon-style and define the override icon for the dropdown-icon. Includes .AFClickableImageAnchor:alias |
af|chooseDate::days-row |
Styles the appearance of the dates within the calendar grid. Individual day types (previous or next month, selected, regular) can override the properties defined here. For example, this can be set to a uniform font-size for all the days.
Pseudo classes |
Description |
first |
|
last |
|
|
af|chooseDate::decrement-cell |
Styles the decrement-cell of the inputNumberSpinbox internal child component used for changing the year. |
af|chooseDate::increment-cell |
Styles the increment-cell of the inputNumberSpinbox internal child component used for changing the year. |
af|chooseDate::month-year-row |
Styles the appearance of the row containing the Month and Year selectors above the calendar grid. For example, this can be used to set a background color or height. |
af|chooseDate::next-month-arrow |
Styles the next-month icon. You can put a background-image here. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|chooseDate::next-month-arrow-cell |
Styles the next-month icon cell. This cell is commonly used for gradient styles for buttons that have gradients. |
af|chooseDate::next-month-day |
Styles the appearance of the table cell for dates in the next month. For example, you can add background color or border to the cell.
Pseudo classes |
Description |
selected |
|
|
af|chooseDate::prev-month-arrow |
Styles the previous-month icon. You can put a background-image here. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|chooseDate::prev-month-arrow-cell |
Styles the previous-month icon cell. cell. This cell is commonly used for gradient styles for buttons that have gradients. |
af|chooseDate::prev-month-day |
Styles the appearance of the table cell for dates in the previous month. For example, you can add background color or border to the cell.
Pseudo classes |
Description |
selected |
|
|
af|chooseDate::regular-day |
Styles the appearance of the table cell for dates in the current month. For example, you can add background color or border to the cell.
Pseudo classes |
Description |
selected |
|
|
af|chooseDate::spinbox |
The root style for spinboxes within chooseDate (year, hours, minutes, seconds).
Pseudo classes |
Description |
disabled |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|chooseDate::spinbox-content |
The appearance of the spinboxes within chooseDate (year, hours, minutes, seconds). For example, this can be set to a different font-size. |
af|chooseDate::spinbox-incrementor-icon-style |
Uses background-image to set the increment image for the spinboxes within chooseDate (year, hours, minutes, seconds). If you want to use text instead of a background-image, you can use af|chooseDate::spinbox-incrementor-icon {content:"Text"}. |
af|chooseDate::spinbox-decrementor-icon-style |
Uses background-image to set the decrement image for the spinboxes within chooseDate (year, hours, minutes, seconds). If you want to use text instead of a background-image, you can use af|chooseDate::spinbox-decrementor-icon {content:"Text"}. |
af|chooseDate::time-selectors-row |
Styles the appearance of the row containing the Hour, Minute, Second time selectors. For example, this can be used to set a background color or height. |
af|chooseDate::timezone-selectors-row |
Styles the appearance of the row containing the Timezone dropdown selector. For example, this can be used to set a height. |
af|chooseDate::today |
Styles the appearance of the table cell for the current date (today). For example, you can add background color or border to the cell.
Pseudo classes |
Description |
selected |
|
|
af|chooseDate::week-header-cell |
The appearance of individual cells in the weekday header. For example, this can be set to have a different width or padding. |
af|chooseDate::week-header-row |
The appearance of the weekday headers of the calendar. For example, this can be set to a different font-size or background color. |
af|chooseDate::time-separator |
Styles the appearance of the time separator character ':' shown between the hours/minutes/seconds display. |
af|chooseDate::year-selector-cell |
Styles the cell that contains the spinbox that is used to select the year. |
Icon Selectors |
Description |
af|chooseDate::choice-list-dropdown-icon |
Icon hook for the dropdown arrow in the month selector and the timezone selector. For example, this can be set to a different icon. |
af|chooseDate::prev-month-arrow-icon |
The arrow for navigating to the previous month. Can be set to an image or a text string, e.g. "<". If setting to a text string, the background image in "af|chooseDate::prev-month-arrow" should be nulled out by setting "-tr-inhibit: background-image;". |
af|chooseDate::next-month-arrow-icon |
The arrow for navigating to the next month. Can be set to an image or a text string, e.g. ">". If setting to a text string, the background image in "af|chooseDate::prev-month-arrow" should be nulled out by setting "-tr-inhibit: background-image;". |
af|chooseDate::spinbox-incrementor-icon |
Overrides the default incrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds). |
af|chooseDate::spinbox-decrementor-icon |
Overrides the default decrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds). |
af|chooseDate::spinbox-incrementor-disabled-icon |
Overrides the default disabled incrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds). |
af|chooseDate::spinbox-decrementor-disabled-icon |
Overrides the default disabled decrementor icon for the spinboxes within chooseDate (year, hours, minutes, seconds). |
Resource Strings |
Description |
af_chooseDate.TIP_PREVIOUS_MONTH |
Hover text for the arrow used to navigate to the previous month. |
af_chooseDate.TIP_NEXT_MONTH |
Hover text for the arrow used to navigate to the next month. |
af_chooseDate.LABEL_SELECT_MONTH |
Label for the field used to select the month. |
af_chooseDate.LABEL_SELECT_YEAR |
Label for the field used to select the year. |
af_chooseDate.LABEL_SELECT_HOURS |
Label for the field used to select the hours. |
af_chooseDate.LABEL_SELECT_MINUTES |
Label for the field used to select the minutes. |
af_chooseDate.LABEL_SELECT_SECONDS |
Label for the field used to select the seconds. |
af_chooseDate.LABEL_SELECT_TIMEZONE |
Label for the field used to select the timezone. |
To style the table component, you will use both af|table and af|column skin selectors.
Style Selectors |
Description |
Conditions |
af|column |
This is the base selector for the component. |
af|column::column-header-cell |
Styles the column header cell. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
Pseudo classes |
Description |
focused |
styles when it has the current focus |
drag |
styles the bo when it is dragged during a drag and drop. |
|
af|column::column-header-cell-content |
Styles the content in a header cell.
Pseudo classes |
Description |
sorted |
Styles when the column has been sorted. Typically you would use this to define a padding-right (with :ltr) or padding-left (with :rtl) so that the content shifts when the data is sorted to reduce the chance that the sort indicator obscures the header content. |
|
af|column::column-header-table |
The table(s) used for the column headers. This selector can be used to provide a single gradient background for all table column headers. |
af|column::select-all-header |
Styles the column header cell used to do select all for a table with multiple row selection enabled. |
af|column::row-column-header-cell |
Styles the column header cell that is a row header as well. |
af|column::column-footer-cell |
Styles the column footer cell. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias. |
af|column::context |
Placed around the context facet content. A compound selector like "af|column::context af|contextInfo" can be used to control padding so that the icon doesn't overlap the column content |
af|column::row-header-cell |
Styles the row header cell that has current focus. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias.
Pseudo classes |
Description |
focused |
|
|
af|column::data-cell |
Styles a column's data cell that is not banded. To style a selected row's data cell, use "af|table::data-row:selected af|column::data-cell." To style a selected column's non-banded data cell, use "af|column::data-cell:selected". This includes .AFTableCellPadding:alias and .AFTableCellDataBorder:alias. To style a data cell as a subtotal cell, use "af|column::data-cell.AFTableCellSubtotal" in your skin definition and styleClass="AFTableCellSubtotal" in the tag (typically this value would come from an EL expression since not every cell would be a subtotal cell).
Pseudo classes |
Description |
selected |
|
inactive |
|
twinkle-on |
To style an active data's data cell to twinkle, use "af|column::data-cell:twinkle-on". |
|
af|column::banded-data-cell |
Styles a column's data cell that is banded. To style a selected row's banded data cell, use "af|table::data-row:selected af|column::banded-data-cell". This includes .AFTableCellPadding:alias and .AFTableCellDataBorder:alias.
Pseudo classes |
Description |
selected |
Styles a selected column's banded data cell. |
inactive |
|
twinkle-on |
Styles an active data's data cell to twinkle. |
|
af|column::detail-cell |
Styles a cell representing the state (disclosed/undisclosed) of the detail stamp for a given row. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias. |
af|column::detail-column-header-cell |
Styles a column header cell above the cells representing the state (disclosed/undisclosed) of the detail stamp. This includes .AFTableCellPadding:alias and .AFTableCellHeaderBorder:alias. |
af|column::dynamic-help-icon-style |
Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover to style when hovering over a disabled help icon. |
|
af|column::column-filter-cell |
Styles a column's filter cell. |
af|column::sort-ascending-icon-style |
Styles the icon used for the sort ascending indicator. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sort-ascending-icon-style and define the icon for the sort-ascending-icon. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|column::sort-descending-icon-style |
Styles the icon used for the sort descending indicator. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sort-descending-icon-style and define the override icon for the sort-descending-icon. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|column::sorted-ascending-icon-style |
Styles the icon used for the sorted ascending indicator. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sorted-ascending-icon-style and define the override icon for the sorted-ascending-icon. |
af|column::sorted-descending-icon-style |
Style of the icon used for the sorted descending indicator. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the sorted-descending-icon-style and define the override icon for the sorted-descending-icon. |
af|column::filter-clear-all-icon-style |
Styles the icon used for the clearing all filter fields in the table filter row. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the filter-clear-all-icon-style and define the icon for the filter-clear-all-icon. |
Icon Selectors |
Description |
af|column::dynamic-help-icon |
Icon that can be used instead of a background-image on af|column::dynamic-help-icon-style. By default this is null. If you use this af|column::dynamic-help-icon-style can then be used for background colors, etc. |
af|column::sort-ascending-icon |
Overrides the default sort ascending indicator. Icons can be text or img elements, e.g. af|column::sort-ascending-icon {content "X"} or af|column::sort-ascending-icon {content: url(...)}. Use this key instead of the sort-ascending-icon-style key if you do not want background-image. |
af|column::sort-descending-icon |
Overrides the default sort descending indicator. Use this key instead of the sort-descending-icon-style key if you do not want background-image. |
af|column::sorted-ascending-icon |
Overrides the default sorted ascending indicator. Use this key instead of the sorted-ascending-icon-style key if you do not want background-image. |
af|column::sorted-descending-icon |
Overrides the default sorted descending indicator. Use this key instead of the sorted-descending-icon-style key if you do not want background-image. |
af|column::filter-clear-all-icon |
Overrides the default icon for clearing all filter fields in the table filter row. Icons can be text or img elements, e.g. af|column::filter-clear-all-icon{content: "X"} or af|column::filter-clear-all-icon {content: url(...)}. Use this key instead of the filter-clear-all-icon-style key if you do not want background-image. |
Resource Strings |
Description |
af_column.TIP_SORT_ASCENDING |
Tooltip for the ascending sort icon on the column when sorting is enabled. |
af_column.TIP_SORT_DESCENDING |
Tooltip for the descending sort icon on the column when sorting is enabled. |
af_column.LABEL_DETAIL_STAMP |
Label to identify the existences of detail information on a row. This is only rendered in screenreader mode. |
af_column.LABEL_ROW_SELECT |
Label on row header check box used to select rows. This is a special column for supporting row selection. This check box and label are only available in screenreader mode. |
af_column.LABEL_COLUMN_SELECT |
Label on column header check box used to select columns. This check box and label are only available in screenreader mode. |
af_column.LABEL_SELECT_ALL |
Label on left most column header check box used to select all rows. This check box and label are only available in screenreader mode. |
Style Selectors |
Description |
Conditions |
af|commandButton |
Style on the root element of the af:commandButton component. Tip: If you skin this selector's background-image or color, you may also want to skin a different background-image or color for :hover, :active, :focus, :disabled, and :text-only. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
Pseudo classes |
Description |
disabled |
|
text-only |
Styles when there is no icon or the rendering is for screenReader mode. Tip: If you are setting the background-color of af|commandButton and it isn't taking effect, it may be because the component is in the text-only state, and there is a competing background color on af|commandButton:text-only selector. Therefore, set the background color on af|commandButton:text-only as well as af|commandButton. |
|
af|commandButton::icon-style |
Style on the button icon, if the icon attribute is set on the af:commandButton. |
af|commandButton::access-key |
Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style. |
Icon Selectors |
Description |
Style Selectors |
Description |
Conditions |
af|commandImageLink |
Style on the root element of the commandImageLink component. This style includes the .AFDefaultFont:alias style. commandImageLink supports further styling with the :hover, :disabled, and :text-only pseudo-classes.If you skin the background-image, you may also want to skin it for :hover.
Pseudo classes |
Description |
disabled |
|
text-only |
Styles when there is no icon or the rendering is for screenReader mode |
|
af|commandImageLink::access-key |
Style on the access key for the label of the af:commandImageLink component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|commandImageLink::text |
Style on the link text on the af:commandImageLink component. |
af|commandImageLink::image |
Style of the image used inside of the af:commandImageLink component.
Pseudo classes |
Description |
leading |
Styles when the icon position is leading |
trailing |
Styles when the icon position is trailing |
|
Style Selectors |
Description |
Conditions |
af|commandLink |
Style on the root element of the af:commandLink component. This style includes the .AFLinkForeground:alias and .AFDefaultFont:alias styles. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, :focus, as well as :disabled to style the component for different states. Please note that for links :focus pseudo-class does not work in IE 7. The visited pseudo-class does not apply to hyperlinks generated by a commandLink component because clicking on the link results in firing a command which may or may not result in a page navigation. On the other hand, the "visited" pseudo-class applies to hyperlinks (such as those generated by a goLink) that have already been visited by the user. This is a user agent capability and user agents may choose to return a visited link to the (unvisited) ":link" state after a certain period of time. The state :focus includes .AFActiveLinkBorder:alias, the state :active includes .AFActiveLinkForeground:alias, the state :active:link includes .AFActiveLinkForeground:alias, and the state :disabled:active includes .AFLinkForeground:alias When the commandLink has a context facet this style is placed around all content with the exception of the context facet content. See af|commandLink::context for more information. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|commandLink::context |
Placed around the context facet content. A compound selector like "af|commandLink::context af|contextInfo" can be used to control padding so that the icon doesn't overlap the commandLink text |
af|commandLink::access-key |
Styles the access key character for command links, default bold. This style includes .AFLinkAccessKeyStyle:alias |
A commandMenuItem can be a child of a menu or a menuBar.
When present on a menu, the commandMenuItem is identified by the style "af|commandMenuItem::menu-item". The commandMenuItem is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the commandMenuItem text, the "menu-item-accelerator" which contains the commandMenuItem accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open icon appears.
When present on a menuBar, the commandMenuItem is identified by the style "af|commandMenuItem::bar-item". The bar item is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute, and the "bar-item-text" which contains the commandMenuItem text.
Style Selectors |
Description |
Conditions |
af|commandMenuItem |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
disabled |
|
highlighted |
A commandMenuItem is not only highlighted on mouseover, but also when its selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes. |
depressed |
A commandMenuItem is not only highlighted on mouseover, but also when its selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes. |
|
af|commandMenuItem::bar-item |
Style applied to a commandMenuItem present on a menubar. The commandMenuItem is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute and the "bar-item-text" which contains the menu text. |
af|commandMenuItem::bar-item-icon-style |
Style applied to a bar item's icon container, which is the part of the bar item before its text. The icon is specified as an optional attribute on the commandMenuItem. |
af|commandMenuItem::bar-item-access-key |
Style on the access key character of a commandMenuItem, as shown on the menu bar. Includes the .AFFormAccessKeyStyle:alias. |
af|commandMenuItem::bar-item-text |
Style applied to the commandMenuItem's text, as shown on the menu bar. |
af|commandMenuItem::menu-item |
Style applied to a commandMenuItem present on a menu. The menu item is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the menu item text, the "menu-item-accelerator" which contains the menu item accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open indicator appears. |
af|commandMenuItem::menu-item-icon-style |
Style applied to a commandMenuItem's icon container, which is the part of the commandMenuItem before its text. The icon is specified as an optional attribute on the commandMenuItem. |
af|commandMenuItem::menu-item-access-key |
Style on the access key character of a commandMenuItem present on a menu. Includes the .AFFormAccessKeyStyle:alias. |
af|commandMenuItem::menu-item-text |
Style applied to the commandMenuItem's text, as shown inside a menu. For an antonym type commandMenuItem, the menu-item-antonym-text-default and menu-item-antonym-text-selected keys are used instead. |
af|commandMenuItem::menu-item-antonym-text-default |
Style applied to the text of an antonym type commandMenuItem (shown inside a menu) in its default state. |
af|commandMenuItem::menu-item-antonym-text-selected |
Style applied to the selected text of an antonym type commandMenuItem (shown inside a menu) in its selected state. |
af|commandMenuItem::menu-item-accelerator |
Style on the part of the commandMenuItem (shown inside a menu) containing its accelerator keyboard shortcut. |
af|commandMenuItem::menu-item-open-indicator |
Style on the part of the commandMenuItem (shown inside a menu) where an open icon would go. Because commandMenuItems do not open into nested submenus, this is an empty section at the end of the menu item. |
af|commandMenuItem::menu-item-radio-icon-style |
Style on the radio icon for a radio type command menu item shown inside a menu. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the menu-item-radio-icon-style and define the icon for the menu-item-radio-icon key. |
af|commandMenuItem::menu-item-check-icon-style |
Style on the check icon for a check type command menu item shown inside a menu. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the menu-item-check-icon-style and define the icon for the menu-item-check-icon key. |
Icon Selectors |
Description |
af|commandMenuItem::menu-item-radio-icon |
Overrides the default radio icon for a radio type command menu item shown inside a menu. Icons can be text or img elements, e.g. af|commandMenuItem::menu-item-radio-icon {content "X"} or af|commandMenuItem::menu-item-radio-icon {content: url(...)}. Use this key instead of the af|commandMenuItem::menu-item-radio-icon-style key if you do not want a background-image. |
af|commandMenuItem::menu-item-check-icon |
Overrides the default check icon for check type command menu items. Icons can be text or img elements, e.g. af|commandMenuItem::menu-item-check-icon {content "X"} or af|commandMenuItem::menu-item-check-icon {content: url(...)}. Use this key instead of the af|commandMenuItem::menu-item-check-icon-style key if you do not want a background-image. |
Style Selectors |
Description |
Conditions |
af|commandNavigationItem |
Style on the root element of the af:commandNavigationItem component. commandNavigationItem is not used by itself in general. The common use case would be using it inside of a breadCrumb or navigationPane. When commandNavigationItem is inside of a breadCrumbs or navigationPane, the commandNavigationItem styleClasses will be overridden with their specific keys respectively.
Pseudo classes |
Description |
selected |
|
disabled |
|
|
af|commandNavigationItem::icon-style |
Style for icon on NavigationItem, if specified. |
af|commandNavigationItem::access-key |
Style on the text of the NavigationItem. This includes the .AFButtonAccessKeyStyle:alias style. |
Resource Strings |
Description |
af_commandNavigationItem.TIP_SELECTED |
Tooltip that shows the current item is selected. The tooltip text can contain {0} in it to be replaced by the name of the selected item. |
af_commandNavigationItem.TIP_DISABLED |
Tooltip that shows the current item selected is disabled. The tooltip text can contain {0} in it to be replaced by the name of the disabled item. |
Style Selectors |
Description |
Conditions |
af|commandToolbarButton |
Style on the root element of the af:commandToolbarButton component. This style includes the .AFDefaultFont:alias style. Tip: You may also want to skin it for :hover.
Pseudo classes |
Description |
depressed |
|
selected |
|
disabled |
|
text-only |
Styles when there is no icon |
icon-only |
Styles when there is no text. |
twinkle-on |
|
action-disabled |
Styles when actionDelivery="none" |
|
af|commandToolbarButton::access-key |
Style on the access key for the label of the af:commandToolbarButton component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|commandToolbarButton::link |
Style on the button link on the af:commandToolbarButton component. |
af|commandToolbarButton::text |
Style on the button text on the af:commandToolbarButton component. |
af|commandToolbarButton::dropdown-cell |
Style on the cell containing the dropdown icon used for the popup button of the af:commandToolbarButton component. |
af|commandToolbarButton::dropdown-icon-style |
Style of the icon used for the popup button of the af:commandToolbarButton component. The icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the dropdown-icon-style and define the override icon for the dropdown-icon. |
Icon Selectors |
Description |
af|commandToolbarButton::dropdown-icon |
Overrides the default dropdown icon used for the popup button of the af:commandToolbarButton component. |
Resource Strings |
Description |
af_commandToolbarButton.TIP_ADD_LINK |
Tooltip for generic command toolbar button used to insert a link. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_REMOVE_LINK |
Tooltip for generic command toolbar button used to remove a link. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_CLEAR_STYLING |
Tooltip for generic command toolbar button used to clear stylings. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_UNDO |
Tooltip for generic command toolbar button used to undo last action. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_REDO |
Tooltip for generic command toolbar button used to redo the last action. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_BOLD |
Tooltip for generic command toolbar button used to bold the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_ITALIC |
Tooltip for generic command toolbar button used to italicize the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_UNDERLINE |
Tooltip for generic command toolbar button used to underline the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_SUBSCRIPT |
Tooltip for generic command toolbar button used to subscript the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_SUPERSCRIPT |
Tooltip for generic command toolbar button used to superscript the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_STRIKETHROUGH |
Tooltip for generic command toolbar button used to strike through the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_JUSTIFY_LEFT |
Tooltip for generic command toolbar button used to left justify the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_JUSTIFY_CENTER |
Tooltip for generic command toolbar button used to center justify the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_JUSTIFY_RIGHT |
Tooltip for generic command toolbar button used to right justify the currently selected text. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_JUSTIFY_FULL |
Tooltip for generic command toolbar button used to set the styles for the browser to spread out sentences so that both the first and the last characters in the paragraph line up (except for the last line of the paragraph). Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_LIST_UNORDERED |
Tooltip for generic command toolbar button used to insert an unordered list. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_LIST_ORDERED |
Tooltip for generic command toolbar button used to insert an ordered list. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_OUTDENT |
Tooltip for generic command toolbar button used to outdent a line. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_INDENT |
Tooltip for generic command toolbar button used to indent a line. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_MODE_RICH_TEXT |
Tooltip for generic command toolbar button used to put the rich text editor into rich mode. Currently this is only used in the rich text editor component. |
af_commandToolbarButton.TIP_MODE_CODE |
Tooltip for generic command toolbar button used to put the rich text editor into raw xhtml mode. Currently this is only used in the rich text editor component. |
Style Selectors |
Description |
Conditions |
af|contextInfo |
Style on the root element of the af:contextInfo component. You can use this in conjuction with other selectors to control the padding so that the icon doesn't overlap the content, for example "af|outputText af|contextInfo" or "af|column::context af|contextInfo". |
af|contextInfo::launch-icon-cell |
Can be used to skin a gradient for the launch icon. |
af|contextInfo::launch-icon-style |
used to control the launch icon. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
Icon Selectors |
Description |
af|contextInfo::launch-icon |
Can be used to override the af|contextInfo::launch-icon-style background image with an icon in high contrast mode. |
Resource Strings |
Description |
af_contextInfo.TIP_MORE |
Text rendered on the contextInfo launch icon when there's no shortDesc attribute provided. |
Style Selectors |
Description |
Conditions |
af|conveyorBelt |
Selector that renders on the root dom element of the component. |
af|conveyorBelt::start-overflow-indicator |
Style on the start overflow indicator when the conveyor belt is in horizontal orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|conveyorBelt::end-overflow-indicator |
Style on the end overflow indicator when the conveyor belt is in horizontal orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|conveyorBelt::top-overflow-indicator |
Style on the top overflow indicator when the conveyor belt is in vertical orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|conveyorBelt::bottom-overflow-indicator |
Style on the bottom overflow indicator when the conveyor belt is in vertical orientation. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
Icon Selectors |
Description |
af|conveyorBelt::start-overflow-icon |
Overrides the default start overflow indicator image. Icons can be text or img elements, e.g. af|conveyorBelt::start-overflow-icon {content "X"} or af|conveyorBelt::start-overflow-icon {content: url(...)}. Use this key instead of the start-overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the start-overflow-indicator key and defining the override icon in this key. |
af|conveyorBelt::end-overflow-icon |
Overrides the default end overflow indicator image. Icons can be text or img elements, e.g. af|conveyorBelt::end-overflow-icon {content "X"} or af|conveyorBelt::end-overflow-icon {content: url(...)}. Use this key instead of the end-overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the end-overflow-indicator key and defining the override icon in this key. |
af|conveyorBelt::top-overflow-icon |
Overrides the default top overflow indicator image. Icons can be text or img elements, e.g. af|conveyorBelt::top-overflow-icon {content "X"} or af|conveyorBelt::top-overflow-icon {content: url(...)}. Use this key instead of the top-overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the top-overflow-indicator key and defining the override icon in this key. |
af|conveyorBelt::bottom-overflow-icon |
Overrides the default bottom overflow indicator image. Icons can be text or img elements, e.g. af|conveyorBelt::bottom-overflow-icon {content "X"} or af|conveyorBelt::bottom-overflow-icon {content: url(...)}. Use this key instead of the bottom-overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the bottom-overflow-indicator key and defining the override icon in this key. |
Style Selectors |
Description |
Conditions |
af|decorativeBox |
Selector that renders on the root dom element of the component
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-top-facet-layout |
How the top facet should be rendered. If not specified, or "center", the top facet is placed in between the rounded corners. If "full", the top facet will extend to both left and right edges of the outside of the decorative box. |
-tr-center-icon |
The name of an icon alias placed on the decorative box style class with a theme to use for an image to be placed into the center of the decorative box. Used in the fusion skin for a horizontal gradient that can stretch. Example usage:
af|decorativeBox {
/* Use this icon with the default theme */
-tr-center-icon: AFDecorativeBoxCenterIcon;
}
af|decorativeBox[theme="dark"] {
/* Use this icon with the dark theme */
-tr-center-icon: AFDecorativeBoxCenterIcon;
}
.AFDecorativeBoxCenterIcon:alias {
content: url(/afr/images/icon.png);
}
Note that the double quotes around the theme name must be present for the -tr-*-icon properties to be found.
Valid: af|decorativeBox[theme="dark"] {}
Invalid: af|decorativeBox[theme=dark] {}
|
-tr-additional-center-icon |
The name of an icon alias placed on the decorative box style class with a theme to use for an image to be placed into the center of the decorative box. This is the same as the -tr-center-icon, but allows for a second icon to be placed. Used in the fusion skin for a top shadow gradient that sits above the horizontal gradient. See the -tr-center-icon for example code.
Note that the double quotes around the theme name must be present for the -tr-*-icon properties to be found.
Valid: af|decorativeBox[theme="dark"] {}
Invalid: af|decorativeBox[theme=dark] {}
|
-tr-bottom-icon |
The name of an icon alias placed on the decorative box style class with a theme to use for an image to be placed into the bottom of the decorative box. This has the same usage as the -tr-center-icon. Used in the fusion skin for a horizontal gradient. See the -tr-center-icon for example code.
Note that the double quotes around the theme name must be present for the -tr-*-icon properties to be found.
Valid: af|decorativeBox[theme="dark"] {}
Invalid: af|decorativeBox[theme=dark] {}
|
|
af|decorativeBox::top-start |
Selector for the top left (top right for RTL) DIV. The property "-tr-width" is supported to specify the width. The height is taken from the height of the top.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-width |
Specifies the width, e.g., "5px" |
|
Only used by fusion skins. |
af|decorativeBox::top |
Selector for the top container DIV that shows the decorative top image border. If the "top" facet is present, it will be contained with this element. The property "-tr-height" is supported to specify the height. If the "top" facet is present, the topHeight attribute is used instead of this property.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-height |
Specifies the height, e.g, "4px". If dimensionsFrom resolves to "children", percent units are not allowed. In a skin that uses css borders instead of image borders (Skyros), this property has no effect. |
|
af|decorativeBox::top-content |
The DIV that contains the top facet's content. |
af|decorativeBox::top-end |
Selector for the top right (top left for RTL) DIV. The property "-tr-width" is supported to specify the width.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-width |
Specifies the width, e.g., "5px". |
|
Only used by fusion skins. |
af|decorativeBox::start |
Selector for the left (right for RTL) DIV. The property "-tr-width" is supported to specify the width.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-width |
Specifies the width, e.g., "5px". |
|
Only used by fusion skins. |
af|decorativeBox::center |
This is the style for the content region of the box ("center" facet)
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
stretched |
when the decorativeBox is being displayed in a dimensionsFrom=parent mode |
|
af|decorativeBox::end |
Selector for the right (left for RTL) DIV. The property "-tr-width" is supported to specify the width.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-width |
Specifies the width, e.g., "5px". |
|
Only used by fusion skins. |
af|decorativeBox::frame |
Selector for the indented content in the center of the decorative box, where the borders are shown. The properties -tr-top-padding, -tr-bottom-padding, -tr-start-padding, and -tr-end-padding are supported to specify the amount of padding present inside the border.
Skin properties |
Description |
-tr-top-padding |
Specifies the top padding inside the border, e.g., "5px". |
-tr-bottom-padding |
Specifies the bottom padding inside the border, e.g., "5px". |
-tr-start-padding |
Specifies the start padding inside the border, e.g., "5px". |
-tr-end-padding |
Specifies the end padding inside the border, e.g., "5px". |
|
Only used by altaskyros skins. |
af|decorativeBox::bottom-start |
Selector for the bottom left (bottom right for RTL) DIV. The property "-tr-width" is supported to specify the width. The height is taken from the height of the bottom.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-width |
Specifies the width, e.g., "4px". |
|
Only used by fusion skins. |
af|decorativeBox::bottom |
Selector for the bottom container DIV that shows the decorative bottom image border. The property "-tr-height" is supported to specify the height.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-height |
Specifies the width, e.g., "5px". |
|
Only used by fusion skins. |
af|decorativeBox::bottom-end |
Selector for the bottom right (bottom left for RTL) DIV. The property "-tr-width" is supported to specify the width. The height is taken from the height of the bottom.
Pseudo classes |
Description |
flow |
when the decorativeBox is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-width |
Specifies the width, e.g., "4px". |
|
Only used by fusion skins. |
af|decorativeBox::center-icons |
Wrapper element used to house the extra icons that are placed into the center of the decorative box when -tr-center-icon or -tr-additional-center-icon are is use. |
.AFDecorativeBoxDarkTopShadowIcon:alias |
Used by dark themed boxes for the shadow at the top of the center facet. |
.AFDecorativeBoxDarkGradientIcon:alias |
Used by dark themed boxes to produce the gradient of the center and bottom of the decorativeBox. |
Style Selectors |
Description |
Conditions |
af|deck |
Selector that renders on the root dom element of the component. |
Style Selectors |
Description |
Conditions |
af|dialog |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
drag |
For e.g. "af|dialog:drag af|dialog::main{opacity:0.15;} @agent ie {af|dialog:drag af|dialog::main{filter:alpha(opacity:15);}}" changes the drag state of the dialog so that it is only 15% opaque. |
inactive |
For e.g. "af|dialog::inactive-background{background-color:#FFFFFF;} af|dialog:inactive af|dialog::main{opacity:0.5;} @agent ie {af|dialog:inactive af|dialog::main{filter:alpha(opacity:50);}" sets the background to white and lets it bleed into the dialog by setting its opacity to 50%. |
Skin properties |
Description |
-tr-open-animation-duration |
The root style, af|dialog, contains skinning property "-tr-open-animation-duration" that specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for opening the popup. This skin property is honored only if the animation is enabled in the system. |
-tr-animate |
The root style, af|dialog, contains skinning property "-tr-animate" that specifies whether animation is turn on or off for popup dialogs. Set a value of "true" to enable animation. Set "false" to turn off animation. This skin property is honored only if the animation is enabled in the system. |
-tr-default-content-width |
The root style, af|dialog, contains skinning property "-tr-default-content-width" that provides the default contentWidth if not provided when stretching is turned on, "stretchChildren=first". The default is 250 (in pixels). |
-tr-default-content-height |
The root style, af|dialog, contains skinning property "-tr-default-content-height" that provides the default contentHeight if not provided when stretching is turned on, "stretchChildren=first". The default is 250 (in pixels). |
|
af|dialog::resize-ghost |
The selector applied to the element temporarily created to animate a mouse drag resize. The element is a div with absolute positioning that floats above the dialog getting resized. The border, background color and opacity are attributes that a custom skin might want to adjust. |
af|dialog::main |
Selector for the main element of this dialog. This selector is used in conjunction with the pseudo-class :drag on the root element and af|dialog::main to achieve an drag look for the dialog. |
af|dialog::inactive-background |
Selector for displaying the background when the dialog is not the active window. This selector is used in conjunction with the pseudo-class :inactive on the root element and af|dialog::main to achieve an inactive look for the dialog. For e.g. "af|dialog::inactive-background{background-color:#FFFFFF;} af|dialog:inactive af|dialog::main{opacity:0.5;} @agent ie {af|dialog:inactive af|dialog::main{filter:alpha(opacity:50);}" sets the background to white and lets it bleed into the dialog by setting its opacity to 50%. |
af|dialog::header-start |
The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|dialog::header |
Styles the "header" element. This element surrounds the header text, icon and close regions.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: n-resize). |
|
af|dialog::header-end |
The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: ne-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|dialog::footer-start |
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: ne-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|dialog::footer |
The style for the center cell of the footer.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: s-resize). |
|
af|dialog::footer-end |
The style for the ending cell of the footer. Generally this is the decoration on the right side of the screen and can be used to create rounded edges.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: se-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|dialog::content-start |
The style for the starting of the content. This will be located directly below the af|dialog::header-start key, above the af|dialog::footer-start key and before the af|dialog::content key.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: se-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|dialog::content |
The style for the content region of the dialog. This is the area where the components children will be rendered. It is located directly below the af|dialog::header key, above the af|dialog::footer and after the af|dialog::content-start key.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to change attributes such as padding when resize mode is on. |
|
af|dialog::content-center |
The center of the dialog is marked with this style. It is contained in the af|dialog::content node. Padding and color can be adjusted with this style but overflow is managed programmatically. Use of this style is conditional on property values stretchChildren=first or resize=on. |
af|dialog::content-end |
The style for the ending of the content. This will be located directly below the af|dialog::header-end key, above the af|dialog::footer-end key and after the af|dialog::content key.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the dialog edges when in resize mode (i.e., cursor: e-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|dialog::resize-icon-region |
Styles the region around the resize icon in af|dialog::footer and aligned to end in LTR. It can be used to set paddings, margins around the resize icon. |
af|dialog::resize-icon-style |
The style for the resize icon located in the af|dialog::resize-icon-region. |
af|dialog::icon-region |
Styles the region around the window icon in af|dialog::header and aligned to start. It can be used to set paddings, margins around the title icon. |
af|dialog::title |
Styles the title of the dialog. |
af|dialog::help-link-container |
A style containing the "dynamic help" for the window. It will only be displayed if assigned a helpTopicId and will be positioned after the af|dialog::title and before the af|dialog::close-icon-style/af|dialog::pin-icon-style within af|dialog::header. |
af|dialog::dynamic-help-icon-style |
Style the dynamic help icon located within the help-link-container. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover to take precedence over :hover alone. |
|
af|dialog::close-icon-region |
Styles the region around af|dialog::close-icon-style in af|dialog::header and aligned to end. It can be used to set paddings, margins around the title icon. |
af|dialog::close-icon-style |
Style on the dialog's close icon. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the close-icon-style and define the icon for the close-icon key. |
af|dialog::pin-icon-region |
Styles the region around af|dialog::pin-icon-style in af|dialog::header and aligned to end. It can be used to set paddings, margins around the title icon. |
af|dialog::pin-icon-style |
Style on the dialog's pin icon. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the pin-icon-style and define the icon for the pin-icon key. |
af|dialog::footer-button |
Styles the root element of the af:commandButton in the footer of the dialog. For example, styles the footer buttons in the dialog. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
Pseudo classes |
Description |
disabled |
|
text-only |
Styles when there is no icon or the rendering is for screenReader mode |
|
af|dialog::footer-button-affirmative |
Styles the root element of the "Yes" and "OK" buttons in the footer of the dialog. These buttons are dependent on the dialog components type property. Please note that for commandButtons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled af:commandButtons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
Pseudo classes |
Description |
disabled |
|
text-only |
Styles when there is no icon. |
|
af|dialog::footer-button-cancel |
Styles the root element of the "Cancel" button in the footer of the dialog. This button is dependent on the dialog components type property. Please note that for commandButtons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled af:commandButtons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
Pseudo classes |
Description |
disabled |
|
text-only |
Styles when there is no icon. |
|
af|dialog::footer-button-no |
Styles the root element of the "No" button in the footer of the dialog. This button is dependent on the dialog components type property. Please note that for commandButtons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled af:commandButtons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
Pseudo classes |
Description |
disabled |
|
text-only |
Styles when there is no icon. |
|
af|dialog::footer-button-icon-style |
Styles the footer button icon, if there is an icon on the button. |
af|dialog::footer-button-access-key |
Styles the access key text of the footer button. This includes the .AFButtonAccessKeyStyle:alias style. |
Icon Selectors |
Description |
af|dialog::close-icon |
Overrides the default close icon. Icons can be text or img elements, e.g. af|dialog::close-icon {content "X"} or af|dialog::close-icon {content: url(...)}. Use this key instead of the close-icon-style key if you do not want a background-image. |
af|dialog::pin-icon |
Overrides the default pin icon. Icons can be text or img elements, e.g. af|dialog::pin-icon {content "X"} or af|dialog::pin-icon {content: url(...)}. Use this key instead of the pin-icon-style key if you do not want a background-image. |
af|dialog::dynamic-help-icon |
Icon that can be used instead of a background-image on af|dialog::dynamic-help-icon-style. Located in the af|dialog::help-link-container and only enabled if a helpTopicId is provided. |
af|dialog::resize-icon |
Overrides the default resize icon. Icons can be text or img elements, e.g. af|dialog::resize-icon {content ">"} or af|dialog::resize-icon {content: url(...)}. Use this key instead of the resize-icon-style key if you do not want a background-image. |
Resource Strings |
Description |
af_dialog.LABEL_OK |
Label for the "ok" button attached to the dialog. This is only available when the dialog has been configured with an "ok" button. |
af_dialog.LABEL_CANCEL |
Label for the "cancel" button attached to the dialog. This is only available when the dialog has been configured with the "cancel" button. |
af_dialog.LABEL_YES |
Label for the "yes" button attached to the dialog. This is only available when the dialog has been configured with the "yes" button. |
af_dialog.LABEL_NO |
Label for the "no" button attached to the dialog. This is only available when the dialog has been configured with the "no" button. |
Style Selectors |
Description |
Conditions |
af|document |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
maximized |
Selector that renders on the root dom element of the component when a maximized="true" attribute is specified on the component. |
|
af|document::skip-link |
Selector on the skip link that is rendered by the af:document component when an af:skipLinkTarget tag is present. |
af|document::splash-screen |
Selector on the root element of the document splash screen. The splash screen is displayed on the first page access for any new session. This selector is typically used to provide a background color for the page while the splash screen is displayed. |
af|document::splash-screen-content |
Selector on the content element of the document splash screen. The content contains two sub-pieces: an icon and a text message (e.g. "Loading..."). The selector is typically used to display a border/background for these contents. |
af|document::splash-screen-message |
Selector on the message element of the document splash screen. This selector is typically used to specify a font for the splash screen text message (e.g. "Loading..."). |
Icon Selectors |
Description |
af|document::splash-screen-icon |
Icon displayed within the splash screen contents. |
Resource Strings |
Description |
af_document.LABEL_SKIP_LINK_TEXT |
Text written out as part of link in screenreader mode to skip to the content on the page. |
af_document.LABEL_SPLASH_SCREEN |
The label for the splash screen that is displayed the first time a page is shown. |
af_document.MSG_FAILED_CONNECTION |
The error text brought up in an alert box when a connection to the server fails. |
af_document.MSG_SCREEN_READER_HINT |
A message that lets screen reader users know that the page is rendered using screen reader optimized contents. This message is rendered such that it is read by screen readers, but not visible to non-screen reader users. |
The form component has no public skinning keys.
Style Selectors |
Description |
Conditions |
af|goButton |
Style on the root element of the af:goButton component. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, :focus, and :disabled. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
Pseudo classes |
Description |
disabled |
|
|
af|goButton::icon-style |
Style on the button icon, if the icon attribute is set on the af:goButton. |
af|goButton::access-key |
Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style. |
Icon Selectors |
Description |
Style Selectors |
Description |
Conditions |
af|goImageLink |
Style on the root element of the goImageLink component. This style includes the .AFDefaultFont:alias style. Tip: If you skin the background-image, you may also want to skin it for :hover.
Pseudo classes |
Description |
disabled |
|
text-only |
Styles when there is no icon or the rendering is for screenReader mode |
|
af|goImageLink::access-key |
Style on the access key for the label of the af:goImageLink component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|goImageLink::text |
Style on the link text on the af:goImageLink component. |
af|goImageLink::image |
Style of the image used inside of the af:goImageLink component.
Pseudo classes |
Description |
leading |
Styles when the icon position is leading |
trailing |
Styles when the icon position is trailing |
|
Style Selectors |
Description |
Conditions |
af|goLink |
Style on the root element of the af:goLink component. Please note that for links :focus pseudo-class does not work in IE 7. This style includes the .AFLinkForeground:alias and .AFDefaultFont:alias styles. The state :visited includes .AFVisitedLinkForeground:alias, the state :focus includes .AFActiveLinkBorder:alias, the state :visited:focus includes .AFVisitedLinkBorder:alias, the state :active includes .AFActiveLinkForeground:alias, the state :active:link includes .AFActiveLinkForeground:alias, and the state :disabled:active includes .AFLinkForeground:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :focus.
Pseudo classes |
Description |
visited |
|
disabled |
|
|
af|goLink::access-key |
Styles the access key character for go links, default bold. This style includes .AFLinkAccessKeyStyle:alias |
A goMenuItem can be a child of a menu or a menuBar.
When present on a menu, the goMenuItem is identified by the style "af|goMenuItem::menu-item". Like commandMenuItem and submenus, the goMenuItem is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the goMenuItem text, the "menu-item-accelerator" which contains the goMenuItem accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open icon appears.
When present on a menuBar, the goMenuItem is identified by the style "af|goMenuItem::bar-item". The bar item is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute, and the "bar-item-text" which contains the goMenuItem text.
Style Selectors |
Description |
Conditions |
af|goMenuItem |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
disabled |
|
highlighted |
A goMenuItem is not only highlighted on mouseover, but also when its selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes. |
depressed |
A goMenuItem is not only highlighted on mouseover, but also when its selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover and :active style classes. |
|
af|goMenuItem::bar-item |
Style applied to a goMenuItem present on a menubar. The goMenuItem is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute and the "bar-item-text" which contains the menu text. |
af|goMenuItem::bar-item-icon-style |
Style applied to a bar item's icon container, which is the part of the bar item before its text. The icon is specified as an optional attribute on the goMenuItem. |
af|goMenuItem::bar-item-access-key |
Style on the access key character of a goMenuItem, as shown on the menu bar. Includes the .AFFormAccessKeyStyle:alias. |
af|goMenuItem::bar-item-text |
Style applied to the goMenuItem's text, as shown on the menu bar. |
af|goMenuItem::menu-item |
Style applied to a goMenuItem present on a menu. The menu item is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the menu item text, the "menu-item-accelerator" which contains the menu item accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open indicator appears. |
af|goMenuItem::menu-item-icon-style |
Style applied to a goMenuItem's icon container, which is the part of the goMenuItem before its text. The icon is specified as an optional attribute on the goMenuItem. |
af|goMenuItem::menu-item-access-key |
Style on the access key character of a goMenuItem present on a menu. Includes the .AFFormAccessKeyStyle:alias. |
af|goMenuItem::menu-item-text |
Style applied to the goMenuItem's text, as shown inside a menu. |
af|goMenuItem::menu-item-accelerator |
Style on the part of the goMenuItem (shown inside a menu) containing its accelerator keyboard shortcut. |
af|goMenuItem::menu-item-open-indicator |
Style on the part of the goMenuItem (shown inside a menu) where an open icon would go. Because goMenuItems do not open into nested submenus, this is an empty section at the end of the menu item. |
not generate any elements on the page and thus is not skinnable.
Style Selectors |
Description |
Conditions |
af|image |
Pseudo classes |
Description |
twinkle-on |
|
|
Style Selectors |
Description |
Conditions |
af|inlineFrame |
Style for the root element of the inlineFrame component. Typically no styles would be defined with this selector but for backward-compatibility purposes, this can be used for defining a background-image that will be displayed as a loading indicator when the iframe is not being stretched by an ancestor using af|inlineFrame:busy. See af|inlineFrame::status-icon and af|inlineFrame::status-icon-style for the case when it is being stretched by an ancestor. It is suggested to use the .AFBackgroundImageStatus:alias rule ref in this selector when the busy pseudo-class is used.
Pseudo classes |
Description |
busy |
|
flow |
|
|
af|inlineFrame::status-icon-style |
This style is for the element that contains the status-icon. This typically defines a background-image to an alpha-transparent image that lets a binary-transparent animated status-icon image blend well on any background when these 2 images are stacked. Also typically a width and height are defined for the dimensions of this container. It is suggested to use the .AFStatusIconStyle:alias rule ref in this selector. For backward-compatibility purposes, this selector is only used on inlineFrames that are stretched by their ancestor. |
Icon Selectors |
Description |
af|inlineFrame::status-icon |
This icon gives a graphical representation that the inlineFrame content is loading. This typically defines a content URL for an animated image, the width of this image, and the height of this image. It is suggested to use the .AFStatusIcon:alias rule ref in this selector. For backward-compatibility purposes, this selector is only used on inlineFrames that are stretched by their ancestor. |
Resource Strings |
Description |
af_inlineFrame.LABEL_FETCHING |
Label shown to the user when the inlineFrame is busy fetching items from the server. |
Style Selectors |
Description |
Conditions |
af|inputColor |
Pseudo classes |
Description |
disabled |
|
read-only |
For example, you can style the content when the component is readOnly by using this selector: "af|inputColor:read-only::content" |
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
compact |
Used to style the compact look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
|
af|inputColor::access-key |
Style on the access key character for inputColor. Includes .AFFormAccessKeyStyle:alias |
af|inputColor::content |
Style on the content of the component. You can set the width of the content piece and border colors. |
af|inputColor::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over just :hover in disabled state. |
|
af|inputColor::input-chooser-wrapper |
Style the parent container of all the child elements. Used for adding an error border style. |
af|inputColor::launch-icon-style |
Style the clickable icon of the component. Tip: If you skin the background-image, you may also want to skin it for :hover. |
Icon Selectors |
Description |
af|inputColor::launch-icon |
The button icon which is used to launch the secondary color picker dialog. Note: This af|selectInputColor's color swatch is now used to launch the secondary dialog on most browsers. The af|selectInputColor::launch-icon icon is only displayed on browsers which do not display the color swatch, such as Netscape 4.x. |
af|inputColor::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputColor::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputColor::dynamic-help-icon-style. By default this is null. If you use this af|inputColor::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_inputColor.TIP_CLICK_TO_LAUNCH_POPUP_SELECTOR |
Tooltip that displays on the launch icon. |
Style Selectors |
Description |
Conditions |
af|inputComboboxListOfValues |
Style on the root element of the inputComboboxListOfValues component.
Pseudo classes |
Description |
disabled |
For example, you can style the label when the component is disabled by using this selector: "af|inputComboboxListOfValues:disabled::label" |
edit-mode-select |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
Skin properties |
Description |
-tr-dropdown-number-of-rows |
The property used to indicate how many rows to be displayed in the drop down list. |
-tr-dropdown-row-height |
The property used to determine the row height of each item in the drop down list in pixels. |
-tr-stretch-dropdown-table |
Determines whether the table in the the dropdown should be stretched to the content of columns or limit the width to the width of input field. |
-tr-stretch-search-dialog |
Determines whether the resizing of search and select dialog needs to be enabled. |
-tr-dialog-number-of-rows |
The property used to indicate how many rows to be displayed in the viewport of search and select dialog results table. |
|
af|inputComboboxListOfValues::access-key |
Style on the access key for the label of the af:inputComboboxListOfValues component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|inputComboboxListOfValues::container |
Style on the container of the af:inputComboboxListOfValues component, which basically contains inputText and the dropdown icon. |
af|inputComboboxListOfValues::content |
Style on the content of the af:inputComboboxListOfValues component. You can set the width of the content piece that will be used when the columns attribute on af:inputComboboxListOfValues is not set. |
af|inputComboboxListOfValues::context-content |
Style that goes around both the context facet and the content. Can be used to control the content padding when the context facet is set, For example:af|inputComboboxListOfValues::context-content af|inputComboboxListOfValues::content{padding-left:7px;} |
af|inputComboboxListOfValues::dialog |
Selector applied on the root element of the search dialog of inputComboboxListOfValues component |
af|inputComboboxListOfValues::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|inputComboboxListOfValues::label |
Style on the label of the af:inputComboboxListOfValues component. This includes .AFLabel:alias style selector. |
af|inputComboboxListOfValues::search |
Overrides the Search... link in the drop down of the inputComboboxListOfValues component. |
af|inputComboboxListOfValues::separator |
Overrides the separator of the inputComboboxListOfValues component. |
af|inputComboboxListOfValues::dropdown-cell |
Overrides the default gradient background for the drop down icon of the inputComboboxListOfValues component. |
af|inputComboboxListOfValues::dropdown-icon-style |
Overrides the default drop down icon of the inputComboboxListOfValues component. Includes .AFClickableImageAnchor:alias
Pseudo classes |
Description |
disabled |
|
click-to-edit |
|
|
af|inputComboboxListOfValues::popup-create-icon-style |
Overrides the default create icon of CommandToolbarButton in LOV. Includes .AFClickableImageAnchor:alias. If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|inputComboboxListOfValues::node-container |
Class applied to the container of a treeTable node. |
Icon Selectors |
Description |
af|inputComboboxListOfValues::dropdown-icon |
The icon used to launch the drop down list of the inputComboboxListOfValues component. |
af|inputComboboxListOfValues::dropdown-disabled-icon |
Overrides the default disabled dropdown icon. |
af|inputComboboxListOfValues::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputComboboxListOfValues::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputComboboxListOfValues::dynamic-help-icon-style. By default this is null. If you use this af|inputComboboxListOfValues::dynamic-help-icon-style can then be used for background colors, etc. |
af|inputComboboxListOfValues::popup-create-icon |
Icon that can be used instead of a background-image on af|inputComboboxListOfValues::popup-create-icon-style. By default this is null. |
Resource Strings |
Description |
af_inputComboboxListOfValues.LABEL_SEARCH |
The text used in the popup for use with transient search link added to the popup. |
af_inputComboboxListOfValues.TIP_CREATE |
The text used as the tooltip for the create commandToolbarButton created inside the search and select dialog |
Style Selectors |
Description |
Conditions |
af|inputDate |
Pseudo classes |
Description |
disabled |
For example, you can style the content when the component is disabled by using this selector: "af|inputDate:disabled::content" |
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
|
af|inputDate::access-key |
Style on the access key character for inputDate. Includes .AFFormAccessKeyStyle:alias |
af|inputDate::content |
Style on the content of the component. You can set the width of the content piece and border colors. |
af|inputDate::label |
Style on the label of the af:inputDate component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|inputDate::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|inputDate::timezone |
Style on the timezone that appears beside the input field. You can hide the entire timezone string by setting "display:none". |
af|inputDate::launch-icon-style |
Style of the clickable launch icon. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the launch-icon-style and define the icon for the launch-icon key. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
For example, you can style the icon when the component is disabled by using this selector: "af|inputDate::launch-icon-style:disabled". |
click-to-edit |
|
|
Icon Selectors |
Description |
af|inputDate::launch-icon |
The button icon which is used to launch the secondary date picker dialog. For example, you can replace the glyph with a text icon. By default, the ::launch-icon-style is set with the background-image and this key is not set. |
af|inputDate::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputDate::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputDate::dynamic-help-icon-style. By default this is null. If you use this af|inputDate::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_inputDate.TIP_TITLE_SELECT_DATE |
The tooltip text for the popup selector of the inputDate component when configured for date only mode. This is also used as the title for the popup that is generated in response to clicking the selector. This popup hosts the chooseDate component. |
af_inputDate.TIP_TITLE_SELECT_DATE_AND_TIME |
The tooltip text for the popup selector of the inputDate component when configured for date and time mode. This is also used as the title for the popup that is generated in response to clicking the selector. This popup hosts the chooseDate component. |
af_inputDate.TIP_CLICK_TO_LAUNCH_POPUP_SELECTOR |
A fallback tooltip for the glyph next to the inputDate, when the code is unable to determine the type of the converter. |
Style Selectors |
Description |
Conditions |
af|inputFile |
Style on the root element of the af:inputFile component.
Pseudo classes |
Description |
disabled |
|
update |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
|
af|inputFile::access-key |
Style on the access key for the label of the af:inputFile component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|inputFile::content |
Style on the content of the af:inputFile component. |
af|inputFile::multiple-content |
Style on the content of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-content |
Style on the content of the upload area of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-content-container |
Style on the content container of the upload area of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-pane |
Style on the upload pane of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-filelist |
Style on the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-dropzone |
Style on the drop zone of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-drag |
Style on the drag color of the drop zone of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-filename |
Style on the filenames in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-filesize |
Style on the file sizes in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progress |
Style on the upload progress bar area in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progress-done |
Style on the upload progress done text in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progress-failed |
Style on the upload progress failed text in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-action |
Style on the upload action area (cancel, retry and delete) in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progressbar-determinate |
Style on the determinate upload progress bar in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progressbar-determinate-start-label |
Style on the determinate upload progress bar start label in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-progressbar-determinate-end-label |
Style on the determinate upload progress bar end label in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::multiple-upload-toolbar |
Style on the upload toolbar (which contains the Upload/Stop Uploading button) of the af:inputFile component in multiple file mode. |
af|inputFile::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|inputFile::label |
Style on the label of the af:inputFile component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|inputFile::multiple-upload-cancel-button |
Icon for the upload cancel button of the af:inputFile component in multiple file mode.
Pseudo classes |
Description |
disabled |
|
hover |
|
active |
|
|
af|inputFile::multiple-upload-retry-button |
Icon for the upload retry button of the af:inputFile component in multiple file mode.
Pseudo classes |
Description |
disabled |
|
hover |
|
active |
|
|
af|inputFile::multiple-upload-delete-button |
Icon for the upload delete button of the af:inputFile component in multiple file mode.
Pseudo classes |
Description |
disabled |
|
hover |
|
active |
|
|
Icon Selectors |
Description |
af|inputFile::multiple-upload-progressbar-indeterminate-icon |
Icon for the indeterminate upload progress bar in the upload file list of the af:inputFile component in multiple file mode. |
af|inputFile::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputFile::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputFile::dynamic-help-icon-style. By default this is null. If you use this af|inputFile::dynamic-help-icon-style can then be used for background colors, etc. |
af|inputFile::multiple-upload-droparea-icon |
Icon for the drop area of the af:inputFile component in multiple file mode.
Pseudo classes |
Description |
hover |
|
|
Resource Strings |
Description |
af_inputFile.LABEL_UPDATE_BUTTON |
Label for the button to launch the update dialog for file upload. |
af_inputFile.LABEL_UPDATE_DIALOG_TITLE |
The text for the dialog title on the file upload update dialog. |
af_inputFile.LABEL_UPLOAD_BUTTON |
Label for the button to start uploading files in multiple file mode. |
af_inputFile.LABEL_STOP_BUTTON |
Label for the button to stop uploading files in multiple file mode. |
af_inputFile.LABEL_FILE_CANCEL_BUTTON |
Label for the button to cancel uploading a file in multiple file mode. |
af_inputFile.LABEL_FILE_RETRY_BUTTON |
Label for the button to retry uploading a file in multiple file mode. |
af_inputFile.LABEL_FILE_DONE_TEXT |
The text for indicating when a file has completed uploading in multiple file mode. |
af_inputFile.LABEL_FILE_FAILED_TEXT |
The text for indicating when a file has failed uploading in multiple file mode. |
af_inputFile.TEXT_FILE_SIZE_GB |
Text for gigabytes in the file size. |
af_inputFile.TEXT_FILE_SIZE_MB |
Text for megabytes in the file size. |
af_inputFile.TEXT_FILE_SIZE_KB |
Text for kilobytes in the file size. |
af_inputFile.TEXT_FILE_SIZE_B |
Text for bytes in the file size. |
af_inputFile.MSG_SELECTED_FILE_TOO_LARGE_ERROR |
Summary error text returned when selected file is too large. |
af_inputFile.MSG_SELECTED_FILE_TOO_LARGE_ERROR_DETAIL |
Detailed error text returned when selected file is too large. |
af_inputFile.MSG_UPLOAD_ERROR |
Summary error text used to generate a faces message on a failed file upload. |
af_inputFile.MSG_UPLOAD_ERROR_DETAIL |
Detailed error text used to generate a faces message on a failed file upload. |
af_inputFile.MSG_UPLOAD_MAXIMUM_FILES_ERROR |
Summary error text returned when there are too many files in multiple file mode. |
af_inputFile.MSG_UPLOAD_MAXIMUM_FILES_ERROR_DETAIL |
Detailed error text returned when there are too many files in multiple file mode. |
af_inputFile.MSG_UPLOAD_QUEUED_FILES_ERROR |
Summary error text returned when there are files in the upload file list which have not been uploaded yet and the user tries to leave the page. |
af_inputFile.MSG_UPLOAD_QUEUED_FILES_ERROR_DETAIL |
Detailed error text returned when there are files in the upload file list which have not been uploaded yet and the user tries to leave the page. |
af_inputFile.MSG_UPLOAD_FAILED_FILES_ERROR |
Summary error text returned when there are files which failed to upload in multiple file mode. |
af_inputFile.MSG_UPLOAD_FAILED_FILES_ERROR_DETAIL |
Detailed error text returned when there are files which failed to upload in multiple file mode. |
af_inputFile.MSG_UPLOAD_DUPLICATE_FILENAME_ERROR |
Summary error text returned when there is a file in the upload file list with the same name. |
af_inputFile.MSG_UPLOAD_DUPLICATE_FILENAME_ERROR_DETAIL |
Detailed error text returned when there is a file in the upload file list with the same name. |
af_inputFile.MSG_UPLOAD_MAXIMUM_FILE_SIZE_ERROR |
Summary error text returned when the file added to the file list exceeds the configured maximum allowed file size. |
af_inputFile.MSG_UPLOAD_MAXIMUM_FILE_SIZE_ERROR_DETAIL |
Detailed error text returned when the file added to the file list exceeds the configured maximum allowed file size. |
af_inputFile.MSG_UPLOAD_MAXIMUM_DISKSPACE_ERROR |
Summary error text returned when the combined size of all the files in the file list exceeds the configured maximum allowed size. |
af_inputFile.MSG_UPLOAD_MAXIMUM_DISKSPACE_ERROR_DETAIL |
Detailed error text returned when the combined size of all the files in the file list exceeds the configured maximum allowed size. |
Style Selectors |
Description |
Conditions |
af|inputListOfValues |
Style on the root element of the af:inputListOfValues component.
Pseudo classes |
Description |
disabled |
For example, you can style the label when the component is disabled by using this selector: "af|inputListOfValues:disabled::label" |
edit-mode-select |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
Skin properties |
Description |
-tr-stretch-search-dialog |
Determines whether the resizing of search and select dialog needs to be enabled. |
-tr-dialog-number-of-rows |
The property used to indicate how many rows to be displayed in the viewport of search and select dialog results table. |
|
af|inputListOfValues::access-key |
Style on the access key for the label of the af:inputListOfValues component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|inputListOfValues::content |
Style on the content of the af:inputListOfValues component. You can set the width of the content piece that will be used when the columns attribute on af:inputListOfValues is not set. |
af|inputListOfValues::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|inputListOfValues::label |
Style on the label of the af:inputListOfValues component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|inputListOfValues::search-icon-style |
Overrides the default search icon of the inputListOfValues component. Includes .AFClickableImageAnchor:alias
Pseudo classes |
Description |
click-to-edit |
|
|
af|inputListOfValues::popup-create-icon-style |
Overrides the default create icon of CommandToolbatButton in LOV. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|inputListOfValues::popup-icon-container |
Used to provide additional style control to the search popup icons. For example, if separate gradient button backgrounds are desired. |
af|inputListOfValues::dialog |
Selector applied on the root element of the search dialog of inputListOfValues component |
Icon Selectors |
Description |
af|inputListOfValues::search-icon |
Search icon used to launch the search and select dialog of the inputListOfValues component. |
af|inputListOfValues::search-disabled-icon |
Overrides the default disabled search icon. |
af|inputListOfValues::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputListOfValues::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputListOfValues::dynamic-help-icon-style. By default this is null. If you use this af|inputListOfValues::dynamic-help-icon-style can then be used for background colors, etc. |
af|inputListOfValues::popup-create-icon |
Icon that can be used instead of a background-image on af|inputListOfValues::popup-create-icon-style. By default this is null. |
Resource Strings |
Description |
af_inputListOfValues.TIP_SEARCH |
The text used as the tooltip for the search icon used to launch the search and select dialog when label and searchDesc are null. |
af_inputListOfValues.TIP_SEARCH_LABEL |
The text used as the tooltip for the search icon used to launch the search and select dialog when searchDesc is null and label is not null. |
af_inputListOfValues.TIP_CREATE |
The text used as the tooltip for the create commandToolbarButton created inside the search and select dialog |
See also the selectors for af:inputRangeSlider. Most likely when you skin the af:inputNumberSlider component you'll want to skin the af:inputRangeSlider component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|inputNumberSlider::label, af|inputRangeSlider::label {background-color: silver}.
Style Selectors |
Description |
Conditions |
af|inputNumberSlider |
Pseudo classes |
Description |
disabled |
|
printable |
|
read-only |
For example, you can style the content when the component is readOnly by using this selector: "af|inputNumberSlider:read-only::content" |
playable |
Used to style the slider when animation is enabled |
playing |
Used to style the slider when animation is playing |
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|inputNumberSlider::access-key |
Style on the access key for the label of the af:inputNumberSlider component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|inputNumberSlider::content |
Style on the content of the component. Common properties are height and border colors.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|inputNumberSlider::label |
Style on the label of the af:inputNumberSlider component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|inputNumberSlider::plus-icon-style |
Uses background-image to set the increment image (+). If you want to use text instead of a background-image, you can use af|inputNumberSlider::plus-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::minus-icon-style |
Uses background-image to set the decrement image (-). If you want to use text instead of a background-image, you can use af|inputNumberSlider::minus-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::play-icon-style |
Uses background-image to set the play button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::play-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::pause-icon-style |
Uses background-image to set the pause button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::pause-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::bar |
Styles the bar size of the slider. |
af|inputNumberSlider::bar-outer-border |
Styles the outer border. This combined with the af|inputNumberSlider::bar-inner-border gives the bar area a sunken effect |
af|inputNumberSlider::bar-inner-border |
Styles the inner border. This combined with the af|inputNumberSlider::bar-outer-border gives the bar area a sunken effect |
af|inputNumberSlider::thumb-icon-style |
Uses background-image to show the currently selected value in the slider. If you want to use text instead of a background-image, you can use af|inputNumberSlider::thumb-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::thumb-value-line |
Styles the line drawn from the thumb to the displayed value of the current thumb position.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::thumb-value |
Styles the value of the current thumb position.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::ticks |
Styles the basic tick marks for the slider. This is used to set the positioning of the ticks.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::major-tick |
Styles the major tick marks for the slider. This tick is normally longer than the minor ticks marks. The major tick marks position are defined by the majorIncrement attribute of the component.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::minor-tick |
Styles the minor tick marks for the slider. The minor tick marks position are defined by the minorIncrement attribute on the component. If this attribute is not defined these ticks are not rendered.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::zero-tick |
Styles the zero tick marks for the slider. This is only rendered if the slider has a range that crosses the zero point.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::tick-value |
Styles the value for major tick marks for the slider.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputNumberSlider::tick-value-zero |
Styles the value of the zero tick mark for the slider. This is only rendered if the slider has a range that crosses the zero point.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
Icon Selectors |
Description |
af|inputNumberSlider::plus-icon |
Overrides the default plus icon. |
af|inputNumberSlider::minus-icon |
Overrides the default minus icon. |
af|inputNumberSlider::thumb-icon |
Overrides the default thumb icon. |
af|inputNumberSlider::play-icon |
Overrides the default play icon. |
af|inputNumberSlider::pause-icon |
Overrides the default pause icon. |
af|inputNumberSlider::plus-disabled-icon |
Overrides the default disabled plus icon. |
af|inputNumberSlider::play-disabled-icon |
Overrides the default disabled play icon. |
af|inputNumberSlider::pause-disabled-icon |
Overrides the default disabled pause icon. |
af|inputNumberSlider::minus-disabled-icon |
Overrides the default disabled minus icon. |
af|inputNumberSlider::thumb-disabled-icon |
Overrides the default disabled thumb icon. |
af|inputNumberSlider::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputNumberSlider::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputNumberSlider::dynamic-help-icon-style. By default this is null. If you use this af|inputNumberSlider::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_inputNumberSlider.TIP_INCREASE |
The tooltip for the increase icon attached to both the input number slider and the input range slider. This is shown when the user hovers over the icon. |
af_inputNumberSlider.TIP_DECREASE |
The tooltip for the decrease icon attached to both the input number slider and the input range slider. This is shown when the user hovers over the icon. |
Style Selectors |
Description |
Conditions |
af|inputNumberSpinbox |
Pseudo classes |
Description |
disabled |
|
read-only |
For example, you can style the content when the component is readOnly by using this selector: "af|inputNumberSpinbox:read-only::content" |
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
|
af|inputNumberSpinbox::access-key |
Style on the access key for the label of the af:inputNumberSpinbox component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|inputNumberSpinbox::content |
Style on the content of the component. Common properties are height and border colors. |
af|inputNumberSpinbox::decrement-cell |
Style on the parent of the decrement icon. Used to provide additional styles, e.g. separate background gradients. |
af|inputNumberSpinbox::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|inputNumberSpinbox::increment-cell |
Style on the parent of the increment icon. Used to provide additional styles, e.g. separate background gradients. |
af|inputNumberSpinbox::label |
Style on the label of the component. Includes .AFLabel:alias. The key af|inputNumberSpinbox:disabled::label includes .AFLabelDisabled:alias. |
af|inputNumberSpinbox::incrementor-icon-style |
Uses background-image to set the increment image. If you want to use text instead of a background-image, you can use af|inputNumberSpinbox::incrementor-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
click-to-edit |
|
|
af|inputNumberSpinbox::decrementor-icon-style |
Uses background-image to set the decrement image. If you want to use text instead of a background-image, you can use af|inputNumberSpinbox::decrementor-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
click-to-edit |
|
|
af|inputNumberSpinbox::spinbox-cell |
Styles the cell for the decrementor/incrementor icons. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
For example, you can style the icon when the component is disabled by using this selector: "af|inputNumberSpinbox:disabled::spinbox-cell". |
|
Icon Selectors |
Description |
af|inputNumberSpinbox::incrementor-icon |
Overrides the default incrementor icon. |
af|inputNumberSpinbox::decrementor-icon |
Overrides the default decrementor icon. |
af|inputNumberSpinbox::incrementor-disabled-icon |
Overrides the default disabled incrementor icon. |
af|inputNumberSpinbox::decrementor-disabled-icon |
Overrides the default disabled decrementor icon. |
af|inputNumberSpinbox::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputNumberSpinbox::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputNumberSpinbox::dynamic-help-icon-style. By default this is null. If you use this af|inputNumberSpinbox::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_inputNumberSpinbox.TIP_INCREMENT |
The tooltip for the increase icon attached to the input spinbox. This is shown when the user hovers over the icon. |
af_inputNumberSpinbox.TIP_DECREMENT |
The tooltip for the decrease icon attached to the input spinbox. This is shown when the user hovers over the icon. |
af_inputNumberSpinbox.TIP_INCREMENT_DISABLED |
The tooltip for the increase icon attached to the input spinbox when disabled. This is shown when the user hovers over the icon. |
af_inputNumberSpinbox.TIP_INCREMENT_DISABLED |
The tooltip for the decrease icon attached to the input spinbox when disabled. This is shown when the user hovers over the icon. |
See also the selectors for af:inputNumberSlider. Most likely when you skin the af:inputRangeSlider component you'll want to skin the af:inputNumberSlider component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|inputNumberSlider::label, af|inputRangeSlider::label {background-color: silver}.
Style Selectors |
Description |
Conditions |
af|inputRangeSlider |
Pseudo classes |
Description |
disabled |
|
printable |
|
read-only |
For example, you can style the content when the component is readOnly by using this selector: "af|inputRangeSlider:read-only::content" |
playable |
Used to style the slider when animation is enabled |
playing |
Used to style the slider when animation is playing |
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|inputRangeSlider::access-key |
Style on the access key for the label of the af:inputRangeSlider component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|inputRangeSlider::content |
Style on the content of the component. Common properties are height and border colors.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|inputRangeSlider::label |
Style on the label of the af:inputRangeSlider component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|inputRangeSlider::plus-icon-style |
Uses background-image to set the increment image (+). If you want to use text instead of a background-image, you can use af|inputRangeSlider::plus-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::minus-icon-style |
Uses background-image to set the decrement image (-). If you want to use text instead of a background-image, you can use af|inputRangeSlider::minus-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::play-icon-style |
Uses background-image to set the play button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::play-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::pause-icon-style |
Uses background-image to set the pause button image. If you want to use text instead of a background-image, you can use af|inputNumberSlider::pause-icon {content:"Text"}.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::bar |
Styles the bar size of the slider.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::bar-outer-border |
Styles the outer border. This combined with the af|inputRangeSlider::bar-inner-border gives the bar area a sunken effect.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::bar-inner-border |
Styles the inner border. This combined with the af|inputRangeSlider::bar-outer-border gives the bar area a sunken effect.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::highlight |
Styles the region contained within the bar between the minimum and maximum thumb values of the current range.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::range |
Styles the portion of the bar that is between the two range values. |
af|inputRangeSlider::thumb-icon-style |
Uses background-image to show the currently selected value in the slider. If you want to use text instead of a background-image, you can use af|inputNumberSlider::thumb-icon {content:"Text"}. Two of these will be rendered for the range to represent the minimum and maximum value of the Range.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::thumb-value-line |
Styles the line drawn from the thumb to the displayed value of the current minimum and maximum thumb positions.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::thumb-value |
Styles the value of the current minimum and maximum thumb positions.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::ticks |
Styles the basic tick marks for the slider. This is used to set the positioning of the ticks.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::major-tick |
Styles the major tick marks for the slider. This tick is normally longer than the minor ticks marks. The major tick marks position are defined by the majotIncreament attribute of the component.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::minor-tick |
Styles the minor tick marks for the slider. The minor tick marks position are defined by the minorIncrement attribute on the component. If this attribute is not defined these ticks are not rendered.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::zero-tick |
Styles the zero tick marks for the slider. This is only rendered if the slider has a range that crosses the zero point.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::tick-value |
Styles the value for major tick marks for the slider.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
af|inputRangeSlider::tick-value-zero |
Styles the value of the zero tick mark for the slider. This is only rendered if the slider has a range that crosses the zero point.
Pseudo classes |
Description |
disabled |
|
vertical |
|
|
Icon Selectors |
Description |
af|inputRangeSlider::plus-icon |
Overrides the default plus icon. |
af|inputRangeSlider::minus-icon |
Overrides the default minus icon. |
af|inputRangeSlider::thumb-icon |
Overrides the default thumb icon. |
af|inputRangeSlider::play-icon |
Overrides the default play icon. |
af|inputRangeSlider::pause-icon |
Overrides the default pause icon. |
af|inputRangeSlider::play-disabled-icon |
Overrides the default disabled play icon. |
af|inputRangeSlider::pause-disabled-icon |
Overrides the default disabled pause icon. |
af|inputRangeSlider::minus-disabled-icon |
Overrides the default disabled minus icon. |
af|inputRangeSlider::thumb-disabled-icon |
Overrides the default disabled thumb icon. |
af|inputRangeSlider::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputRangeSlider::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputRangeSlider::dynamic-help-icon-style. By default this is null. If you use this af|inputRangeSlider::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_inputRangeSlider.TIP_START_RANGE |
The tooltip for the thumb icon that denotes the start of the range. This is shown when the user hovers over the icon. |
af_inputRangeSlider.TIP_END_RANGE |
The tooltip for the thumb icon that denotes the end of the range. This is shown when the user hovers over the icon. |
Style Selectors |
Description |
Conditions |
af|inputText |
Style on the root element of the af:inputText component.
Pseudo classes |
Description |
disabled |
For example, you can style the label when the component is disabled by using this selector: "af|inputText:disabled::label" |
multi-row |
1 (i.e. a textarea) |
stretched |
Style for when inputText is stretched. |
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
|
af|inputText::access-key |
Style on the access key for the label of the af:inputText component. For example, underline the access key. Includes .AFFormAccessKeyStyle:alias. |
af|inputText::content |
Style on the content of the af:inputText component. You can set the width of the content piece that will be used when the columns attribute on af:inputText is not set. |
af|inputText::context-content |
Style that goes around both the context facet and the content. Can be used to control the content padding when the context facet is set, For example:af|inputText::context-content af|inputText::content{padding-left:7px;} |
af|inputText::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|inputText::label |
Style on the label of the af:inputText component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
.AFFieldTextMarker |
To style the input (aka content) piece of inputText without creating a skin definition, you can set these public style classes on the styleClass attribute. The "Marker" style classes are rendered on the root dom element, they have no style properties of their own, and they map the content piece of the component's styling to the public style class without the "Marker". For example, we map AFFieldTextMarker to AFFieldText by defining this skin definition for you in our base skin: af|inputText.AFFieldTextMarker af|inputText::content {-tr-rule-ref: selector(".AFFieldText")}. If you set styleClass="AFFieldText", the entire component will be affected, including the label. If you want to affect only the "content" piece, use one of these marker style classes. If you need to skin these styles, then you can skin the non-marker equivalent style (e.g., .AFFieldText) and because the base skin skin selector, the content piece will be affected. By default, in LTR mode only the AFFieldNumberMarker style does anything (it right aligns the text). It is in RTL mode that the styling is changed; the bidi-direction is changed for most of these marker styles. |
.AFFieldTextLTRMarker |
Styles the content piece of the component as a ltr field text. |
.AFPhoneFieldTextMarker |
Styles the content piece of the component as a phone field text. |
.AFPostalCodeFieldTextMarker |
Styles the content piece of the component as a postal code field text. |
.AFAddressFieldTextMarker |
Styles the content piece of the component as an address field text. |
.AFFieldNumberMarker |
Styles the content piece of the component as a number field text. |
Icon Selectors |
Description |
af|inputText::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|inputText::dynamic-help-icon |
Icon that can be used instead of a background-image on af|inputText::dynamic-help-icon-style. By default this is null. If you use this af|inputText::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|listItem |
Styles the root dom element of the component. This component is not intended for use outside of the listView component. You could define a background-color or border style in this selector to style an inidividual item.
Pseudo classes |
Description |
group-header |
Styles the listItem element when it is a group header. |
selected |
Styles the selected state of the listItem |
highlighted |
Styles the mouse hover state of the listItem. |
|
af|listItem::icon-container |
Styles the container for expand/collapse icons in the group header for listItem. |
af|listItem::expanded-icon-style |
Style of the expanded icon used with the listItem component in a group header. The expanded icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the expanded-icon-style and define the override icon for the expanded-icon. Includes .AFClickableImageAnchor:alias |
af|listItem::collapsed-icon-style |
Style of the collapsed icon used with the listItem component in a group header. The collapsed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the collapsed-icon-style and define the override icon for the collapsed-icon. Includes .AFClickableImageAnchor:alias |
af|listItem::collapsed-icon-style |
Style of the leaf icon used with the listItem component in a group header. The leaf icon is used if a group has no child Items. The leaf icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the collapsed-icon-style and define the override icon for the collapsed-icon. Includes .AFClickableImageAnchor:alias |
Icon Selectors |
Description |
af|listItem::expanded-icon |
Overrides the default expanded icon for the listItem component in a group header. |
af|listItem::collapsed-icon |
Overrides the default collapsed icon the listItem component in a group header. |
af|listItem::leaf-icon |
Overrides the default leaf icon the listItem component in a group header. |
Resource Strings |
Description |
af_listItem.TIP_COLLAPSED_GROUP |
Tooltip for the collapse icon used in the the listItem component in a group header. |
af_listItem.TIP_EXPANDED_GROUP |
Tooltip for the expand icon used in the the listItem component in a group header. |
af_listItem.TIP_SCREEN_READER_COLLAPSED_NODE |
ScreenReader Mode tooltip for the collapse icon used in the the listItem component in a group header. |
af_listItem.TIP_SCREEN_READER_EXPANDED_NODE |
ScreenReader Mode tooltip for the expand icon used in the the listItem component in a group header. |
Style Selectors |
Description |
Conditions |
af|listView |
Styles the root dom element of the component. Typically a background-color, color, width dimension, or non-percent height dimension would be defined in this selector. |
af|listView::data-container |
Styles the wrapper around all listItem components. |
af|listView::navbar |
Used to style the items navigation bar. |
af|listView::navbar-item-range-text |
Used to style message displaying the number of items in the record navigation bar. |
af|listView::navbar-load-more-link |
Used to style link for fetching more items in the record navigation bar. |
af|listView::empty-text |
Used to style the container around the empty text displayed when the listView component has no items. |
Resource Strings |
Description |
af_listView.LABEL_FETCHING |
Label shown to the user when the listView is busy fetching items from the server. |
af_listView.LABEL_ITEM_RANGE_KNOWN_COUNT |
Label used to display message about number of items when the row count is known |
af_listView.LABEL_ITEM_RANGE_UNKNOWN_COUNT |
Label used to display message about number of items when the row count is not known |
af_listView.LABEL_LOAD_MORE_ITEMS |
Label shown for fetching more items from the server. |
Style Selectors |
Description |
Conditions |
af|masonryLayout |
Selector that renders on the root dom element of the component. |
af|masonryLayout::drop-target |
Specifies the style of the element used to identify the currently chosen location within the masonryLayout at which a drop will occur. Typically, a background-color style is what you will want to customize here. |
.AFMasonryLayoutTransitionResizeTo |
Selector applied to animate the transition when the masonryLayout component is resized due to a layout change. |
.AFMasonryLayoutTransitionResizeToFast |
Selector applied to animate the transition when the masonryLayout component is resized due to an interactive layout change, for example while the uer is reordering child tiles. |
.AFMasonryTileTransitionMoveTo |
Selector applied to animate the transition when a child tile of the masonryLayout component is moved during layout. |
.AFMasonryTileTransitionMoveToFast |
Selector applied to animate the transition when a child tile of the masonryLayout component is moved during an interactive layout, for example while the uer is reordering child tiles. |
.AFMasonryTileTransitionResizeTo |
Selector applied to animate the transition when a child tile of the masonryLayout component is resized. |
.AFMasonryTileTransitionHideFrom |
Selector applied as the initial state before an animated transition when a child tile of the masonryLayout component is about to be deleted. |
.AFMasonryTileTransitionHideTo |
Selector applied to animate the transition when a child tile of the masonryLayout component is deleted. |
.AFMasonryTileTransitionShowFrom |
Selector applied as the initial state before an animated transition when a child tile of the masonryLayout component is about to be inserted. |
.AFMasonryTileTransitionShowTo |
Selector applied to animate the transition when a child tile of the masonryLayout component is inserted. |
.AFMasonryTileSizeBase:alias |
Selector used to specify styles common to all masonryLayout tile size selectors. This selector is included by all masonryLayout tile size selectors. |
.AFMasonryTileSize1x1 |
Selector that specifies that a child tile of a masonryLayout component spans 1 column and 1 row. Includes .AFMasonryTileSizeBase:alias |
.AFMasonryTileSize1x2 |
Selector that specifies that a child tile of a masonryLayout component spans 1 column and 2 rows. Includes .AFMasonryTileSizeBase:alias |
.AFMasonryTileSize1x3 |
Selector that specifies that a child tile of a masonryLayout component spans 1 column and 3 rows. Includes .AFMasonryTileSizeBase:alias |
.AFMasonryTileSize2x1 |
Selector that specifies that a child tile of a masonryLayout component spans 2 columns and 1 row. Includes .AFMasonryTileSizeBase:alias |
.AFMasonryTileSize2x2 |
Selector that specifies that a child tile of a masonryLayout component spans 2 columns and 2 rows. Includes .AFMasonryTileSizeBase:alias |
.AFMasonryTileSize2x3 |
Selector that specifies that a child tile of a masonryLayout component spans 2 columns and 3 rows. Includes .AFMasonryTileSizeBase:alias |
.AFMasonryTileSize3x1 |
Selector that specifies that a child tile of a masonryLayout component spans 3 columns and 1 row. Includes .AFMasonryTileSizeBase:alias |
.AFMasonryTileSize3x2 |
Selector that specifies that a child tile of a masonryLayout component spans 3 columns and 2 rows. Includes .AFMasonryTileSizeBase:alias |
Style Selectors |
Description |
Conditions |
af|media |
Selector that renders on the root dom element of the component. |
Resource Strings |
Description |
af_media.TIP_DEFAULT_LINK_TEXT_AUDIO |
Default text for the link to audio media. |
af_media.TIP_DEFAULT_LINK_TEXT_VIDEO |
Default text for the link to video media. |
af_media.TIP_DEFAULT_LINK_TEXT_UNKNOWN |
Default text for the link to unknown media. |
There are 2 parts to a menu. One is the menu itself - meaning the popup that opens up and shows the children contained inside the menu. The other part is the menu link - the menu text and open icon that you click to open the menu. Menus can appear as children of two components. A menu can appear inside a menuBar - this is a normal or top-level menu. Alternately a menu can appear inside another menu - this is a submenu or nested menu.
The top-level menu link that appears on a menuBar is identified by the style "af|menu::bar-item". The menu bar item is further defined by 3 major sections, the "bar-item-icon-style" which contains the optional icon attribute, the "bar-item-text" which contains the menu text, and the "bar-item-open-icon-style" which contains the icon that opens the menu itself.
A nested submenu link (a menu inside a menu) is identified by the style "af|menu::submenu". The submenu is further defined by 4 major sections, the "submenu-icon-style" which contains the optional icon attribute, the "submenu-text" which contains the menu text, the "submenu-accelerator" which is the empty space corresponding to where a commandMenuItem's or goMenuItem's accelerator appears, and the "submenu-open-indicator" which is the space where the open indicator ("submenu-open-icon-style") appears.
Style Selectors |
Description |
Conditions |
af|menu |
Selector that renders on the root dom element of the component. Menu supports further styling with the :disabled, :highlighted and :depressed pseudo-classes. The part of the menu that appears on the menu bar or in a menu (as a submenu) is not only highlighted on mouseover, but also when it is selected with the keyboard, so we therefore use the :highlighted and :depressed pseudo-classes over the CSS-2.1 :hover, :active and :disabled style classes.
Pseudo classes |
Description |
disabled |
|
highlighted |
|
depressed |
|
Skin properties |
Description |
-tr-visible-items |
Sets the default maximum number of visible items that can be displayed inside a menu. If there are more items in the menu than this value, then scroll up and scroll down icons will be displayed, allowing the user to scroll through the menu contents. |
-tr-open-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for opening the menu. |
-tr-animate |
The root style, contains skinning property "-tr-animate" that specifies whether animation is turn on or off for popup menus. Set a value of "true" to enable animation. Set "false" to turn off animation. This skin property is honored only if the animation is enabled in the system. |
|
af|menu::bar-item |
Style applied to the menu bar item that is shown on a menubar (when a menu is located on a menubar). The menu bar item is further defined by 3 major sections, the "bar-item-icon-style" which contains the optional icon attribute, the "bar-item-text" which contains the menu text, and the "bar-item-open-icon-style" which contains the icon that opens the menu itself. |
af|menu::bar-item-icon-style |
Style applied to a menu bar item's icon container, which is the part of the menu bar item before its text. The icon is specified as an optional attribute on the menu. |
af|menu::bar-item-access-key |
Style on the access key character of a menu, as shown on the menu bar. Includes the .AFFormAccessKeyStyle:alias. |
af|menu::bar-item-text |
Style applied to the menu's text, as shown on the menu bar. |
af|menu::bar-item-open-icon-style |
For menus that appear in a menubar, this is the style on the menu's open icon (i.e., the drop down menu icon). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the bar-item-open-icon-style and define the icon for the bar-item-open-icon key. |
af|menu::child-container |
Style applied to the menu container that appears when you open a menu. The menu container contains the child contents, called menu items, of the menu. These menu items can be either additional menus, called submenus, commandMenuItems, or goMenuItems. |
af|menu::scroll-up-cell |
Style on the cell that contains the scroll up icon. This cell is only present in a menu when there are more menu items present than the menu's maximum item setting. |
af|menu::scroll-up-icon-style |
Style on the scroll up icon that is present in a menu when there are more menu items present than the menu's maximum item setting. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the scroll-up-icon-style and define the icon for the scroll-up-icon key. |
af|menu::scroll-down-cell |
Style on the cell that contains the scroll down icon. This cell is only present in a menu when there are more menu items present than the menu's maximum item setting. |
af|menu::scroll-down-icon-style |
Style on the scroll down icon that is present in a menu when there are more menu items present than the menu's maximum item setting. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the scroll-down-icon-style and define the icon for the scroll-down-icon key. |
af|menu::submenu |
Style applied to the submenu item inside a menu (when a menu is located inside another menu). The submenu is further defined by 4 major sections, the "submenu-icon-style" which contains the optional icon attribute, the "submenu-text" which contains the menu text, the "submenu-accelerator" which is the empty space corresponding to where a commandMenuItem's or goMenuItem's accelerator appears, and the "submenu-open-indicator" which is the space where the open indicator ("submenu-open-icon-style") appears. |
af|menu::submenu-icon-style |
Style applied to a submenu's icon container, for submenus that have assigned icons. The icon is specified as an attribute on the menu. |
af|menu::submenu-text |
Style applied to the submenu's text, as shown inside the menu. |
af|menu::submenu-access-key |
Style on the access key character of the submenu, as shown inside the menu. Includes the .AFFormAccessKeyStyle:alias. |
af|menu::submenu-accelerator |
Style on the part of the submenu where an accelerator keyboard shortcut would go. CommandMenu Items (which can also appear inside menus) have accelerators while menus do not. Because menus do not have accelerators, this is just an empty section near the end of the submenu item. |
af|menu::submenu-open-indicator |
Style on the section of the submenu that contains its open icon for opening the nested submenu. The submenu-open-icon-style, which contains the actual icon image, is a child of this element. |
af|menu::submenu-open-icon-style |
Style for a submenu open icon, which is present when you have menus inside of menus (nested submenus). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the submenu-open-icon-style and define the icon for the submenu-open-icon key. |
af|menu::separator-row |
Style on the row inside a menu that contains a separator. Menus have separators when they have grouped menu items inside the menu. |
af|menu::separator |
Style on the separator line itself. The separator stretches across most of the separator-row, but not the space on the left where optional icons go. |
af|menu::detachable-header |
The header row for a detachable menu. Contains the detachable-header-content-center and af|panelWindow::close-icon-style. When attached, the header shows a detach grip. When detached, the header appears similar to a panelWindow header. |
af|menu::detachable-header-content-center |
The center content for the detachable header row. When attached, contains the detach-handle and spans the header row. When detached, contains a af|panelWindow::title and shares the header row with the af|panelWindow::close-icon-style. |
af|menu::detach-handle |
Style on the top of a detachable menu where a user can grab and drag the detachable menu. |
af|menu::detach-grip |
For a detachable menu, this is the style on the part of the detachable handle where the grip image is located. This image is a background image for this style and can be customized by specifying an alternate background image. |
af|menu::fetching-message |
Styling on the 'data fetching...' text message that briefly appears when a menu that has contentDelivery set to lazy is first opened. This message is displayed while the menu information is retrieved from the server. |
Icon Selectors |
Description |
af|menu::bar-item-open-icon |
Overrides the default menubar menu's launch icon (i.e., the drop down menu icon). Icons can be text or img elements, e.g. af|menu::bar-item-open-icon {content "X"} or af|menu::bar-item-open-icon {content: url(...)}. Use this key instead of the af|menu::bar-item-open-icon-style key if you do not want a background-image. |
af|menu::scroll-up-icon |
Overrides the default menu's scroll up icon. Icons can be text or img elements, e.g. af|menu::scroll-up-icon {content "X"} or af|menu::scroll-up-icon {content: url(...)}. Use this key instead of the af|menu::scroll-up-icon-style key if you do not want a background-image. |
af|menu::scroll-down-icon |
Overrides the default menu's scroll down icon. Icons can be text or img elements, e.g. af|menu::scroll-down-icon {content "X"} or af|menu::scroll-down-icon {content: url(...)}. Use this key instead of the af|menu::scroll-down-icon-style key if you do not want a background-image. |
af|menu::submenu-open-icon |
Used to override a submenu open icon, which is present when you have menus inside of menus (nested submenus). Icons can be text or img elements, e.g. af|menu::submenu-open-icon {content "X"} or af|menu::submenu-open-icon {content: url(...)}. Use this key instead of the af|menu::submenu-open-icon-style key if you do not want a background-image. |
Style Selectors |
Description |
Conditions |
af|menuBar |
Selector that renders on the root dom element of the component. |
af|menuBar::body |
The main section of the menuBar where the items are, not including the end space to the right where the overflow-indicator appears. The body is only present on menubars with overflow, so you should not style padding or margins here. You should instead style on the items element. |
af|menuBar::items |
The direct container of the menuBar items. For a menuBar that uses overflow, this does not include the end space to the right where the overflow-indicator appears. The items element is present on menubars both with and without overflow, so it is a safe place to style padding or margins. |
af|menuBar::item |
Style applied to the menuBar item that is shown on a menuBar. This does not apply when using a menuModel. |
af|menuBar::separator |
Styles the separator icon that is used to separate grouped children. This does not apply when using a menuModel. |
af|menuBar::overflow-indicator |
Style on the overflow indicator that is present when the menuBar items are overflowed beyond the available space. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
Icon Selectors |
Description |
af|menuBar::overflow-icon |
Overrides the default menuBar overflow icon. Icons can be text or img elements, e.g. af|menuBar::overflow-icon {content "X"} or af|menuBar::overflow-icon {content: url(...)}. Use this key instead of the af|menuBar::overflow-indicator key if you do not want a background-image. |
These styles may also be used when automatically displaying messaging for components even when no message component is on the page.
Style Selectors |
Description |
Conditions |
af|message |
This is the base selector for the component. |
Icon Selectors |
Description |
af|message::info-icon |
The icon for messages that are of type info. |
af|message::confirmation-icon |
The icon for messages that are of type confirmation. |
af|message::warning-icon |
The icon for messages that are of type warning. |
af|message::error-icon |
The icon for messages that are of type error. |
af|message::fatal-icon |
The icon for messages that are of type fatal. |
Resource Strings |
Description |
af_message.TIP_FATAL |
Tooltip that displays on the component when the type of message is critical error. |
af_message.TIP_ERROR |
Tooltip that displays on the component when the type of message is error. |
af_message.TIP_WARNING |
Tooltip that displays on the component when the type of message is warning. |
af_message.TIP_CONFIRMATION |
Tooltip that displays on the component when the type of message is confirmational. |
af_message.TIP_INFO |
Tooltip that displays on the component when the type of message is informational. |
af_message.LABEL_COMPONENT_MESSAGES_INTRO |
Header text that displays when multiple messages are displayed for the same component. |
af_message.TIP_PREVIOUS_MESSAGE |
Tooltip that displays on the previous icon when multiple messages are displayed. |
af_message.TIP_NEXT_MESSAGE |
Tooltip that displays on the next icon when multiple messages are displayed. |
af_message.LABEL_SHOW_ALL_MESSAGES |
Label text that displays on the "All" button when multiple messages are displayed. |
af_message.TIP_SHOW_ALL_MESSAGES |
Tooltip that displays on the "All" button when multiple messages are displayed. |
af_message.LABEL_COMPACT_TYPE_SUMMARY |
Message that displays the type of error, where {0} is the type and {1} is the message summary. For example: "Error: Not a number" where {0} ="Error" and {1} = "Not a number". |
These styles may also be used when automatically displaying messaging for the page even when no messages component is on the page.
Style Selectors |
Description |
Conditions |
af|messages |
This is the base selector for the component. |
Icon Selectors |
Description |
af|messages::info-icon |
The icon for messages that are of type info. |
af|messages::confirmation-icon |
The icon for messages that are of type confirmation. |
af|messages::warning-icon |
The icon for messages that are of type warning. |
af|messages::error-icon |
The icon for messages that are of type error. |
af|messages::fatal-icon |
The icon for messages that are of type fatal. |
Resource Strings |
Description |
af_messages.TIP_FATAL |
Tooltip that displays on component level messages when the type of message is critical error. |
af_messages.TIP_ERROR |
Tooltip that displays on component level messages when the type of message is error. |
af_messages.TIP_WARNING |
Tooltip that displays on component level messages when the type of message is warning. |
af_messages.TIP_CONFIRMATION |
Tooltip that displays on component level messages when the type of message is confirmational. |
af_messages.TIP_INFO |
Tooltip that displays on component level messages when the type of message is informational. |
af_messages.LABEL_COMBINED_MESSAGES_INTRO |
Header text that displays when multiple messages are displayed. |
af_messages.LABEL_COMPONENT_LEVEL_MESSAGE |
Text link that displays when there are page level and component level messages. When clicked, the component level messages display. |
af_messages.LABEL_SET_FOCUS_ON_COMPONENT |
Tooltip that displays on hover of the LABEL_COMPONENT_LEVEL_MESSAGE. |
Style Selectors |
Description |
Conditions |
af|navigationPane |
Skin properties |
Description |
-tr-layout-type |
Determines how navigationPane with hint=tabs handles tab items when there is not enough horizontal space. Specify 'conveyor' if you want buttons that provide a conveyor belt implementation. Specify 'overflow' if you want overflow popups. |
-tr-tab-bar-height |
Sets the value (with units, e.g., "2em" or "21px") for the height of the tab bar that displays tabs as well as the height of the tab contents. This property can also be retrieved if you need to know the height of the tabs in the skin. You can tweak the line-height of the ::tab-start, ::tab-conent, ::tab-end if you want to adjust where the text appears vertically within this bar. Note that you should not assign a font-size on these elements because if your height is in font-relative units, e.g. "em", it may not resolve the a consistent number of pixels unless all elements that get this height value use the same font-size. |
|
af|navigationPane-bar |
Style on the root dom element of the component for hint as "bar". |
af|navigationPane-bar::link |
Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "bar". Tip: If you skin the background-image, you may also want to skin it for :hover.
Pseudo classes |
Description |
disabled |
|
selected |
|
|
af|navigationPane-bar::access-key |
Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "bar". Includes .AFFormAccessKeyStyle:alias |
af|navigationPane-bar::icon-style |
Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "bar" |
af|navigationPane-bar::separator-icon-style |
Style of the icon used as the bar item separator. And icon can be specified as a background-image in this key. Alternately, you can use tr-inhibit: background-image and instead define the override icon. |
af|navigationPane-bar::body |
Styles the container which encloses both the navigationPane bar content and the overflow indicator. |
af|navigationPane-bar::content |
Styles the container which encloses the navigationPane bar content (excluding the overflow indicator). |
af|navigationPane-bar::start-overflow-indicator |
Style on the start overflow indicator that is present when the bar items are overflowed beyond the first item displayed. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-bar::end-overflow-indicator |
Style on the end overflow indicator that is present when the bar items are overflowed beyond the last item displayed. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-buttons |
Style on the root dom element of the component for hint as "buttons". |
af|navigationPane-buttons::link |
Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "buttons". Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
selected |
|
|
af|navigationPane-buttons::access-key |
Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "buttons". Includes .AFFormAccessKeyStyle:alias |
af|navigationPane-buttons::icon-style |
Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "buttons" |
af|navigationPane-buttons::separator-icon-style |
Style of the icon used as the buttons item separator. And icon can be specified as a background-image in this key. Alternately, you can use tr-inhibit: background-image and instead define the override icon. |
af|navigationPane-choice |
Style on the root dom element of the component for hint as "choice". |
af|navigationPane-choice::label |
Style on the label of navigationPane with hint "choice". This includes .AFLabelTextForeground:alias. :disabled::label includes .AFLabelTextForegroundDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|navigationPane-choice::link |
Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "choice". This includes .AFTextForeground:alias, .AFLinkForeground:alias, .AFDefaultFont:alias and .AFStartTextAlign:alias style selectors. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, :focus, etc.
Pseudo classes |
Description |
disabled |
|
selected |
|
|
af|navigationPane-choice::dropdown-cell |
Style on the cell of dropdown icon for gradient style. This includes .AFButtonGradient:alias, AFDropDownIconBorder:alias, .AFButtonGradientHover:alias, .AFButtonGradientActive:alias and .AFDropDownIconBorderActive:alias style selectors. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-choice::dropdown-icon-style |
Styles the dropdown icon of the navigationPane component with hint "choice". By default the dropdown-icon is null, and this style has a background-image that you can override. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for s. |
af|navigationPane-choice::access-key |
Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "choice". Includes .AFFormAccessKeyStyle:alias |
af|navigationPane-choice::icon-style |
Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "choice" |
af|navigationPane-list |
Style on the root dom element of the component for hint as "list". |
af|navigationPane-list::bullet |
Style on the cell which contains the bullet for list of the component with hint "list". The bullet image is specified as a background-image in this key. To use text or an img element instead of a background-image, set {-tr-inhibit: background-image} in this style and define the icon using the bullet-icon, icon selector. |
af|navigationPane-list::link |
Style on the link of commandNavigationItem, when it is used inside a navigationPane with hint "list". Tip: You may also want to skin :hover.
Pseudo classes |
Description |
disabled |
|
selected |
|
|
af|navigationPane-list::access-key |
Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "list". Includes .AFFormAccessKeyStyle:alias |
af|navigationPane-list::icon-style |
Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "list" |
af|navigationPane-tabs |
Style on the root dom element of the component for hint as "tabs". |
af|navigationPane-tabs::header |
Style on the tab bar container of the component for hint as "tabs". |
af|navigationPane-tabs::tab |
Style on the tabs in the navigationPane component for hint as tabs.
Pseudo classes |
Description |
selected |
to style the currently selected tab |
disabled |
to style content for disabled tab |
highlighted |
Styles content for the currently keyboard focused tab. |
|
af|navigationPane-tabs::tab-start |
Style on the start of the tabs used with the navigationPane component for hint as tabs. To provide an alternate skinning of the tabs, specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. Alternate styling styling of :disabled and :selected states can be done as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). Here is an example of a full reskinning of the tabs: af|navigationPane-tabs::tab-start {width: 10px; background-image:url('/images/tab_top_left_black.png');} af|navigationPane-tabs::tab-end {width: 10px; background-image:url('/images/tab_top_right_black.png');} af|navigationPane-tabs::tab-content {background-image:url('/images/tab_top_middle_black.png');} af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-start {background-image:url('/images/tab_top_left_red.png');} af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-end {background-image:url('/images/tab_top_right_red.png');} af|navigationPane-tabs::tab:disabled af|navigationPane-tabs::tab-content {background-image:url('/images/tab_top_middle_red.png');} af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-start {background-image:url('/images/tab_top_left_blue.png');} af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-end {background-image:url('/images/tab_top_right_blue.png');} af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-content {background-image:url('/images/tab_top_middle_blue.png');}
Pseudo classes |
Description |
disabled |
|
selected |
|
|
Only used by fusion skins. |
af|navigationPane-tabs::tab-end |
Style on the end of the tabs used with the navigationPane component for hint as tabs. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example. |
Only used by fusion skins. |
af|navigationPane-tabs::tab-content |
Style on the middle of the tabs used with the navigationPane component for hint as tabs. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example. |
af|navigationPane-tabs::tab-link |
Style on the anchor (link) part of the tabs used with the navigationPane component for hint as tabs. Disabled tabs do not have a tab-link selector. |
af|navigationPane-tabs::body |
Styles the container which encloses both the navigationPane tabs content and the overflow indicator. |
af|navigationPane-tabs::content |
Styles the container which encloses the navigationPane tabs content (excluding the overflow indicator). This element is only present when overflow compressed layout is enabled. |
af|navigationPane-tabs::start-overflow-indicator |
Style on the start overflow indicator that is present when the toolbar tabs have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-tabs::end-overflow-indicator |
Style on the end overflow indicator that is present when the toolbar tabs have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-tabs::start-conveyor-belt-indicator |
Style on the start conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-tabs::end-conveyor-belt-indicator |
Style on the end conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-tabs::droplist-indicator |
Style on the droplist indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt or overflow droplist. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-tabs::disclosed-remove-icon-style |
If item removal is enabled, this is the style of the remove icon used on a selected tab item. The icon is specified as a background-image in this key. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-tabs::undisclosed-remove-icon-style |
If item removal is enabled, this is the style of the remove icon used on a nonselected tab item. The icon is specified as a background-image in this key. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|navigationPane-tabs::disclosed-remove-disabled-icon-style |
If item removal is enabled, this is the style of the disabled remove icon used on a disclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key. |
af|navigationPane-tabs::undisclosed-remove-disabled-icon-style |
If item removal is enabled, this is the style of the disabled remove icon used on an undisclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key. |
af|navigationPane-tabs::access-key |
Style on the access key character of commandNavigationItem, when it is used inside a navigationPane with hint "tabs". Includes .AFFormAccessKeyStyle:alias |
af|navigationPane-tabs::icon-style |
Style on the icon of commandNavigationItem, when it is used inside a navigationPane with hint "tabs" |
Icon Selectors |
Description |
af|navigationPane-bar::separator-icon |
Allows setting of an alternate separator icon for navigationPane component with hint "bar". |
af|navigationPane-bar::start-overflow-icon |
Overrides the default start overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-bar::start-overflow-icon {content "X"} or af|navigationPane-bar::start-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the start overflow-indicator key and defining the override icon in this key. |
af|navigationPane-bar::end-overflow-icon |
Overrides the default end overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-bar::end-overflow-icon {content "X"} or af|navigationPane-bar::end-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the end overflow-indicator key and defining the override icon in this key. |
af|navigationPane-buttons::separator-icon |
Allows setting of an alternate separator icon for navigationPane component with hint "buttons". |
af|navigationPane-choice::dropdown-icon |
Dropdown icon. You can use af|navigationPane-choice::dropdown-icon-style instead. |
af|navigationPane-list::bullet-icon |
Icon hook for the bullet. This can be used instead of a background-image defined on af|navigationPane-list::bullet. By default this is null. |
af|navigationPane-tabs::disclosed-remove-icon |
If item removal is enabled, this overrides the default remove icon on a selected tab item. Icons can be text or img elements, e.g. af|navigationPane-tabs::disclosed-remove-icon {content "X"} or af|navigationPane-tabs::disclosed-remove-icon {content: url(...)}. Use this key instead of the disclosed-remove-icon-style key if you do not want a background-image. |
af|navigationPane-tabs::undisclosed-remove-icon |
If item removal is enabled, this overrides the default remove icon on a nonselected tab item. Icons can be text or img elements, e.g. af|navigationPane-tabs::undisclosed-remove-icon {content "X"} or af|navigationPane-tabs::undisclosed-remove-icon {content: url(...)}. Use this key instead of the undisclosed-remove-icon-style key if you do not want a background-image. |
af|navigationPane-tabs::remove-disabled-icon |
If item removal is enabled, this overrides the default disabled remove icon on an tab item that is set to remove disabled. Icons can be text or img elements, e.g. af|navigationPane-tabs::remove-disabled-icon {content "X"} or af|navigationPane-tabs::remove-disabled-icon {content: url(...)}. Use this key instead of the disclosed-remove-disabled-icon-style and undisclosed-remove-disabled-icon-style keys if you do not want a background-image. |
af|navigationPane-tabs::start-overflow-icon |
Overrides the default start overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-tabs::start-overflow-icon {content "X"} or af|navigationPane-tabs::start-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the start overflow-indicator key and defining the override icon in this key. |
af|navigationPane-tabs::end-overflow-icon |
Overrides the default end overflow indicator image. Icons can be text or img elements, e.g. af|navigationPane-tabs::end-overflow-icon {content "X"} or af|navigationPane-tabs::end-overflow-icon {content: url(...)}. Use this key instead of the overflow-indicator key if you do not want a background-image, by setting -tr-inhibit: background-image in the end overflow-indicator key and defining the override icon in this key. |
Resource Strings |
Description |
af_navigationPane.TIP_REMOVE_TAB |
Tooltip on a tab remove button. |
af_navigationPane.TIP_LIST_ALL_TABS |
Tooltip on a conveyor belt droplist button. |
Style Selectors |
Description |
Conditions |
af|noteWindow |
The root selector for the server-side noteWindow component. The noteWindow can be used without the server-side component. This selector only applies when using the JSF component. As a result of providing the dual usage, the noteWindow reuses the rest of the .AFNoteWindow global styles. |
Style Selectors |
Description |
Conditions |
af|outputFormatted |
Selector that renders on the root dom element of the component. Note: For performance sake, we usually do not render selectors on af:outputFormatted since you can use styleClass or inlineStyle attributes instead. Only under certain circumstances do we render this selector, like if the outputFormatted component's context facet contains a contextInfo component. This way we can use the selector to style "af|outputFormatted af|contextInfo" |
Style Selectors |
Description |
Conditions |
af|outputLabel |
Styles the root dom element of the component. |
af|outputLabel::access-key |
Style on the access key character for the output label. Includes .AFFormAccessKeyStyle:alias. |
Style Selectors |
Description |
Conditions |
af|outputText |
Selector that renders on the root dom element of the component. Note: For performance sake, we usually do not render selectors on af:outputText since you can use styleClass or inlineStyle attributes instead. Only under certain circumstances do we render this selector, like when in emailable page mode or if the outputText component is within a contextInfo component. |
not generate any elements on the page and thus is not skinnable.
Style Selectors |
Description |
Conditions |
af|panelAccordion |
Selector that renders on the root dom element of the component. The root style contains -tr-header-height and -tr-overflow-height skin properties to specify the heights of the header and overflow. If your top/bottom borders for the headers are bigger than 1px per header total, use the -tr-header-border-height property to set it.
Pseudo classes |
Description |
flow |
when the accordion is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-header-height |
Sets the value in pixels for the height of the header. |
-tr-header-border-height |
Sets the value in pixels for the total height of top and bottom borders for each item header. If not set, the value defaults to 1. If top/bottom borders exceed the value for this property, only the top border will appear. |
-tr-overflow-height |
Sets the value in pixels for the overflow height. |
-tr-minimum-resizable-height |
This property represents the minimum height that can be applied to a detail item using mouse drag resizing. |
-tr-reorder-animation-duration |
The minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for the reorder. This skin property is honored only if the animation is enabled in the system. |
-tr-disclosure-animation-duration |
The minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for the disclosure change. This duration also excludes the time taken for the server-side computation because it gets split into half for each side of the server request. In other words, if the value is 800, and the intermediate server-side communication and corresponding client-side processing of the response takes up 200 ms, then the time will be spread out as such: 1.) at least 800 ms / 2 will be spent on a pre-server set of animation frames, 2.) the intermediate processing takes place (e.g. 200 ms), then 3.) at least 800 ms / 2 will be spent on a post-server set of animation frames resulting in at least 800 ms plus the intermediate 200 ms of processing. This skin property is honored only if the animation is enabled in the system. |
|
af|panelAccordion::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|panelAccordion::drop-target |
Style of the drop target of the panel accordion that is shown while reordering panels with the mouse. |
af|panelAccordion::ghost |
Style on the parent element of the header and content elements that are being dragged during item reordering using the mouse. |
af|panelAccordion::header |
Style on the various headers included in the panelAccordion component.
Pseudo classes |
Description |
disclosable |
used when the associated item is diclosable (discloseMany or dislcoseNone but not discloseOne(default)) |
disclosed |
used when the associated item is disclosed |
selected |
used when the header is active (mouse down or one of the enter, up or down keys is down) |
highlight |
used when the header has focus or the mouse is hovering over the header. |
flow |
when the accordion is being displayed in a dimensionsFrom=children mode |
|
af|panelAccordion::header-subsequent |
Style on the subsequent headers (all except the first) included in the panelAccordion component.
Pseudo classes |
Description |
disclosable |
used when the associated item is diclosable (discloseMany or dislcoseNone but not discloseOne(default)) |
disclosed |
when the associated item is disclosed |
selected |
when the header is active (mouse down or one of the enter, up or down keys is down) |
highlight |
when the header has focus or the mouse is hovering over the header. |
flow |
when the accordion is being displayed in a dimensionsFrom=children mode |
|
af|panelAccordion::header-start |
Style on the beginning of the header. By default contains the start image (background-image CSS property) for the header, as well as the image width (width CSS property). If you are replacing the start image through the background-image property, you should set the corresponding width property as well. |
Only used by fusion skins. |
af|panelAccordion::header-disclose |
Style on the part of the header that contains the disclose/undisclose button. |
af|panelAccordion::undisclosed-icon-style |
Style on the icon that is shown when the panel is undisclosed (collapsed). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the undisclosed-icon-style and define the icon for the undisclosed-icon key. |
af|panelAccordion::disclosed-icon-style |
Style on the icon that is shown when the panel is disclosed (expanded). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the disclosed-icon-style and define the icon for the disclosed-icon key. |
af|panelAccordion::icon-style |
Style on the image that corresponds to the showDetailItem icon in the header. |
af|panelAccordion::header-title |
Style on the title element in the header. |
af|panelAccordion::header-toolbar |
Style on the container for the header toolbar. |
af|panelAccordion::header-toolbar |
Style on the container for the header toolbar. |
af|panelAccordion::header-end |
Style on the end of the header. By default contains the ending image (background-image CSS property) for the header, as well as the image width (width CSS property). If you are replacing the ending image through the background-image property, you should set the corresponding width property as well. |
Only used by fusion skins. |
af|panelAccordion::body-content |
Style on the body root element for disclosed showDetailItems in the panelAccordion. For example you could change the background-color or the border.
Pseudo classes |
Description |
selected |
when the header is active (mouse down or one of the enter, up or down keys is down) |
highlight |
when the header has focus or the mouse is hovering over the header. |
flow |
when the accordion is being displayed in a dimensionsFrom=children mode |
|
af|panelAccordion::top-overflow-indicator |
Style on the top overflow indicator that is present when the accordion showDetailItems are overflowed beyond the top of the panelAccordion. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelAccordion::bottom-overflow-indicator |
Style on the bottom overflow indicator that is present when the accordion showDetailItems are overflowed beyond the bottom of the panelAccordion. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelAccordion::resize-divider |
Styles the vertical resize divider for each disclosed detail item. The height, cursor and background color of the resize divider bar can be changed using this style.
Pseudo classes |
Description |
drag |
used during the drag operation to animate resizing |
|
.AFPanelAccordionHeaderBackground:alias |
Used by the fusion skins to skin the background image of the panelAccordion header |
.AFPanelAccordionHeaderDisclosedBackground:alias |
Used by the fusion skins to skin the background image of the panelAccordion disclosed header |
.AFPanelAccordionBodyMultipleBackgroundImage:alias |
Used by the fusion skins to skin multiple background-images in the af|panelAccordion::body-content pseudo-element when the browser supports multiple background images. This is unused in older browsers that do not support multiple background-images. |
Icon Selectors |
Description |
af|panelAccordion::undisclosed-icon |
Overrides the default undisclosed icon. Icons can be text or img elements, e.g. af|panelAccordion::undisclosed-icon {content "X"} or af|panelAccordion::undisclosed-icon {content: url(...)}. Use this key instead of the undisclosed-icon-style key if you do not want a background-image. |
af|panelAccordion::disclosed-icon |
Overrides the default disclosed icon. Icons can be text or img elements, e.g. af|panelAccordion::disclosed-icon {content "X"} or af|panelAccordion::disclosed-icon {content: url(...)}. Use this key instead of the disclosed-icon-style key if you do not want a background-image. |
af|panelAccordion::overflow-top-icon |
Overrides the default top overflow icon. Icons can be text or img elements, e.g. af|panelAccordion::overflow-top-icon {content "X"} or af|panelAccordion::overflow-top-icon {content: url(...)}. Use this key instead of the top-overflow-indicator key if you do not want a background-image. |
af|panelAccordion::overflow-bottom-icon |
Overrides the default bottom overflow icon. Icons can be text or img elements, e.g. af|panelAccordion::overflow-bottom-icon {content "X"} or af|panelAccordion::overflow-bottom-icon {content: url(...)}. Use this key instead of the bottom-overflow-indicator key if you do not want a background-image. |
Resource Strings |
Description |
af_panelAccordion.TIP_DISCLOSE_BUTTON |
Tooltip for the disclosure icon when a panel is not being shown. |
af_panelAccordion.TIP_UNDISCLOSE_BUTTON |
Tooltip for the disclosure icon when a panel is being shown. |
af_panelAccordion.TIP_UNDISCLOSED_DISABLED_BUTTON |
Tooltip for the disclosure icon when a panel is being shown but the button is disabled. This is for panels that can not be hidden. |
af_panelAccordion.TIP_SHOW_PREVIOUS_BUTTON |
Tooltip for the panel accordion overflow placed at the top of the panel accordion. This is only shown when there is not enough space to show all the individual items. |
af_panelAccordion.TIP_SHOW_NEXT_BUTTON |
Tooltip for the panel accordion overflow placed at the bottom of the panel accordion. This is only shown when there is not enough space to show all the individual items. |
af_panelAccordion.TIP_DISCLOSE_PRECISE_BUTTON |
Tooltip for the disclosure icon when a panel is not being shown. This is only used in screenreader mode and takes a parameter that is the label for this panel. |
af_panelAccordion.TIP_UNDISCLOSE_PRECISE_BUTTON |
Tooltip for the disclosure icon when a panel is being shown. This is only used in screenreader mode and takes a parameter that is the label for this panel. |
af_panelAccordion.TIP_UNDISCLOSE_DISABLED_PRECISE_BUTTON |
Tooltip for the disclosure icon when a panel is being shown and the user is not able to hide it. This is only used in screenreader mode and takes a parameter that is the label for this panel. |
af_panelAccordion.TIP_PANEL_DISCLOSED |
Tooltip for panel that is displayed. This is only used in screenreader mode and takes a parameter that is the label for this panel. |
af_panelAccordion.TIP_PANEL_UNDISCLOSED |
Tooltip for panel that is hidden. This is only used in screenreader mode and takes a parameter that is the label for this panel. |
af_panelAccordion.TIP_PANEL_MOVE_UP |
Tooltip and text for the link rendered in screenreader mode when reordering is enabled to move the current item up in the order of displayed items. |
af_panelAccordion.TIP_PANEL_MOVE_DOWN |
Tooltip and text for the link rendered in screenreader mode when reordering is enabled to move the current item down in the order of displayed items. |
Style Selectors |
Description |
Conditions |
af|panelBorderLayout |
Style on the root element of the af:panelBorderLayout component. |
The panelBox component has attributes "ramp" and "background". With these attributes, the panelBox provides 8 different color schemes. For example, when panelBox's ramp="core" and background="dark", the panelBox's background-color might be a dark blue. When the panelBox's ramp="highlight" and background="default", the panelBox's background-color might be white.
The following selectors are all augmented by the two pseudo-classes. The first pseudo-class is the ramp which can have values of ":core" or ":highlight". The second pseudo-class is the background which can have the values of ":default", ":light", ":medium" or ":dark". For example, if you want to change the background color on the header start cell when the panelBox's ramp attribute is "core" and background attribute is "default" do the following: "af|panelBox::header-start:core:default {background-color:pink; border: none;}". NOTE: You can use the aliases to make change the header and content. These .AFPanelBox aliases are also included in the region selectors. For example, .AFPanelBoxHeaderCoreMedium:alias is included in the selectors af|panelBox::header-start:core:medium, af|panelBox::header-center:core:medium, af|panelBox::header-end:core:medium. So if you want to change the background color of the core medium panelBox'sheader, you can use the .AFPanelBoxHeaderCoreMedium:alias instead of three selectors.
Style Selectors |
Description |
Conditions |
af|panelBox |
The selector on the root dom element of this component. The root style contains default setting of the width of the panel Box to 100%.
Skin properties |
Description |
-tr-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for expand/collapse of the panelBox content region. This skin property is honored only if the animation is enabled in the system. |
-tr-header-height |
Used when the panelBox is being stretched by its parent container to indicate the CSS length for the header bar of the panelBox so that the content can be stretched to fill the remaining space, e.g., "25px". This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard). |
-tr-never-header-height |
Used when the panelBox has its header bar turned off, e.g. via showHeader="never". If set to "0px" then no header will be shown. If set to some other value, an empty header will be shown using this height for the cases when the header bar is turned off. |
-tr-footer-height |
Used when the panelBox is being stretched by its parent container to indicate the CSS length for the footer bar of the panelBox so that the content can be stretched to fill the remaining space. This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard). Note the footer can be completely omitted if you set this property to "0px". |
-tr-center-start-width |
Used when the panelBox is being stretched by its parent container to indicate the CSS length for the indenting of the content container from the start (e.g. left) side of the panelBox so that the contentStyle that an application developer might assign does not interfere with the built-in indentation of the content. This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard). |
-tr-center-end-width |
Used when the panelBox is being stretched by its parent container to indicate the CSS length for the indenting of the content container from the end (e.g. right) side of the panelBox so that the contentStyle that an application developer might assign does not interfere with the built-in indentation of the content. This skin property is honored only if the panelBox is being stretched (like when a child of a panelDashboard). |
|
af|panelBox::header-start |
Style the start side of the header of the panel box. Used to render rounded corners for the panelBox. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-start:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. For example, the ramp is set to "core" and background set to "default" the style used for this is "af|panelBox::header-start:core:default". |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
Only used by fusion skins. |
af|panelBox::header-center |
Style the center side of the header of the panel box. Used to render rounded corners for the panelBox. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-center:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
Only used by fusion skins. |
af|panelBox::header-text |
Style the container of the header element. |
af|panelBox::header-element |
Style the header element that contains the header text. |
af|panelBox::header-end |
Style the end side of the header of the panel box. Used to render rounded corners for the panelBox. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-end:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
Only used by fusion skins. |
af|panelBox::center |
Style the center area of the panel box that wraps the content area of the panel box. The "center" wrapper provides potentially different padding than the content area so that people can set padding to zero in the contentStyle attribute and not mess anything up with the built-in minimum padding (e.g. for shadows that might be present in a background image behind the content).
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
af|panelBox::content |
Style the content area of the panel box. This includes the .AFPanelBoxContent* alias, for example af|panelBox::content:core:default includes .AFPanelBoxContentCoreDefault:alias.
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
af|panelBox::footer-start |
Style the start side of the footer of the panel box (used only if -tr-footer-height is not 0px). Used to render rounded corners for the panelBox. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-start:core:default includes .AFPanelBoxFooterCoreDefault:alias.
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. For example, the ramp is set to "core" and background set to "default" the style used for this is "af|panelBox::footer-start:core:default". |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
Only used by fusion skins. |
af|panelBox::footer-center |
Style the center side of the footer of the panel box (used only if -tr-footer-height is not 0px). Used to render rounded corners for the panelBox. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-center:core:default includes .AFPanelBoxFooterCoreDefault:alias.
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
Only used by fusion skins. |
af|panelBox::footer-end |
Style the end side of the footer of the panel box (used only if -tr-footer-height is not 0px). Used to render rounded corners for the panelBox. This includes the .AFPanelBoxFooter* alias, for example af|panelBox::footer-end:core:default includes .AFPanelBoxFooterCoreDefault:alias.
Pseudo classes |
Description |
core |
styles when the ramp attribute is core. |
highlight |
styles when the ramp attribute is highlight |
default |
styles when the background attribute is default |
light |
styles when the background attribute is light |
medium |
styles when the background attribute is medium |
dark |
styles when the background attribute is dark |
|
Only used by fusion skins. |
af|panelBox::icon-style |
Style to support an icon to the left of the header title |
af|panelBox::disclosure-link |
Selector for the anchor element that contains the disclosure icon. |
af|panelBox::undisclosed-icon-style |
Style on the icon that is shown when the panel is undisclosed (collapsed). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the undisclosed-icon-style and define the icon for the undisclosed-icon key. |
af|panelBox::disclosed-icon-style |
Style on the icon that is shown when the panel is disclosed (expanded). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the disclosed-icon-style and define the icon for the disclosed-icon key. |
af|panelBox::instruction-text |
Styles the text that might come from the helpTopicId. |
af|panelBox::dynamic-help-icon-style |
Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
Icon Selectors |
Description |
af|panelBox::disclosed-icon |
The icon is displayed when the af:panelBox component is rendered in its disclosed state. |
af|panelBox::undisclosed-icon |
The icon is displayed when the af:panelBox component is rendered in its undisclosed state. |
af|panelBox::dynamic-help-icon |
Icon that can be used instead of a background-image on af|panelBox::dynamic-help-icon-style. By default this is null. If you use this af|panelBox::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|panelCollection |
The selector on the root dom element of this component.
Skin properties |
Description |
-tr-toolbar-height |
styles height of toolbar when present, e.g., "5px". |
-tr-statusbar-height |
styles height of statusbar when present, e.g., "5px". |
|
Icon Selectors |
Description |
af|panelCollection::qbe-icon |
Toolbar Icon for hiding/showing filter row in the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::qbe-hover-icon |
Toolbar hover Icon for hiding/showing filter row in the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::qbe-depressed-icon |
Toolbar depressed Icon for hiding/showing filter row in the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::freeze-icon |
Toolbar Icon for freezing a column in the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::freeze-disabled-icon |
Toolbar Icon for freezing a column in the table, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::freeze-hover-icon |
Toolbar hover Icon for freezing a column in the table, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::freeze-depressed-icon |
Toolbar hover Icon for freezing a column in the table, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::maximize-icon |
Toolbar Icon for maximizing the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::maximize-hover-icon |
Toolbar hover Icon for maximizing the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::maximize-depressed-icon |
Toolbar depressed Icon for maximizing the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::maximize-disabled-icon |
Toolbar disabled Icon for maximizing the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::wrap-icon |
Toolbar Icon for wrapping a column in the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::wrap-hover-icon |
Toolbar hover Icon for wrapping a column in the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::wrap-depressed-icon |
Toolbar hover Icon for wrapping a column in the table. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::wrap-disabled-icon |
Toolbar Icon for wrapping a column in the table, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-up-icon |
Toolbar Icon for moving up a node in display as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-up-disabled-icon |
Toolbar Icon for moving up a node in display as root for tree/treeTable, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-up-hover-icon |
Toolbar hover Icon for moving up a node in display as root for tree/treeTable, (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-up-depressed-icon |
Toolbar hover Icon for moving up a node in display as root for tree/treeTable, (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-to-top-icon |
Toolbar Icon for showing the root node of the model as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-to-top-disabled-icon |
Toolbar Icon for showing the root node of the model as root for tree/treeTable, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-to-top-hover-icon |
Toolbar hover Icon for showing the root node of the model as root for tree/treeTable, (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::go-to-top-depressed-icon |
Toolbar depressed Icon for showing the root node of the model as root for tree/treeTable, (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::show-as-top-icon |
Toolbar Icon for showing the currently selected node as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::show-as-top-hover-icon |
Toolbar hover Icon for showing the currently selected node as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::show-as-top-depressed-icon |
Toolbar depressed Icon for showing the currently selected node as root for tree/treeTable. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::show-as-top-disabled-icon |
Toolbar Icon for showing the currently selected node as root for tree/treeTable, when the item is disabled. (Icon content cannot use an image path with 2 leading slashes.) |
af|panelCollection::show-as-top-hover-icon |
Toolbar hover Icon for showing the currently selected node as root for tree/treeTable(Icon content cannot use an image path with 2 leading slashes.) |
Resource Strings |
Description |
af_panelCollection.LABEL_ADVANCED_SORT_DLG |
The title for the advanced sort dialog. |
af_panelCollection.LABEL_SORT_BY |
The label for the primary sort drop down that is shown in the advanced sort dialog. |
af_panelCollection.LABEL_THEN_BY |
The label for the secondary and tertiary sort drop down that is shown in the advanced sort dialog. |
af_panelCollection.LABEL_ASCENDING |
The label for the radio buttons for the ascending direction of sort. |
af_panelCollection.LABEL_DESCENDING |
The label for the radio buttons for the descending direction of sort. |
af_panelCollection.LABEL_SHOW_COLUMNS_DLG |
The title for the show more columns dialog. |
af_panelCollection.LABEL_HIDDEN_COLUMNS |
Label of left hand side of the shuttle component in the show more columns dialog. |
af_panelCollection.LABEL_VISIBLE_COLUMNS |
Label of right hand side of the shuttle component in the show more columns dialog. |
af_panelCollection.MSG_VISIBLE_COLUMN_REQUIRED |
Message that displays when user marks all columns as hidden. |
af_panelCollection.LABEL_REORDER_COLUMNS_DLG |
The title for the reorder columns dialog. |
af_panelCollection.LABEL_RESIZE_COLUMN_DLG |
The title for the resize column dialog. |
af_panelCollection.LABEL_COLUMN |
Label for the column to be resized in the resize column dialog. |
af_panelCollection.LABEL_COLUMN_MULTIPLE |
Value of the output text to identify that multiple columns have been selected for resize in the resize column dialog. |
af_panelCollection.LABEL_WIDTH |
Label for the input text field that the user enters a numeric value into in the resize column dialog. |
af_panelCollection.LABEL_PERCENT |
Select one choice item that represents the percentage based resize value in he resize column dialog. |
af_panelCollection.LABEL_PIXEL |
Select one choice item that represents the pixel based resize value in he resize column dialog. |
af_panelCollection.LABEL_DETACH_TABLE_DLG |
Label for the detach toolbar item as well as menu item. As a menu item it is the third item under the "View" menu. |
af_panelCollection.LABEL_DETACH_TREE_TABLE_DLG |
Label for the detach toolbar item as well as menu item for the tree and tree table. |
af_panelCollection.LABEL_MENU_FORMAT |
Label for the "Format" menu item. This is a root element in the menu bar. |
af_panelCollection.LABEL_MENU_VIEW |
Label for the "View" menu item. This is a root element in the menu bar. |
af_panelCollection.TIP_MENU_VIEW |
Tip for the "View" menu item. This is a root element in the menu bar. |
af_panelCollection.LABEL_MENU_COLUMNS |
Label for the "Columns" menu item. This is the first menu item under the "View" menu. |
af_panelCollection.LABEL_MENU_SORT |
Label for the "Sort" menu item. This is the fourth menu item under the "View" menu. This is a sub menu. |
af_panelCollection.LABEL_MENUITEM_COLUMNS_SHOWALL |
Label for the "Show All Columns" menu item. This is the first menu item under "Columns" menu under the "View" menu. |
af_panelCollection.LABEL_MENUIEM_COLUMNS_SHOWMORECOLUMNS |
Label for the "Show More Columns" menu item. This is the last menu item under "Columns" menu under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_FREEZE |
Label for the "Freeze" menu item. This is the second menu item under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_UNFREEZE |
Label for the "Unfreeze" menu item. This is the second menu item under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_DETACH |
Label for the "Detach" menu item. This is the third menu item under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_REDUCE |
Label for the "Reduce" menu item. This is the third menu item under the "View" menu. This is only when the tale has been detached. |
af_panelCollection.LABEL_MENUITEM_REORDER |
Label for the "Reorder Columns" menu item. This is the forth menu item under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_RESIZECOLUMNS |
Label for the "Resize Column(s)" menu item. This is the first menu item under the "Format" menu. |
af_panelCollection.LABEL_MENUITEM_QBE |
Label for the "Query By Example" menu item. This is the fifth menu item under the "View" menu. This is only available for tables that have filtering turned on. |
af_panelCollection.LABEL_MENUITEM_SORT_ASCENDING |
Label for the "Sort Ascending" menu item. This is the first menu item under "Sort" menu under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_SORT_DESCENDING |
Label for the "Sort Descending" menu item. This is the second menu item under "Sort" menu under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_SORT_ADVANCED |
Label for the "Advanced Sort" menu item. This is the third menu item under "Sort" menu under the "View" menu. |
af_panelCollection.LABEL_MENUITEM_WRAP |
Label for the "Wrap Column" menu item. This is the second menu item under the "Format" menu. |
af_panelCollection.LABEL_MENUITEM_EXPAND |
Label for the "Expand" menu item. This is the first menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is collapsed. This is also the first menu item in the context menu for the Tree when the node selected is collapsed. |
af_panelCollection.LABEL_MENUITEM_COLLAPSE |
Label for the "Collapse" menu item. This is the first menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is expanded. This is also the first menu item in the context menu for the Tree when the node selected is expanded. |
af_panelCollection.LABEL_MENUITEM_EXPAND_ALL_BELOW |
Label for the "Expand All Below" menu item. This is the second menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is collapsed. This is also the second menu item in the context menu for the Tree when the node selected is collapsed. |
af_panelCollection.LABEL_MENUITEM_COLLAPSE_ALL_BELOW |
Label for the "Collapse All Below" menu item. This is the second menu item under the "View" menu for Tree and Tree Table. This is only enabled when the user has selected a node in the Tree or Tree Table that is expanded. This is also the second menu item in the context menu for the Tree when the node selected is expanded. |
af_panelCollection.LABEL_MENUITEM_EXPAND_ALL |
Label for the "Expand All" menu item. This is the third menu item under the "View" menu for Tree and Tree Table. This is always enabled. |
af_panelCollection.LABEL_MENUITEM_COLLAPSE_ALL |
Label for the "Collapse All" menu item. This is the third menu item under the "View" menu for Tree and Tree Table. This is always enabled. |
af_panelCollection.LABEL_MENUITEM_GO_UP |
Tooltip for the command button "Go Up". This is located on the tool bar of the panel collection. |
af_panelCollection.LABEL_MENUITEM_SHOW_AS_TOP |
Label for the "Show As Top" menu item. This is the sixth menu item under the "View" menu for Tree and Tree Table. This is always enabled. This is also the tooltip for the command button "Show As Top". |
af_panelCollection.LABEL_MENUITEM_GO_TO_TOP |
Label for the "Go To Top" menu item. This is the seventh menu item under the "View" menu for Tree and Tree Table. This is always enabled. This is also the tooltip for the command button "Go To Top". |
af_panelCollection.LABEL_MENUITEM_SCROLL_TO_FIRST |
Label for the "Scroll To First" menu item. This is the seventh menu item under the "View" menu for Tree and Tree Table. This is always enabled. |
af_panelCollection.LABEL_MENUITEM_SCROLL_TO_LAST |
Label for the "Scroll To Last" menu item. This is the seventh menu item under the "View" menu for Tree and Tree Table. This is always enabled. |
af_panelCollection.LABEL_STATUSBARITEM_ROWS_SELECTED |
Label for the number of rows selected status shown at the bottom of the table or tree table. |
af_panelCollection.LABEL_STATUSBARITEM_SELECTED_ALL |
Value for the number of rows selected status shown at the bottom of the table or tree table. This is shown when all rows have been selected. |
af_panelCollection.LABEL_STATUSBARITEM_COLUMNS_HIDDEN |
label for the number of rows hidden status shown at the bottom of the table or tree table. |
af_panelCollection.LABEL_STATUSBARITEM_COLUMNS_FROZEN |
Label for the frozen column status shown at the bottom of the table or tree table. |
af_panelCollection.TIP_BUTTON_DETACH |
Tooltip for the "Detach" button. |
af_panelCollection.TIP_BUTTON_FREEZE |
Tooltip for the "Freeze" button. |
af_panelCollection.TIP_BUTTON_WRAP |
Tooltip for the "Wrap" button. |
Style Selectors |
Description |
Conditions |
af|panelDashboard |
The selector on the root dom element of this component. The root style contains default setting of the width and height in case this component is not placed inside of a parent that will stretch it otherwise the stretched dimensions will take precedence.
Skin properties |
Description |
-tr-insert-delete-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for optimized insert and delete changes. This skin property is honored only if the animation is enabled in the system. |
-tr-reorder-animation-duration |
specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for the repositioning of panelBox children that have componentDragSource tags inside of them and the user is dragging these components around within the panelDashboard. This skin property is honored only if the animation is enabled in the system. |
|
af|panelDashboard::drop-target |
Specifies the style information for the element used to identify the currently chosen location within the panelDashboard that a dragged panelBox child will move to if the user drops the panelBox at this location. Typically, a background-color style is what you will want to customize here. |
Style Selectors |
Description |
Conditions |
af|panelDrawer |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
start |
Present if position is start |
end |
Present if position is end |
left |
Present if position is left |
right |
Present if position is right |
iconified |
Present if the icon is the primary way to identify each tab. |
open |
Present when the drawer is opened |
float |
Present if drawer is supposed to look like it's floating over other content. |
max |
Present if height is 100% and the drawer should stretch to match the container height. This can be used to skin the bottom border of the drawer differently depending on if the height is 100%. |
Skin properties |
Description |
-tr-auto-dismiss |
Determines whether the drawer auto-dismisses, meaning does it close if you click anywhere outside the drawer. When set to false you must click the drawer handle to close the drawer. |
-tr-open-animation-duration |
Determines the millisecond duration of the animation when the drawer is opened. |
-tr-close-animation-duration |
Determines the millisecond duration of the animation when the drawer is closed. |
|
af|panelDrawer::body |
Style on the body of the panelDrawer component. |
af|panelDrawer::tabs |
Style around the tabs. |
af|panelDrawer::tab |
Style on each tab in the panelDrawer component.
Pseudo classes |
Description |
selected |
Styles content for the currently selected tab |
disabled |
Styles content for a disabled tab |
|
af|panelDrawer::tab-content |
Style on the tab content. |
af|panelDrawer::icon-style |
Style on the icon in the tab. |
Style Selectors |
Description |
Conditions |
af|panelSpringboard |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
strip |
if component is in strip mode |
grid |
if component is in grid mode |
flow |
if component is in flow mode |
Skin properties |
Description |
-tr-hide-selected-pointer |
Determines whether the selected pointer or arrow will be hidden or displayed .The default value of skin property is false. |
|
af|panelSpringboard::body |
Style on the body of the panelSpringboard component.
Pseudo classes |
Description |
busy |
Style on the body when it is busy loading the new content. |
|
af|panelSpringboard::items |
Style around the items of the panelSpringboard. |
af|panelSpringboard::item |
Style on each item in the panelSpringboard component.
Pseudo classes |
Description |
selected |
Styles content for the currently selected item |
|
af|panelSpringboard::canvas |
Style on canvas in the panelSpringboard component. |
af|panelSpringboard::badge |
Style on the badge element in the panelSpringboard. |
af|panelSpringboard::item-icon-style |
Style on the image in the panelSpringboard. |
af|panelSpringboard::item-text |
Style on the text of the item in the panelSpringboard. |
af|panelSpringboard::selected-pointer |
Style on the div that points to selected arrow in the panelSpringboard. we can also skin the background-image of the selected-pointer to show an arrow. |
af|panelSpringboard::conveyor |
Style on the conveyor area of panelSpringboard. |
af|panelSpringboard::conveyor-belt-container |
Style on the conveyor belt panelSpringboard. |
af|panelSpringboard::conveyor-belt-content |
Style on the conveyor belt content area panelSpringboard. |
af|panelSpringboard::start-conveyor-belt-indicator |
Style on the start of conveyor belt indicator panelSpringboard. |
af|panelSpringboard::end-conveyor-belt-indicator |
Style on the end of conveyor belt indicator panelSpringboard. |
af|panelSpringboard::start-conveyor-belt-indicator-container |
Style on the start of conveyor belt container panelSpringboard. |
af|panelSpringboard::end-conveyor-belt-indicator-container |
Style on the end of conveyor belt container panelSpringboard. |
Style Selectors |
Description |
Conditions |
af|panelFormLayout |
The selector on the root dom element of this component. |
af|panelFormLayout::column |
Specifies the style information for columns of the panelFormLayout, like vertical-align:top and text-align. |
af|panelFormLayout::separator |
Specifies the style information for separators between groups in the panelFormLayout. |
af|panelFormLayout::label-cell |
Specifies the style information for the label cell of the panelFormLayout when side-by-side with content. This includes .AFLabel:alias. |
af|panelFormLayout::label-stacked-cell |
Specifies the style information for the label cell of the panelFormLayout when stacked above content. This includes af|panelForm::label-cell. |
.AFPanelFormLayoutContentCell |
Specifies the style information for the content cells of form item components when they are placed inside of a panelFormLayout (as opposed to being rendered stand-alone on the page or inside of some other kind of layout component). The panelLabelAndMessage component is an example of one component whose padding needs to be adjusted when placed in a panelFormLayout vs. being stand-alone on the page so it can be specifically changed by making a skin definition like this: af|panelLabelAndMessage::content-cell.AFPanelFormLayoutContentCell { ... } |
Style Selectors |
Description |
Conditions |
af|panelGridLayout |
Selector that renders on the root dom element of the component. |
Style Selectors |
Description |
Conditions |
af|panelGroupLayout |
Selector that renders on the root dom element of the component. |
Style Selectors |
Description |
Conditions |
af|panelHeader |
Selector that renders on the root dom element of the component.
Skin properties |
Description |
-tr-header-height |
Used when the panelHeader is being stretched by its parent container to indicate the CSS length for the header bar of the panelHeader so that the content can be stretched to fill the remaining space. This skin property is honored only if the panelHeader is being stretched (like when a child of a panelSplitter). |
|
af|panelHeader::title-table |
The style for the table containing the header. Generally this will not be modified, but this allows for more flexible skinning of the title in general so that under certain curcumstances, it can be styled to match the content container. |
af|panelHeader::title-start$ |
The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. The value for "$" is a number between 1 and 5 signifying the five header types. |
Only used by fusion skins. |
af|panelHeader::title$ |
The style for the title of the header, not including the start and end cells. This is the section that immediately follows the "af|panelHeader::title-startx" key. The value for $ is a number between 1 and 5 signifying the five header types. |
af|panelHeader::title-end$ |
The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. The value for "$" is a number between 1 and 5 signifying the five header types. |
Only used by fusion skins. |
af|panelHeader::icon-style |
Applied to the element containing the specified icon if messageType is set to null. Otherwise the icon associated with the message type is displayed in the container. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelHeader::title-text$ |
Styles the "header" element inside the title of the element specified by the af|panelHeader::title$ key. This element surrounds the header text. The value for "$" is a number between 1 and 5 signifying the five header types. Available pseudo-classes are :error, :warning, :info:, :confirmation and are set according to the message type. If no message type is specified or message type is set to none then none of these pseudo-classes will be present
Pseudo classes |
Description |
error |
|
warning |
|
info |
|
confirmation |
|
|
af|panelHeader::context-container |
The style for the element containing the contents of the context facet. This will be placed directly after the header text. |
af|panelHeader::instruction-text |
Styles the text that might come from the helpTopicId. |
af|panelHeader::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|panelHeader::toolbar |
This is a potential sub section of the "af|panelHeader::titlex". It applies to end-aligned toolbars in the title section. This section is only present if there is either a toolbar or menuBar facet (or both) included in the panelHeader. |
af|panelHeader::help-link-container |
If there is "dynamic help" for this header, and there is not a help topic with dynamic content, then this style pertains to the element containing the dynamic help link. This will be place directly after the context facet. |
af|panelHeader::info |
Applied to the element containing the contents of the "info" facet. When help is available, this element may also contain the contents of the legend. |
af|panelHeader::content$ |
The style for the content region of the header. This is the area where the components children will be rendered. It is located directly below the af|panelHeader::titlex key. The value for $ is a number between 1 and 5 signifying the five header types. |
Icon Selectors |
Description |
af|panelHeader::confirmation-icon |
Icon used when the messageType is set to "confirmation". |
af|panelHeader::dynamic-help-icon |
Icon that can be used instead of a background-image on af|panelHeader::dynamic-help-icon-style. By default this is null. If you use this af|panelHeader::dynamic-help-icon-style can then be used for background colors, etc. |
af|panelHeader::error-icon |
Icon used when the messageType is set to "error". |
af|panelHeader::information-icon |
Icon used when the messageType is set to "information". |
af|panelHeader::warning-icon |
Icon used when the messageType is set to "warning". |
Resource Strings |
Description |
af_panelHeader.TIP_DYNAMIC_HELP |
Tooltip for the dynamic help icon. This is only shown if there is no helpTopicID attribute set on the panel header. |
af_panelHeader.LABEL_HELP_DIALOG_TITLE |
Title for the dynamic help dialog. This is only shown when there is no helpTopicID attribute set on the panel header. The dialog is shown when the dynamic help is selected. This dialog shows JSF messages. |
Style Selectors |
Description |
Conditions |
af|panelLabelAndMessage |
Style on the root element of the af:panelLabelAndMessage component.
Skin properties |
Description |
-tr-output-content-padding |
Specifies the padding to be used between the label and the output content when in a panelFormLayout. This will only affect output component children. |
|
af|panelLabelAndMessage::access-key |
Specifies the style information for the access key, which appears in the label of the panelLabelAndMessage. |
af|panelLabelAndMessage::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|panelLabelAndMessage::label |
Specifies the style information for the label of the panelLabelAndMessage. |
af|panelLabelAndMessage::content-cell |
Specifies the style information for the main content cell, which contains child components and the end facet. |
af|panelLabelAndMessage::end-facet |
Specifies the style information for the end facet of the panelLabelAndMessage. |
Icon Selectors |
Description |
af|panelLabelAndMessage::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|panelLabelAndMessage::dynamic-help-icon |
Icon that can be used instead of a background-image on af|panelLabelAndMessage::dynamic-help-icon-style. By default this is null. If you use this af|panelLabelAndMessage::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|panelList |
Styles the root dom element of the panelList. Note: if you would like to style the bullets, you can set a CSS property/value to the listStyle attribute. For example, listStyle="list-style-type: decimal" changes the list style to decimals. See the w3.org's CSS spec for more options. |
af|panelList::item |
Style applied to items in the panelList. |
af|panelList::link |
Style applied on the links present inside the panelList component. |
Style Selectors |
Description |
Conditions |
af|panelSplitter |
Selector that renders on the root dom element of the panelSplitter component. Skinning the padding and border styles is not supported; doing this may cause the user interface elements to layout incorrectly.
Pseudo classes |
Description |
flow |
when the splitter is being displayed in a dimensionsFrom=children mode |
Skin properties |
Description |
-tr-first-border |
The root style contains a skinning property "-tr-first-border" that is used to specify whether the pane surrounding the "first" facet contents has a border. The value can be "all" if you want splitters to have visible borders in your skin by default or "none" to have no borders by default. In a case-by-case basis, your splitter components can override this skin-based setting by specifying a value in the "firstBorder" component attribute. It is important to note that this attribute (just like inlineStyle) can easily be abused. More times than not, you should not use this attribute because by using it, you are likely optimizing your page design for a specific skin. You should only force the borders on or off for cases where the contents of the pane would either provide enough or not enough delineation among the 2 panes of your splitter. For example, forcing borders off on a splitter that surrounds your entire page or forcing borders on for a pane that needs emphasis. You may want to test your application in a variety of skins to see if your use of these kinds of styling attributes will prevent others from being able to display your application with custom skins. |
-tr-second-border |
The root style contains a skinning property "-tr-second-border" that is used to specify whether the pane surrounding the "second" facet contents has a border. The value can be "all" if you want splitters to have visible borders in your skin by default or "none" to have no borders by default. In a case-by-case basis, your splitter components can override this skin-based setting by specifying a value in the "secondBorder" component attribute. It is important to note that this attribute (just like inlineStyle) can easily be abused. More times than not, you should not use this attribute because by using it, you are likely optimizing your page design for a specific skin. You should only force the borders on or off for cases where the contents of the pane would either provide enough or not enough delineation among the 2 panes of your splitter. For example, forcing borders off on a splitter that surrounds your entire page or forcing borders on for a pane that needs emphasis. You may want to test your application in a variety of skins to see if your use of these kinds of styling attributes will prevent others from being able to display your application with custom skins. |
-tr-divider-size |
The number of pixels for the space between the two splitter panes where the divider and collapse/restore button lives. |
-tr-collapse-animation-duration |
The minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for the collapsing or expanding of the panel splitter. This skin property is honored only if the animation is enabled in the system. |
|
af|panelSplitter::pane |
Styles the dom elements of both panes. Skinning the padding and border styles is not supported; doing this may cause the user interface elements to layout incorrectly. |
af|panelSplitter::horizontal-divider |
Styles the dom element of the divider in the horizontal panelSplitter. Skinning the padding, border and width styles is not supported. Skinning the padding and border styles may cause the user interface elements to layout incorrectly. Skinning the width style will have no effect.
Pseudo classes |
Description |
disclosed |
|
flow |
when the panelSplitter is being displayed in a dimensionsFrom=children mode |
positioned-from-end |
|
|
af|panelSplitter::horizontal-icon-style |
Styles the dom element of the anchor that holds the collapse/restore icon. This is only for horizontal panelSplitters. You can specify gradient images for the icon for default and hover state. If the height is specified, it needs to match the height of the icon. Skinning the width style is not supported; doing this will have no effect. |
af|panelSplitter::horizontal-icon-container |
Styles the container for the collapse/restore button in horizontal (side-by-side) splitters. Generally defines a vertical-align and padding-top or padding-bottom. |
af|panelSplitter::horizontal-highlighter |
Styles the dom element of the highlighter that shows up inside the divider when hovered. This is only for horizontal panelSplitters.
Pseudo classes |
Description |
flow |
|
|
af|panelSplitter::vertical-divider |
Styles the dom element of the divider in the vertical panelSplitter. Skinning the padding, border and height styles is not supported. Skinning the padding and border styles may cause the user interface elements to layout incorrectly. Skinning the height style will have no effect.
Pseudo classes |
Description |
disclosed |
|
flow |
when the panelSplitter is being displayed in a dimensionsFrom=children mode |
positioned-from-end |
|
|
af|panelSplitter::vertical-icon-style |
Styles the dom element of the anchor that holds the collapse/restore icon. This is only for vertical panelSplitters. You can specify gradient images for the icon for default and hover state. If the width is specified, it needs to match the width of the icon. Skinning the height style is not supported; doing this will have no effect. |
af|panelSplitter::vertical-icon-container |
Styles the container for the collapse/restore button in vertical (one above the other) splitters. Generally defines a text-align and padding-left or padding-right. |
af|panelSplitter::vertical-highlighter |
Styles the dom element of the highlighter that shows up inside the divider when hovered. This is only for vertical panelSplitters |
Icon Selectors |
Description |
af|panelSplitter::horizontal-collapse-icon |
The collapse icon in the horizontal divider. The width of the icon needs to match the width of the horizontal divider. |
af|panelSplitter::horizontal-restore-icon |
The restore icon in the horizontal divider. The width of the icon needs to match the width of the horizontal divider. |
af|panelSplitter::vertical-collapse-icon |
The collapse icon in the vertical divider. The height of the icon needs to match the height of the vertical divider. |
af|panelSplitter::vertical-restore-icon |
The restore icon in the vertical divider. The height of the icon needs to match the height of the vertical divider. |
Resource Strings |
Description |
af_panelSplitter.TIP_COLLAPSE |
Tooltip for the panel splitter to collapse the splitter. This is only displayed when the splitter is not collapsed. |
af_panelSplitter.TIP_RESTORE |
Tooltip for the panel splitter to restore the splitter to last open position. This is only displayed when the splitter is collapsed. |
af_panelSplitter.TIP_COLLAPSE_LABELED_PANE |
Labeled tooltip (using the collapsible pane's landmark value) for the panel splitter to collapse the splitter. This is only displayed when the splitter is not collapsed. |
af_panelSplitter.TIP_RESTORE_LABELED_PANE |
Labeled tooltip (using the collapsible pane's landmark value) for the panel splitter to restore the panel splitter to last open position. This is only displayed when the splitter is collapsed. |
Style Selectors |
Description |
Conditions |
af|panelStretchLayout |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
flow |
when the panelStretchLayout is being displayed in a dimensionsFrom=children mode |
|
Style Selectors |
Description |
Conditions |
af|panelTabbed |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
top-tabs |
Present if top tabs are visible, or both top and bottom |
bottom-tabs |
Present if bottom or both top and bottom tabs are visible |
start-tabs |
Present if start tabs are visible |
end-tabs |
Present if end tabs are visible |
right-tabs |
Present if right tabs are visible |
left-tabs |
Present if left tabs are visible |
iconified |
Present if the icon is the primary identification of the tab |
Skin properties |
Description |
-tr-layout-type |
Determines how the panelTabbed handles tab items when there is not enough horizontal space. Specify 'conveyor' if you want buttons that provide a conveyor belt implementation. Specify 'overflow' if you want overflow popups. |
-tr-tab-bar-height |
Sets the value (with units, e.g., "2em" or "21px") for the height of the tab bar that displays tabs as well as the height of the tab contents. This property can also be retrieved if you need to know the height of the tabs in the skin. You can tweak the line-height of the ::tab-start, ::tab-conent, ::tab-end if you want to adjust where the text appears vertically within this bar. Note that you should not assign a font-size on these elements because if your height is in font-relative units, e.g. "em", it may not resolve the a consistent number of pixels unless all elements that get this height value use the same font-size. The panelTabbed component may have up to two tab bars one at the top of the component when the panelTabbed's position is set to above, or one at the bottom when the panelTabbed's position is set to below, and one at both the top and the bottom when the panelTabbed's position is set to both. When the panelTabbed's position is set to above, there will only be one tab bar, the top will then use the value from -tr-tab-bar-height while the space where the bottom tab bar would otherwise exist will end up using the value from -tr-empty-bar-height instead. |
-tr-empty-bar-height |
Sets the value in pixels for the height of tab bars that do not display any tabs. This occurs at the bottom tab bar when the panelTabbed's position is set to above and at the top tab bar when the panelTabbed's position is set to below. So if the panelTabbed's position is set to above, the top bar height is set to the -tr-tab-bar-height value while the bottom bar height is set to the -tr-empty-bar-height value. |
-tr-tab-bar-layout |
Sets whether the tab bars extend into the "start" and "end" areas. If the body area of the tabs have rounded corners, you might want the tabs to only show up in the non-corner areas of the bar. For this, you would specify "center" (the default) as the value for this property. However, if you want the tabs to show up on top of these corner pieces because you wish the tabs to appear flush with the outer edge of the body area, you would specify "full" as the value for this property. |
|
af|panelTabbed::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|panelTabbed::header-start |
Selector for the top left (top right for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the header.
Pseudo classes |
Description |
flow |
when the panelTabbed is being displayed in a dimensionsFrom=disclosedChild mode |
Skin properties |
Description |
-tr-width |
Specifies the width. |
|
Only used by fusion skins. |
af|panelTabbed::header |
Style on the header of the panelTabbed component. This is the container for the "above" tabs. When tabs are in the header, the height of this header will come from the height specified in the "-tr-tab-bar-height" property. Otherwise, the height from the property "-tr-height" defined in this selector is used (for a header-specific empty bar height) or if not defined, a generic height from the "-tr-empty-bar-height" property is used.
Skin properties |
Description |
-tr-height |
Specifies the height, e.g, "4px". In a skin that uses css borders instead of image borders (Skyros), this property has no effect. |
|
af|panelTabbed::header-center |
Selector for the area between the footer-start and footer-end areas. Typically, this defines a background image between the start and end corner images, particularly useful if -tr-tab-bar-layout is set to "full". The height is taken from the height of the header. |
Only used by fusion skins. |
af|panelTabbed::header-end |
Selector for the top right (top left for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the header.
Pseudo classes |
Description |
flow |
when the panelTabbed is being displayed in a dimensionsFrom=disclosedChild mode |
Skin properties |
Description |
-tr-width |
Specifies the width. |
|
Only used by fusion skins. |
af|panelTabbed::content |
Style on the wrapper element of the body content (area between the header and footer bars) of the panelTabbed component. |
af|panelTabbed::body-start |
Selector for the left side (right side for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the body.
Pseudo classes |
Description |
flow |
when the panelTabbed is being displayed in a dimensionsFrom=disclosedChild mode |
Skin properties |
Description |
-tr-width |
Specifies the width. |
|
af|panelTabbed::body |
Style on the body of the panelTabbed component. This is the area between the header and footer bars.
Pseudo classes |
Description |
flow |
when the panelTabbed is being displayed in a dimensionsFrom=disclosedChild mode |
|
af|panelTabbed::body-end |
Selector for the right side (left side for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the body.
Pseudo classes |
Description |
flow |
when the panelTabbed is being displayed in a dimensionsFrom=disclosedChild mode |
Skin properties |
Description |
-tr-width |
Specifies the width. |
|
af|panelTabbed::footer-start |
Selector for the bottom left (bottom right for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the footer.
Pseudo classes |
Description |
flow |
when the panelTabbed is being displayed in a dimensionsFrom=disclosedChild mode |
Skin properties |
Description |
-tr-width |
Specifies the width. |
|
Only used by fusion skins. |
af|panelTabbed::footer |
Style on the footer of the panelTabbed component. This is the container for the "below" tabs. When tabs are in the footer, the height of this footer will come from the height specified in the "-tr-tab-bar-height" property noted below. Otherwise, the height from the property "-tr-height" defined in this selector is used (for a footer-specific empty bar height) or if not defined, a generic height from the "-tr-empty-bar-height" property noted below is used.
Skin properties |
Description |
-tr-height |
|
|
af|panelTabbed::footer-center |
Selector for the area between the footer-start and footer-end areas. Typically, this defines a background image between the start and end corner images, particularly useful if -tr-tab-bar-layout is set to "full". The height is taken from the height of the footer. |
Only used by fusion skins. |
af|panelTabbed::footer-end |
Selector for the bottom right (bottom left for RTL). The property "-tr-width" is supported to specify the width. The height is taken from the height of the footer.
Pseudo classes |
Description |
flow |
when the panelTabbed is being displayed in a dimensionsFrom=disclosedChild mode |
Skin properties |
Description |
-tr-width |
Specifies the width. |
|
Only used by fusion skins. |
af|panelTabbed::tab |
Style on the tabs in the panelTabbed component. This applies to tabs in both the header and the footer.
Pseudo classes |
Description |
selected |
Styles content for the currently selected tab |
disabled |
Styles content for disabled tabs |
highlighted |
Styles content for the currently keyboard focused tab. |
|
af|panelTabbed::tab-start |
Style on the start of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. You will also probably want to specify separate changes for the ::header and the ::footer, and you may want to specify alternate styling for :disabled and :selected states as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). Here is an example of a full reskinning of the tabs: af|panelTabbed::header af|panelTabbed::tab-start {width: 10px; background-image:url('/images/tab_top_left_black.png');} af|panelTabbed::header af|panelTabbed::tab-end {width: 10px; background-image:url('/images/tab_top_right_black.png');} af|panelTabbed::header af|panelTabbed::tab-content {background-image:url('/images/tab_top_middle_black.png');} af|panelTabbed::footer af|panelTabbed::tab-start {width: 10px; background-image:url('/images/tab_bottom_left_black.png');} af|panelTabbed::footer af|panelTabbed::tab-end {width: 10px; background-image:url('/images/tab_bottom_right_black.png');} af|panelTabbed::footer af|panelTabbed::tab-content {background-image:url('/images/tab_bottom_middle_black.png');} af|panelTabbed::header af|panelTabbed::tab:disabled af|panelTabbed::tab-start {background-image:url('/images/tab_top_left_red.png');} af|panelTabbed::header af|panelTabbed::tab:disabled af|panelTabbed::tab-end {background-image:url('/images/tab_top_right_red.png');} af|panelTabbed::header af|panelTabbed::tab:disabled af|panelTabbed::tab-content {background-image:url('/images/tab_top_middle_red.png');} af|panelTabbed::footer af|panelTabbed::tab:disabled af|panelTabbed::tab-start {background-image:url('/images/tab_bottom_left_red.png');} af|panelTabbed::footer af|panelTabbed::tab:disabled af|panelTabbed::tab-end {background-image:url('/images/tab_bottom_right_red.png');} af|panelTabbed::footer af|panelTabbed::tab:disabled af|panelTabbed::tab-content {background-image:url('/images/tab_bottom_middle_red.png');} af|panelTabbed::header af|panelTabbed::tab:selected af|panelTabbed::tab-start {background-image:url('/images/tab_top_left_blue.png');} af|panelTabbed::header af|panelTabbed::tab:selected af|panelTabbed::tab-end {background-image:url('/images/tab_top_right_blue.png');} af|panelTabbed::header af|panelTabbed::tab:selected af|panelTabbed::tab-content {background-image:url('/images/tab_top_middle_blue.png');} af|panelTabbed::footer af|panelTabbed::tab:selected af|panelTabbed::tab-start {background-image:url('/images/tab_bottom_left_blue.png');} af|panelTabbed::footer af|panelTabbed::tab:selected af|panelTabbed::tab-end {background-image:url('/images/tab_bottom_right_blue.png');} af|panelTabbed::footer af|panelTabbed::tab:selected af|panelTabbed::tab-content {background-image:url('/images/tab_bottom_middle_blue.png');} |
Only used by fusion skins. |
af|panelTabbed::tab-end |
Style on the end of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. You will also probably want to specify separate changes for the ::header and the ::footer, and you may want to specify alternate styling for :disabled and :selected states as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example. |
Only used by fusion skins. |
af|panelTabbed::tab-content |
Style on the middle of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. To provide an alternate skinning of the tabs, you will want to specify alternate background images to the ::tab-start, ::tab-end, and ::tab-content. You will also probably want to specify separate changes for the ::header and the ::footer, and you may want to specify alternate styling for :disabled and :selected states as well. Styling with a border is not supported (doing this will result in browser compatibility issues based on em sizing). See the definition for ::tab-start for a full example. |
af|panelTabbed::tab-text-link |
Style on the anchor (link) part of the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. Disabled tabs do not have a tab-text-link selector. |
af|panelTabbed::icon-style |
Style on the icons (if present) in the tabs used with the panelTabbed component. This applies to tabs in both the header and the footer. |
af|panelTabbed::start-overflow-indicator |
Style on the start overflow indicator that is present when the toolbar tabs have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelTabbed::end-overflow-indicator |
Style on the end overflow indicator that is present when the toolbar tabs have compressed layout mode of overflow. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelTabbed::start-conveyor-belt-indicator |
Style on the start conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelTabbed::end-conveyor-belt-indicator |
Style on the end conveyor belt indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelTabbed::droplist-indicator |
Style on the droplist indicator that is present when the toolbar tabs have compressed layout mode of conveyor belt or overflow droplist. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelTabbed::disclosed-remove-icon-style |
If tab removal is enabled, this is the style of the remove icon used on a disclosed tab item. The icon is specified as a background-image in this key. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelTabbed::undisclosed-remove-icon-style |
If tab removal is enabled, this is the style of the remove icon used on an undisclosed tab item. The icon is specified as a background-image in this key. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|panelTabbed::disclosed-remove-disabled-icon-style |
If tab removal is enabled, this is the style of the disabled remove icon used on a disclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key. |
af|panelTabbed::undisclosed-remove-disabled-icon-style |
If tab removal is enabled, this is the style of the disabled remove icon used on an undisclosed tab item that is set to remove disabled. The icon is specified as a background-image in this key. |
Icon Selectors |
Description |
af|panelTabbed::start-overflow-icon |
Overrides the default start overflow icon. Icons can be text or img elements, e.g. af|panelTabbed::start-overflow-icon {content "X"} or af|panelTabbed::start-overflow-icon {content: url(...)}. Use this key instead of the start-overflow-indicator key if you do not want a background-image. |
af|panelTabbed::end-overflow-icon |
Overrides the default end overflow icon. Icons can be text or img elements, e.g. af|panelTabbed:::end-overflow-icon {content "X"} or af|panelTabbed:::end-overflow-icon {content: url(...)}. Use this key instead of the end-overflow-indicator key if you do not want a background-image. |
af|panelTabbed::disclosed-remove-icon |
If tab removal is enabled, this overrides the default remove icon on a disclosed tab item. Icons can be text or img elements, e.g. af|panelTabbed::disclosed-remove-icon {content "X"} or af|panelTabbed::disclosed-remove-icon {content: url(...)}. Use this key instead of the disclosed-remove-icon-style key if you do not want a background-image. |
af|panelTabbed::undisclosed-remove-icon |
If tab removal is enabled, this overrides the default remove icon on an undisclosed tab item. Icons can be text or img elements, e.g. af|panelTabbed::undisclosed-remove-icon {content "X"} or af|panelTabbed::undisclosed-remove-icon {content: url(...)}. Use this key instead of the undisclosed-remove-icon-style key if you do not want a background-image. |
af|panelTabbed::remove-disabled-icon |
If tab removal is enabled, this overrides the default disabled remove icon on an tab item that is set to remove disabled. Icons can be text or img elements, e.g. af|panelTabbed::remove-disabled-icon {content "X"} or af|panelTabbed::remove-disabled-icon {content: url(...)}. Use this key instead of the disclosed-remove-disabled-icon-style and undisclosed-remove-disabled-icon-style keys if you do not want a background-image. |
Resource Strings |
Description |
af_panelTabbed.TIP_REMOVE_TAB |
Tooltip on a tab remove button. |
af_panelTabbed.TIP_LIST_ALL_TABS |
Tooltip on a conveyor belt droplist button. |
Style Selectors |
Description |
Conditions |
af|panelWindow |
Selector that renders on the root dom element of the component.
Pseudo classes |
Description |
drag |
|
inactive |
|
Skin properties |
Description |
-tr-open-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for opening the window. This skin property is honored only if the animation is enabled in the system. |
-tr-animate |
The root style, contains skinning property "-tr-animate" that specifies whether animation is turn on or off for popup windows. Set a value of "true" to enable animation. Set "false" to turn off animation. This skin property is honored only if the animation is enabled in the system. |
-tr-default-content-width |
Provides the default contentWidth if not provided when stretching is turned on, "stretchChildren=first". |
-tr-default-content-height |
Provides the default contentHeight if not provided when stretching is turned on, "stretchChildren=first". |
|
af|panelWindow::resize-ghost |
The selector applied to the element temporarily created to animate a mouse drag resize. The element is a div with absolute positioning that floats above the dialog getting resized. The border, background color and opacity are attributes that a custom skin might want to adjust. |
af|panelWindow::main |
Selector for the main element of this panelWindow. This selector along with the pseudo-classes :drag and :inactive on the root element can be used to customize the inactive and drag states of the panelWindow. For e.g. "af|panelWindow:drag af|panelWindow::main{opacity:0.15;} @agent ie {af|panelWindow:drag af|panelWindow::main{filter:alpha(opacity:15);}}" changes the drag state of the panelWindow so that it is only 15% opaque. |
af|panelWindow::inactive-background |
Selector for displaying the background when the panelWindow is not the active window. This selector is used in conjunction with the pseudo-class :inactive on the root element and af|panelWindow::main to achieve an inactive look for the panelWindow. For e.g. "af|panelWindow::inactive-background{ background-color:#FFFFFF;} af|panelWindow:inactive af|panelWindow::main{opacity:0.5;} @agent ie {af|panelWindow:inactive af|panelWindow::main{filter:alpha(opacity:50);}" sets the background to white and lets it bleed into the panelWindow by setting its opacity to 50%. |
af|panelWindow::header-start |
The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|panelWindow::header |
Styles the "header" element. This element surrounds the header text, icon and close regions.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). |
|
af|panelWindow::header-end |
The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|panelWindow::footer-start |
The style for the starting cell of the footer. Generally this is the decoration on the left side of the screen and can be used to create rounded edges.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|panelWindow::footer |
The style for the center cell of the footer.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). |
|
af|panelWindow::footer-end |
The style for the ending cell of the footer. Generally this is the decoration on the right side of the screen and can be used to create rounded edges.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|panelWindow::content-start |
The style for the starting of the content. This will be located directly below the af|panelWindow::header-start key, above the af|panelWindow::footer-start key and before the af|panelWindow::content key.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|panelWindow::content |
The style for the content region of the panelWindow. This is the area where the components children will be rendered. It is located directly below the af|panelWindow::header key, above the af|panelWindow::footer and after the af|panelWindow::content-start key.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to change attributes such as padding when resize mode is on. |
|
af|panelWindow::content-center |
The center of the panelWindow is marked with this style. It is contained in the af|panelWindow::content node. Padding and color can be adjusted with this style but overflow is managed programmatically. Use of this style is conditional on property values stretchChildren=first or resize=on. |
af|panelWindow::content-end |
The style for the ending of the content. This will be located directly below the af|panelWindow::header-end key, above the af|panelWindow::footer-end key and after the af|panelWindow::content key.
Pseudo classes |
Description |
resizable |
Use the :resizable pseudo-class to add the correct resize cursor to the panelWindow edges when in resize mode (i.e., cursor: nw-resize). The :resizable pseudo-class can be used with the :rtl pseudo-class to adjust the cursor in right to left mode. |
|
af|panelWindow::resize-icon-region |
Styles the region around the end corner resize icon in af|panelWindow::footer and aligned to end in LTR. It can be used to set paddings, margins around the resize icon. |
af|panelWindow::resize-icon-style |
The style for the resize icon located in the af|panelWindow::resize-icon-region. |
af|panelWindow::icon-region |
Styles the region around the window icon in af|panelWindow::header and aligned to start. It can be used to set paddings, margins around the title icon. |
af|panelWindow::title |
Styles the title of the panelWindow. |
af|panelWindow::help-link-container |
A style containing the "dynamic help" for the window. It will only be displayed if assigned a helpTopicId and will be positioned after the af|panelWindow::title and before af|panelWindow::close-icon-region/af|panelWindow::pin-icon-region within af|panelWindow::header. |
af|panelWindow::dynamic-help-icon-style |
Style the dynamic help icon located within the help-link-container. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|panelWindow::close-icon-region |
Styles the region around af|panelWindow::close-icon-style in af|panelWindow::header and aligned to end. It can be used to set paddings, margins around the title icon. |
af|panelWindow::close-icon-style |
Style on the panelWindow's close icon. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the close-icon-style and define the icon for the close-icon key. |
af|panelWindow::pin-icon-region |
Styles the region around af|panelWindow::pin-icon-style in af|panelWindow::header and aligned to end. It can be used to set paddings, margins around the title icon. |
af|panelWindow::pin-icon-style |
Style on the panelWindow's pin icon. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the pin-icon-style and define the icon for the pin-icon key. |
Icon Selectors |
Description |
af|panelWindow::close-icon |
Overrides the default close icon. Icons can be text or img elements, e.g. af|panelWindow::close-icon {content "X"} or af|panelWindow::close-icon {content: url(...)}. Use this key instead of the close-icon-style key if you do not want a background-image. |
af|panelWindow::pin-icon |
Overrides the default pin icon. Icons can be text or img elements, e.g. af|panelWindow::pin-icon {content "X"} or af|panelWindow::pin-icon {content: url(...)}. Use this key instead of the pin-icon-style key if you do not want a background-image. |
af|panelWindow::dynamic-help-icon |
Icon that can be used instead of a background-image on af|panelWindow::dynamic-help-icon-style. Located in the content-start and only enabled if a helpTopicId is provided. |
af|panelWindow::resize-icon |
Overrides the default resize icon. Icons can be text or img elements, e.g. af|panelWindow::resize-icon {content ">"} or af|panelWindow::resize-icon {content: url(...)}. Use this key instead of the resize-icon-style key if you do not want a background-image. |
Resource Strings |
Description |
af_panelWindow.TIP_CLOSE |
Tooltip for the close icon at the top right of the panel window. |
Style Selectors |
Description |
Conditions |
af|popup |
Used for setting the following skinning properties that effect the appearance of popup drop shadows.
Skin properties |
Description |
-tr-shadow-pixel-size |
Controls the pixel size of popup drop shadows. |
-tr-shadow-offset |
Controls the pixel offset value for popup drop shadows. |
-tr-shadow-starting-black-percent |
Controls the percentage black for the starting pixel of the drop shadow. You can use a number less than 100 for a lighter drop shadow. |
|
Resource Strings |
Description |
af_popup.TIP_START_OF_POPUP |
In screenreader mode, this text marks the top side of the popup. It is also used by af:dialog and af:panelWindow. |
af_popup.TIP_END_OF_POPUP |
In screenreader mode, this text marks the bottom side of the popup selector. It is also used by af:dialog and af:panelWindow. |
af_popup.TIP_END_OF_POPUP_DISABLE_CLOSE_ON_ESCAPE |
In screenreader mode and when close on escape is disabled, this text marks the bottom side of the popup selector. It is also used by af:dialog and af:panelWindow. |
af_popup.TIP_START_OF_MENU |
Text that marks the top of a menu contained within an af:popup. It is only displayed in screenreader mode. |
af_popup.TIP_END_OF_MENU |
Text that marks the bottom of a menu contained within an af:popup. It is only displayed in screenreader mode. |
af_popup.TIP_END_OF_MENU_DISABLE_CLOSE_ON_ESCAPE |
Text that marks the bottom of a menu contained within an af:popup. It is only displayed in screenreader mode when close on escape is disabled. |
af_popup.STATUS_ENTERING_POPUP |
Status message announced via a WAI-ARIA live region when entering a popup. This message is only used in screenreader mode. |
af_popup.STATUS_EXITING_POPUP |
Status message announced via a WAI-ARIA live region when exiting a popup. This message is only used in screenreader mode. |
Style Selectors |
Description |
Conditions |
af|progressIndicator |
Style on the root element of the af:progressIndicator component.
Skin properties |
Description |
-tr-percent-block-increment |
Determines the percent block increment in determinate model. Valid value can be a integer >0 and <100. For e.g. af|progressIndicator {-tr-percent-block-increment: 5} will show the progress bar with block increment as 5. |
|
af|progressIndicator::indeterminate |
Style on the indeterminate model of the af:progressIndicator component. The indicator image is specified as a background-image in this key.
Pseudo classes |
Description |
running |
|
finished |
|
|
af|progressIndicator::determinate |
Style on the determinate model of the af:progressIndicator component. This defines the width and height of the progress bar. |
af|progressIndicator::determinate-start-label |
Style on the label which indicates start percentage of the af:progressIndicator component. This includes .AFTextForeground:alias, .AFDefaultFont:alias and AFEndTextAlign:alias style selectors. |
af|progressIndicator::determinate-end-label |
Style on the label which indicates end percentage of the af:progressIndicator component. This includes .AFTextForeground:alias, .AFDefaultFont:alias and AFEndTextAlign:alias style selectors. |
af|progressIndicator::determinate-filled-icon-style |
Style on the determinate model indicator for percentage completion of the af:progressIndicator component. The indicator image is specified as a background-image in this key. This also defines width and height of the image. This image is repeated in the progress bar according to the percentage completion and will occupy the percentage width of the total width as defined in the af|progressIndicator::determinate key. |
af|progressIndicator::determinate-empty-icon-style |
Style on the determinate model indicator for remaining percentage completion of the af:progressIndicator component. The indicator image is specified as a background-image in this key. This also defines width and height of the image. This image is repeated in the progress bar according to the remaining percentage completion and will occupy the remaining percentage width of the total width as defined in the af|progressIndicator::determinate key. |
af|progressIndicator::reorder-search-tree |
Styles the reorder tree in the reorder dialog . |
Icon Selectors |
Description |
af|progressIndicator::indeterminate-running-icon |
The running state indicator icon for indeterminate model. This renders a <img> or text. You can use af|progressIndicator::indeterminate:running and set background-image instead. |
af|progressIndicator::indeterminate-finished-icon |
The finished state indicator icon for indeterminate model. This renders a <img> or text. You can use af|progressIndicator::indeterminate:finished and set background-image instead. |
af|progressIndicator::move-top-icon |
Styles the move to top shuttle button in the reorder dialog . |
Resource Strings |
Description |
af_progressIndicator.TIP_DETERMINATE |
Tooltip that represents the % complete. This string can contain {0} in it to be replaced with the percentage completed. This tip is only available when a determination on the percent complete can be made. |
af_progressIndicator.LABEL_DETERMINATE_ZERO_PERCENT |
Tooltip that represents 0% complete. This tip is only available when a determination on the percent complete can be made. |
af_progressIndicator.LABEL_DETERMINATE_HUNDRED_PERCENT |
Tooltip that represents 100% complete. This tip is only available when a determination on the percent complete can be made. |
af_progressIndicator.TIP_INDETERMINATE_RUNNING |
Tooltip that represents the process is running. This is only available when the percent complete can not be determined. |
af_progressIndicator.TIP_INDETERMINATE_FINISHED |
Tooltip that represents the process is completed. This is only available when the percent complete can not be determined. |
af_progressIndicator.TIP_SCREEN_READER_DETERMINATE |
Tooltip that represents the % complete. This string can contain {0} in it to be replaced with the percentage completed. This tip is only available when a determination on the percent complete can be made. This is also only available in screenreader mode. |
af_progressIndicator.TIP_SCREEN_READER_INDETERMINATE_RUNNING |
Tooltip that represents the process is running. This is only available when the percent complete can not be determined. This is only available in screenreader mode. |
af_progressIndicator.TIP_SCREEN_READER_INDETERMINATE_FINISHED |
Tooltip that represents the process is completed. This is only available when the percent complete can not be determined. This is only available in screenreader mode. |
Style Selectors |
Description |
Conditions |
af|query |
Styles the root element of the af:query component.
Pseudo classes |
Description |
compact |
Styles the component when in compact display mode |
simple |
Styles the component when in simple display mode |
label-top |
Styles the component when label alignment is top. |
Skin properties |
Description |
-tr-label-alignment |
Skinning property to set the label alignment for checkboxes in query panel. Valid values are start and end. Default value is "start". Please note that a value of "start" has no effect when labelAlignment attribute on af:query component is set to top. |
-tr-criterion-field-readOnly-type |
Skinning property to let isReadOnly() API to take effect. Valid values are none and readonly. |
-tr-system-search-show-in-list |
Skinning property to enable "Show In List" checkbox for OOTB(Out of the box)/system searches to be enabled. Valid values are enable and disable. |
|
af|query::button |
Styles the buttons of the query component. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, :focus. The :disabled state is currently not supported. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same. |
af|query::button-access-key |
Styles the access-key character in the button text. This includes the .AFButtonAccessKeyStyle:alias style. |
af|query::content$ |
Styles the content region of the query component. This includes the area that displays the queryCriteria and the footers. It is located directly below the af|query::title$ key. The value for $ is a number between 0 and 5 signifying the six header types. The number is determined by the depth of the query within other headers. If query is nested within one panelHeader, for e.g. then $ will be 1. |
af|query::content-footer |
Styles the footer region that encloses any content specified by the footer facet and any content that is rendered, by default, by the query component. |
af|query::criteria |
Styles the container that encloses the conjunction and the criterion search fields |
af|query::criteria-column |
Styles each columns of the criterion rows, like vertical-align:top and text-align. |
af|query::criterion |
Styles each search field based on a criterion. A search field consists of the label, operator, value and an optional delete icon. |
af|query::criterion-label |
Styles the label of the search field. Also supports the rtl pseudo-class |
af|query::criterion-content |
Styles the content of the search field, that includes the operator and value inside. |
af|query::criterion-delete-icon-cell |
Styles the cell that encloses the delete icon within a criterion. This includes .AFEndPadding:alias style selector. |
af|query::criterion-delete-icon-style |
Styles the delete icon. The delete icon is specified as a background-image in this key. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|query::criterion-indexed-icon-style |
Styles the indexed icon. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|query::dynamic-help-icon-style |
Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|query::disclosure-link |
Selector for the anchor element that contains the disclosure icon. |
af|query::undisclosed-icon-style |
Style on the icon that is shown when the panel is undisclosed (collapsed). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the undisclosed-icon-style and define the icon for the undisclosed-icon key. |
af|query::disclosed-icon-style |
Style on the icon that is shown when the panel is disclosed (expanded). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the disclosed-icon-style and define the icon for the disclosed-icon key. |
af|query::disclosure-icon-container |
Styles the container for the disclosure icon. |
af|query::disclosure-icon-style |
Styles the anchor element containing the specified icon if messageType is set to null. Otherwise the icon associated with the message type is displayed in the container. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|query::footer-facet-content-style |
Styles the cell that contains the footer facet content (or the default Add Fields button). |
af|query::info |
Applied to the element containing the "* required" stamp on the query component. |
af|query::title$ |
Styles the main part of the header. It is the section that immediately follows the "af|query::title-start$" key. The value for $ is a number between 0 and 5 signifying the six header types. |
af|query::title-end$ |
Styles the ending cell of the header. Generally this is the decoration on the right side of the search panel and can be used to create rounded edges. The value for $ is a number between 0 and 5 signifying the six header types. |
af|query::title-table |
The style for the table containing the header. Generally this will not be modified, but this allows for more flexible skinning of the title in general so that under certain curcumstances, it can be styled to match the content container. This style class supports the :disclosed pseudo-class when the query component is disclosed.
Pseudo classes |
Description |
disclosed |
|
|
af|query::title-text$ |
Styles the header text inside the title element specified by the af|query::title$ key. Available pseudo-classes are :error, :warning, :info:, :confirmation and are set according to the message type. If no message type is specified or message type is set to none then none of these pseudo-classes will be present.
Pseudo classes |
Description |
error |
|
warning |
|
info |
|
confirmation |
|
|
af|query::title-start$ |
Styles the starting cell of the header. Generally this is the decoration on the left side of the search panel and can be used to create rounded edges. |
af|query::separator-icon-style |
Style of the icon used as the bar item separator. |
.AFBetweenSeparatorIcon:alias |
Specifies the icon between the two components that get rendered when the 'Between ..." operator is chosen for the search field of the af:query component. |
Icon Selectors |
Description |
af|query::criterion-delete-icon |
Icon that can be used instead of a background-image on af|query::criterion-delete-icon-style. By default this is null. |
af|query::disclosed-icon |
The icon is displayed when the af:query component is rendered in its disclosed state. |
af|query::dynamic-help-icon |
Icon that can be used instead of a background-image on af|query::dynamic-help-icon-style. By default this is null. If you use this af|query::dynamic-help-icon-style can then be used for background colors, etc. |
af|query::undisclosed-icon |
The icon is displayed when the af:query component is rendered in its undisclosed state. |
Resource Strings |
Description |
af_query.LABEL_HEADER_TEXT |
The title text used for the search panel. |
af_query.LABEL_REQUIRED_INFO_TEXT |
The information text used to indicate required fields |
af_query.LABEL_INDEXED_INFO_TEXT |
The information text used to indicate indexed fields |
af_query.LABEL_FOOTER_ADD_FIELDS |
The text used on the Add Fields dropdown on the footer of the search panel. |
af_query.LABEL_CONJUNCTION |
The text used for the label of the conjunction radio button. |
af_query.LABEL_CONJUNCTION_AND |
The text used for the AND conjunction item of the radio button |
af_query.LABEL_CONJUNCTION_OR |
The text used for the OR conjunction item of the radio button |
af_query.LABEL_MODE_BASIC |
The text used for the Mode toggle button when the query component is currently displaying in Advanced mode. |
af_query.LABEL_MODE_ADVANCED |
The text used for the Mode toggle button when the query component is currently displaying in Basic mode. |
af_query.LABEL_SCREEN_READER_MODE_BASIC |
The text used for the Mode toggle button when the query component is currently displaying in Advanced mode. This is only available in screenreader mode. |
af_query.LABEL_SCREEN_READER_MODE_ADVANCED |
The text used for the Mode toggle button when the query component is currently displaying in Basic mode. This is only available in screenreader mode. |
af_query.LABEL_SAVE |
The text used for the Save button typically displayed on the footer of the search panel. |
af_query.LABEL_RESET |
The text used for the Reset button typically displayed on the footer of the search panel. |
af_query.LABEL_SEARCH |
The text used for the Search button typically displayed on the footer of the search panel. |
af_query.LABEL_DELETE |
The text used for the Delete button typically displayed on the "Personalize Saved Searches" dialog. |
af_query.LABEL_APPLY |
The text used for the Apply button typically displayed on the "Personalize Saved Searches" dialog. |
af_query.LABEL_SAVED_SEARCH |
The text used as the label for the Saved Searches dropdown typically displayed on the toolbar (header) of the search panel |
af_query.LABEL_SAVED_SEARCH_PERSONALIZE_ENTRY |
The text used to display the "Personalize" entry in the saved searches dropdown on the search panel. |
af_query.LABEL_PERSONALIZE_SAVED_SEARCHES_DLG |
The text used as the title for the Personalize Saved Searches dialog |
af_query.LABEL_PERSONALIZE_SAVED_SEARCHES_LIST |
The text used as the label for the Personalize Saved Searches dropdown list displayed in the Saved Search dialog |
af_query.LABEL_CREATE_SAVED_SEARCH_DLG |
The text used as the title for the Create Saved Search dialog |
af_query.LABEL_SAVED_SEARCH_NAME_DLG |
The text used as the label for the input component that displays the name of the saved search in either dialog. |
af_query.LABEL_UIHINT_SAVE_RESULTS_LAYOUT |
The text used as the label for the uiHint checkbox Save Results Layout in either dialog |
af_query.LABEL_UIHINT_AUTO_EXECUTE |
The text used as the label for the uiHint checkbox Run Automatically in either dialog |
af_query.LABEL_UIHINT_SHOW_IN_LIST |
The text used as the label for the uiHint checkbox Show In List in the personalize dialog |
af_query.LABEL_UIHINT_DEFAULT |
The text used as the label for the uiHint checkbox Default in either dialog |
af_query.MSG_SAVED_SEARCH_NAME_UNIQUE_CONSTRAINT |
The text of the error message used to indicate a unique constraint violation encountered for the name of a newly created saved search. |
af_query.MSG_SAVED_SEARCH_NAME_UNIQUE_CONSTRAINT_DETAIL |
The text of a detail message explaining the action to be taken to correct the unique constraint violation. |
af_query.MSG_SAVED_SEARCH_NAME_NOTNULL_CONSTRAINT |
The text of the error message used to indicate a name is required for a newly created saved search. |
af_query.MSG_SAVED_SEARCH_NAME_NOTNULL_CONSTRAINT_DETAIL |
The text of a detail message explaining the action to be taken to correct the not null constraint for the name of a saved search. |
af_query.MSG_SAVED_SEARCH_DELDUP_CONSTRAINT |
The text of the error message indicating a delete constraint requiring a saved search to be selected before choosing to delete it. |
af_query.MSG_SAVED_SEARCH_DELETE_CONSTRAINT_DETAIL |
The text of the detail message explaining how to satisfy the delete constraint. |
af_query.MSG_SAVED_SEARCH_DELETE_WARNING |
The text of a message warning the user that he/she is about to delete a saved search |
af_query.MSG_SAVED_SEARCH_OVERRIDE_WARNING |
The text of a message warning the user that he/she is about to override a saved search |
af_query.MSG_SAVED_SEARCH_OVERRIDE_ERROR |
The text of a error message to user that he/she can't override a system saved search |
af_query.TIP_DELETE_WARNING |
The text used for the title of the Warning dialog. |
af_query.TIP_SEARCH_OVERRIDE_WARNING |
The text used for the title of the Override Warning dialog. |
af_query.TIP_SEARCH_OVERRIDE_ERROR |
The text used for the title of the Override Error dialog. |
af_query.TIP_DELETE_SEARCH_FIELD |
The text used as the tooltip for the Delete button on the personalize dialog. |
af_query.TIP_OPEATOR |
The text used as the tooltip for the operators dropdown on the search panel |
af_query.LABEL_VALUE_LOV_POPUP |
The text used for the title of the LOV popup when the LOV component is displayed in the search panel. |
Style Selectors |
Description |
Conditions |
af|quickQuery |
Style on the root element of the af:quickQuery component.
Pseudo classes |
Description |
vertical |
styles the component with vertical layout. For example, you can style the label in vertical mode like this: "af|quickQuery:vertical::label". |
helpIcon |
styles the component when help icon is displayed. For example, you can style the criteria-items in vertical mode when help icon is displayed like this: "af|quickQuery:vertical:helpIcon::criteria-items". |
|
af|quickQuery::label |
Style on the label of the af:quickQuery component. This includes .AFLabel:alias style selector. |
af|quickQuery::criteria-items |
Style on the criterion items facet of the af:quickQuery component. |
af|quickQuery::value |
Style on the criterion value facet of the af:quickQuery component. |
af|quickQuery::end |
Style on the end facet of the af:quickQuery component. |
af|quickQuery::search-icon-cell |
Style on the search icon cell of af:quickQuery component. This includes .AFEndPadding:alias style selector. |
af|quickQuery::search-icon-style |
Style on the clickable search icon of the af:quickQuery component. By default the search-icon is null and this style has a background-image that you can override. The width and height of the icon will be provided in this key. For example, you can style the icon when the component is active by using this selector: "af|quickQuery::search-icon-style:active". Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|quickQuery::disabled-search-icon-style |
Styles the icon used for the search indicator in disabled state. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set {-tr-inhibit: background-image} in this style and define the icon using the disabled-search-icon. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|quickQuery::dynamic-help-icon-style |
Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
Icon Selectors |
Description |
af|quickQuery::disabled-search-icon |
Icon that can be used instead of a background-image on af|quickQuery::disabled-search-icon-style. By default this is null. |
af|quickQuery::dynamic-help-icon |
Icon that can be used instead of a background-image on af|quickQuery::dynamic-help-icon-style. By default this is null. If you use this af|quickQuery::dynamic-help-icon-style can then be used for background colors, etc. |
af|quickQuery::search-icon |
Search icon. You can use af|quickQuery::search-icon-style instead. |
Resource Strings |
Description |
af_quickQuery.LABEL_DEFAULT |
The text used as the label for the quickQuery component. |
Style Selectors |
Description |
Conditions |
af|region |
Selector that renders on the root dom element of the component.
Skin properties |
Description |
-tr-never-header-height |
Used when the region has an empty header bar, e.g. via showHeader="ifNeeded" but nothing in it. If set to "0px" then no header will be shown. If set to some other value, an empty header will be shown using this height. |
-tr-footer-height |
Used when the region is being stretched by its parent container to indicate the CSS length for the footer bar of the region so that the content can be stretched to fill the remaining space. This skin property is honored only if the region is being stretched (like when a child of a panelDashboard). Note the footer can be completely omitted if you set this property to "0px". |
-tr-center-start-width |
Used when the region is being stretched by its parent container to indicate the CSS length for the indenting of the content container from the start (e.g. left) side of the region so that the contentStyle that an application developer might assign does not interfere with the built-in indentation of the content. This skin property is honored only if the region is being stretched (like when a child of a panelDashboard). |
-tr-center-end-width |
Used when the region is being stretched by its parent container to indicate the CSS length for the indenting of the content container from the end (e.g. right) side of the region so that the contentStyle that an application developer might assign does not interfere with the built-in indentation of the content. This skin property is honored only if the region is being stretched (like when a child of a panelDashboard). |
|
af|region::header-start |
Style the start side of the header of the region. Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. For example, the ramp is set to "core" and background set to "default" the style used for this is "af|region::header-start:core:default". This includes the .AFPanelBoxHeader* alias, for example af|region::header-start:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::header-center |
Style the center side of the header of the region. Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxHeader* alias, for example af|region::header-center:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::header-text |
Style the container of the header element. |
af|region::header-element |
Style the header element that contains the header text. |
af|region::header-end |
Style the end side of the header of the region. Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxHeader* alias, for example af|region::header-end:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::center |
Style the center area of the region that wraps the content area of the region. The "center" wrapper provides potentially different padding than the content area so that people can set padding to zero in the contentStyle attribute and not mess anything up with the built-in minimum padding (e.g. for shadows that might be present in a background image behind the content). The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::content |
Style the content area of the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxContent* alias, for example af|region::content:core:default includes .AFPanelBoxContentCoreDefault:alias.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::footer-start |
Style the start side of the footer of the region (used only if -tr-footer-height is not 0px). Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. For example, the ramp is set to "core" and background set to "default" the style used for this is "af|region::footer-start:core:default". This includes the .AFPanelBoxFooter* alias, for example af|region::footer-start:core:default includes .AFPanelBoxFooterCoreDefault:alias.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::footer-center |
Style the center side of the footer of the region (used only if -tr-footer-height is not 0px). Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxFooter* alias, for example af|region::footer-center:core:default includes .AFPanelBoxFooterCoreDefault:alias.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::footer-end |
Style the end side of the footer of the region (used only if -tr-footer-height is not 0px). Used to render rounded corners for the region. The pseudo-classes correspond with the ramp and background attributes of the panelBox component though no such attribute exists for the region component. This includes the .AFPanelBoxFooter* alias, for example af|region::footer-end:core:default includes .AFPanelBoxFooterCoreDefault:alias.
Pseudo classes |
Description |
core |
|
default |
|
|
af|region::disclosure-link |
Selector for the anchor element that contains the disclosure icon. |
af|region::undisclosed-icon-style |
Style on the icon that is shown when the panel is undisclosed (collapsed). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the undisclosed-icon-style and define the icon for the undisclosed-icon key. |
af|region::disclosed-icon-style |
Style on the icon that is shown when the panel is disclosed (expanded). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the disclosed-icon-style and define the icon for the disclosed-icon key. |
af|region::maximize-icon-container |
Styles the container for the maximize icon. |
af|region::maximize-link |
Selector for the anchor element that contains the maximize icon. |
af|region::unmaximized-icon-style |
Style on the icon that is shown when the panel is maximized. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the unmaximize-icon-style and define the icon for the unmaximize-icon key. |
af|region::maximized-icon-style |
Style on the icon that is shown when the panel is normal size. The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the maximize-icon-style and define the icon for the maximize-icon key. |
af|region::instruction-text |
Styles the text that might come from the helpTopicId. |
af|region::dynamic-help-icon-style |
Styles the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Available pseudo-classes are :disabled:hover, :hover and :active. Includes .AFDynamicHelpIconStyle:alias.
Pseudo classes |
Description |
disabled |
|
|
Icon Selectors |
Description |
af|region::disclosed-icon |
The icon is displayed when the af:region component is rendered in its disclosed state. |
af|region::undisclosed-icon |
The icon is displayed when the af:region component is rendered in its undisclosed state. |
af|region::maximized-icon |
The icon is displayed when the af:region component is rendered in its normal state. |
af|region::unmaximized-icon |
The icon is displayed when the af:region component is rendered in its maximized state. |
af|region::dynamic-help-icon |
Icon that can be used instead of a background-image on af|region::dynamic-help-icon-style. By default this is null. If you use this af|region::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|resetButton |
Style on the root element of the af:resetButton component. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, :focus, and :disabled. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
Pseudo classes |
Description |
disabled |
|
|
af|resetButton::access-key |
Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style. |
The richTextEditor component is an input component. It contains a label and content like all input components. The richTextEditor contains a toolbox which contains other components like a selectOneChoice, an inputNumberSpinbox, and toolbar components and they all need to be skinned with their own skinning keys. You can use descendent skinning keys to skin the styles of the richTextEditor's toolbox, selectOneChoice, toolbar, etc separately from other toolboxes in your application. For example, af|richTextEditor::content af|selectOneChoice::content {width: 8em;}. Please note that you cannot skin icon keys contextually, so if you skin a af|inputNumberSpinbox::incrementor-icon, for example, there is no way to override this with af|richTextEditor::content af|inputNumberSpinbox::incrementor-icon. The reason we did not create separate keys for all these hooks for this component is because the number of keys would have been huge, and we feel that the given richTextEditor skinning hooks with descendent selectors should be sufficient.
Style Selectors |
Description |
Conditions |
af|richTextEditor |
Style on the root element of the af:richTextEditor component.
Pseudo classes |
Description |
disabled |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
stretched |
|
|
af|richTextEditor::content |
Style on the content of the component, including the toolbar. |
af|richTextEditor::content-input |
Style on the content input field of the component, excluding the toolbar. |
af|richTextEditor::content-input-container |
Style on the container of the content-input element. This is meant for a border; this includes .AFFormControlContentBorder:alias style selector. |
af|richTextEditor::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|richTextEditor::label |
Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|richTextEditor::footer-facet |
Style on the footer facet's container. |
af|richTextEditor::content-input-container-addendum-with-footer |
Additional CSS to be applied to content input container when footer is present. |
Icon Selectors |
Description |
af|richTextEditor::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|richTextEditor::dynamic-help-icon |
Icon that can be used instead of a background-image on af|richTextEditor::dynamic-help-icon-style. By default this is null. If you use this af|richTextEditor::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_richTextEditor.TIP_FONT_SHORT_DESCRIPTION |
Tooltip for the font select one choice control of Rich Text Editor. |
af_richTextEditor.TIP_FONT_UNSELECTED_LABEL |
Tooltip for the font select one choice control of Rich Text Editor when the control is not selected. |
af_richTextEditor.TIP_FONT_SIZE_SHORT_DESCRIPTION |
Tooltip for the font size input text. |
af_richTextEditor.TIP_COLOR_FOREGROUND |
Tooltip for the foreground color chooser. |
af_richTextEditor.TIP_COLOR_BACKGROUND |
Tooltip for the background color chooser. |
af_richTextEditor.LABEL_SPECIFY_THE_URL |
Label for the dialog to specify a link to be inserted into the rich text editor. |
af_richTextEditor.LABEL_EDITING_REGION_TITLE |
Label for screenreader mode to identify the editable region. |
The codeEditor component is an input component. It contains a label and content like all input components. The codeEditor contains a toolbox which contains other components and they all need to be skinned with their own skinning keys.
Style Selectors |
Description |
Conditions |
af|codeEditor |
Style on the root element of the af:codeEditor component.
Pseudo classes |
Description |
disabled |
|
read-only |
|
stretched |
|
|
af|codeEditor::content |
Style on the content of the component, including the toolbar. |
af|codeEditor::content-input |
Style on the content input field of the component, excluding the toolbar. |
af|codeEditor::content-input-container |
Style on the container of the content-input element. This is meant for a border; this includes .AFFormControlContentBorder:alias style selector. |
af|codeEditor::dynamic-help-icon-style |
Style on the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|codeEditor::label |
Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias.
Pseudo classes |
Description |
disabled |
|
|
af|codeEditor::editor-disabled-text |
Style of the text in the input field when the component is disabled. |
af|codeEditor::editor-gutter |
Style on the gutter of the component. |
af|codeEditor::editor-gutter-linenumbers |
Style on the gutter line numbers of the component. |
af|codeEditor::editor-search-highlight |
Style of the matched highlighted text during a Find. |
af|codeEditor::editor-jump-highlight |
Style of the highlighted line for Go to Line. |
af|codeEditor::editor-marker-error |
Style of marked error text. |
af|codeEditor::editor-marker-fatal |
Style of marked fatal text. |
af|codeEditor::editor-marker-warning |
Style of marked warning text. |
af|codeEditor::editor-marker-info |
Style of marked info text. |
af|codeEditor::markers-label |
Style on the label of the markers section. This includes .AFLabel:alias style selector. |
af|codeEditor::markers-content |
Style on the markers section content of the component. |
af|codeEditor::markers-content-container |
Style on the container of the markers section content element. This is meant for a border; this includes .AFFormControlContentBorder:alias style selector. |
af|codeEditor::markers-text |
Style on the marker text.
Pseudo classes |
Description |
hover |
|
|
af|codeEditor::search-case-label |
Style on the label of the Match Case checkbox for Search. This includes .AFLabel:alias style selector. |
af|codeEditor::search-wholewords-label |
Style on the label of the Whole Words checkbox for Search. This includes .AFLabel:alias style selector. |
af|codeEditor::search-wrap-label |
Style on the label of the Wrap checkbox for Search. This includes .AFLabel:alias style selector. |
Icon Selectors |
Description |
af|codeEditor::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|codeEditor::dynamic-help-icon |
Icon that can be used instead of a background-image on af|codeEditor::dynamic-help-icon-style. By default this is null. If you use this af|codeEditor::dynamic-help-icon-style can then be used for background colors, etc. |
af|codeEditor::jump-icon |
Pseudo classes |
Description |
disabled |
|
active |
|
hover |
|
|
af|codeEditor::search-icon |
Icon for the Search button.
Pseudo classes |
Description |
disabled |
|
active |
|
hover |
|
|
af|codeEditor::search-next-icon |
Icon for the Find Next button.
Pseudo classes |
Description |
disabled |
|
active |
|
hover |
|
|
af|codeEditor::search-previous-icon |
Icon for the Find Previous button.
Pseudo classes |
Description |
disabled |
|
active |
|
hover |
|
|
af|codeEditor::small-fatal-icon |
Image of marker message of type fatal error |
af|codeEditor::small-warning-icon |
Image of marker mesage of type warning. |
af|codeEditor::small-info-icon |
Image of marker message of type information. |
af|codeEditor::small-error-icon |
Image of marker message of type error. |
Resource Strings |
Description |
af_codeEditor.LABEL_MARKERS |
Label for the markers section. |
af_codeEditor.LABEL_JUMP |
Label for the Go to Line button. |
af_codeEditor.LABEL_SEARCH |
Label for the Find field on the Find and Replace Popup. |
af_codeEditor.LABEL_SEARCH_TOOLBAR |
Label for the Find field on the toolbar. |
af_codeEditor.LABEL_REPLACE |
Label for the Replace field on the Find and Replace Popup. |
af_codeEditor.LABEL_SEARCH_CASESENSITIVE |
Label for the Match Case checkbox on the Find and Replace Popup. |
af_codeEditor.LABEL_SEARCH_WHOLEWORDS |
Label for the Whole Words checkbox on the Find and Replace Popup. |
af_codeEditor.LABEL_SEARCH_WRAP |
Label for the Wrap checkbox on the Find and Replace Popup. |
af_codeEditor.TIP_JUMP |
Tooltip for the Go to Line field. |
af_codeEditor.TIP_SEARCH |
Tooltip for the Find field on the Find and Replace Popup. |
af_codeEditor.TIP_SEARCH_TOOLBAR |
Tooltip for the Find field on the toolbar. |
af_codeEditor.TIP_REPLACE |
Tooltip for the Replace field on the Find and Replace Popup. |
af_codeEditor.TIP_SEARCH_CASESENSITIVE |
Tooltip for the Match Case checkbox on the Find and Replace Popup. |
af_codeEditor.TIP_SEARCH_WHOLEWORDS |
Tooltip for the Whole Words checkbox on the Find and Replace Popup. |
af_codeEditor.TIP_SEARCH_WRAP |
Tooltip for the Wrap checkbox on the Find and Replace Popup. |
af_codeEditor.TIP_SEARCH_NEXT_BUTTON |
Tooltip for the Find Next button. |
af_codeEditor.TIP_SEARCH_PREVIOUS_BUTTON |
Tooltip for the Find Previous button. |
af_codeEditor.TIP_REPLACE_ALL_POPUP_BUTTON |
Tooltip and text Replace All button on the Find and Replace Popup. |
af_codeEditor.TIP_REPLACE_NEXT_POPUP_BUTTON |
Tooltip and text Replace Next button on the Find and Replace Popup. |
af_codeEditor.TIP_SEARCH_NEXT_POPUP_BUTTON |
Tooltip and text for the Find Next button on the Find and Replace Popup. |
af_codeEditor.TIP_SEARCH_PREVIOUS_POPUP_BUTTON |
Tooltip and text for the Find Previous button on the Find and Replace Popup. |
af_codeEditor.TIP_JUMP_BUTTON |
Tooltip for the Go to Line button. |
Style Selectors |
Description |
Conditions |
af|selectBooleanCheckbox |
Style on the root element of the af:selectBooleanCheckbox component.
Pseudo classes |
Description |
disabled |
For example, you can style the content when the component is disabled by using this selector: "af|selectBooleanCheckbox:disabled::content" |
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectBooleanCheckbox::access-key |
Style on the access key for the selection. Includes .AFFormAccessKeyStyle:alias. |
af|selectBooleanCheckbox::content |
Style on the content of the component. |
af|selectBooleanCheckbox::content-input |
Style on the input of the component. |
af|selectBooleanCheckbox::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectBooleanCheckbox::label |
Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
af|selectBooleanCheckbox::item-text |
Style on the item text associated with the checkbox. |
af|selectBooleanCheckbox::native-input |
Style on the checkbox element. |
Icon Selectors |
Description |
af|selectBooleanCheckbox::selected-icon |
An icon used for the "checked" state of a read-only checkbox. |
af|selectBooleanCheckbox::unselected-icon |
An icon used for the "unchecked" state of a read-only checkbox. |
af|selectBooleanCheckbox::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectBooleanCheckbox::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectBooleanCheckbox::dynamic-help-icon-style. By default this is null. If you use this af|selectBooleanCheckbox::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_selectBooleanCheckbox.TIP_SELECTED |
Tooltip that indicates the checkbox is selected. |
af_selectBooleanCheckbox.TIP_UNSELECTED |
Tooltip that indicates the checkbox is not selected. |
af_selectBooleanCheckbox.TIP_MIXED |
Tooltip that indicates the checkbox is in the mixed state. |
Style Selectors |
Description |
Conditions |
af|selectBooleanRadio |
Pseudo classes |
Description |
disabled |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectBooleanRadio::access-key |
Style on the access key for the selection. Includes .AFFormAccessKeyStyle:alias. |
af|selectBooleanRadio::content |
Style on the content of the component. |
af|selectBooleanRadio::content-input |
Style on the input of the component. |
af|selectBooleanRadio::label |
Style on the label of the component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
af|selectBooleanRadio::item-text |
Style on the item text associated with the radio button. |
Icon Selectors |
Description |
af|selectBooleanRadio::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectBooleanRadio::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectBooleanRadio::dynamic-help-icon-style. By default this is null. If you use this af|selectBooleanRadio::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|selectManyCheckbox |
Pseudo classes |
Description |
disabled |
For example, you can style the content when the component is disabled by using this selector: "af|selectManyCheckbox:disabled::content" |
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectManyCheckbox::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|selectManyCheckbox::content |
Style on the content of the af:selectManyCheckbox component. |
af|selectManyCheckbox::content-input |
Style on the input of the af:selectManyCheckbox component. |
af|selectManyCheckbox::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectManyCheckbox::label |
Style on the label of the af:selectManyCheckbox component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
af|selectManyCheckbox::item-text |
Style on the item text associated with a single checkbox. |
Icon Selectors |
Description |
af|selectManyCheckbox::selected-icon |
An icon used for the "checked" state of a read-only checkbox. |
af|selectManyCheckbox::unselected-icon |
An icon used for the "unchecked" state of a read-only checkbox. |
af|selectManyCheckbox::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectManyCheckbox::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectManyCheckbox::dynamic-help-icon-style. By default this is null. If you use this af|selectManyCheckbox::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|selectManyChoice |
Pseudo classes |
Description |
disabled |
For example, you can style the content when the component is disabled by using this selector: "af|selectManyChoice:disabled::content" |
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
|
af|selectManyChoice::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|selectManyChoice::content |
Style on the content of the af:selectManyChoice component. |
af|selectManyChoice::control |
Style on the element that is the parent of the input and dropdown icon elements. Used to style the border and background of the af:selectManyChoice component. |
af|selectManyChoice::label |
Style on the label of the af:selectManyChoice component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
af|selectManyChoice::dropdown |
Style of the background of the icon (used for gradient background images of buttons). Tip: If you skin the background-image, you may also want to skin it for :hover and :active.
Pseudo classes |
Description |
disabled |
|
read-only |
|
|
af|selectManyChoice::dropdown-icon-style |
Style of the icon (use background-image: style). For text or foreground image, use the af|selectManChoice::dropdown-icon selector. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
read-only |
|
click-to-edit |
|
|
af|selectManyChoice::dropdown-panel |
Style of the parent container of the dropdown items. |
af|selectManyChoice::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectManyChoice::item |
Style of the checkbox items.
Pseudo classes |
Description |
disabled |
|
read-only |
|
|
af|selectManyChoice::separator |
Style of the item separator. |
Icon Selectors |
Description |
af|selectManyChoice::dropdown-icon |
Used if a text or foreground image icon is desired. If background image is desired, use the af|selectManyChoice::dropdown-icon-style selector. |
af|selectManyChoice::dropdown-disabled-icon |
Used if a text or alternate image disabled icon is desired. |
af|selectManyChoice::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectManyChoice::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectManyChoice::dynamic-help-icon-style. By default this is null. If you use this af|selectManyChoice::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_selectManyChoice.LABEL_TIP_SELECT_ALL |
The label on the checkbox that selects all the items in a select many choice. |
Style Selectors |
Description |
Conditions |
af|selectManyListbox |
Style on the root element of the af:selectManyListbox component.
Pseudo classes |
Description |
disabled |
|
read-only |
For example, you can style the content when the component is readOnly by using this selector: "af|selectManyListbox:read-only::content" |
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectManyListbox::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|selectManyListbox::content |
Style on the content of the af:selectManyListbox component. |
af|selectManyListbox::content-input |
Style on the native checkbox of the af:selectManyListbox component. End user should rarely have to style this. |
af|selectManyListbox::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectManyListbox::label |
Style on the label of the af:selectManyListbox component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
af|selectManyListbox::options |
Style of the scrolling element which encompasses the individual items. |
af|selectManyListbox::item |
Style of the individual item which encompasses the checkbox and label of the item. |
af|selectManyListbox::separator |
Style of the separator between items. |
Icon Selectors |
Description |
af|selectManyListbox::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectManyListbox::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectManyListbox::dynamic-help-icon-style. By default this is null. If you use this af|selectManyListbox::dynamic-help-icon-style can then be used for background colors, etc. |
Resource Strings |
Description |
af_selectManyListbox.LABEL_SELECT_ALL |
The label on the checkbox that selects all the items in a select many listbox. |
See also the selectors for af:selectOrderShuttle. Most likely when you skin the af:selectManyShuttle component you'll want to skin the af:selectOrderShuttle component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|selectOrderShuttle::desc-cell, af|selectManyShuttle::desc-cell {background-color: silver}.
Style Selectors |
Description |
Conditions |
af|selectManyShuttle |
The selector on the root dom element of the component.
Pseudo classes |
Description |
disabled |
For example, you can style the content when the component is disabled by using this selector: "af|selectManyShuttle:disabled::content" |
read-only |
|
screenReader |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectManyShuttle::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|selectManyShuttle::container |
Styles the containers in the shuttle. |
af|selectManyShuttle::content |
Styles the containers in the shuttle. |
af|selectManyShuttle::content-input |
Styles the checkboxes inside the shuttle containers. |
af|selectManyShuttle::desc-area |
Styles the item description inside the description box. |
af|selectManyShuttle::desc-cell |
Styles the description box. |
af|selectManyShuttle::description |
Styles the description header in the description box. |
af|selectManyShuttle::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectManyShuttle::fieldset |
Styles the fieldset on the containers, when running in screenreader mode. |
af|selectManyShuttle::header |
Styles the leading and trailing header. |
af|selectManyShuttle::icon-container |
Styles the icon area between the containers. |
af|selectManyShuttle::icon-label |
Styles the label of the move/remove icons. |
af|selectManyShuttle::item-label |
Styles the label of the items, that are present in the containers. |
af|selectManyShuttle::move-horizontal |
Style of the background gradient of the horizontal move icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::move-horizontal-icon-style |
Style of the horizontal move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-horizontal-icon-style and define the override icon for the move-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::move-vertical |
Style of the background gradient of the vertical move icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::move-vertical-icon-style |
Style of the vertical move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-vertical-icon-style and define the override icon for the move-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::moveall-horizontal |
Style of the background gradient of the horizontal moveall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::moveall-horizontal-icon-style |
Style of the horizontal moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-horizontal-icon-style and define the override icon for the moveall-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::moveall-vertical |
Style of the background gradient of the vertical moveall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::moveall-vertical-icon-style |
Style of the vertical moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-vertical-icon-style and define the override icon for the moveall-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::options |
Styles the container values. |
af|selectManyShuttle::remove-horizontal |
Style of the background gradient of the horizontal remove icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::remove-horizontal-icon-style |
Style of the horizontal remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-horizontal-icon-style and define the override icon for the remove-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::remove-vertical |
Style of the background gradient of the vertical remove icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::remove-vertical-icon-style |
Style of the vertical remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-vertical-icon-style and define the override icon for the remove-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::removeall-horizontal |
Style of the background gradient of the horizontal removeall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::removeall-horizontal-icon-style |
Style of the horizontal removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-horizontal-icon-style and define the override icon for the removeall-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::removeall-vertical |
Style of the background gradient of the vertical removeall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectManyShuttle::removeall-vertical-icon-style |
Style of the vertical removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-vertical-icon-style and define the override icon for the removeall-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
Icon Selectors |
Description |
af|selectManyShuttle::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectManyShuttle::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectManyShuttle::dynamic-help-icon-style. By default this is null. If you use this af|selectManyShuttle::dynamic-help-icon-style can then be used for background colors, etc. |
af|selectManyShuttle::move-horizontal-disabled-icon |
Overrides the default disabled horizontal move icon. |
af|selectManyShuttle::move-horizontal-icon |
Overrides the default horizontal move icon. |
af|selectManyShuttle::move-vertical-disabled-icon |
Overrides the default disabled vertical move icon. |
af|selectManyShuttle::move-vertical-icon |
Overrides the default vertical move icon. |
af|selectManyShuttle::moveall-horizontal-icon |
Overrides the default horizontal moveall icon. |
af|selectManyShuttle::moveall-vertical-disabled-icon |
Overrides the default disabled vertical moveall icon. |
af|selectManyShuttle::moveall-vertical-icon |
Overrides the default vertical moveall icon. |
af|selectManyShuttle::remove-horizontal-disabled-icon |
Overrides the default disabled horizontal remove icon. |
af|selectManyShuttle::remove-horizontal-icon |
Overrides the default horizontal remove icon. |
af|selectManyShuttle::remove-vertical-disabled-icon |
Overrides the default disabled vertical remove icon. |
af|selectManyShuttle::remove-vertical-icon |
Overrides the default vertical remove icon. |
af|selectManyShuttle::removeall-horizontal-disabled-icon |
Overrides the default disabled horizontal removeall icon. |
af|selectManyShuttle::removeall-horizontal-icon |
Overrides the default horizontal removeall icon. |
af|selectManyShuttle::removeall-vertical-disabled-icon |
Overrides the default disabled vertical removeall icon. |
af|selectManyShuttle::removeall-vertical-icon |
Overrides the default vertical removeall icon. |
Resource Strings |
Description |
af_selectManyShuttle.DESCRIPTION_LABEL |
Text above description area. |
af_selectManyShuttle.MOVE_ALL_TIP |
Alt tag for moving all the items |
af_selectManyShuttle.MOVE_TIP |
Alt tag for moving selected items |
af_selectManyShuttle.REMOVE_ALL_TIP |
Alt tag for removing all the items |
af_selectManyShuttle.REMOVE_TIP |
Alt tag for removing selected items |
af_selectManyShuttle.MOVE_ALL |
Link text for moving all the items |
af_selectManyShuttle.MOVE |
Link text for moving selected items |
af_selectManyShuttle.REMOVE_ALL |
Link text for removing all the items |
af_selectManyShuttle.REMOVE |
Link text for removing selected items |
af_selectManyShuttle.MSG_SCREEN_READER_INSTRUCTION |
Screen reader mode only. Instructions on how to use the select many shuttle. |
Style Selectors |
Description |
Conditions |
af|selectOneChoice |
Style on the root element of the af:selectOneChoice component.
Pseudo classes |
Description |
disabled |
For example, you can style the content when the component is disabled by using this selector: "af|selectOneChoice:disabled::content" |
compact-content |
pseudo class to indicate compact mode specific styles. |
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
click-to-edit |
Used to style the clickToEdit look and feel. |
focus-target |
Pseudo-class used to change the display style when the component has focus. This differs from the "focus" pseudo-class in that it is applied to the root DOM element of the component when any of its child elements have the focus. This allows focus styles to be applied to any selector, not just the selector of the element that has the browser focus. |
|
af|selectOneChoice::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|selectOneChoice::content |
Style on the content of the af:selectOneChoice component. |
af|selectOneChoice::content-border |
An IE7 only hack to allow border styles on select elements. |
af|selectOneChoice::context-content |
Style that goes around both the context facet and the content. Can be used to control the content padding when the context facet is set, For example:af|selectOneChoice::context-content af|selectOneChoice::content{padding-left:7px;} |
af|selectOneChoice::compact-content |
Style on the content of the af:selectOneChoice component in compact mode. Used for error border colors. |
af|selectOneChoice::compact-dropdown |
Style of the background of the icon (used for gradient background images of buttons). Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
read-only |
|
|
af|selectOneChoice::compact-dropdown-icon-style |
Style of the icon (use background-image: style). For text or foreground image, use the af|selectOneChoice::compact-dropdown-icon selector. Includes .AFClickableImageAnchor:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
read-only |
|
|
af|selectOneChoice::dropdown-panel |
Style of the parent container of the dropdown items. Note: compact mode only for now.
Pseudo classes |
Description |
scroll |
|
|
af|selectOneChoice::item |
Style of the dropdown panel items. Note: Compact mode only for now. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
read-only |
|
|
af|selectOneChoice::separator |
Style of the item separator. Note: Compact mode only for now. |
af|selectOneChoice::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectOneChoice::label |
Style on the label of the af:selectOneChoice component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
Icon Selectors |
Description |
af|selectOneChoice::compact-dropdown-icon |
Pseudo classes |
Description |
disabled |
|
read-only |
|
|
af|selectOneChoice::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectOneChoice::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectOneChoice::dynamic-help-icon-style. By default this is null. If you use this af|selectOneChoice::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|selectOneListbox |
Style on the root element of the af:selectOneListbox component.
Pseudo classes |
Description |
disabled |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectOneListbox::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|selectOneListbox::content |
Style on the content of the af:selectOneListbox component. |
af|selectOneListbox::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectOneListbox::item |
Style on the items in the box. |
af|selectOneListbox::label |
Style on the label of the af:selectOneListbox component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
af|selectOneListbox::separator |
Style on the separators in the box. |
Icon Selectors |
Description |
af|selectOneListbox::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectOneListbox::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectOneListbox::dynamic-help-icon-style. By default this is null. If you use this af|selectOneListbox::dynamic-help-icon-style can then be used for background colors, etc. |
Style Selectors |
Description |
Conditions |
af|selectOneRadio |
Style on the root element of the af:selectOneRadio component.
Pseudo classes |
Description |
disabled |
|
read-only |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectOneRadio::access-key |
Style on the access key character for the selectOneRadio. Includes .AFFormAccessKeyStyle:alias. |
af|selectOneRadio::content |
Style on the content of the af:selectOneRadio component. |
af|selectOneRadio::content-input |
Style on the input of the af:selectOneRadio component. |
af|selectOneRadio::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectOneRadio::item-text |
Style on the item text associated with a single radio button. |
af|selectOneRadio::label |
Style on the label of the af:selectOneRadio component. This includes .AFLabel:alias style selector. :disabled::label includes .AFLabelDisabled:alias. |
af|selectOneRadio::native-input |
Style on the radio button itself. Usually used for browser specific styles. |
Icon Selectors |
Description |
af|selectOneRadio::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectOneRadio::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectOneRadio::dynamic-help-icon-style. By default this is null. If you use this af|selectOneRadio::dynamic-help-icon-style can then be used for background colors, etc. |
See also the selectors for af:selectManyShuttle. Most likely when you skin the af:selectOrderShuttle component you'll want to skin the af:selectManyShuttle component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|selectOrderShuttle::desc-cell, af|selectManyShuttle::desc-cell {background-color: silver}.
Style Selectors |
Description |
Conditions |
af|selectOrderShuttle |
The selector on the root dom element of the component.
Pseudo classes |
Description |
disabled |
|
read-only |
|
screenReader |
|
error |
|
fatal |
|
warning |
|
info |
|
confirmation |
|
|
af|selectOrderShuttle::access-key |
Style on the access-key for the label. Includes .AFFormAccessKeyStyle:alias. |
af|selectOrderShuttle::container |
Styles the containers in the shuttle. |
af|selectOrderShuttle::content |
Styles the containers in the shuttle. |
af|selectOrderShuttle::content-input |
Styles the checkboxes inside the shuttle containers. |
af|selectOrderShuttle::desc-area |
Styles the item description inside the description box. |
af|selectOrderShuttle::desc-cell |
Styles the description box. |
af|selectOrderShuttle::description |
Styles the description header in the description box. |
af|selectOrderShuttle::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|selectOrderShuttle::fieldset |
Styles the fieldset on the containers, when running in screenreader mode. |
af|selectOrderShuttle::header |
Styles the leading and trailing header. |
af|selectOrderShuttle::icon-container |
Styles the icon area between the containers. |
af|selectOrderShuttle::icon-label |
Styles the label of the move/remove icons. |
af|selectOrderShuttle::item-label |
Styles the label of the items, that are present in the containers. |
af|selectOrderShuttle::move-bottom-icon-style |
Style of the move-bottom icon. The move-bottom icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-bottom-icon-style and define the override icon for the move-bottom-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-down-icon-style |
Style of the move-down icon. The move-down icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-down-icon-style and define the override icon for the move-down-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-horizontal |
Style of the background gradient of the horizontal move icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-horizontal-icon-style |
Style of the horizontal move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-horizontal-icon-style and define the override icon for the move-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-top-icon-style |
Style of the move-top icon. The move-top icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-top-icon-style and define the override icon for the move-top-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-up-icon-style |
Style of the move-up icon. The move-up icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-up-icon-style and define the override icon for the move-up-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-vertical |
Style of the background gradient of the vertical move icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-vertical-icon-style |
Style of the vertical move icon. The move icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the move-vertical-icon-style and define the override icon for the move-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::moveall-horizontal |
Style of the background gradient of the horizontal moveall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::moveall-horizontal-icon-style |
Style of the horizontal moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-horizontal-icon-style and define the override icon for the moveall-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::moveall-vertical |
Style of the background gradient of the vertical moveall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::moveall-vertical-icon-style |
Style of the vertical moveall icon. The moveall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the moveall-vertical-icon-style and define the override icon for the moveall-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::move-top |
Pseudo classes |
Description |
active |
|
hover |
|
disabled |
|
|
af|selectOrderShuttle::move-up |
Pseudo classes |
Description |
active |
|
hover |
|
disabled |
|
|
af|selectOrderShuttle::move-down |
Pseudo classes |
Description |
active |
|
hover |
|
disabled |
|
|
af|selectOrderShuttle::move-bottom |
Pseudo classes |
Description |
active |
|
hover |
|
disabled |
|
|
af|selectOrderShuttle::options |
Styles the container values. |
af|selectOrderShuttle::remove-horizontal |
Style of the background gradient of the horizontal remove icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::remove-horizontal-icon-style |
Style of the horizontal remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-horizontal-icon-style and define the override icon for the remove-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::remove-vertical |
Style of the background gradient of the vertical remove icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::remove-vertical-icon-style |
Style of the vertical remove icon. The remove icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the remove-vertical-icon-style and define the override icon for the remove-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::removeall-horizontal |
Style of the background gradient of the horizontal removeall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::removeall-horizontal-icon-style |
Style of the horizontal removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-horizontal-icon-style and define the override icon for the removeall-horizontal-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::removeall-vertical |
Style of the background gradient of the vertical removeall icon. Tip: If you skin the background gradient, you may also want to skin it for :hover, :active and :disabled.
Pseudo classes |
Description |
disabled |
|
|
af|selectOrderShuttle::removeall-vertical-icon-style |
Style of the vertical removeall icon. The removeall icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the removeall-vertical-icon-style and define the override icon for the removeall-vertical-icon. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
|
|
Icon Selectors |
Description |
af|selectOrderShuttle::changed-icon |
The icon that will render when the changed attribute is true. Includes .AFChangedIcon:alias. |
af|selectOrderShuttle::dynamic-help-icon |
Icon that can be used instead of a background-image on af|selectOrderShuttle::dynamic-help-icon-style. By default this is null. If you use this af|selectOrderShuttle::dynamic-help-icon-style can then be used for background colors, etc. |
af|selectOrderShuttle::move-bottom-disabled-icon |
Overrides the default disabled move-bottom icon. |
af|selectOrderShuttle::move-bottom-icon |
Overrides the default move-bottom icon. |
af|selectOrderShuttle::move-down-disabled-icon |
Overrides the default disabled move-down icon. |
af|selectOrderShuttle::move-down-icon |
Overrides the default move-down icon. |
af|selectOrderShuttle::move-horizontal-disabled-icon |
Overrides the default disabled horizontal move icon. |
af|selectOrderShuttle::move-horizontal-icon |
Overrides the default horizontal move icon. |
af|selectOrderShuttle::move-top-disabled-icon |
Overrides the default disabled move-top icon. |
af|selectOrderShuttle::move-top-icon |
Overrides the default move-top icon. |
af|selectOrderShuttle::move-up-disabled-icon |
Overrides the default disabled move-up icon. |
af|selectOrderShuttle::move-up-icon |
Overrides the default move-up icon. |
af|selectOrderShuttle::move-vertical-disabled-icon |
Overrides the default disabled vertical move icon. |
af|selectOrderShuttle::move-vertical-icon |
Overrides the default vertical move icon. |
af|selectOrderShuttle::moveall-horizontal-disabled-icon |
Overrides the default disabled horizontal moveall icon. |
af|selectOrderShuttle::moveall-horizontal-icon |
Overrides the default horizontal moveall icon. |
af|selectOrderShuttle::moveall-vertical-disabled-icon |
Overrides the default disabled vertical moveall icon. |
af|selectOrderShuttle::moveall-vertical-icon |
Overrides the default vertical moveall icon. |
af|selectOrderShuttle::remove-horizontal-disabled-icon |
Overrides the default disabled horizontal remove icon. |
af|selectOrderShuttle::remove-horizontal-icon |
Overrides the default horizontal remove icon. |
af|selectOrderShuttle::remove-vertical-disabled-icon |
Overrides the default disabled vertical remove icon. |
af|selectOrderShuttle::remove-vertical-icon |
Overrides the default vertical remove icon. |
af|selectOrderShuttle::removeall-horizontal-disabled-icon |
Overrides the default disabled horizontal removeall icon. |
af|selectOrderShuttle::removeall-horizontal-icon |
Overrides the default horizontal removeall icon. |
af|selectOrderShuttle::removeall-vertical-disabled-icon |
Overrides the default disabled vertical removeall icon. |
af|selectOrderShuttle::removeall-vertical-icon |
Overrides the default vertical removeall icon. |
Resource Strings |
Description |
af_selectOrderShuttle.DESCRIPTION_LABEL |
Text above description area. |
af_selectOrderShuttle.MOVE_ALL_TIP |
Alt tag for moving all the items |
af_selectOrderShuttle.MOVE_TIP |
Alt tag for moving selected items |
af_selectOrderShuttle.REMOVE_ALL_TIP |
Alt tag for removing all the items |
af_selectOrderShuttle.REMOVE_TIP |
Alt tag for removing selected items |
af_selectOrderShuttle.MOVE_ALL |
Link text for moving all the items |
af_selectOrderShuttle.MOVE |
Link text for moving selected items |
af_selectOrderShuttle.REMOVE_ALL |
Link text for removing all the items |
af_selectOrderShuttle.REMOVE |
Link text for removing selected items |
af_selectOrderShuttle.REORDER_UP_ALL_TIP |
Alt tag for reordering items up to top |
af_selectOrderShuttle.REORDER_UP_TIP |
Alt tag for reordering items up one |
af_selectOrderShuttle.REORDER_DOWN_ALL_TIP |
Alt tag for reordering items down to bottom |
af_selectOrderShuttle.REORDER_DOWN_TIP |
Alt tag for reordering items down one |
af_selectOrderShuttle.REORDER_UP_ALL |
Text for reordering items to top of list |
af_selectOrderShuttle.REORDER_UP |
Text for reordering items up one position in the list |
af_selectOrderShuttle.REORDER_DOWN_ALL |
Text for reordering items to bottom of list |
af_selectOrderShuttle.REORDER_DOWN |
Text for reordering items down one position in the list |
Style Selectors |
Description |
Conditions |
af|separator |
Style on the root element of the af:separator component. |
Style Selectors |
Description |
Conditions |
af|showDetail |
Skin properties |
Description |
-tr-layout |
Configures the layout of the children of the show detail.
A value of "indent" is the default and will indent the children by the width of the show detail icon.
A value of "flush" will put the children at the same level as the icon. The child-container element selector may be used with CSS padding to change the indent with this setting.
|
|
af|showDetail::disclosure-link |
Selector for the anchor element that contains the disclosure icon. |
af|showDetail::header-text |
Selector for the disclosed and undisclosed text. Note that this selector is not used when the prompt facet is used; the prompt facet replaces this header-text area. |
af|showDetail::child-container |
Selector for the parent element of the component's children. |
Icon Selectors |
Description |
af|showDetail::disclosed-icon |
Icon displayed when the af:showDetail component is rendered in its disclosed state. |
af|showDetail::undisclosed-icon |
Icon displayed when the af:showDetail component is rendered in its undisclosed state. |
Resource Strings |
Description |
af_showDetail.DISCLOSED |
Text for the collapse prompt. |
af_showDetail.UNDISCLOSED |
Text for the disclose prompt. |
af_showDetail.TIP_DISCLOSED |
Tooltip for the disclosure icon. |
af_showDetail.TIP_UNDISCLOSED |
Tooltip for the collapse icon. |
Style Selectors |
Description |
Conditions |
af|showDetailHeader |
Selector that renders on the root dom element of the component.
Skin properties |
Description |
-tr-header-height |
Used when the showDetailHeader is being stretched by its parent container to indicate the CSS length for the header bar of the showDetailHeader so that the content can be stretched to fill the remaining space. This skin property is honored only if the showDetailHeader is being stretched (like when a child of a panelSplitter). |
|
af|showDetailHeader::title-table |
The style for the table containing the header. Generally this will not be modified, but this allows for more flexible skinning of the title in general so that under certain curcumstances, it can be styled to match the content container. This style class supports the :disclosed pseudo-class when the header is disclosed.
Pseudo classes |
Description |
disabled |
|
|
af|showDetailHeader::title-start$ |
The style for the starting cell of the header. Generally this is the decoration on the left side of the screen and can be used to create rounded edges. The value for "$" is a number between 1 and 5 signifying the five header types. |
Only used by fusion skins. |
af|showDetailHeader::title$ |
The style for the main part of the header. It is the section that immediately follows the "af|showDetailHeader::title-start$" key. The value for $ is a number between 1 and 5 signifying the five header types. |
af|showDetailHeader::title-end$ |
The style for the ending cell of the header. Generally this is the decoration on the right side of the screen and can be used to create rounded edges. It will immediately follow the The value for "$" is a number between 1 and 5 signifying the five header types. |
Only used by fusion skins. |
af|showDetailHeader::disclosure-icon-container |
Applied to the container for the disclosure icon. |
af|showDetailHeader::undisclosed-icon-style |
Style on the icon that is shown when the panel is undisclosed (collapsed). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the undisclosed-icon-style and define the icon for the undisclosed-icon key. |
af|showDetailHeader::disclosed-icon-style |
Style on the icon that is shown when the panel is disclosed (expanded). The icon is specified as a background-image in this key. To use text or an img element instead of a background-image, set -tr-inhibit: background-image in the disclosed-icon-style and define the icon for the disclosed-icon key. |
af|showDetailHeader::disclosure-link |
Selector for the anchor element that contains the disclosure icon. |
af|showDetailHeader::icon-style |
Applied to the element containing the specified icon if messageType is set to null. Otherwise the icon associated with the message type is displayed in the container. |
af|showDetailHeader::title-text$ |
Styles the "header" element inside the title of the element specified by the af|showDetailHeader::title$ key. This element surrounds the header text. The value for "x" is a number between 1 and 5 signifying the five header types.If no message type is specified or message type is set to none then none of these pseudo-classes will be present.
Pseudo classes |
Description |
error |
set according to the message type |
warning |
set according to the message type |
info |
set according to the message type |
confirmation |
set according to the message type |
|
af|showDetailHeader::context-container |
The style for the element containing the contents of the context facet. This will be placed directly after the header text. |
af|showDetailHeader::instruction-text |
Styles the text that might come from the helpTopicId. |
af|showDetailHeader::dynamic-help-icon-style |
Style the dynamic help icon. By default the dynamic-help-icon is null, and this style has a background-image that you can override. Includes .AFDynamicHelpIconStyle:alias. Tip: If you skin the background-image, you may also want to skin it for :hover, :active, and :disabled.
Pseudo classes |
Description |
disabled |
Use :disabled:hover if you need precedence over :hover alone in disabled mode. |
|
af|showDetailHeader::toolbar |
This is a potential sub section of the "af|showDetailHeader::titlex". It applies to end-aligned toolbars in the title section. This section is only present if there is either a toolbar or menuBar facet (or both) included in the showDetailHeader. |
af|showDetailHeader::help-link-container |
If there is "dynamic help" for this header, and there is not a help topic with dynamic content, then this style pertains to the element containing the dynamic help link. This will be place directly after the context facet. |
af|showDetailHeader::info |
Applied to the element containing the contents of the "info" facet. When help is available, this element may also contain the contents of the legend. |
af|showDetailHeader::content$ |
The style for the content region of the header. This is the area where the components children will be rendered. It is located directly below the af|showDetailHeader::title$ key. The value for $ is a number between 1 and 5 signifying the five header types. |
Icon Selectors |
Description |
af|showDetailHeader::confirmation-icon |
Icon used when the messageType is set to "confirmation". |
af|showDetailHeader::disclosed-icon |
The icon is displayed when the af:showDetailHeader component is rendered in its disclosed state. |
af|showDetailHeader::dynamic-help-icon |
Icon that can be used instead of a background-image on af|showDetailHeader::dynamic-help-icon-style. By default this is null. If you use this af|showDetailHeader::dynamic-help-icon-style can then be used for background colors, etc. |
af|showDetailHeader::error-icon |
Icon used when the messageType is set to "error". Available pseudo-class is :hover. |
af|showDetailHeader::information-icon |
Icon used when the messageType is set to "information". Available pseudo-class is :hover. |
af|showDetailHeader::warning-icon |
Icon used when the messageType is set to "warning". Available pseudo-class is :hover. |
af|showDetailHeader::undisclosed-icon |
The icon is displayed when the af:showDetailHeader component is rendered in its undisclosed state. |
Style Selectors |
Description |
Conditions |
af|showDetailItem |
Selector that renders on the root dom element of the component. Typically, you should define no styles for this selector however, you may use it to define some of the standard theme management properties. |
Resource Strings |
Description |
af_showDetailItem.TIP_ITEM |
Identifies an item. This is only used in screenreader mode. |
af_showDetailItem.TIP_SELECTED_ITEM |
Identifies the selected item. This is only used in screenreader mode. |
af_showDetailItem.TIP_DISABLED_ITEM |
Identifies the detail item as being disabled. This is only used in screenreader mode. |
af_showDetailItem.TIP_SELECTED_DISABLED_ITEM |
Identifies the detail item as being selected and disabled. This is only used in screenreader mode. |
The component cannot be skinned.
Style Selectors |
Description |
Conditions |
af|statusIndicator |
Selector that renders on the root dom element of the component. |
Icon Selectors |
Description |
af|statusIndicator::idle-icon |
The icon that represents the idle state. This icon is generally a non-animated icon that indicates communication is NOT occurring with the server. |
af|statusIndicator::processing-icon |
The icon that represents the processing state. This icon is generally an animated icon that indicates communication IS occurring with the server. |
af|statusIndicator::connecting-icon |
The icon displays when the Active Data Service is in the process of connecting. This icon is generally an animated icon. |
af|statusIndicator::connected-icon |
The icon displays when the Active Data Service is in the connected state. This icon is generally a non-animated icon and may be the same as the idle state icon. |
af|statusIndicator::reconnecting-icon |
The icon displays when the Active Data Service has lost connection and is attempting to reconnect. This icon is generally an animated icon. |
af|statusIndicator::disconnected-icon |
The icon displays when the Active Data Service is in the disconnected state. This icon is generally a non-animated icon used to indicate that no further reconnection attempts will be made without use interaction. |
Resource Strings |
Description |
af_statusIndicator.TIP_IDLE |
Tooltip to indicate when the status indicator is in idle mode. |
af_statusIndicator.TIP_BUSY |
Tooltip to indicate that the status indicator is busy. |
af_statusIndicator.TIP_CONNECTING |
Tooltip to indicate the status indicator is trying to connect. |
af_statusIndicator.TIP_CONNECTED |
Tooltip to indicate that the status indicator is connected. |
af_statusIndicator.TIP_RECONNECTING |
Tooltip to indicate that the status indicator is reconnecting after having lost connection to the server. |
af_statusIndicator.TIP_DISCONNECTED |
Tooltip to indicate that the status indicator is disconnected. |
af:table To style the table component, you will use both af|table and af|column skin selectors.<td/> <td/> <td/> <td/>
Style Selectors |
Description |
Conditions |
af|table |
Styles the root dom element of the component. Use the .AFTableCellPadding:alias and .AFTableCellData:alias to set padding and .AFTableCellData:alias and .AFTableCellHeaderBorder:alias to set borders. All table cells, data and headers, include the .AFTableCellPadding:alias. Header cells also include .AFTableCellHeaderBorder:alias. Data cells also include .AFTableCellData:alias. Please note that when no vertical grid lines are present in the table extra padding may need to be added to the AFTableCellData:alias to compensate for the .AFTableCellHeaderBorder:alias (and -tr-border-right-width property). For e.g. to increase the padding of the data header cells in the table to 8px you extend the skin selectors like below. Remember that the simple skin's CSS properties are the base, and you are extending them, so there is no need to redefine any CSS properties that you are not changing.:
-
/* change the -tr-padding-left-width and -tr-padding-right-width to 8px */ af|table { -tr-padding-left-width: 8; -tr-padding-right-width: 8; }
/* a table cell (Header and data cell) includes this alias, so change the padding-left and padding-right to 8px to match the -tr-padding properties */ .AFTableCellPadding:alias { padding-left:8px; padding-right:8px; }
/* data-cell and banded-data-cell include this alias as well as the .AFTableCellPadding:alias. .AFTableCellPadding:alias is also in the header cells. For the case when there is no vertical gridline, we need to add an extra pixel to the padding to compensate for no border. If we didn't do this, the header that has a border and the data cells that don not would not line up.*/ .AFTableCellData:alias { /* Use 1px more for padding to compensate for lack of borders in the data cells but their presence in the column headers*/ padding-right: 9px; }
/* When we have a vertical line in the table cell, we don't need the extra pixel we put in .AFTableCellData:alias */ .AFTableCellDataVGrid:alias { padding-right: 8px; }
Skin properties |
Description |
-tr-detail-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for the expand/collapse of the table details. This skin property is honored only if the animation is enabled in the system. |
-tr-column-scroll-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for scrolling when the user sets focus inside a cell of a column that is contained inside a column group. This skin property is honored only if the animation is enabled in the system. |
-tr-column-reorder-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for reordering of a column by the user. This skin property is honored only if the animation is enabled in the system. |
-tr-hover-highlight-row |
Specifies if a row should be highlighted on mouse over. The default value is "true". Set it to "false" to disable row highlighting |
-tr-border-left-width |
Together with the other -tr-border and -tr-padding skin properties, these are used to size the table at runtime. These properties must match the paddings/borders in the header/data cell classes. The total width of the borders and paddings of each cell (header and data) must be equal to the total of these four properties. This is tricky to do, so changing paddings and borders is discouraged. |
-tr-border-right-width |
See -tr-border-left-width description. |
-tr-padding-left-width |
See -tr-border-left-width description. |
-tr-padding-right-width |
See -tr-border-left-width description. |
-tr-display-filter-clear-icon |
Indicates if the icon to clear the filter fields should be displayed in the row/column header cell. Setting the property to "true" will display the icon |
-tr-navbar-max-page-links |
Specifies the maximum number of links to display in the navigation bar used to navigate ranges of rows on tablets. |
-tr-overflow-style |
Specify "autohiding-scrollbar" to enable auto scrollbar hiding. |
-tr-scroll-policy |
Specifies the scrolling behavior when scrollPolicy="auto". |
|
af|table::column-resize-indicator |
Styles the column resize indicator when the user resizes a column in the table. |
af|table::data-row |
Styles the row of the table that has data (as opposed to the header). Use this selector as an ancestor to af|column::data-cell or af|column::banded-data-cell.
Pseudo classes |
Description |
selected |
|
inactive |
styles when it doesn't have focus |
drop-target |
styles when you want to drag a row to another row using the drag and drop framework |
|
af|table::status-message |
Styles the status message that shows up when the user scrolls the table. Includes the .AFDataCollectionStatusMessage:alias. |
af|table::record-range-footer |
Style used for record range in printable pages. |
af|table::detail-area-cell |
Style for the area where the detail stamp is rendered. This includes the .AFTableCellDataHGridBorder:alias. |
af|table::disclosed-icon-style |
Style of the disclosed icon used with the detailStamp facet in table. The disclosed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the disclosed-icon. Includes .AFClickableImageAnchor:alias |
af|table::undisclosed-icon-style |
Style of the undisclosed icon used with the detailStamp facet in table. The undisclosed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the undisclosed-icon. Includes .AFClickableImageAnchor:alias |
af|table::navbar |
Used to style the record navigation bar on tablet devices. |
af|table::navbar-page-input |
Used to style the page input of navigation bar. |
af|table::navbar-row-range-text |
Used to style message displaying the number of rows in the record navigation bar. Please use .AFTableNavBarRowRangeText:alias instead. |
af|table::navbar-separator |
Used to style the separator that separates the number of records message from the page navgation icons/links. Please use .AFTableNavBarSeparator:alias instead. |
af|table::navbar-page-container |
Used to style the container of the page navigation links. Please use .AFTableNavBarPageContainer:alias instead. |
af|table::navbar-gap-page |
Used to style the element indicating gaps in the page links. Please use .AFTableNavBarPageGap:alias instead. |
af|table::navbar-current-page |
Used to style element indicating the current page in the page links displayed in the record navigation bar. Please use .AFTableNavBarCurrentPage:alias instead. |
af|table::navbar-page-link |
Used to style a link indicating a navigation page displayed in the record navigation bar. Please use .AFTableNavBarPageLink:alias instead. |
af|table::navbar-previous-page-icon-style |
Use aliases .AFTableNavBarPreviousPageIconStyle:alias, .AFTableNavBarPreviousPageIconStyleDisabled:alias and .AFTableNavBarPreviousPageIconStyleActivated:alias |
af|table::navbar-first-page-icon-style |
Use aliases .AFTableNavBarFirstPageIconStyle:alias, .AFTableNavBarFirstPageIconStyleDisabled:alias and .AFTableNavBarFirstPageIconStyleActivated:alias |
af|table::navbar-next-page-icon-style |
Use aliases .AFTableNavBarNextPageIconStyle:alias, .AFTableNavBarNextPageIconStyleDisabled:alias and .AFTableNavBarNextPageIconStyleActivated:alias |
af|table::navbar-last-page-icon-style |
Use aliases .AFTableNavBarLastPageIconStyle:alias, .AFTableNavBarLastPageIconStyleDisabled:alias and .AFTableNavBarLastPageIconStyleActivated:alias |
af|table::navbar-page-input-label |
af|table::loadmore |
af|table::loadmore-range-text |
af|table::loadmore-link |
.AFTableCellPadding:alias |
Specifies the padding of the cell in a column/table. If you want to change the padding of a cell, do it with this alias instead of with selectors af|column::column-header-cell, af|column::column-footer-cell, af|column::row-header-cell, af|column::data-cell, and af|column::banded-data-cell. This way you only have to change it in one place. The padding-right and padding-left defined here must match the af|table's skin property -tr-padding-left-width, -tr-padding-right-width. Note that when the header has borders and there are no borders in the table data area, then .AFTableCellData:alias also needs padding set and it needs to compensate for the no borders to keep things lined up. |
.AFTableCellData:alias |
Specifies the border and padding of the data cell in a table. If you want to change the right/left border of a cell, do it with this alias instead of with selectors af|column::data-cell and af|column::banded-data-cell. This way you only have to change it in one place. The border-right and border-left defined here must match the af|table's skin property -tr-border-left-width, -tr-border-right-width. Padding is also set in this alias. By default, the padding-right is one pixel more than that in -tr-padding-right to compensate for no borders. |
.AFTableCellHeaderBorder:alias |
Specifies the borders of the table row header and column header cells. The border-right and border-left defined here must match the af|table's skin property -tr-border-left-width, -tr-border-right-width |
.AFTableCellHeaderBackground:alias |
Specifies the background of the table row header and column header cells. |
.AFTableCellFooterBorder:alias |
Specifies the borders of the table row header and column header cells. The border-right and border-left defined here must match the af|table's skin property -tr-border-left-width, -tr-border-right-width |
.AFTableCellFooterBackground:alias |
Specifies the background of the table row footer and column footer cells. |
.AFTableCellBandedBackground:alias |
Specifies the background of the af|column::banded-data-cell. |
.AFTableCellDataHGrid:alias |
Specifies the border and padding for data cells when horizontal gridding is enabled. |
.AFTableCellDataVGrid:alias |
Specifies the border and padding for data cells when vertical gridding is enabled. |
.AFTableCellDataVHGrid:alias |
Specifies the border and padding for data cells when both horizontal and vertical gridding is enabled. Includes .AFTableCellDataHGrid:alias and .AFTableCellDataVGrid:alias. |
.AFTableCellFrozenBorder:alias |
Specifies the right edge border for column cells that are at frozen. e.g. border-right: 1px solid #9900FF;. Specify .AFTableCellFrozenBorder:alias:rtl as border-left: 1px solid #9900FF;border-right: none; |
.AFTableCellDataSelected:alias |
Specifies the style on the selected data cells; e.g. background-color. This is a shortcut for "af|table::data-row:selected af|column::data-cell" and "af|column::data-cell:selected" |
.AFTableCellDataSelectedFocused:alias |
Specifies the style on the selected data cells that are part of currently active row; e.g. background-color. The active row is the one that was last selected by the user. The active row is valid only when the table has focus. This is a shortcut for "af|table::data-row:selected:focused af|column::data-cell". |
.AFTableCellDataSelectedBanded:alias |
Specifies the style on the selected, banded data cells; e.g. background-color. This is a shortcut for "af|table::data-row:selected af|column::banded-data-cell" and "af|column::banded-data-cell:selected" |
.AFTableCellDataSelectedBandedFocused:alias |
Specifies the style on the selected, banded data cells that are part of currently active row; e.g. background-color. The active row is the one that was last selected by the user. The active row is valid only when the table has focus. This is a shortcut for "af|table::data-row:selected:focused af|column::banded-data-cell". |
.AFTableCellDataSelectedInactive:alias |
Specifies the style on the selected, inactive data cells; e.g. background-color. |
.AFTableCellDataSelectedBandedInactive:alias |
Specifies the style on the selected, inactive, banded data cells; e.g. background-color. |
.AFTableCellDataDropTargetColor:alias |
Specifies the background color for data cells that are a drop target during DnD operation. |
.AFTableHeaderCellDataDropTargetColor:alias |
Specifies the background color for header cells that are a drop target during DnD operation. |
.AFTableCellSubtotal |
Specifies the style on the subtotal cell. To style a data cell as a subtotal cell, use "af|column::data-cell.AFTableCellSubtotal" in your skin definition and styleClass="AFTableCellSubtotal" in the tag (typically this value would come from an EL expression since not every cell would be a subtotal cell). |
.AFTableNavBarRowRangeText:alias |
Used to style message displaying the number of rows in the record navigation bar. |
.AFTableNavBarSeparator:alias |
Used to style the separator that separates the number of records message from the page navgation icons/links. |
.AFTableNavBarPageContainer:alias |
Used to style the container of the page navigation links. |
.AFTableNavBarPageGap:alias |
Used to style the element indicating gaps in the page links. |
.AFTableNavBarCurrentPage:alias |
Used to style element indicating the current page in the page links displayed in the record navigation bar. |
.AFTableNavBarPageLink:alias |
Used to style a link indicating a navigation page displayed in the record navigation bar. |
.AFTableNavBarPreviousPageIconStyle:alias |
Style of the previous page icon used in the record navigation bar. This icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the navbar-previous-page-icon. Includes .AFClickableImageAnchor:alias. |
.AFTableNavBarFirstPageIconStyle:alias |
Style of the first page icon used in the record navigation bar. This icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the navbar-previous-page-icon. Includes .AFClickableImageAnchor:alias. |
.AFTableNavBarNextPageIconStyle:alias |
Style of the next page icon used in the record navigation bar. This icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the navbar-previous-page-icon. Includes .AFClickableImageAnchor:alias. |
.AFTableNavBarLastPageIconStyle:alias |
Style of the last page icon used in the record navigation bar. This icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image and define the override icon for the navbar-previous-page-icon. Includes .AFClickableImageAnchor:alias. |
.AFTableNavBarPreviousPageIconStyleDisabled:alias |
Used to style the disabled state of the previous page icon used in the record navigation bar. |
.AFTableNavBarFirstPageIconStyleDisabled:alias |
Used to style the disabled state of the first page icon used in the record navigation bar. |
.AFTableNavBarNextPageIconStyleDisabled:alias |
Used to style the disabled state of the next page icon used in the record navigation bar. |
.AFTableNavBarLastPageIconStyleDisabled:alias |
Used to style the disabled state of the last page icon used in the record navigation bar. |
.AFTableNavBarPreviousPageIconStyleActivated:alias |
Used to style the clicked state of the previous page icon used in the record navigation bar. |
.AFTableNavBarFirstPageIconStyleActivated:alias |
Used to style the clicked state of the frist page icon used in the record navigation bar. |
.AFTableNavBarNextPageIconStyleActivated:alias |
Used to style the clicked state of the next page icon used in the record navigation bar. |
.AFTableNavBarLastPageIconStyleActivated:alias |
Used to style the clicked state of the last page icon used in the record navigation bar. |
Icon Selectors |
Description |
af|table::disclosed-icon |
Overrides the default disclosed icon used with the detailStamp facet in table. |
af|table::undisclosed-icon |
Overrides the default undisclosed icon used with the detailStamp facet in table. |
af|table::navbar-previous-page-icon |
Overrides the previous page icon used in the record navigation bar. |
af|table::navbar-first-page-icon |
Overrides the first page icon used in the record navigation bar. |
af|table::navbar-next-page-icon |
Overrides the next page icon used in the record navigation bar. |
af|table::navbar-last-page-icon |
Overrides the last page icon used in the record navigation bar. |
Resource Strings |
Description |
af_table.LABEL_REORDERING_COLUMN |
The message that is displayed on the browser while the table is re-fetched following the completion of a table re-order. Also used for af:treeTable. |
af_table.LABEL_FETCHING |
The message that is displayed on the browser while the table is fetching data during initial load of data or while scrolling the table. Also used for af:tree and af:treeTable. |
af_table.LABEL_END |
While scrolling the table quickly we show the row number when you have scrolled to the bottom of the virtual table. It is indicated by this label. This will happen in the known and unknown row counts. Also used for af:tree and af:treeTable. |
af_table.LABEL_START |
While scrolling the table quickly we show the row number when you have scrolled to the top of the virtual table. It is indicated by this label. This will happen in the known and unknown row counts. Also used for af:tree and af:treeTable. |
af_table.LABEL_ROW |
While scrolling the table quickly we show the row number based on the relative position of the cursor of the virtual table. It is indicated by this label. This will happen in the known and unknown row counts. Also used for af:tree and af:treeTable. |
af_table.LABEL_SELECT_ROW |
In screenreader mode when a user has focus on a column header this lets the user know that there are rows selected. This is to warn them that selecting the column will unselect the rows. Also used for af:tree and af:treeTable. |
af_table.LABEL_GOING_TO |
Label used to build the string to show the current location of the cursor in the viewport of the virtual table. This is combined with the LABEL_START, LABEL_END, and LABEL_ROW to produce the message shown during scrolling. Also used for af:tree and af:treeTable. |
af_table.LABEL_ROW_RANGE_UNKNOWN_COUNT |
This is used in design time rendering of the table. This value should never be changed. |
af_table.LABEL_ROW_RANGE_KNOWN_COUNT |
This is used in design time rendering of the table. This value should never be changed. |
af_table.TIP_COLLAPSED_NODE |
Tooltip for the collapse icon used in the table. |
af_table.TIP_EXPANDED_NODE |
Tooltip for the expand icon used in the table. |
af_table.LABEL_HEADER_SUMMARY |
Attached to a table to describe that the table contains column headers. This is only available in screenreader mode. |
af_table.LABEL_NAVBAR_ROW_RANGE_KNOWN_COUNT |
Label used by the data navigation bar to display message about number of rows when the row count is known. |
af_table.LABEL_NAVBAR_ROW_RANGE_UNKNOWN_COUNT |
Label used by the data navigation bar to display message about number of rows when the row count is not known. |
af_table.LABEL_NAVBAR_ROW_RANGE_PAGE |
Label used by the data navigation bar to display the text prior to page input. |
af_table.LABEL_NAVBAR_ROW_RANGE_PAGE_MAX |
Label used by the data navigation bar to display the max value of the page range. |
af_table.MSG_NAVBAR_PAGE_INVALID |
Label used by the data navigation bar to display message when invalid page is entered. |
af_table.MSG_NAVBAR_PAGE_INVALID_DETAIL |
Label used by the data navigation bar to display message when a value less than 0 is entered. |
af_table.LABEL_NAVBAR_NAVIGATE_ROWS |
Label used by the data navigation bar to display the information about navigation bar in screen reader mode. |
af_table.TIP_FIRST_PAGE |
Tooltip for the first page navigation icon. |
af_table.TIP_LAST_PAGE |
Tooltip for the last page navigation icon. |
af_table.TIP_PREVIOUS_PAGE |
Tooltip for the previous page navigation icon. |
af_table.TIP_NEXT_PAGE |
Tooltip for the next page navigation icon. |
af_table.TIP_GOTO_PAGE |
Tooltip for the navigation link to navigate to a particular page. |
af_table.TIP_INPUT_PAGE |
Tooltip for the page input. |
Style Selectors |
Description |
Conditions |
af|toolbar |
Selector that renders on the root dom element of the component. This style uses the AFLightAccentBackground and AFTextForeground aliases. |
af|toolbar::body |
The main section of the toolbar where the items are, not including the end space to the right where the overflow-indicator appears. The body is only present on toolbars with overflow, so you should not style padding or margins here. You should instead style on the items element. |
af|toolbar::items |
The direct container of the toolbar items. For a toolbar that uses overflow, this does not include the end space to the right where the overflow-indicator appears. The items element is present on toolbar both with and without overflow, so it is a safe place to style padding or margins. |
af|toolbar::item |
Style applied to the toolbar item that is shown on a toolbar. |
af|toolbar::separator |
Style applied to the toolbar separator. The separator appears on the toolbar when the toolbar has grouped toolbar items. This style uses the AFBarSeparator alias. |
af|toolbar::overflow-indicator |
Style on the overflow indicator that is present when the toolbar items are overflowed beyond the available space. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
Icon Selectors |
Description |
af|toolbar::overflow-icon |
Overrides the default toolbar overflow icon. Icons can be text or img elements, e.g. af|toolbar::overflow-icon {content "X"} or af|toolbar::overflow-icon {content: url(...)}. Use this key instead of the af|toolbar::overflow-indicator key if you do not want a background-image. |
Style Selectors |
Description |
Conditions |
af|toolbox |
Selector that renders on the root dom element of the component. |
af|toolbox::body |
Selector that renders on the body of the component, which contains all of the toolbox rows. This is used for the border of the component. |
af|toolbox::row |
This is rendered for each leading row (before the last row) of the component. A border between rows is accomplished by setting border-bottom. |
af|toolbox::last-row |
This is rendered on the last row of the component. A toolbox with only one row will have the last-row style. The border at the bottom of the toolbox is accomplished by setting border-bottom. |
af|toolbox::leading-cell |
This is a leading cell (a cell before the last cell) in a toolbox row. Each toolbox row consists of 0 or more leading cells followed by a single last cell. These cells contain menubars or toolbars. |
af|toolbox::last-cell |
The last cell in a toolbox row. Each toolbox row consists of 0 or more leading cells followed by a single last cell. These cells contain menubars or toolbars. |
Style Selectors |
Description |
Conditions |
af|train |
Top level style class for the entire train component.
Skin properties |
Description |
-tr-visible-stop-count |
Determines the number of visible stops to be displayed in the train. Valid values must be integer and > 0. e.g. af|train {-tr-visible-stop-count:6} displays 6 stops (+ overflows). |
|
af|train::body |
Styles the container which encloses both the train content and the start and end overflow indicators. |
af|train::start-overflow-indicator |
Styles the start overflow indicator. The start indicator is specified using a background-image. |
af|train::end-overflow-indicator |
Styles the end overflow indicator. The end indicator is specified using a background-image. |
af|train::content |
Styles the container which encloses the train content (excluding the overflow indicators). |
af|train::parent-start |
Styles the block that encloses the parent-start elements, such as its icon and label. |
af|train::parent-end |
Styles the block that encloses the parent-end elements, such as its icon and label. |
af|train::parent-start-icon-cell |
Styles the cell that displays the parent start icon. |
af|train::parent-end-icon-cell |
Styles the cell that displays the parent end icon. |
af|train::parent-start-content |
Styles the cell that displays the parent process name at the beginning of the train. |
af|train::parent-end-content |
Styles the cell that displays the parent process name at the end of the train. |
af|train::join |
Styles all joins between stops.
Pseudo classes |
Description |
disabled |
|
unvisited |
|
train-visited |
|
|
af|train::stop |
Cell that encloses all the stop elements including icon and content. |
af|train::stop-icon-cell |
Styles the cell that displays the stop icon. |
af|train::stop-icon-selected |
Used to set the background image for the selected stop. |
af|train::stop-icon-disabled |
Used to set the background image for a disabled stop. |
af|train::stop-icon-unvisited |
To set the background image for an unvisited enabled stop. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|train::stop-icon-visited |
To set the background image for a visited stop. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|train::stop-content |
Content block that displays the stop name.
Pseudo classes |
Description |
selected |
to style content for the currently selected stop. |
required |
to style the required indicator, if stop is selected. |
|
af|train::stop-link |
To skin all links that display the stop name.
Pseudo classes |
Description |
selected |
to style a link for the currently selected stop. |
disabled |
to style a disabled link. |
unvisited |
to style an unvisited enabled stop |
train-visited |
to style a visited enabled stop. Due to a skinning limitation we use :train-visited instead of the more obvious :visited. |
|
af|train::stop-icon-error |
To set the background image for a stop that is in error. This is overlaid on top of the stop icon. |
af|train::stop-icon-warning |
To set the background image for a stop that has a warning. This is overlaid on top of the stop icon. |
af|train::stop-icon-information |
To set the background image for a stop that has some information. This is overlaid on top of the stop icon. |
af|train::stop-icon-confirmation |
To set the background image for a stop that has a confirmation status. This is overlaid on top of the stop icon. |
af|train-vertical |
Top level class for the train in the vertical layout. -vertical is used as a hint on the af|train root skin rather than a pseudo-class. This is because the layout of the vertical train is different from the horizontal and requires different skin selectors, hence they cannot be shared between the twos. |
af|train-vertical::parent-start-icon-cell |
For the cell that displays the parent-start-icon. |
af|train-vertical::parent-end-icon-cell |
For the cell that displays the parent-end-icon. |
af|train-vertical::parent-start-content |
For the cell that displays the label of the parent train at the top of the vertical train. |
af|train-vertical::parent-end-content |
For the cell that displays the label of the parent train at the bottom of the vertical train. |
af|train-vertical::join |
For joins between stops in the vertical train. Use pseudo-classes :disabled, :unvisited, :train-visited to style joins before a disabled unvisited-enabled and visited-enabled (including the currently selected stop) respectively.
Pseudo classes |
Description |
disabled |
|
unvisited |
|
train-visited |
|
|
af|train-vertical::stop |
For a cell that displays the entire stop info. Only used in the vertical layout. |
af|train-vertical::stop-icon-cell |
For the cell that displays the stop icon. |
af|train-vertical::stop-icon-selected |
To set the background image for the currently selected stop. |
af|train-vertical::stop-icon-disabled |
To set the background image for a disabled stop. |
af|train-vertical::stop-icon-unvisited |
To set the background image for an unvisited enabled stop. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|train-vertical::stop-icon-visited |
To set the background image for a visited enabled stop. Tip: If you skin the background-image, you may also want to skin it for :hover and :active. |
af|train-vertical::stop-content |
For the cell that displays the label of the stop, in a vertical train.
Pseudo classes |
Description |
selected |
to style content for the currently selected stop |
required |
to style the required indicator of a stop that is required |
|
af|train-vertical::stop-link |
For the link that displays the label of the stop, in a vertical train..
Pseudo classes |
Description |
selected |
to style a link for the currently selected stop. |
disabled |
to style a disabled link. |
unvisited |
to style an unvisited enabled stop |
train-visited |
to style a visited enabled stop. Due to a skinning limitation we use :train-visited instead of the more obvious :visited. |
|
af|train-vertical::stop-icon-error |
To set the background image for a stop that is in error (for vertical train). This is overlaid on top of the stop icon. |
af|train-vertical::stop-icon-warning |
To set the background image for a stop that has a warning (for vertical train). This is overlaid on top of the stop icon. |
af|train-vertical::stop-icon-information |
To set the background image for a stop that has some information (for vertical train). This is overlaid on top of the stop icon. |
af|train-vertical::stop-icon-confirmation |
To set the background image for a stop that has a confirmation status (for vertical train). This is overlaid on top of the stop icon. |
.AFTrainDefault:alias |
This alias is included in both af|train and af|train-vertical, so it is a convenience if you need to style both selectors the same, you can use this alias. |
Icon Selectors |
Description |
af|train::start-overflow-icon |
Overrides the start-overflow-indicator background image with an icon (high contrast mode). Icons can be text or img elements, e.g. af|train::start-overflow-icon {content "X"} or af|train::start-overflow-icon {content: url(...)}. Use this key instead of the start-overflow-indicator key to define the override icon. To inhibit the background-image, set -tr-inhibit: background-image in the start-overflow-indicator key. |
af|train::end-overflow-icon |
Overrides the end-overflow-indicator background image with an icon (high contrast mode). Icons can be text or img elements, e.g. af|train::end-overflow-icon {content "X"} or af|train::end-overflow-icon {content: url(...)}. Use this key instead of the end-overflow-indicator key to define the override icon. To inhibit the background-image, set "-tr-inhibit: background-image" in the end-overflow-indicator key. |
af|train::parent-start-icon |
This icon is displayed in the beginning of a train to indicate that the current train is a subtrain. |
af|train::parent-end-icon |
This icon is displayed in the end of a train to indicate that the current train is a subtrain. |
af|train::selected-stop-icon |
Train Stop icon for the currently selected stop. This can be used instead of a background-image on af|train::stop-icon-selected . By default this is null. |
af|train::disabled-stop-icon |
Train Stop icon for a disabled stop. This can be used instead of a background-image on af|train::stop-icon-disabled . By default this is null. |
af|train::unvisited-stop-icon |
Train Stop icon for an unvisited enabled stop. This can be used instead of a background-image on af|train::stop-icon-unvisited . By default this is null. |
af|train::visited-stop-icon |
Train Stop icon for a visited enabled stop. This can be used instead of a background-image on af|train::stop-icon-visited . By default this is null. |
af|train::stop-error-icon |
Message alert icon for a stop that is in error. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-error . By default this is null. |
af|train::stop-warning-icon |
Message alert icon for a stop that has a warning. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-warning .By default this is null. |
af|train::stop-information-icon |
Message alert icon for a stop that has some information. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-information . By default this is null. |
af|train::stop-confirmation-icon |
Message alert icon for a stop that has a confirmation status. This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train::stop-icon-confirmation . By default this is null. |
af|train-vertical::parent-start-icon |
This icon is displayed at the top of the train to indicate that the current train is a subTrain of another train. |
af|train-vertical::parent-end-icon |
This icon is displayed at the bottom of the train to indicate that the current train is a subTrain of another train. |
af|train-vertical::selected-stop-icon |
Train Stop icon for the currently selected stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-selected . By default this is null. |
af|train-vertical::disabled-stop-icon |
Train Stop icon for a disabled stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-disabled . By default this is null. |
af|train-vertical::unvisited-stop-icon |
Train Stop icon for an unvisited enabled stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-unvisited . By default this is null. |
af|train-vertical::visited-stop-icon |
Train Stop icon for a visited enabled stop (for vertical train).This can be used instead of a background-image on af|train-vertical::stop-icon-visited . By default this is null. |
af|train-vertical::stop-error-icon |
Message alert icon for a stop that is in error (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-error . By default this is null. |
af|train-vertical::stop-warning-icon |
Message alert icon for a stop that has a warning (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-warning . By default this is null. |
af|train-vertical::stop-information-icon |
Message alert icon for a stop that has some information (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-information . By default this is null. |
af|train-vertical::stop-confirmation-icon |
Message alert icon for a stop that has a confirmation (for vertical train). This is overlaid on top of the stop icon. This can be used instead of a background-image on af|train-vertical::stop-icon-confiramtion . By default this is null. |
Resource Strings |
Description |
af_train.TIP_STOP |
The hover text for the stop(s) in the train. This is usually prefixed with the text that indicates the state of the stop, like Visited, Current, Disabled and Unvisited. This text is defined below. See af_train_VISITED_STEP for e.g. |
af_train.TIP_PARENT_TRAIN |
The hover text for the parent train indicator. Usually the step names of the parent (and up) are displayed. |
af_train.LABEL_PARENT_TRAIN_SEPARATOR |
The separator used to concatenate the parent step names when the current train is nested more that one level deep. For e.g. Step 1 (separator) Step 1-1 |
af_train.TIP_STOP_ERROR |
The hover text for a stop that has one or more errors. |
af_train.TIP_STOP_WARNING |
The hover text for a stop that has one or more warnings. |
af_train.TIP_STOP_INFORMATION |
The hover text for a stop that has some information messages |
af_train.TIP_STOP_CONFIRMATION |
The hover text for a stop that has a confirmation message. |
af_train.TIP_SHOW_PREV_STEPS |
The hover text for the overflow icon (that displays the previous stops). |
af_train.TIP_SHOW_NEXT_STEPS |
The hover text for the overflow icon (that displays the next stops). |
af_train.VISITED_STEP |
The text used to refer to a visited stop. This is used in tooltip mentioned above. |
af_train.ACTIVE_STEP |
The text used to refer to an active stop. This is used in tooltip mentioned above. |
af_train.UNVISITED_STEP |
The text used to refer to an unvisited stop. This is used in tooltip mentioned above. |
af_train.DISABLED_STEP |
The text used to refer to a disabled stop. This is used in tooltip mentioned above. |
Style Selectors |
Description |
Conditions |
af|trainButtonBar |
Top level style class for the trainButtonBar component. |
af|trainButtonBar::button-cell |
Cell that encloses each button in the trainButtonBar component. |
af|trainButtonBar::back-button |
Style class for the Back button in the trainButtonBar component. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, and :disabled. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
Pseudo classes |
Description |
disabled |
|
|
af|trainButtonBar::next-button |
Style class for the Next button in the trainButtonBar component. Tip: If you skin this selector's background-image, you may also want to skin it for :hover, :active, and :disabled. Please note that for buttons :active and :focus pseudo-classes do not work in IE7. IE7 also does not allow disabled buttons to be styled. It is recommended that you use the .AFButton*:alias selectors as a shortcut to skin all button components the same.
Pseudo classes |
Description |
disabled |
|
|
af|trainButtonBar::access-key |
Skin to style the access key character in the button text. |
Resource Strings |
Description |
af_trainButtonBar.LABEL_BACK |
The label and tooltip on the back button. |
af_trainButtonBar.LABEL_NEXT |
The label and tooltip on the next button. |
Style Selectors |
Description |
Conditions |
af|tree |
Skin properties |
Description |
-tr-node-indentation |
The property used to indicate how much child tree nodes should be indented with respect to the parent nodes. |
-tr-node-disclosure-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for expand/collapse of the tree nodes. This skin property is honored only if the animation is enabled in the system. |
|
af|tree::data-row |
Specifies styling for text in a tree node.
Pseudo classes |
Description |
selected |
to specify styling for a selected row |
focused |
specifies styling for a row that has current focus in the tree (Use CTRL+arrow key to move focus from the selected item). |
inactive |
":selected:inactive" specifies styling for a selected row, when the tree control does not have focus. |
drop-target |
specifies styling for a row that is a drop target during DnD operation. |
|
af|tree::data-cell |
Specifies styling for tree data cell node.
Pseudo classes |
Description |
twinkle-on |
Styles an active data's data cell to twinkle. For example to style the node stamp text to twinkle use: "af|tree::data-cell:twinkle-on af|tree::node-stamp-text" |
|
af|tree::node-stamp-text |
The selector for the text of each node stamp. For example, to style the node stamps within a selected row, you can do this: "af|tree::data-row:selected af|tree::node-stamp-text" |
af|tree::status-message |
Styles the status message that shows up when the user scrolls the tree. Includes the .AFDataCollectionStatusMessage:alias. |
af|tree::expanded-icon-style |
Style of the expanded icon used with the tree component. The expanded icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the expanded-icon-style and define the override icon for the expanded-icon. Includes .AFClickableImageAnchor:alias |
af|tree::collapsed-icon-style |
Style of the collapsed icon used with the tree component. The collapsed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the collapsed-icon-style and define the override icon for the collapsed-icon. Includes .AFClickableImageAnchor:alias |
af|tree::leaf-icon-style |
Style of the leaf icon used with the tree component. The leaf icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the leaf-icon-style and define the override icon for the leaf-icon. Includes .AFClickableImageAnchor:alias |
af|tree::node-anim-icon-style |
Style of the animation icon used with the tree component when fetching data for expanded nodes. The animation icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the node-anim-icon-style and define the override icon for the node-anim-icon. Includes .AFClickableImageAnchor:alias |
af|tree::selector-icon-style |
Style of the selector icon used with the tree component. The selector icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the selector-icon-style and define the override icon for the selector-icon. Includes .AFClickableImageAnchor:alias |
Icon Selectors |
Description |
af|tree::expanded-icon |
Overrides the default expanded icon for the tree component. |
af|tree::collapsed-icon |
Overrides the default collapsed icon for the tree component. |
af|tree::leaf-icon |
Overrides the default leaf icon for the tree component. |
af|tree::node-anim-icon |
Overrides the default node animation icon for the tree component. |
af|tree::selector-icon |
Overrides the default selector icon for the tree component. |
Resource Strings |
Description |
af_tree.TIP_COLLAPSED_NODE |
Tooltip on the collapse icon. Also used for af:treeTable. |
af_tree.TIP_EXPANDED_NODE |
Tooltip on the expand icon. Also used for af:treeTable. |
af_tree.TIP_HIERARCHICAL_SELECTOR |
Tooltip on the hierarchical selector icon. Also used for af:treeTable. |
af_tree.TIP_GO_TO_TOP |
Tooltip on the go to top icon. Also used for af:treeTable. |
af_tree.TIP_NODE_LEVEL |
Tooltip to identify the node level. This string can contain {0} in it to be replaced with the node level. This is used for screenreader mode only. Also used for af:treeTable. |
The treeTable is a table component with a tree in it. Therefore most of the style selectors from af:table apply to af:treeTable as well and you cannot skin the treeTable separately from table. You can skin the treeTable's icons/icon-styles.
Style Selectors |
Description |
Conditions |
af|treeTable |
Skin properties |
Description |
-tr-node-indentation |
The property used to indicate how much child tree nodes should be indented with respect to the parent nodes. The default value is 16. (pixels) |
-tr-node-disclosure-animation-duration |
Specifies the minimum amount of time in milliseconds that the animation should take from the last time that the component displays in its initial state to the time that it displays in its final state (does not include any computation prior to drawing the first frame of the change or any computation after drawing the last frame of the change) for expand/collapse of the tree nodes. This skin property is honored only if the animation is enabled in the system. |
-tr-border-left-width |
See af:table -tr-border-left-width description. |
-tr-border-right-width |
See af:table -tr-border-left-width description. |
-tr-padding-left-width |
See af:table -tr-border-left-width description. |
-tr-padding-right-width |
See af:table -tr-border-left-width description. |
|
af|treeTable::expanded-icon-style |
Style of the expanded icon used with the treeTable component. The expanded icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the expanded-icon-style and define the override icon for the expanded-icon. Includes .AFClickableImageAnchor:alias |
af|treeTable::collapsed-icon-style |
Style of the collapsed icon used with the treeTable component. The collapsed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the collapsed-icon-style and define the override icon for the collapsed-icon. Includes .AFClickableImageAnchor:alias |
af|treeTable::leaf-icon-style |
Style of the leaf icon used with the treeTable component. The leaf icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the leaf-icon-style and define the override icon for the leaf-icon. Includes .AFClickableImageAnchor:alias |
af|treeTable::node-anim-icon-style |
Style of the animation icon used with the treeTable component when fetching data for expanded nodes. The animation icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the node-anim-icon-style and define the override icon for the node-anim-icon. Includes .AFClickableImageAnchor:alias |
af|treeTable::selector-icon-style |
Style of the selector icon used with the treeTable component. The selector icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the selector-icon-style and define the override icon for the selector-icon. Includes .AFClickableImageAnchor:alias |
Icon Selectors |
Description |
af|treeTable::expanded-icon |
Overrides the default expanded icon for the treeTable component. |
af|treeTable::collapsed-icon |
Overrides the default collapsed icon for the treeTable component. |
af|treeTable::leaf-icon |
Overrides the default leaf icon for the treeTable component. |
af|treeTable::node-anim-icon |
Overrides the default node animation icon for the treeTable component. |
af|treeTable::selector-icon |
Overrides the default selector icon for the treeTable component. |