Oracle Fusion Middleware Tag Reference for Oracle ADF Data Visualization Tools Skin Selectors
12c (12.1.2)

E23191-01
Selectors for Skinning ADF Data Visualization Components

Overview

This document lists the skin-selectors that can be used in an ADF Faces skin .css file to skin DVT ADF Faces components.

     Examples of some ADF Faces Skin selectors:
     /* Global selectors affect more than one component */
     .AFDefaultFontFamily:alias {
       font-family: Tahoma, Verdana, Helvetica, sans-serif;
      }
     /* Component-specific selector.  */
     af|inputText::content
      {
         background-color: red;
      }
      

Global Selectors

Global Selectors are selectors that affect more than one component. If the selector name ends in the :alias pseudo-class, then the selector is most likely included in other component-specific selectors. Defining properties for a selector that ends in :alias will most likely affect the skin for more than one component. For example, most, if not all of our components use the .AFDefaultFontFamily:alias definition to specify the font-family. If your skin overrides the .AFDefaultFontFamily:alias selector with a different font-family, that change will affect all the components that have included it in their selector definition.

Color

are included in other components. Then to change the color scheme, you would change these core/accent color ramps and it will affect all the components it is including in.

Color->Anchor Color

The core anchor color aliases.
Selector Name Description Conditions
.AFDvtBorderColor:alias Border color used in many of our DVT components. Only used by skyros skins.
.AFDvtPanelBorderColor:alias Border color used for panel areas in many of our DVT components. Only used by skyros skins.
.AFDvtTextColor:alias Color of the font for text in many DVT components. Only used by skyros skins.
.AFMapFocusAreaColor:alias Color used for the Geomap's overview panel focus area. Only used by skyros skins.
.AFPanControlGradientStartColor:alias Starting gradient color used for the pan control region of DVT components. Only used by skyros skins.

Color->Derivative Color

Color aliases are are derivatives of the core anchor color aliases.
Selector Name Description Conditions
.AFDvtBorder2Color:alias Border color used in many of our DVT components. Only used by skyros skins.
.AFGaugeMetricBorderColor:alias Border color used for the Gauge's metric display. Only used by skyros skins.
.AFHVNodeConnectorColor:alias Color used for the Hierarchy Viewer's node connector lines. Only used by skyros skins.
.AFHVPanelCardBorderColor:alias Border color used for the Hierarchy Viewer's panel cards. Only used by skyros skins.
.AFPanControlGradientEndColor:alias Ending gradient color used for the pan control region of DVT components. Only used by skyros skins.
.AFTimelineItemBorderColor:alias Border color used for the Timeline's items. Only used by skyros skins.
.AFTimelineMarkerBorderColor:alias Border color used for the Timeline's markers. Only used by skyros skins.
.AFTimelineUnitBorderColor:alias Border color used for the Timeline's window unit boundaries. Only used by skyros skins.
.AFTimelineWindowBorderColor:alias Border color used for the Timeline's overview window. Only used by skyros skins.

Color->Specialty Color

Infrequently used specialty color aliases.
Selector Name Description Conditions
.AFDvtBorder3Color:alias Border color used in many of our DVT components. Only used by skyros skins.
.AFDvtDemarcationColor:alias Color used for demarcation lines in DVT components. Only used by skyros skins.
.AFGanttDefaultCustomHighlightColor:alias Color used for the Gantt's default custom highlight areas. Only used by skyros skins.
.AFGaugeMetricBackgroundColor:alias Background color used for the Gauge's metric display. Only used by skyros skins.
.AFHVPanelCardFocusColor:alias Color used for the Hierarchy Viewer's focused panel cards. Only used by skyros skins.
.AFHVPanelCardHiddenColor:alias Color used for the Hierarchy Viewer's hidden panel card icons. Only used by skyros skins.
.AFHVPanelCardHiddenIconBorderColor:alias Border color used for the Hierarchy Viewer's hidden panel card icons. Only used by skyros skins.
.AFHVPanelCardIconBorderColor:alias Border color used for the Hierarchy Viewer's panel card icons. Only used by skyros skins.
.AFHVSearchColor:alias Color used for the Hierarchy Viewer's control and search panels. Only used by skyros skins.
.AFMapInfoColor:alias Color used for the Geomap's map info panel area. Only used by skyros skins.
.AFTimeBackgroundColor:alias Background color used for the Timeline component. Only used by skyros skins.
.AFTimelineBackground2Color:alias Background color used for the Timeline's items. Only used by skyros skins.

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.

dvt:gauge

Style Selectors Description Conditions
af|dvt-gauge Style on the root element of the dvt:gauge component.
Skin properties Description
-tr-animation-duration Specifies the animation duration in milliseconds.
-tr-animation-indicators Specifies the type of data change indicators to show. Valid values are: none - Show no data change indicators all - (Default) Show all data change indicators
-tr-animation-on-data-change Specifies the type of data change animation to apply. Valid values are: none - Apply no data change animation effects auto - (Default) Apply Active Data Service (ADS) data change animation events. on - Apply Partial Page Refresh (PPR) data change animation events.
-tr-animation-on-display Specifies the type of initial rendering effect to apply. Valid values are: none - (Default) Do not show any initial rendering effect auto - Apply an initial rendering effect automatically chosen base on graph or gauge type
-tr-custom-layout Specifies custom layout information when the graph automatically places and sizes its components. Valid values are: none - Do not use any of the other custom layout attribute values titleSeparator - Display title separator under the topLabel outerFrame - Display the outer frame with shadow effect around the entire gauge.
-tr-font-family Specifies the font family name. Accept a string.
-tr-font-url-map Specifies the font path for a specific font. Accept a string of parameters separated by commas. The parameters have to be in pairs. Each pair contains a font names followed by its relative path. For examples: (fontName,/bi/jsLibs/font.swf,fontName2,/bi/jsLibs/font2.swf).
-tr-gauge-set-alignment Determines where gauges appear within a gauge set. Valid values are as follows: bottom - Calculates available space and optimal gauge size to allow for alignment to the bottom of the gauge set. bottomLeft - Calculates available space and optimal gauge size to allow for alignment to the bottom left corner of the gauge set. bottomRight - Calculates available space and optimal gauge size to allow for alignment to the bottom right corner of the gauge set. center - Calculates available space and optimal gauge size to allow for alignment in the center of the gauge set. left - Calculates available space and optimal gauge size to allow for alignment to the left side of the gauge set. none - (Default) Divides available space in the gauge set among all the gauges equally. right - Calculates available space and optimal gauge size to allow for alignment to the right side of the gauge set. topLeft - Calculates available space and optimal gauge size to allow for alignment to the top left corner of the gauge set. top - Calculates available space and optimal gauge size to allow for alignment to the top of the gauge set. topRight - Calculates available space and optimal gauge size to allow for alignment to the top right corner of the gauge set.
-tr-gauge-set-column-count Specifies the number of columns to display in a gauge set. Valid values are: 0 - All gauges appear in a single row. This setting produces as many columns as there are gauges. -1 - (Default) Data source specifies the number of columns and rows. Integer other than 0,-1 - The number of columns in which gauges are to be displayed. For example, the value "3" causes gauges to be displayed in 3 columns.
-tr-gauge-set-direction Direction for processing the gauges in a gauge set. Valid values are: across - (Default) Specifies that the layout of the gauges is from left to right, then top to bottom. down - Specifies that the layout of the gauges is from top to bottom, then left to right.
-tr-type Specifies the type of gauge. Valid values are: dial - (Default) Depicts an N-degree circular shaped gauge led - Graphically depicts a key measurement as defined by a key performance indicator (KPI). Also gives a quick assessment of any metric by generalizing the metric to a specific value range. statusMeter - A horizontal bar which indicates the progress of a task or the level of some measurement. verticalStatusMeter - A vertical bar which indicates the progress of a task or the level of some measurement.
-tr-graphic-antialiasing Specifies whether or not antialiasing will be used to smooth outlines of graphic areas. Valid values are true (default) or false.
-tr-led-style Specifies the kind of LED. Valid values are: dot - (Default) A circle with a fill or gradient equal to that of the threshold section in which the metric falls. arrow - General shape indicating good (up arrow), fair (right-pointing arrow), and poor (down arrow). Arrow color defers to defined threshold colors or their defaults. triangle - General shape indicating good (up triangle), fair (right-pointing triangle), and poor (down triangle). Triangle color defers to defined threshold colors or their defaults. rectangle - Rectangular shape that fills according to the threshold section in which the metric falls. custom - Lets developers use their own images when displaying LED gauges. Requires the setting of the gauge's ledStyleCallback attribute to specify the desired custom image.
-tr-specular-highlight Specifies whether the crescent shaped highlight is displayed for LS_DOT LED. Valid values are on (Default) or off.
-tr-text-antialiasing Specifies whether or not antialiasing will be used to smooth text characters. Valid values are true or false (default).
-tr-threshold-style The style for threshold dial. Valid values are: pieFill - Fills the entire plot area of a dial gauge. RingFill - Fills only the ring portion of a dial gauge segments - (Default) Fills the outer portion of a dial gauge in segments.
-tr-visual-effects Specifies the type or types of visualEffects to apply. Valid values are: none - Apply no visual effects auto - (Default) Apply visual effects automatically based on graph or gauge type.
-tr-flash-bidi-text Specifies that there is bidi text used in the graph and uses the flash 10 text implementation instead.
af|dvt-gauge::animation-down Styles the animation down indicator.
Skin properties Description
-tr-background-color Specifies the color used to indicate that a data value has decreased. Enter values in RGB hexadecimal.
af|dvt-gauge::animation-up Styles the animation up indicator.
Skin properties Description
-tr-background-color Specifies the color used to indicate that a data value has increased. Enter values in RGB hexadecimal.
af|dvt-bottomLabel Style for the bottom label selector of the dvt:gauge component.
Skin properties Description
-tr-font-weight Specifies whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
-tr-position Specifies the location of a bottom label for the selector, if any, for a gauge. Valid values are: none - No bottom label for the gauge. belowGauge - (Default) Displays the bottom label below the gauge. Note: If the position of both the bottom label and the metric label are set to LP_BELOW_GAUGE, then both labels are displayed below the gauge. However, the bottom label is displayed above the metric label. insideGauge - Displays the bottom label inside the gauge. Note: Top, bottom, and metric labels are horizontally centered across a gauge. When these labels are positioned inside a gauge, they are also centered vertically within the gauge plot area.
af|dvt-gaugeBackground Style for the gauge background selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
af|dvt-gaugeFrame Style for the gauge frame selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-rendered Specifies whether the gauge frame is visible. Valid values are "true" or "false"(default).
af|dvt-gaugeSetBackground Style for the gauge set background selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border coloras 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
af|dvt-indicator Style for the gauge indicator selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color of this component as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-type Specifies the kind of indicator used. Valid values are: line (default), fill, or needle.
-tr-use-threshold-fill-color Specifies whether to override the indicator color with the color of the threshold in which metrics falls. Set to true to override, false (default) otherwise.
af|dvt-indicatorBar Style for the gauge indicator bar selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color of this component as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
af|dvt-indicatorBase Style for the gauge indicator base selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color of this component as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
af|dvt-gaugeLegendArea Style for the gauge legend area selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-position Specifies the location of the lengend area on the gauge. Valid values are: bottom - (Default) Positions the legend area at the bottom of the gauge. left - Positions the legend area on the left of the gauge. right - Positions the legend area on the right of the gauge. top - Positions the legend area at the top of the gauge.
-tr-rendered Specifies whether the legend area is visible. Valid values are "true" or "false"(default).
af|dvt-gaugeLegendText Style for the gauge legend text selector of the dvt:gauge component.
Skin properties Description
-tr-font-weight Specifies whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
-tr-min-length Specifies the minimum length of text to display before truncation when there is not enough room to display all the text.
-tr-number-type Format for numbers that are displayed in the legend. Valid values are: number - (Default) Specifies that the actual value is displayed. percent - Specifies that percentages are displayed and the axis is scaled from 0 to 100%.
af|dvt-gaugeLegendTitle Style for the gauge legend title selector of the dvt:gauge component.
Skin properties Description
-tr-font-weight Specifies whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
-tr-rendered Specifies whether the legend title is visible. Valid values are "true" (default) or "false".
af|dvt-lowerLabelFrame Style for the gauge lower label frame of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-rendered Specifies whether the lower label frame is visible. Valid values are "true" or "false"(default).
af|dvt-metricLabel Style for the gauge metric label selector of the dvt:gauge component.
Skin properties Description
-tr-font-weight Indicates whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Indicates whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
-tr-number-type Format for numbers that are displayed in the metric label. Valid values are: number - (Default) Specifies that the actual value is displayed. percent - Specifies that percentages are displayed and the axis is scaled from 0 to 100%.
-tr-position Specifies the location of the metric label, if any. Valid values: none - Displays no metric label. belowGauge - Displays the metric label below the gauge. Note: If the position of both the bottom label and the metric label is set to LP_BELOW_GAUGE, then both labels are displayed below the gauge. However, the bottom label is displayed above the metric label. withBottomLabel - (Default) Displays the metric label beside the bottom label. Note: If the position of the bottom label is set to LP_NONE, the metric label will not be displayed. insideGauge - Displays the metric label inside the gauge. Note: Top, bottom, and metric labels are horizontally centered across a gauge. When these labels are positioned inside a gauge, they are also centered vertically within the gauge plot area.
af|dvt-gaugePlotArea Style for the gauge plot area selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color of this component as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-use-threshold-fill-color Specifies whether to override the plot area color with the color of the threshold in which metrics falls. Set to true to override, false (default) otherwise.
af|dvt-threshold Style for the gauge threshold selector of the dvt:gauge component. Available pseudo-elements is ::index.
af|dvt-threshold::index$ Styles the marker of the series component.
Skin properties Description
-tr-background-color Specifies the fill color for the marker of threshold. Enter values in RGB hexadecimal.
-tr-border-color Specifies the border color for the marker of threshold. Enter values in RGB hexadecimal.
af|dvt-tickLabel Style for the gauge tick label selector of the dvt:gauge component.
Skin properties Description
-tr-content Specifies where tick labels occur within a gauge set. Valid values include any combination of the following separated by commas: increment - Displays tick labels by increments. majorTick - (Default) Displays tick labels for minimum, maximum, and increments. minMax - Displays tick labels for minimum and maximum values. metric - Displays tick labels for actual metric values. none - Displays no tick labels. threshold - Displays tick labels for threshold values.
-tr-font-weight Indicates whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Indicates whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
-tr-number-type Format for numbers that are displayed in the tick labels. Valid values are: number - (Default) Specifies that the actual value is displayed. percent - Specifies that percentages are displayed and the axis is scaled from 0 to 100%.
af|dvt-tickMark Style for the gauge tick mark selector of the dvt:gauge component.
Skin properties Description
-tr-content Specifies where tick marks occur within a gauge set. Valid values include any combination of the following separated by spaces or commas: increment - Displays tick marks by increments. majorTick - (Default) Displays tick marks for minimum, maximum, and increments. minMax - Displays tick marks for minimum and maximum values. metric - Displays tick marks for actual metric values. none - Displays no tick marks. threshold - Displays tick marks for threshold values.
af|dvt-tickMark::major Styles the major tick marks.
Skin properties Description
-tr-line-color Specifies the color of the major ticks as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
af|dvt-tickMark::minor Styles the animation up indicator.
Skin properties Description
-tr-line-color Specifies the color of the minor ticks as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
af|dvt-topLabel Style for the gauge top label selector of the dvt:gauge component.
Skin properties Description
-tr-font-weight Indicates whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Indicates whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
-tr-position Specifies the location of a top label, if any, for a gauge. Valid values are: none - No top label for the gauge. aboveGauge - (Default) Displays top label above the gauge. insideGauge - Displays top label inside the gauge. Note: Top, bottom, and metric labels are horizontally centered across a gauge. When these labels are positioned inside a gauge, they are also centered vertically within the gauge plot area.
af|dvt-upperLabelFrame Style for the gauge upper label frame selector of the dvt:gauge component.
Skin properties Description
-tr-border-color Specifies the border color as 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color Specifies the fill color as 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-rendered Specifies whether the upper label frame is visible. Valid values are "true" or "false"(default).

dvt:graph

Style Selectors Description Conditions
.AFDvtGraphAxis:alias Style of all axis components of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of all axes.
.AFDvtGraphTickMarks:alias Style of all tick mark components of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of all tick marks.
.AFDvtGraphSeries:alias Style of all series components of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the fill color of all series.
-tr-border-color Specifies the border color of all series.
-tr-marker-color Specifies the marker color for all series.
.AFDvtGraphReferenceObject:alias Style of all reference object components of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the fill color of all reference objects.
.AFDvtGraphFont:alias Style of all font components of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
.AFDvtGraphTitlesFont:alias Style of all title components of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
.AFDvtGraphLabelsFont:alias Style of all labels components of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-graph Style on the root element of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the background color.
-tr-font-family Specifies the font family name. Accept a string.
-tr-font-url-map Specifies the font path for a specific font. Accept a string of parameters separated by commas. The parameters have to be in pairs. Each pair contains a font names followed by its relative path. For example: (fontName,/bi/jsLibs/font.swf,fontName2,/bi/jsLibs/font2.swf).
-tr-legend-marker-with-line Specifies whether the legend marker will display the marker shape along with the line whenever the series makerColor is different from the specified series color.
-tr-flash-bidi-text Specifies that there is bidi text used in the graph and uses the flash 10 text implementation instead.
-tr-marker-size Specifies the marker size. Valid values are integer values between 0 and 100 (inclusive). The size is relative to the graph size.
-tr-new-hide-and-show-behavior The ability to only hide /unhide a single underlay when it is clicked in the legend.
af|dvt-graph::animation-down Styles the animation down indicator.
Skin properties Description
-tr-background-color Specifies the color used to indicate that a data value has decreased. Enter values in RGB hexadecimal.
af|dvt-graph::animation-up Styles the animation up indicator.
Skin properties Description
-tr-background-color Specifies the color used to indicate that a data value has increased. Enter values in RGB hexadecimal.
af|dvt-graph::titleSeparator Styles title separator for the graph.
Skin properties Description
-tr-line-color Specifies the color of title separator. Enter values in RGB hexadecimal.
-tr-rendered Specifies whether the graph title separator is visible. Valid values are "true" or "false".
af|dvt-annotation Style on the annotation element of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the fill color of the annotation. Enter values in RGB hexadecimal.
-tr-border-color Specifies the fill color of the annotation. Enter values in RGB hexadecimal.
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-graphFootnote Style on the footnote element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-graphPlotArea Style on the plot area element of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the fill color of the plot area.
-tr-border-color Specifies the border color of the plot area.
af|dvt-graphPieFrame Style on the pie frame element of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the fill color of the pie frame.
-tr-border-color Specifies the border color of the pie frame.
af|dvt-graphSubtitle Style on the subtitle element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-graphTitle Style on the title element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-legendArea Style on the legend area element of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the fill color of the legend area.
-tr-border-color Specifies the border color of the legend area.
-tr-word-wrap-behavior Specifies the word wrap behavior of the legend area. "auto" is the default which wraps text such that all legend items are the same height. "whenPossible" wraps legend item text to fill as much of the blank vertical space as possible
-tr-zero-legend-series-display Specifies whether the legend labels are displayed when there is a series with zero value
af|dvt-legendArea::item Styles a legend item
Skin properties Description
-tr-line-width Specifies the marker line width of the legend area.
af|dvt-legendText Style on the legend text element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-legendTitle Style on the legend title element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-markerText Style on the marker text element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
-tr-zero-label-display Specifies whether the marker text and pie slice labels are displayed when there is a series with zero value
af|dvt-o1Axis Style on the o1 Axis element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the o1 Axis. Enter values in RGB hexadecimal.
af|dvt-o1MajorTick Style on the o1 major tick element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the o1 major tick. Enter values in RGB hexadecimal.
af|dvt-o1TickLabel Style on the o1 tick label element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-o1Title Style on the o1 title element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-paretoLine Style on the pareto line element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the color of the pareto line in pareto graph.
af|dvt-pieFeeler Style on the pie feeler element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the color of the lines connecting slice label and slice in pie graph.
af|dvt-pieLabel Style on the pie label element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-referenceObject Style on the reference object element of the dvt:graph component. Available pseudo-elements is ::index.
af|dvt-referenceObject::index$
Skin properties Description
-tr-background-color Specifies the fill color of the reference object. Enter values in RGB hexadecimal.
af|dvt-ringTotalLabel Style on the ring total label element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-scrollbar Style on the scroll bar element of the dvt:graph component.
Pseudo classes Description
hover Styles the component's filters when acting as mouse over it.
active Styles the component's filters when acting as mouse clicked.
Skin properties Description
-tr-background-color Specifies the color of the graph scroll bar. Enter values in RGB hexadecimal. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
af|dvt-series Style on the series element of the dvt:graph component. Available pseudo-elements is ::index.
af|dvt-series::index$ Styles the marker of the series component.
Skin properties Description
-tr-background-color Specifies the fill color for the marker of series. Enter values in RGB hexadecimal.
-tr-border-color Specifies the border color for the marker of series. Enter values in RGB hexadecimal.
-tr-marker-color Specifies the marker color for series.
af|dvt-sliceLabel Style on the slice label element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-stockMarker Style on the stock marker element of the dvt:graph component. Available pseudo-elements are ::rising, ::falling.
af|dvt-stockMarker::rising Styles the rising stock marker.
Skin properties Description
-tr-background-color Specifies the color used to indicate that a stock price has increased. Enter values in RGB hexadecimal.
af|dvt-stockMarker::falling Styles the falling stock marker.
Skin properties Description
-tr-background-color Specifies the color used to indicate that a stock price has decreased. Enter values in RGB hexadecimal.
af|dvt-timeSelector Style on the time selector element of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the fill color of the time selector.
-tr-border-color Specifies the border color of the time selector.
af|dvt-tooltips Style on the tooltips element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-volumeMarker Style on the volume marker element of the dvt:graph component.
Skin properties Description
-tr-background-color Specifies the color of the volume marker. Enter values in RGB hexadecimal.
af|dvt-x1Axis Style on the x1 Axis element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the x1 Axis. Enter values in RGB hexadecimal.
af|dvt-x1MajorTick Style on the x1 major tick element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the x1 major tick. Enter values in RGB hexadecimal.
af|dvt-x1MinorTick Style on the x1 minor tick element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the o1 minor tick. Enter values in RGB hexadecimal.
af|dvt-x1TickLabel Style on the x1 tick label element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-x1Title Style on the x1 title element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-y1Axis Style on the y1 Axis element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the y1 Axis. Enter values in RGB hexadecimal.
af|dvt-y1MajorTick Style on the y1 major tick element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the y1 major tick. Enter values in RGB hexadecimal.
af|dvt-y1MinorTick Style on the y1 minor tick element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the o1 minor tick. Enter values in RGB hexadecimal.
af|dvt-y1Title Style on the y1 title element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-y1TickLabel Style on the y1 tick label element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-y2Axis Style on the y2 Axis element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the y2 Axis. Enter values in RGB hexadecimal.
af|dvt-y2MajorTick Style on the y2 major tick element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the y2 major tick. Enter values in RGB hexadecimal.
af|dvt-y2MinorTick Style on the y2 minor tick element of the dvt:graph component.
Skin properties Description
-tr-line-color Specifies the line color of the o1 minor tick. Enter values in RGB hexadecimal.
af|dvt-y2Title Style on the y2 title element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-y2TickLabel Style on the y2 tick label element of the dvt:graph component.
Skin properties Description
-tr-font-family Specifies the font family.
-tr-font-size Specifies the font size. Use font size with unit (in,cm,mm,pt,pc), font size name (xx-small, x-small, small, medium, large, x-large, xx-large)
-tr-color Specifies the color of the font. Enter values in RGB hexadecimal, RGB values or color names.
-tr-font-weight Specifies the font weight. Currently support normal or bold.
-tr-font-style Specifies the font style. Currently support normal or italic.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.

dvt:hierarchyViewer

Style Selectors Description Conditions
.AFDvtHierarchyViewerDropTarget:alias
Skin properties Description
-tr-background-color Specifies the fill color of the drop target highlight by 6 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-border-color Specifies the border color of the drop target highlight by 6 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-opacity Specifies the opacity of the drop target highlight. For example, -tr-opacity:0.5 specifies 50% opacity.
.AFDvtNodeButton:alias Style of hierarchy viewer node button.
Skin properties Description
-tr-background-color Specifies the fill color of the node button element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-border-color Specifies the border color of the node button element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-fill-type Specifies the fill type of the node button element, either gradient (Default) or solid.
-tr-color Specifies the color of the node button element by 6 digit or 8 digit Hex. For example, -tr-color:#000000 specifies black.
.AFDvtNodeButtonActive:alias Style of hierarchy viewer node button when active.
Skin properties Description
-tr-background-color Specifies the fill color of the node element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-border-color Specifies the border color of the node element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-fill-type Specifies the fill type of the node button element, either gradient (Default) or solid.
-tr-color Specifies the color of the node button element by 6 digit or 8 digit Hex. For example, -tr-color:#000000 specifies black.
.AFDvtNodeButtonHover:alias Style of hierarchy viewer node button when hovered over.
Skin properties Description
-tr-background-color Specifies the fill color of the node element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-border-color Specifies the border color of the node element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-fill-type Specifies the fill type of the node button element, either gradient (Default) or solid.
-tr-color Specifies the color of the node button element by 6 digit or 8 digit Hex. For example, -tr-color:#000000 specifies black.
.AFHVNodeTitleLabelStyle Style applied to "af:panelLabelAndMessage" label text for primary HV Node output at 100% zoom
.AFHVNodeTitleTextStyle Style applied to "af:outputText" for primary HV Node output at 100% zoom
.AFHVNodeSubtitleLabelStyle Style applied to "af:panelLabelAndMessage" label text for secondary HV Node output at 100% zoom
.AFHVNodeSubtitleTextStyle Style applied to "af:outputText" for secondary HV Node output at 100% zoom
.AFHVNodeLabelStyle Style applied to "af:panelLabelAndMessage" label text for tertiary and beyond HV Node output at 100% zoom
.AFHVNodeTextStyle Style applied to "af:outputText" for tertiary and beyond HV Node output at 100% zoom
.AFHVPanelCardLabelStyle Style applied to "af:panelLabelAndMessage" label text for HV Panel Card contents at 100% zoom
.AFHVPanelCardTextStyle Style applied to "af:outputText" for HV Panel Card contents at 100% zoom
.AFHVNodeTitleLabelStyle75 Style applied to "af:panelLabelAndMessage" label text for primary HV Node output at 75% zoom
.AFHVNodeTitleTextStyle75 Style applied to "af:outputText" for primary HV Node output at 75% zoom
.AFHVNodeSubtitleLabelStyle75 Style applied to "af:panelLabelAndMessage" label text for secondary HV Node output at 75% zoom
.AFHVNodeSubtitleTextStyle75 Style applied to "af:outputText" for secondary HV Node output at 75% zoom
.AFHVNodeLabelStyle75 Style applied to "af:panelLabelAndMessage" label text for tertiary and beyond HV Node output at 75% zoom
.AFHVNodeTextStyle75 Style applied to "af:outputText" for tertiary and beyond HV Node output at 75% zoom
.AFHVPanelCardLabelStyle75 Style applied to "af:panelLabelAndMessage" label text for HV Panel Card contents at 75% zoom
.AFHVPanelCardTextStyle75 Style applied to "af:outputText" for HV Panel Card contents at 75% zoom
.AFHVNodeTitleLabelStyle50 Style applied to "af:panelLabelAndMessage" label text for primary HV Node output at 50% zoom
.AFHVNodeTitleTextStyle50 Style applied to "af:outputText" for primary HV Node output at 50% zoom
.AFHVNodeSubtitleLabelStyle50 Style applied to "af:panelLabelAndMessage" label text for secondary HV Node output at 50% zoom
.AFHVNodeSubtitleTextStyle50 Style applied to "af:outputText" for secondary HV Node output at 50% zoom
.AFHVNodeLabelStyle50 Style applied to "af:panelLabelAndMessage" label text for tertiary and beyond HV Node output at 50% zoom
.AFHVNodeTextStyle50 Style applied to "af:outputText" for tertiary and beyond HV Node output at 50% zoom
.AFHVNodeLabelStyle25 Style applied to "af:panelLabelAndMessage" label text HV Node output at 25% zoom
.AFHVNodeTextStyle25 Style applied to "af:outputText" for HV Node output at 25% zoom
.AFHVAdvancedSearchLinkStyle Advanced Search Link
.AFHVSearchResultsItemTextStyle Style applied to the Result Item Text in the SearchResults panel
.AFHVSearchResultsMatchTextStyle Style applied to the Result Match Text in the SearchResults panel
.AFHVNodeStretchHeight Height for HV node and panelCard
.AFHVNodePadding Padding for HV node content at 100%, 75% and 50%
.AFHVNodePaddingSmall Padding for HV node content at 25% zoom
af|dvt-hierarchyViewer Styles the root element of the hierarchy viewer.
Skin properties Description
-tr-background-color Specifies the fill color of the hierarchy viewer element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-fill-type Specifies the fill type of the hierarchy viewer element, either gradient (Default) or solid.
-tr-alignment Specifies the alignment of the hierarchy viewer element, either none (Default) or auto.
af|dvt-hierarchyViewer::lateral-navigation-button Style of lateral navigation button.
Pseudo classes Description
hover Styles the component's filters when acting as mouse over it.
active Styles the component's filters when acting as mouse clicked.
Skin properties Description
-tr-background-color Specifies the fill color of the lateral navigation button element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-border-color Specifies the border color of the lateral navigation button element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-fill-type Specifies the fill type of the lateral navigation button element, either gradient (Default) or solid. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-color Specifies the color of the lateral navigation button element by 6 digit or 8 digit Hex. For example, -tr-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
af|dvt-hierarchyViewer::lateral-navigation-line Style of lateral navigation line.
Skin properties Description
-tr-border-type Specifies the line style of the lateral navigation line, either gradient (Default) or solid. Example, -tr-border-type: solid
-tr-color Specifies the line color of the lateral navigation line element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-highlight-color Specifies the line color of the lateral navigation line element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black when the line is highlighted.
af|dvt-controlPanel Styles of hierarchy viewer Control Panel.
Skin properties Description
-tr-background-color Specifies the fill color of the Control Panel by 6 digit or 8 digit Hex. For example, -tr-background-color:#FFFFFF specifies white.
-tr-border-color Specifies the border color of the Control Panel element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-box-shadow Specifies the box shadow property of the Control Panel. Example, -tr-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2).
-tr-border-radius Specifies the border radius property of the Control Panel in pixels. Example, -tr-border-radius: 3px
af|dvt-link Styles of hierarchy viewer link.
Skin properties Description
-tr-color Specifies the color of the link element by 6 digit or 8 digit Hex. For example, -tr-color:#000000 specifies black.
af|dvt-node Styles of hierarchy viewer node.
Skin properties Description
-tr-box-shadow Specifies the box shadow property of the node element. Example, -tr-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2).
-tr-border-radius Specifies the border radius property of the node element in pixels. Example, -tr-border-radius: 3px
-tr-background-color Specifies the fill color of the node element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-border-color Specifies the border color of the node element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-fill-type Specifies the fill type of the node element.
-tr-border-type Specifies the border type of the node element.
-tr-select-border-color Specifies the border color of the node element by 6 digit or 8 digit Hex when the node is selected. For example, -tr-border-color:#000000 specifies black.
-tr-focus-border-color Specifies the border color of the node element by 6 digit or 8 digit Hex when the node has focus. For example, -tr-border-color:#000000 specifies black.
af|dvt-node::button Style of the button.
Pseudo classes Description
active Styles the component's filters when acting as mouse clicked.
hover Styles the component's filters when acting as mouse hover.
Skin properties Description
-tr-background-color Specifies the fill color of the node button element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-border-color Specifies the border color of the node button element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
af|dvt-panelCard Styles of panel card.
Skin properties Description
-tr-border-radius Specifies the border radius property of the panel card element in pixels. Example, -tr-border-radius: 3px
-tr-background-color Specifies the fill color of the panel card element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-border-color Specifies the border color of the panel card element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-fill-type Specifies the fill type of the panel card, either gradient (Default) or solid.
-tr-border-type Specifies the border type of the panel card, either gradient (Default) or solid.
af|dvt-panelCard::navigation-button Style of panel card navigation button.
Pseudo classes Description
hover Styles the component's filters when acting as mouse over it.
active Styles the component's filters when acting as mouse clicked.
Skin properties Description
-tr-background-color Specifies the fill color of the navigation button element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-border-color Specifies the border color of the navigation button element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-fill-type Specifies the fill type of the navigation button, either gradient (Default) or solid. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-color Specifies the color of the navigation button arrow element by 6 digit or 8 digit Hex. For example, -tr-color:#000000 specifies black. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
af|dvt-panelCard::train-button Style of panel card train button.
Pseudo classes Description
active Styles the component's filters when acting as mouse clicked.
Skin properties Description
-tr-background-color Specifies the fill color of the train button element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black. If you skin this selector, you may also want to skin :active.
-tr-border-color Specifies the border color of the train button element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black. If you skin this selector, you may also want to skin :active.
-tr-visibility Specifies the visibility of the train button, either visible (Default) or hidden. If you skin this selector, you may also want to skin :active.
af|dvt-panelCard::header-text Style of panel card navigation previous button.
Skin properties Description
-tr-font-weight Indicates whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-color:#000000 specifies black text.
-tr-font-style Indicates whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
Icon Selectors Description

dvt:map

Style Selectors Description Conditions
af|dvt-map Style on the root element of the dvt:map component.
af|dvt-map::mapSwitchOver Styles the Map View Selector buttons in the hover state (mouse over)
af|dvt-map::mapSwitchSelect Styles the Map View Selector buttons in the active state (mouse down)
af|dvt-map::mapSwitchNotSelect Styles the Map View Selector buttons
af|dvt-map::copyrightText Style the appearance of the copyright text
af|dvt-map::distAreaPanel Style the appearance of the box that shows the distance or area
af|dvt-map::xPanel Style the appearance of the box that shows the x coordinate of the mouse position
af|dvt-map::yPanel Style the appearance of the box that shows the y coordinate of the mouse position
Icon Selectors Description
af|dvt-map::pointimage-icon Used to override the default image for a point theme
af|dvt-map::selectimage-icon Used to override the default selected image for a point theme
af|dvt-map::overview-window-header-icon Used to override the default image for the overview window header icon
af|dvt-map::overview-window-header-hover-icon Used to override the default image for the overview window header mouse over icon
af|dvt-map::overview-window-header-active-icon Used to override the default image for the overview window header mouse down icon
af|dvt-map::overview-window-minimize-icon Used to override the default image for the minimize overview window icon
af|dvt-map::overview-window-minimize-hover-icon Used to override the default image for the minimize overview window mouse over icon
af|dvt-map::overview-window-minimize-active-icon Used to override the default image for the minimize overview window mouse down icon
af|dvt-map::overview-window-maximize-icon Used to override the default image for the maximize overview window icon
af|dvt-map::overview-window-maximize-hover-icon Used to override the default image for the maximize overview window mouse over icon
af|dvt-map::overview-window-maximize-active-icon Used to override the default image for the maximize overview window mouse down icon

dvt:mapToolbar

Style Selectors Description Conditions
af|dvt-mapToolbar This is the base selector for the component.
Icon Selectors Description
af|dvt-mapToolbar::area-depress-icon Used to override the default area icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::area-disable-icon Used to override the default area icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::area-enable-icon Used to override the default area icon of the mapToolbar component
af|dvt-mapToolbar::area-hover-icon Used to override the default area icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::circle-select-depress-icon Used to override the default circular selection icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::circle-select-disable-icon Used to override the default circular selection icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::circle-select-enable-icon Used to override the default circular selection icon of the mapToolbar component
af|dvt-mapToolbar::circle-select-hover-icon Used to override the default circular selection icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::distance-depress-icon Used to override the default distance icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::distance-disable-icon Used to override the default distance icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::distance-enable-icon Used to override the default distance icon of the mapToolbar component
af|dvt-mapToolbar::distance-hover-icon Used to override the default distance icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::info-depress-icon Used to override the default info icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::info-disable-icon Used to override the default info icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::info-enable-icon Used to override the default info icon of the mapToolbar component
af|dvt-mapToolbar::info-hover-icon Used to override the default info icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::pan-depress-icon Used to override the default pan icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::pan-disable-icon Used to override the default pan icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::pan-enable-icon Used to override the default pan icon of the mapToolbar component
af|dvt-mapToolbar::pan-hover-icon Used to override the default pan icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::point-select-depress-icon Used to override the default point selection icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::point-select-disable-icon Used to override the default point selection icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::point-select-enable-icon Used to override the default point selection icon of the mapToolbar component
af|dvt-mapToolbar::point-select-hover-icon Used to override the default point selection icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::polygon-select-depress-icon Used to override the default polygon selection icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::polygon-select-disable-icon Used to override the default polygon selection icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::polygon-select-enable-icon Used to override the default polygon selection icon of the mapToolbar component
af|dvt-mapToolbar::polygon-select-hover-icon Used to override the default polygon selection icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::rectangle-select-depress-icon Used to override the default rectangular selection icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::rectangle-select-disable-icon Used to override the default rectangular selection icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::rectangle-select-enable-icon Used to override the default rectangular selection icon of the mapToolbar component
af|dvt-mapToolbar::rectangle-select-hover-icon Used to override the default rectangular selection icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::zoomin-depress-icon Used to override the default zoom in icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::zoomin-disable-icon Used to override the default zoom in icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::zoomin-enable-icon Used to override the default zoom in icon of the mapToolbar component
af|dvt-mapToolbar::zoomin-hover-icon Used to override the default zoom in icon (when hover over) of the mapToolbar component.
af|dvt-mapToolbar::zoomout-depress-icon Used to override the default zoom out icon (in depressed state) of the mapToolbar component.
af|dvt-mapToolbar::zoomout-disable-icon Used to override the default zoom out icon (disabled) of the mapToolbar component.
af|dvt-mapToolbar::zoomout-enable-icon Used to override the default zoom out icon of the mapToolbar component
af|dvt-mapToolbar::zoomout-hover-icon Used to override the default zoom out icon (when hover over) of the mapToolbar component.

dvt:pivotFilterBar

Style Selectors Description Conditions
.AFDvtPivotFilterBarBorder:alias Styles the border of the dvt:pivotFilterBar component.
.AFDvtPivotFilterBarFilterBorder:alias Styles the border of a filter.
.AFDvtPivotFilterBarFocusedFilterBorder:alias Styles the border of a filter when focused.
.AFDvtPivotFilterBarSelectedFilterBorder:alias Styles the border of a filter when selected.
.AFDvtPivotFilterBarDropTargetFilterBorder:alias Styles the border of a filter when acting as a drop target.
.AFDvtPivotFilterBarPivotHandleBottom:alias Styles the bottom section of a filter's pivot handle.
.AFDvtPivotFilterBarPivotHandleCenter:alias Styles the center section of a filter's pivot handle.
.AFDvtPivotFilterBarPivotHandleTop:alias Styles the top section of a filter's pivot handle.
af|dvt-pivotFilterBar
Pseudo classes Description
drop-target Styles the root element of the dvt:pivotFilterBar component when acting as a drop target.
af|dvt-pivotFilterBar::filter Styles the component's filters.
Pseudo classes Description
drop-target Styles the component's filters when acting as drop targets.
focused Styles the component's filters when focused.
selected Styles the component's filters when selected.
af|dvt-pivotFilterBar::filters-container Styles the containing element of the component's filters.
af|dvt-pivotFilterBar::label Styles the label of the component.
af|dvt-pivotFilterBar::label-container Styles the containing element of the component's label.
af|dvt-pivotFilterBar::pivot-drop-target Styles the drop feedback element.
af|dvt-pivotFilterBar::pivot-handle-bottom Styles the bottom section of a filter's pivot handle.
Pseudo classes Description
drop-target Styles the bottom section of a filter's pivot handle when acting as a drop target.
focused Styles the bottom section of a filter's pivot handle when focused.
selected Styles the bottom section of a filter's pivot handle when selected.
af|dvt-pivotFilterBar::pivot-handle-center Styles the center section of a filter's pivot handle.
Pseudo classes Description
drop-target Styles the center section of a filter's pivot handle when acting as a drop target.
focused Styles the center section of a filter's pivot handle when focused.
selected Styles the center section of a filter's pivot handle when selected.
af|dvt-pivotFilterBar::pivot-handle-top Styles the top section of a filter's pivot handle.
Pseudo classes Description
drop-target Styles the top section of a filter's pivot handle when acting as a drop target.
focused Styles the top section of a filter's pivot handle when focused.
selected Styles the top section of a filter's pivot handle when selected.
Icon Selectors Description

dvt:pivotTable

Style Selectors Description Conditions
.AFDvtPivotTableBorder:alias Style of the borders in all boxes / cells. Border width cannot be adjusted.
.AFDvtPivotTableCell:alias Base style of the header and data cells
.AFDvtPivotTableDatabodyBackground:alias Styles the background of databody cells.
.AFDvtPivotTableDatabodyFocusedBackground:alias Styles the background of focused databody cells.
.AFDvtPivotTableDatabodySelectedBackground:alias Styles the background of selected databody cells.
.AFDvtPivotTableDataCellBase:alias Styles databody cells.
.AFDvtPivotTableHeaderBackgroundColor:alias Style of the header background
.AFDvtPivotTableHeaderCellBase:alias Styles header cells.
.AFDvtPivotTableLayerLabelCellBase:alias Styles layer label cells.
.AFDvtPivotTableHeaderFocusedBackground:alias Style of the focused header background
.AFDvtPivotTableHeaderSelectedBackground:alias Style of the selected header background
.AFDvtPivotTablePivotSwapDropTargetBackground:alias Styles the background of the "swap" pivot drop target on the row and column edge
af|dvt-pivotTable Styles the root element of the pivot table.
af|dvt-pivotTable::column-sort-ascending-icon-style
Pseudo classes Description
active Styles the component's filters when acting as mouse clicked.
hover Styles the component's filters when acting as mouse hover.
af|dvt-pivotTable::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. Use pseudo-classes :hover and :active to customize the look. 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.
Pseudo classes Description
active Styles the component's filters when acting as mouse clicked.
hover Styles the component's filters when acting as mouse hover.
af|dvt-pivotTable::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. Use pseudo-classes :hover and :active to customize the look. 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 icon for the sorted-ascending-icon.
af|dvt-pivotTable::column-sorted-descending-icon-style Styles the icon used for the sorted descending indicator. The icon is specified as a background-image in this key. Use pseudo-classes :hover and :active to customize the look. 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|dvt-pivotTable::-tr-new-editing-behavior Specifies whether the new click to edit behavior introduced in 11.1.2.0.0 should be used. See release notes for details of the behavior change. Valid values are: true - Turn on the new click to edit behavior. false - Turn off the new click to edit behavior to preserve the existing behavior. auto - (Default) Pivot Table will decide which click to edit behavior should be used.
af|dvt-pivotTable::corner-layer-label-cell Style of corner layer label cell
af|dvt-pivotTable::row-header-layer-label-cell Style of row header layer label cells
af|dvt-pivotTable::innermost-row-header-layer-label-cell Style of innermost row header layer label cell
af|dvt-pivotTable::column-header-layer-label-cell Style of column header layer label cells
af|dvt-pivotTable::innermost-column-header-layer-label-cell Style of innermost column header layer label cell
af|dvt-pivotTable::column-header-cell Specifies styles for column header cells, such as a different background color or background image
af|dvt-pivotTable::column-header-cell-focused Style of focused column header cells
af|dvt-pivotTable::column-header-cell-selected Style of selected column header cells
af|dvt-pivotTable::column-header-scrollbar-spacer Style of the box in the column header that can be introduced by vertical scrollbars.
af|dvt-pivotTable::column-pivot-image-cell-bottom Style of the bottom portion of the pivot handle for layers on the column edge
af|dvt-pivotTable::column-pivot-image-cell-center Style of the center portion of the pivot handle for layers on the column edge
af|dvt-pivotTable::column-pivot-image-cell-top Style of the top portion of the pivot handle for layers on the column edge
af|dvt-pivotTable::column-pivot-swap-drop-target Styles the "swap" pivot drop target on the column edge.
af|dvt-pivotTable::column-resize-indicator Style of column resize indicator
af|dvt-pivotTable::corner Style of the box between the row header and column header
af|dvt-pivotTable::corner-scrollbar-spacer Style of the box between the databody scrollbars if the row header and column header have scrollbars
af|dvt-pivotTable::data-cell Style of data cells
af|dvt-pivotTable::data-cell-focused Style of focused data cells
af|dvt-pivotTable::data-cell-selected Style of selected data cells
af|dvt-pivotTable::data-cell-text Deprecated, use stamping instead. Styles the default data cell text, which is displayed if stamping / dvt:dataCells are not rendered in the data cells.
af|dvt-pivotTable::fetch-status Styles the status message that shows up when the user scrolls the pivot table.
af|dvt-pivotTable::header-cell-content Style of pivot table header cell content. Available psuedo-classes are :sorted
af|dvt-pivotTable::layer-label-cell-content Style of pivot table layer label cell content.
af|dvt-pivotTable::row-header-cell Style of row header cells
af|dvt-pivotTable::row-header-cell-focused Style of focused row header cells
af|dvt-pivotTable::row-header-cell-selected Style of selected row header cells
af|dvt-pivotTable::row-header-scrollbar-spacer Style of the box in the row header that can be introduced by vertical scrollbars.
af|dvt-pivotTable::row-resize-indicator Style of row resize indicator
af|dvt-pivotTable::status-bar Style of the status bar
af|dvt-pivotTable::status-bar-label Style of the status bar label
af|dvt-pivotTable::status-bar-text Style of the status bar text
af|dvt-pivotTable::column-pivot-label Styles column header pivot labels.
af|dvt-pivotTable::column-pivot-label-cell Styles the cell containing the pivot label for layers on the column edge.
af|dvt-pivotTable::pivot-drop-target Styles the "insert" pivot drop target.
af|dvt-pivotTable::row-pivot-image-cell-center Style of the center portion of the pivot handle for layers on the row edge
af|dvt-pivotTable::row-pivot-image-cell-left Style of the left portion of the pivot handle for layers on the row edge
af|dvt-pivotTable::row-pivot-image-cell-right Style of the right portion of the pivot handle for layers on the row edge
af|dvt-pivotTable::row-pivot-label Styles row header pivot labels.
af|dvt-pivotTable::row-pivot-label-cell Styles the cell containing the pivot label for layers on the row edge.
af|dvt-pivotTable::row-pivot-swap-drop-target Styles the "swap" pivot drop target on the row edge.
Icon Selectors Description
af|dvt-pivotTable::column-sort-ascending-icon Overrides the default sort ascending indicator. Icons can be text or img elements, e.g. af|pivotTable::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|dvt-pivotTable::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|dvt-pivotTable::column-sorted-ascending-icon Overrides the default sorted ascending indicator. Icons can be text or img elements, e.g. af|pivotTable::column-sorted-ascending-icon {content "X"} or af|column::sorted-ascending-icon {content: url(...)}. Use this key instead of the sorted-ascending-icon-style key if you do not want background-image.
af|dvt-pivotTable::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|dvt-pivotTable::drill-collapsed-icon
Pseudo classes Description
rtl Styles the component's filters when acting as right to left.
af|dvt-pivotTable::drill-expanded-icon Overrides the default drill expanded indicator.
Pseudo classes Description
rtl Styles the component's filters when acting as right to left.

dvt:treemap

Style Selectors Description Conditions
af|dvt-treemap
Skin properties Description
-tr-animation-update-color  
-tr-animation-duration  
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-treemapNode Node styles
Pseudo classes Description
hover Node hover state
Pseudo classes Description
selected Node selected state
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
Skin properties Description
-tr-border-color Specifies the default border color of the region (3/6/8 digits hex, rgb or Css color name)
Skin properties Description
-tr-inner-color  
-tr-outer-color  
af|dvt-treemapNodeHeader Node styles
Pseudo classes Description
hover Node hover state
Pseudo classes Description
selected Node selected state
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-background-color  
-tr-border-color  
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-background-color  
-tr-border-color  
-tr-inner-color  
-tr-outer-color  
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-background-color  
-tr-border-color  
-tr-inner-color  
-tr-outer-color  
af|dvt-treemapNodeHeader::drill-text Sets color for drillable text within a treemap node header
Pseudo classes Description
hover Node hover state
selected Node selected state
Skin properties Description
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
af|dvt-treemapNodeHeader::attribute-type-text
Pseudo classes Description
hover Node hover state
selected Node selected state
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-treemapNodeHeader::drill-text
Pseudo classes Description
hover Node hover state
selected Node selected state
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
Icon Selectors Description
af|dvt-treemapNodeHeader::isolate-icon
Pseudo classes Description
hover hover state
selected selected state
Skin properties Description
content Specifies the path of the icon
af|dvt-treemapNodeHeader::restore-icon
Pseudo classes Description
hover hover state
selected selected state
Skin properties Description
content Specifies the path of the icon

dvt:sunburst

Style Selectors Description Conditions
af|dvt-sunburst
Skin properties Description
-tr-animation-update-color  
-tr-animation-duration  
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-sunburstNode Node styles
Pseudo classes Description
hover Node hover state
Pseudo classes Description
selected Node selected state
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
Skin properties Description
-tr-border-color Specifies the default border color of the region (3/6/8 digits hex, rgb or Css color name)
Skin properties Description
-tr-border-color Specifies the default border color of the region (3/6/8 digits hex, rgb or Css color name)
af|dvt-sunburstNode::attribute-type-text
Pseudo classes Description
hover Node hover state
selected Node selected state
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-sunburstNode::drill-text
Pseudo classes Description
hover Node hover state
selected Node selected state
Skin properties Description
-tr-font-weight Specifies whether the font is bold.
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
Icon Selectors Description
af|dvt-sunburstNode::expand-icon
Pseudo classes Description
hover hover state
selected selected state
Skin properties Description
content Specifies the path of the icon
af|dvt-sunburstNode::collapse-icon
Pseudo classes Description
hover hover state
selected selected state
Skin properties Description
content Specifies the path of the icon

dvt:gantt

Style Selectors Description Conditions
.AFDvtGanttTooltip:alias Styles the appearance of the tooltips shown in the gantt.
af|dvt-gantt This is the base selector for the component.
af|dvt-gantt::column-header-cell Style on the header cell of the column.
af|dvt-gantt::milestone-task Styles the appearance of a milestone task.
af|dvt-gantt::normal-task Styles the appearance of a normal task.
af|dvt-gantt::summary-task Styles the appearance of the center portion of a summary task.
af|dvt-gantt::summary-task-left Styles the appearance of the left-most portion of a summary task.
af|dvt-gantt::summary-task-right Styles the appearance of the right-most portion of a summary task.
af|dvt-gantt::non-working-days Styles the appearance of the non-working-days.
af|dvt-gantt::milestone-baseline Styles the appearance of a milestone baseline task.
af|dvt-gantt::milestone-critical Styles the appearance of a milestone critical task.
af|dvt-gantt::milestone-critical-baseline Styles the appearance of a milestone critical baseline task.
af|dvt-gantt::normal-task-left Styles the appearance of a normal task left.
af|dvt-gantt::normal-task-right Styles the appearance of a normal task right.
af|dvt-gantt::summary-critical-left Styles the appearance of a summary critical task left.
af|dvt-gantt::summary-critical-right Styles the appearance of a summary critical task right.
af|dvt-gantt::summary-critical Styles the appearance of a summary critical task.
af|dvt-gantt::progress-bar Styles the appearance of a progress bar.
af|dvt-gantt::progress-bar-right Styles the appearance of a progress bar right.
af|dvt-gantt::actual-progress-bar Styles the appearance of a actual progress bar.
af|dvt-gantt::actual-progress-bar-right Styles the appearance of a actual progress bar right.
af|dvt-gantt::critical-progress-bar Styles the appearance of a critical progress bar.
af|dvt-gantt::critical-progress-bar-right Styles the appearance of a critical progress bar right.
af|dvt-gantt::actual-critical-progress-bar Styles the appearance of a actual critical progress bar.
af|dvt-gantt::actual-critical-progress-bar-right Styles the appearance of a actual critical progress bar right.
af|dvt-gantt::summary-progress-bar Styles the appearance of a summary progress bar.
af|dvt-gantt::summary-progress-bar-right Styles the appearance of a summary progress bar right.
af|dvt-gantt::summary-progress-bar-twenty-five-percent Styles the appearance of a summary progress bar twenty five percent.
af|dvt-gantt::summary-progress-bar-fifty-percent Styles the appearance of a summary progress bar fifty percent.
af|dvt-gantt::summary-progress-bar-seventy-five-percent Styles the appearance of a summary progress bar seventy five percent.
af|dvt-gantt::summary-progress-critical-bar Styles the appearance of a summary progress critical bar.
af|dvt-gantt::summary-progress-critical-bar-right Styles the appearance of a summary progress critical bar right.
af|dvt-gantt::summary-progress-critical-bar-twenty-five-percent Styles the appearance of a summary progress critical twenty five percent bar.
af|dvt-gantt::summary-progress-critical-bar-fifty-percent Styles the appearance of a summary progress critical fifty percent bar.
af|dvt-gantt::summary-progress-critical-bar-seventy-five-percent Styles the appearance of a summary progress critical seventy five percent bar.
af|dvt-gantt::normal-critical Styles the appearance of a normal critical task.
af|dvt-gantt::normal-critical-left Styles the appearance of a normal critical left.
af|dvt-gantt::normal-critical-right Styles the appearance of a normal critical right.
af|dvt-gantt::baseline Styles the appearance of a baseline task bar.
af|dvt-gantt::baseline-left Styles the appearance of a baseline task bar left.
af|dvt-gantt::baseline-right Styles the appearance of a baseline task bar right.
af|dvt-gantt::actual Styles the appearance of an actual task bar.
af|dvt-gantt::actual-left Styles the appearance of an actual task bar left.
af|dvt-gantt::actual-right Styles the appearance of an actual task bar right.
af|dvt-gantt::actual-critical Styles the appearance of an actual critical task.
af|dvt-gantt::actual-critical-left Styles the appearance of an actual critical task left.
af|dvt-gantt::actual-critical-right Styles the appearance of an actual critical right.
af|dvt-gantt::current-date Used to override the default current date line in the Gantt component.
af|dvt-gantt::rug-current-date Used to override the default current date line in the ResourceUtilizationGantt component.
af|dvt-gantt::rug-resize-handle Used to override the default resize handle in the ResourceUtilizationGantt component.
af|dvt-gantt::task-label Styles the appearance of the task label.
af|dvt-gantt::task-inner-label Styles the appearance of the task inner label.
af|dvt-gantt::project-inner-label Styles the appearance of the project inner label.
af|dvt-gantt::project-actual-inner-label Styles the appearance of the project actual inner label.
af|dvt-gantt::rug-label Styles the appearance of the ResourceUtilizationGantt label.
af|dvt-gantt::highlight-days Styles the appearance of the highlighted days.
af|dvt-gantt::linker-overflow Styles the appearance of the linker overflow.
af|dvt-gantt::default-linker Styles the appearance of the default linker.
af|dvt-gantt::dependency-horizontal Styles the appearance of the horizontal dependency line.
af|dvt-gantt::dependency-vertical Styles the appearance of the vertical dependency line.
af|dvt-gantt::dependency-left Used to override the default dependency-left arrow.
af|dvt-gantt::dependency-right Used to override the default dependency-right arrow.
af|dvt-gantt::dependency-up Used to override the default dependency-up arrow.
af|dvt-gantt::dependency-down Used to override the default dependency-down arrow.
af|dvt-gantt::timeaxis-horizontal-separator Styles the appearance of the separator between the major and minor time axes.
af|dvt-gantt::timeaxis-separator Styles the appearance of the separator between dates in the time axis.
af|dvt-gantt::timeaxis-text-major Styles the appearance of the labels in the major time axis.
af|dvt-gantt::timeaxis-text-minor Styles the appearance of the labels in the minor time axis.
af|dvt-gantt::timeaxis Styles the appearance of the timeaxis.
af|dvt-gantt::legend Styles the appearance of the legend.
af|dvt-gantt::legend-selected-task-label Styles the appearance of the labels of the legend's selected task area.
af|dvt-gantt::legend-selected-task-data Styles the appearance of the data displayed in the legend's selected task area.
af|dvt-gantt::legend-data-missing Styles the appearance of the data missing text in the legend.
af|dvt-gantt::time-bucket
Pseudo classes Description
focused Styles the appearance of the time bucket in ResourceUtilizationGantt when focused.
selected Styles the appearance of the time bucket in ResourceUtilizationGantt when selected.
af|dvt-gantt::tooltip-label Styles the appearance of the labels shown in the tooltips of the gantt.
Icon Selectors Description
af|dvt-gantt::copy-disabled-icon Used to override the default copy icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::copy-down-icon Used to override the default copy icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::copy-icon Used to override the default copy icon used in the toolbar of the Gantt component.
af|dvt-gantt::copy-over-icon Used to override the default copy icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::cut-disabled-icon Used to override the default cut icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::cut-down-icon Used to override the default cut icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::cut-icon Used to override the default cut icon used in the toolbar of the Gantt component.
af|dvt-gantt::cut-over-icon Used to override the default cut icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::delete-disabled-icon Used to override the default delete icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::delete-down-icon Used to override the default delete icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::delete-icon Used to override the default delete icon used in the toolbar of the Gantt component.
af|dvt-gantt::delete-over-icon Used to override the default delete icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::edit-icon Used to override the default edit icon used in the toolbar of the Gantt component.
af|dvt-gantt::edit-disabled-icon Used to override the default edit icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::edit-down-icon Used to override the default edit icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::edit-over-icon Used to override the default edit icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::indent-disabled-icon Used to override the default indent icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::indent-down-icon Used to override the default indent icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::indent-icon Used to override the default indent icon used in the toolbar of the Gantt component.
af|dvt-gantt::indent-over-icon Used to override the default indent icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::legend-disabled-icon Used to override the default legend icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::legend-down-icon Used to override the default legend icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::legend-icon Used to override the default legend icon used in the toolbar of the Gantt component.
af|dvt-gantt::legend-over-icon Used to override the default legend icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::link-disabled-icon Used to override the default link icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::link-down-icon Used to override the default link icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::link-icon Used to override the default link icon used in the toolbar of the Gantt component.
af|dvt-gantt::link-over-icon Used to override the default link icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::task-dependency-popup-icon
Pseudo classes Description
active Style of the task dependency popup icon when active.
hover Style of the task dependency popup icon on mouse over.
af|dvt-gantt::dependency-menu-start-start-icon Used to override the default start-start icon used in the dependency popup menu of the Gantt component.
af|dvt-gantt::dependency-menu-start-finish-icon Used to override the default start-finish icon used in the dependency popup menu of the Gantt component.
af|dvt-gantt::dependency-menu-finish-start-icon Used to override the default finish-start icon used in the dependency popup menu of the Gantt component.
af|dvt-gantt::dependency-menu-finish-finish-icon Used to override the default finish-finish icon used in the dependency popup menu of the Gantt component.
af|dvt-gantt::new-resource-disabled-icon Used to override the default new resource icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::new-resource-down-icon Used to override the default new resource icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::new-resource-icon Used to override the default new resource icon used in the toolbar of the Gantt component.
af|dvt-gantt::new-resource-over-icon Used to override the default new resource icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::new-task-disabled-icon Used to override the default new task icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::new-task-down-icon Used to override the default new task icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::new-task-icon Used to override the default new task icon used in the toolbar of the Gantt component.
af|dvt-gantt::new-task-over-icon Used to override the default new task icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::outdent-disabled-icon Used to override the default outdent icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::outdent-down-icon Used to override the default outdent icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::outdent-icon Used to override the default outdent icon used in the toolbar of the Gantt component.
af|dvt-gantt::outdent-over-icon Used to override the default outdent icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::paste-disabled-icon Used to override the default paste icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::paste-down-icon Used to override the default paste icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::paste-icon Used to override the default paste icon used in the toolbar of the Gantt component.
af|dvt-gantt::paste-over-icon Used to override the default paste icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::print-disabled-icon Used to override the default print icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::print-down-icon Used to override the default print icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::print-icon Used to override the default print icon used in the toolbar of the Gantt component.
af|dvt-gantt::print-over-icon Used to override the default print icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::redo-disabled-icon Used to override the default redo icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::redo-down-icon Used to override the default redo icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::redo-icon Used to override the default redo icon used in the toolbar of the Gantt component.
af|dvt-gantt::redo-over-icon Used to override the default redo icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::split-disabled-icon Used to override the default split icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::split-down-icon Used to override the default split icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::split-icon Used to override the default split icon used in the toolbar of the Gantt component.
af|dvt-gantt::split-over-icon Used to override the default split icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::undo-disabled-icon Used to override the default undo icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::undo-down-icon Used to override the default undo icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::undo-icon Used to override the default undo icon used in the toolbar of the Gantt component.
af|dvt-gantt::undo-over-icon Used to override the default undo icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::unlink-icon Used to override the default unlink icon used in the toolbar of the Gantt component.
af|dvt-gantt::unlink-down-icon Used to override the default unlink icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::unlink-over-icon Used to override the default unlink icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::unlink-disabled-icon Used to override the default unlink icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::zoomin-icon Used to override the default zoom-in icon used in the toolbar of the Gantt component.
af|dvt-gantt::zoomin-down-icon Used to override the default zoom-in icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::zoomin-over-icon Used to override the default zoom-in icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::zoomin-disabled-icon Used to override the default zoom-in icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::zoomout-disabled-icon Used to override the default zoom-out icon (disabled) used in the toolbar of the Gantt component.
af|dvt-gantt::zoomout-down-icon Used to override the default zoom-out icon (in pressed state) used in the toolbar of the Gantt component.
af|dvt-gantt::zoomout-icon Used to override the default zoom-out icon used in the toolbar of the Gantt component.
af|dvt-gantt::zoomout-over-icon Used to override the default zoom-out icon (when hover over) used in the toolbar of the Gantt component.
af|dvt-gantt::task-icon Used to override the default task icon.
af|dvt-gantt::task-inner-icon Used to override the default task inner icon.
af|dvt-gantt::scheduling-task-inner-icon Used to override the default scheduling task inner icon.

dvt:thematicMap

Style Selectors Description Conditions
af|dvt-thematicMap Style on the root element of the af|dvt-thematicMap component.
Skin properties Description
-tr-background-color Specifies the fill color for the thematic map background. Accepts 6 digits hexadecimal, rgb values, CSS color names or gradient
af|dvt-area Style on the area of thematic map
Pseudo classes Description
hover Styles the component's filters when acting as mouse over it.
selected Styles the component's filters when the area is selected.
Skin properties Description
-tr-border-color Specifies the default border color of the region (3/6/8 digits hex, rgb or Css color name) ( Hint: If you skin this selector, you may also want to skin :hover and :selected. )
-tr-border-width Specifies the default border width of the region in pixels. Eg. 2px ( Hint: If you skin this selector, you may also want to skin :hover and :selected. )
-tr-border-style Specifies the default border style of the region. ( Hint: If you skin this selector, you may also want to skin :hover and :selected. ) Possible values are none, solid, dotted.
af|dvt-areaLayer Style on the area layer of thematic map
af|dvt-areaLayer::area Style on the area of the area layer
Skin properties Description
-tr-background-color Specifies the default fill color of the region (3/6/8 digits hex, rgb or Css color name)
-tr-border-color Specifies the default border color of the region (3/6/8 digits hex, rgb or Css color name)
-tr-border-width Specifies the default border width of the region in pixels. Eg. 2px
-tr-border-style Specifies the default border style of the region. Possible values are none, solid, dotted.
af|dvt-areaLayer::area-text Style on the text of the area layer
Skin properties Description
-tr-font-weight Specifies whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-marker Style on the markers of thematic map
Skin properties Description
-tr-scaleX Specifies the scale of the marker in x coordinate. E.g. 2
-tr-scaleY Specifies the scale of the marker in y coordinate. E.g. 2
-tr-type Specifies the type of the marker.
-tr-background-color Specifies the default fill color of the marker (3/6/8 digits hex, rgb or Css color name)
-tr-opacity Specifies the opacity the marker in %. E.g. 80%
af|dvt-marker::text Style on the text of the marker
Skin properties Description
-tr-font-weight Specifies whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-color Specifies the color of the font. Enter values in 6 or 8 digit hexadecimal. For example -tr-font-color:#000000 specifies black text.
-tr-font-style Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
-tr-font-family Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
-tr-font-size Specifies the size of the font for the selector.
-tr-text-decoration Specifies the text decoration. Currently support normal or underline.
af|dvt-attributeGroups Style on the attribute groups
af|dvt-attributeGroups::color$ Style on the color of the attribute group
Skin properties Description
-tr-background-color Specifies the background color of the attribute group.
af|dvt-attributeGroups::shape$ Style on the shape of the attribute group
Skin properties Description
-tr-shape Specifies the shape of the attribute group.
af|dvt-attributeGroups::pattern$ Style on the shape of the attribute group
Skin properties Description
-tr-pattern Specifies the pattern of the attribute group.
af|dvt-attributeGroups::opacity$ Style on the opacity of the attribute group
Skin properties Description
-tr-opacity Specifies the opacity of the attribute group.
.AFDvtAreaShadow:alias Color of the shadow of a selected area.
Skin properties Description
-tr-background-color Specifies the shadow color of a selected area.

dvt:timeline

Style Selectors Description Conditions
af|dvt-timeline This is the base selector for the Timeline component.
af|dvt-timeline-series This is the base selector for the Timeline series.
af|dvt-timelineItem This is the base selector for the Timeline item.
af|dvt-timelineOverview This is the base selector for the Timeline overview.