Selectors for Skinning ADF Data Visualization Components

Oracle Fusion Middleware Data Visualization Tools Tag Reference for ADF Skin Selectors
12c (12.2.1.2)
E76723-01

Overview
Global Selectors
- Color
Renderer Selectors

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:dialGauge

Style Selectors

Description

Conditions

af|dvt-dialGauge

Style on the root element of the dvt:dialGauge component.

Skin properties	Description
animation-duration	Specifies the animation duration in milliseconds.
-tr-visual-effects	Specifies whether visual effects such as overlays or shadows are enabled. Valid values are "none" and "auto" (default).

af|dvt-gaugeMetricLabel

Style for the metric label of the gauge.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-gaugeTickLabel

Style for the tick label of the gauge.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

dvt:ledGauge

Style Selectors

Description

Conditions

af|dvt-ledGauge

Style on the root element of the dvt:ledGauge component.

Skin properties	Description
animation-duration	Specifies the animation duration in milliseconds.
-tr-visual-effects	Specifies whether visual effects such as overlays or shadows are enabled. Valid values are "none" and "auto" (default).

af|dvt-gaugeMetricLabel

Style for the metric label of the gauge.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-gaugeThreshold

Style for the threshold selectors of the gauge component.

af|dvt-gaugeThreshold::index$

Styles the n-th threshold of the gauge. For example, index1, refers to the first threshold.

Skin properties	Description
background-color	Specifies the CSS string for the fill color for the threshold.
border-color	Specifies the CSS string for the border color for the threshold.

dvt:ratingGauge

Style Selectors

Description

Conditions

af|dvt-ratingGauge

Skin properties	Description
animation-duration	Specifies the animation duration in milliseconds.
-tr-visual-effects	Specifies whether visual effects such as overlays or shadows are enabled. Valid values are "none" and "auto" (default).

af|dvt-ratingGauge::selected-shape

Style for the selected shapes of the rating gauge.

Skin properties	Description
background-color	Specifies the CSS string for the fill color.
border-color	Specifies the CSS string for the border color.

af|dvt-ratingGauge::unselected-shape

Style for the unselected shapes of the rating gauge.

Skin properties	Description
background-color	Specifies the CSS string for the fill color.
border-color	Specifies the CSS string for the border color.

af|dvt-ratingGauge::hover-shape

Style for the hover shapes of the rating gauge.

Skin properties	Description
background-color	Specifies the CSS string for the fill color.
border-color	Specifies the CSS string for the border color.

af|dvt-ratingGauge::changed-shape

Style for the changed shapes of the rating gauge.

Skin properties	Description
background-color	Specifies the CSS string for the fill color.
border-color	Specifies the CSS string for the border color.

dvt:statusMeterGauge

Style Selectors

Description

Conditions

af|dvt-statusMeterGauge

Style on the root element of the dvt:statusMeterGauge component.

Skin properties	Description
animation-duration	Specifies the animation duration in milliseconds.
-tr-visual-effects	Specifies whether visual effects such as overlays or shadows are enabled. Valid values are "none" and "auto" (default).

af|dvt-gaugeMetricLabel

Style for the metric label of the gauge.

Skin properties	Description
-tr-color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-gaugeThreshold

Style for the threshold selectors of the gauge component.

af|dvt-gaugeThreshold::index$

Styles the n-th threshold of the gauge. For example, index1, refers to the first threshold.

Skin properties	Description
background-color	Specifies the CSS string for the fill color for the threshold.
border-color	Specifies the CSS string for the border color for the threshold.

dvt:chart

Style Selectors

Description

Conditions

.AFDvtMarquee:alias

Style for the chart marquee selection and zoom rectangle.

Skin properties	Description
background-color	Specifies the CSS string for the background color.
border-color	Specifies the CSS string for the border color.

.AFDvtChartAxis:alias

Style for the chart axis lines.

Skin properties	Description
color	Specifies the CSS string for the line color.

.AFDvtChartLabels:alias

Style for the chart labels.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

.AFDvtChartSeries:alias

Style for the reference objects.

Skin properties	Description
border-color	Specifies the CSS string for the border color of the series data objects.

.AFDvtChartTickMarks:alias

Style for the chart tick marks.

Skin properties	Description
color	Specifies the CSS string for the line color.

.AFDvtChartTitles:alias

Style for the chart titles.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chart

Style on the root element of the chart components.

Skin properties	Description
animation-duration	Specifies the animation duration in milliseconds.
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".
-tr-series-effect	Specifies the fill effect for the series data items. Valid values are "gradient" (default), "color", and "pattern".

af|dvt-chart::animation-down

Skin properties	Description
background-color	Specifies the CSS string for the animation indicator for decreasing values.

af|dvt-chart::animation-up

Skin properties	Description
background-color	Specifies the CSS string for the animation indicator for increasing values.

af|dvt-chart::data-label

Style for the chart data label for non-pie charts.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chart::feeler

Style for pie slice feeler lines.

Skin properties	Description
color	Specifies the CSS string for the line color.

af|dvt-chart::footnote

Style for the chart footnote.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chart::funnel-slice

Style for the funnel slice background.

Skin properties	Description
background-color	Specifies the CSS string for the background color.
border-color	Specifies the CSS string for the border color.

af|dvt-chart::plot-area

Style for the plot area of the chart.

Skin properties	Description
background-color	Specifies the CSS string for the fill color.

af|dvt-chart::slice-label

Style for pie slice labels.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chart::subtitle

Style for the chart subtitle.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chart::title

Style for the chart title.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartLegend

Style for the chart legend.

Skin properties	Description
background-color	Specifies the CSS string for the background color.
border-color	Specifies the CSS string for the border color.

af|dvt-chartLegend::text

Styles the legend item text.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartLegend::title

Styles the legend title.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartSeriesStyle

Style for the series selectors of the chart component.

af|dvt-chartSeriesStyle::index$

Styles the n-th series of the chart. For example, index1, refers to the first series.

Skin properties	Description
background-color	Specifies the CSS string for the fill color.
border-color	Specifies the CSS string for the border color.

af|dvt-chartXAxis

Style for the x-axis of the chart.

Skin properties	Description
color	Specifies the CSS string for the axis line color.

af|dvt-chartXAxis::major-tick

Styles the major ticks of the axis.

Skin properties	Description
color	Specifies the CSS string for the line color.

af|dvt-chartXAxis::minor-tick

Styles the minor ticks of the axis.

Skin properties	Description
color	Specifies the CSS string for the line color.

af|dvt-chartXAxis::tick-label

Styles the tick labels of the axis.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartXAxis::title

Styles the axis title.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartYAxis

Style for the y-axis of the chart.

Skin properties	Description
color	Specifies the CSS string for the axis line color.

af|dvt-chartYAxis::major-tick

Styles the major ticks of the axis.

Skin properties	Description
color	Specifies the CSS string for the line color.

af|dvt-chartYAxis::minor-tick

Styles the minor ticks of the axis.

Skin properties	Description
color	Specifies the CSS string for the line color.

af|dvt-chartYAxis::tick-label

Styles the tick labels of the axis.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartYAxis::title

Styles the axis title.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartY2Axis

Style for the y2-axis of the chart.

Skin properties	Description
color	Specifies the CSS string for the axis line color.

af|dvt-chartY2Axis::major-tick

Styles the major ticks of the axis.

Skin properties	Description
color	Specifies the CSS string for the line color.

af|dvt-chartY2Axis::minor-tick

Styles the minor ticks of the axis.

Skin properties	Description
color	Specifies the CSS string for the line color.

af|dvt-chartY2Axis::tick-label

Styles the tick labels of the axis.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

af|dvt-chartY2Axis::title

Styles the axis title.

Skin properties	Description
color	Specifies the CSS string for the color of the font.
font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the selector.
font-style	Specifies whether the font is italic. Valid values are "normal" (default) or "italic".
font-weight	Specifies whether the font is bold. Valid values are "normal" (default) or "bold".

Icon Selectors

Description

af|dvt-chart::pan-icon

Pseudo classes	Description
active	active state

Skin properties	Description
content	Specifies the path of the icon

af|dvt-chart::zoom-icon

Pseudo classes	Description
active	active state

Skin properties	Description
content	Specifies the path of the icon

af|dvt-chart::select-icon

Pseudo classes	Description
active	active state

Skin properties	Description
content	Specifies the path of the icon

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

.AFHVPanelCardTitleStyle

Style applied to HV Panel Card Title 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

.AFHVNodeImageSize

Style applied to "af:image" tag within HV Node 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

.AFHVPanelCardTitleStyle75

Style applied to HV Panel Card Title 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

.AFHVNodeImageSize75

Style applied to "af:image" tag within HV Node 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

.AFHVNodeImageSize50

Style applied to "af:image" tag within HV Node 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

.AFHVNodeImageSize25

Height for HV node and panelCard

.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. Note: It is recommended to use client properties to skin the top level component. The -tr-background-color should be set to be transparent and -tr-fill-type should be set to "solid". That will ensure that the styles applied to svg will not interfere with the border, background settings on outer div that were set by using client properties. Example, border-style:solid;border-width:1px;border-color:#000000;background-color:rgba(0, 0, 0, .2);-tr-fill-type:solid;-tr-background-color:rgba(255,255,255,0);

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.
background-color	Specifies the background color for the hierarchy viewer viewport.
border-color	Specifies the border color for the hierarchy viewer viewport.
border-width	Specifies the border width for the hierarchy viewer viewport. Example, border-width:1px
border-style	Specifies the border style for the hierarchy viewer viewport. Example, border-style:solid

af|dvt-hierarchyViewer::button

Hierarchy Viewer Dvt Button. This includes the button label style and button container 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.

Skin properties	Description
-tr-font-family	Specifies the name of the font for the selector. For example, -tr-font-family:SansSerif; ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-font-size	Specifies the size of the font. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-color	Specifies the font color. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-font-weight	Specifies whether the font is bold. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-fill-type	Specifies the fill type of the button element, either gradient (Default) or solid. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-background-color	Specifies the fill color of the 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-background	Specifies the background of the button element in gradient color For example, -tr-background:linear-gradient(to bottom, #F13C13, #D02B06) specifies gradient background. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-box-shadow	Specifies the box shadow property of the button. Example, -tr-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2). ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-border-color	Specifies the border color of the 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-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. )
-tr-background	Specifies the background of the lateral navigation button element in gradient color For example, -tr-background:linear-gradient(to bottom, #F13C13, #D02B06) specifies gradient background. ( Hint: If you skin this selector, you may also want to skin :hover and :active. )
-tr-box-shadow	Specifies the box shadow property of the lateral navigation button. Example, -tr-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2). ( Hint: If you skin this selector, you may also want to skin :hover and :active. )

af|dvt-hierarchyViewer::link-label

Style of HV Link label.

Skin properties	Description
-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.
-tr-font-weight	Specifies whether the font is bold.
-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.

af|dvt-hierarchyViewer::link-label-container

Style of HV Link label container.

Skin properties	Description
-tr-fill-type	Specifies the fill type of the link label container element, either gradient or solid(Default).
-tr-border-color	Specifies the border color of the link label container element by 6 digit or 8 digit Hex. For example, -tr-border-color:#000000 specifies black.
-tr-background-color	Specifies the fill color of the link label container element by 6 digit or 8 digit Hex. For example, -tr-background-color:#000000 specifies black.
-tr-border-radius	Specifies the border radius property of the link label container in pixels. Example, -tr-border-radius: 3px

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 and Search Panel. Note: the selectors are not used for Alta skin. See dvt-panelDrawer selectors to skin Control Panel and Search panel in Alta skin.

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

Skin properties	Description
-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::column-sort-ascending-icon-style

Styles the icon used for the sort ascending indicator. The icon is specified as a background-image in this key. 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-ascending-icon-style and define the icon for the sort-ascending-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-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::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.

Pseudo classes	Description
selected	Style of the bottom portion of the pivot handle for selected 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.

Pseudo classes	Description
selected	Style of the center portion of the pivot handle for selected 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.

Pseudo classes	Description
selected	Style of the top portion of the pivot handle for selected 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.

Pseudo classes	Description
selected	Style of the center portion of the pivot handle for selected 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.

Pseudo classes	Description
selected	Style of the left portion of the pivot handle for selected 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.

Pseudo classes	Description
selected	Style of the right portion of the pivot handle for selected 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:nBox

Style Selectors

Description

Conditions

af|dvt-nBox

Skin properties	Description
border-style	Specifies the border style for nBox. Example, border-style:solid
border-width	Specifies the border width for nBox. Example, border-width:1px
border-color	Specifies the CSS string for the border color for the threshold.
background-color	Specifies the CSS string for the fill color for the threshold.

af|dvt-nBox::columnsTitle

Title of column axis

Skin properties	Description
font-family	Specifies the name of the font for the title. For example, font-family:SansSerif;
font-size	Specifies the size of the font for the title.
color	Specifies the CSS color of the font. For example font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBox::rowsTitle

Title of row axis

Skin properties	Description
font-family	Specifies the name of the font for the title. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the title.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBoxColumn

Column of nBox

af|dvt-nBoxColumn::label

Label of Column

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the label.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBoxRow

Row of nBox

af|dvt-nBoxRow::label

Label of Row

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the label.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBoxCell

Cell of nBox

Pseudo classes	Description
minimized	nBox Cell minimized State
dropTarget	nBox dropTarget State

Skin properties	Description
background	Specifies the background color or gradient for the nBox Cell.
border-color	Specifies the border color for the nBox Cell.
border-width	Specifies the border width for the nBox Cell. Example, border-width:1px
border-style	Specifies the border style for the nBox Cell. Example, border-style:solid

af|dvt-nBoxCell::label

Label of Cell

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the label.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBoxCell::countLabel

Count Label of Cell

Pseudo classes	Description
header	Pseudo-class that is used when the count label is displayed in the cell header.

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font. Only applies to the header pseudo-class.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBoxNode

Node styles

Pseudo classes	Description
hover	NBox Node hover state. Only supports border-color property.
selected	NBox Node selected state. Only supports border-color property.

Skin properties	Description
color	Color of Node
border-color	Color of border around node
border-width	Specifies the border width for the nBox Node. Example, border-width:1px
border-style	Specifies the border style for the nBox Node. Example, border-style:solid

af|dvt-nBoxNode::label

Label of Node

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the label.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBoxNode::secondaryLabel

Secondary Label of Node

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the label.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-nBoxNode::categoryLabel

Label for category nodes.

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|nBoxDialog

The dialog that is displayed when drilling into category nodes.

Skin properties	Description
background-color	Color of background of Dialog
border-color	Color of border around Dialog
border-width	Specifies the border width for the nBox Dialog. Example, border-width:1px
border-style	Specifies the border style for the nBox Dialog. Example, border-style:solid

af|nBoxDialog::label

Label of Dialog

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the label.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

af|nBoxDialog::countLabel

Count Label of Dialog

Skin properties	Description
font-family	Specifies the name of the font for the label. For example, -tr-font-family:SansSerif;
font-size	Specifies the size of the font for the label.
color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
font-weight	Specifies whether the font is bold.
font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
text-decoration	Specifies the text decoration. Currently support normal or underline.

dvt:treemap

Style Selectors

Description

Conditions

af|dvt-treemap

Skin properties	Description
-tr-animation-update-color	Specifies the CSS color of the animation transition used to indicate that a node was updated.
-tr-animation-duration
-tr-font-weight	Specifies whether the font is bold.
-tr-color	Specifies the CSS color of the font.
-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 supports normal or underline.

af|dvt-treemap::attribute-type-text

Style for the size and color labels in the legend.

Skin properties	Description
-tr-color	Specifies the color of the font.
-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.
-tr-font-size	Specifies the size of the font for the selector.
-tr-font-weight	Specifies whether the font is bold.

af|dvt-treemap::attribute-value-text

Style for the strings describing the size and color metrics in the legend.

Skin properties	Description
-tr-color	Specifies the color of the font.
-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.
-tr-font-size	Specifies the size of the font for the selector.
-tr-font-weight	Specifies whether the font is bold.

af|dvt-treemap::drill-text

Styles the drillable text in the breadcrumbs of the component.

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-treemap::current-text

Styles the current root node text in the breadcrumbs of the component.

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-treemapNode

Node styles

Pseudo classes	Description
hover	Node hover state. Only supports the -tr-border-color property.
selected	Node selected state. Only supports the -tr-inner-color and -tr-outer-color properties.

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-border-color	Only supported on the hover pseudo-class. Specifies the color of the node border on hover.
-tr-inner-color	Only supported on the selected pseudo-class. Specifies the color of the inner node border when selected.
-tr-outer-color	Only supported on the selected pseudo-class. Specifies the color of the outer node border when selected.

af|dvt-treemapNodeHeader

Node styles

Pseudo classes	Description
hover	Node header hover state
selected	Node header 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
-tr-inner-color	Only supported on the selected pseudo-class. Specifies the color of the inner node header border when selected.
-tr-outer-color	Only supported on the selected pseudo-class. Specifies the color of the outer node header border when selected.

af|dvt-treemapNodeHeader::drill-text

Specifies the color for drillable text within a treemap node header

Pseudo classes	Description
hover	Node header hover state
selected	Node header selected state

Skin properties	Description
-tr-color	Specifies the CSS color of the font.

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	Specifies the CSS color of the animation transition used to indicate that a node was updated.
-tr-animation-duration
-tr-font-weight	Specifies whether the font is bold.
-tr-color	Specifies the CSS color of the font.
-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 supports normal or underline.

af|dvt-sunburst::attribute-type-text

Style for the size and color labels in the legend.

Skin properties	Description
-tr-color	Specifies the color of the font.
-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.
-tr-font-size	Specifies the size of the font for the selector.
-tr-font-weight	Specifies whether the font is bold.

af|dvt-sunburst::attribute-value-text

Style for the strings describing the size and color metrics in the legend.

Skin properties	Description
-tr-color	Specifies the color of the font.
-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.
-tr-font-size	Specifies the size of the font for the selector.
-tr-font-weight	Specifies whether the font is bold.

af|dvt-sunburst::drill-text

Styles the drillable text in the breadcrumbs of the component.

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-sunburst::current-text

Styles the current root node text in the breadcrumbs of the component.

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

Node styles

Pseudo classes	Description
hover	Node hover state. Only supports the -tr-border-color property.
selected	Node selected state. Only supports the -tr-inner-color and -tr-outer-color properties.

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-border-color	Only supported on the hover pseudo-class. Specifies the color of the node border on hover.
-tr-inner-color	Only supported on the selected pseudo-class. Specifies the color of the inner node border when selected.
-tr-outer-color	Only supported on the selected pseudo-class. Specifies the color of the outer node border when selected.

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::background-bar

Styles the appearance of the background bars.

af|dvt-gantt::column-header-cell

Style on the header cell of the column.

af|dvt-gantt::row

Styles the rows of the Gantt.

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

Styles the appearance of a data area in a Thematic Map area data layer.

Pseudo classes	Description
hover	Styles the data area border when hovered over.
selected	Styles the data area border when selected.
disclosed	Styles the data area border when drilled.

Skin properties	Description
-tr-border-color	Specifies the default border color of the data area. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names. If you skin this selector, you may also want to skin -tr-inner-color and -tr-outer-color on :hover and :selected.
-tr-border-width	Specifies the default border width of the data area in pixels. Eg. 2px. If you skin this selector, you may also want to skin :hover and :selected.
-tr-inner-color	Specifies the inner border color of a data area for the state indicated by the pseudo-class. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names. Only valid for :selected and :disclosed.
-tr-outer-color	Specifies the outer border color of a data area for the state indicated by the pseudo-class. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names. Only valid for :selected and :disclosed.

af|dvt-areaLayer

Styles the appearance of the area layer in a Thematic Map.

af|dvt-areaLayer::area

Styles the appearance of an area in a Thematic Map area layer.

Skin properties	Description
-tr-background-color	Specifies the default fill color of the area layer area. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names.
-tr-border-color	Specifies the default border color of the area layer area. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names.
-tr-border-width	Specifies the default border width of the area layer area in pixels. Eg. 2px

af|dvt-areaLayer::area-text

Styles the appearance of the area layer labels.

Skin properties	Description
-tr-font-weight	Specifies whether the font weight.
-tr-color	Specifies the font color. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names.
-tr-font-style	Specifies the font style.
-tr-font-family	Specifies the font family. For example, -tr-font-family:SansSerif;
-tr-font-size	Specifies the font size.
-tr-text-decoration	Specifies the text decoration.

af|dvt-marker

Styles the appearance of a Thematic Map marker.

Skin properties	Description
-tr-scaleX	Specifies the default value used to scale the marker width. E.g. 2
-tr-scaleY	Specifies the default value used to scale the marker height. E.g. 2
-tr-type	Specifies the marker shape.
-tr-background-color	Specifies the default marker fill color. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names.
-tr-opacity	Specifies the marker opacity in percent or decimal form. E.g. 80% or 0.8.
-tr-border-color	Specifies the default marker border color. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names.
-tr-border-width	Specifies the default marker border width in pixels. Eg. 2px
-tr-border-style	Specifies the marker border style.

af|dvt-marker::text

Style on the text of the marker

Skin properties	Description
-tr-font-weight	Specifies whether the font weight.
-tr-color	Specifies the font color. Accepts 3 or 6 digits hexadecimal, rgb values, CSS color names.
-tr-font-style	Specifies the font style.
-tr-font-family	Specifies the font family. E.g. -tr-font-family:SansSerif;
-tr-font-size	Specifies the font size.
-tr-text-decoration	Specifies the text decoration.

af|dvt-attributeGroups

Styles the appearance of an attribute group.

af|dvt-attributeGroups::color$

Styles the appearance of the attribute group color.

Skin properties	Description
-tr-background-color	Specifies the fill color of the attribute group.

af|dvt-attributeGroups::shape$

Styles the appearance of the attribute group shape.

Skin properties	Description
-tr-shape	Specifies the shape of the attribute group.

af|dvt-attributeGroups::pattern$

Styles the appearance of the attribute group pattern.

Skin properties	Description
-tr-pattern	Specifies the pattern of the attribute group.

af|dvt-attributeGroups::opacity$

Styles the appearance of the attribute group opacity.

Skin properties	Description
-tr-opacity	Specifies the opacity of the attribute group.

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.

dvt:diagram

Style Selectors

Description

Conditions

af|dvt-diagram

Skin properties	Description
background-color	Specifies the background color for the diagram viewport.
border-color	Specifies the border color for the diagram viewport.
border-width	Specifies the border width for the diagram viewport. Example, border-width:1px
border-style	Specifies the border style for the diagram viewport. Example, border-style:solid

af|dvt-diagram::button

Diagram button styles (e.g., "Show All", "Unstack" buttons at the top of the diagram). The styles also applied on actions toolbar buttons.

Pseudo classes	Description
hover	Button hover state.
active	Button active state.

Skin properties	Description
background-color	Specifies the background color for the diagram button
background-image	Specifies the background image or gradient for the diagram button. Example, background-image:linear-gradient(bottom, rgba(228,232,234,1),rgba(233,236,238,1),rgba(241,243,244,1),rgba(255,255,255,1));
border-color	Specifies the border color for the diagram button
border-radius	Specifies the border radius property for diagram button in pixels. Example, border-radius: 3px

af|dvt-diagram::current-text

Specifies the styles for text shown in the breadcrumb links (current node)

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-diagram::drill-text

Specifies the styles for text shown in the breadcrumb links (parent nodes)

Pseudo classes	Description
hover	Breadcrumb hover state
active	Breadcrumb active state

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-diagram::overview-window

Node and container styles displayed in overview window. Does not include viewport styles. See "af|dvt-overviewWindow" for styling viewport.

Skin properties	Description
-tr-node-background-color	Specifies the background color for the diagram node in overview window. Accepts color in rgba format in addition to hex and rgb to support opacity.
-tr-disclosed-container-node-background-color	Specifies the background color for the diagram disclosed container node in overview window. Accepts color in rgba format in addition to hex and rgb to support opacity.

af|dvt-diagram::stack

Styles for the diagram stack image

Skin properties	Description
-tr-background-color	Specifies the background color for the diagram stack image.
-tr-border-color	Specifies the border color for the diagram stack image.
-tr-border-radius	Specifies the border radius for the diagram stack image.

af|dvt-diagram::stack-counter

Styles for the diagram stack counter

Skin properties	Description
-tr-background-color	Specifies the background color for the diagram stack counter.
-tr-border-color	Specifies the border color for the diagram stack counter.
-tr-border-radius	Specifies the border radius for the diagram stack counter.
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-diagram::stack-preview

Styles for the diagram stack preview

Skin properties	Description
-tr-background-color	Specifies the background color for the diagram node in overview window. Accepts color in rgba format in addition to hex and rgb to support opacity.

af|dvt-diagramNode

Styles for the diagram node

Pseudo classes	Description
hover	Node hover state. Only supports the -tr-inner-color and -tr-outer-color properties.
selected	Node selected state. Only supports the -tr-border-color property.

Skin properties	Description
-tr-border-color	Only supported on the hover pseudo-class. Specifies the color of the node border when selected.
-tr-inner-color	Only supported on the selected pseudo-class. Specifies the color of the inner node border on hover.
-tr-outer-color	Only supported on the selected pseudo-class. Specifies the color of the outer node border on hover.

af|dvt-diagramNode::container

Specifies the styles for the diagram container node

Skin properties	Description
-tr-background-color	Specifies the CSS color of the container node background. For example, -tr-background-color:#000000 specifies black.
-tr-border-color	Specifies the CSS color of the container node border.
-tr-border-radius	Specifies the border radius property of the container node element in pixels. Example, -tr-border-radius: 3px

af|dvt-diagramNode::label

Specifies the styles for the diagram node label

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-diagramLink

Styles for the diagram link

Pseudo classes	Description
hover	Link hover state. Only supports the -tr-inner-color and -tr-outer-color properties.
selected	Link selected state. Only supports the -tr-border-color property.

Skin properties	Description
-tr-color	Specifies the link color.
-tr-border-color	Only supported on the hover pseudo-class. Specifies the color of the link border when selected.
-tr-inner-color	Only supported on the selected pseudo-class. Specifies the color of the inner link border on hover.
-tr-outer-color	Only supported on the selected pseudo-class. Specifies the color of the outer link border on hover.

af|dvt-diagramLink::promoted

Specifies the styles for the diagram promoted link

Skin properties	Description
-tr-color	Specifies the promoted link color. Example, -tr-color: rgba(0, 0, 0, .5)
-tr-style	Specifies the promoted link style
-tr-width	Specifies the promoted link width in pixels. Example, -tr-width: 3px

af|dvt-diagramLink::label

Specifies the styles for the diagram link label

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-overviewWindow

Styles for overview window (viewport). Does not include styles for nodes and containers. See "af|dvt-diagram::overview-window" for styling overview window content.

Skin properties	Description
-tr-viewport-background-color	Specifies the background color for the overview window.Accepts color in rgba format in addition to hex and rgb to support opacity.
-tr-viewport-border-color	Specifies the background color for the overview window.Accepts color in rgba format in addition to hex and rgb to support opacity.

af|dvt-panelDrawer

Styles for panel drawer. Panel drawer styles are used by Diagram component and by Thematic Map and Hierarchy Viewer components in Alta skin to skin Control Panel, Search and Legend containers. For other skins Thematic Map and Hierarchy Viewer use af|dvt-controlPanel style selectors.

Skin properties	Description
-tr-background-color	Specifies the background color for the panel drawer.
-tr-border-color	Specifies the border color for the panel drawer.
-tr-border-radius	Specifies the border radius for the panel drawer tabs in pixels.
-tr-tab-background-color-inactive	Specifies the background color for the inactive tab in panel drawer.
-tr-tab-border-color-inactive	Specifies the border color for the inactive tab in panel drawer.

af|dvt-paletteSection

Styles for the palette section.

af|dvt-paletteSection::title

Styles for the palette title bar

Pseudo classes	Description
hover	Button hover state.
active	Button active state.

Skin properties	Description
-tr-background-color	Specifies the background color for the palette section title bar
-tr-background-image	Specifies the background image or gradient for the palette section title bar. Example, background-image:linear-gradient(bottom, rgba(228,232,234,1),rgba(233,236,238,1),rgba(241,243,244,1),rgba(255,255,255,1));
-tr-border-color	Specifies the border color for the palette section title bar
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-paletteItem

Styles for the palette item.

af|dvt-paletteItem::label

Styles for the palette item label

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

dvt:legend"/>The legend component. Used by Diagram and Thematic Map components.

Style Selectors

Description

Conditions

af|dvt-legend

Styles for the legend.

af|dvt-legend::title

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-legendSectionGroup

Styles for the legend section group.

af|dvt-legendSectionGroup::title

Specifies the styles for the legend section group title

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-legendSection

Styles for the legend section.

af|dvt-legendSection::title

Specifies the styles for the legend section title.

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.

af|dvt-legendSection::item

Specifies the styles for the legend item.

Skin properties	Description
-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-color	Specifies the CSS color of the font. For example -tr-font-color:#000000 specifies black text.
-tr-font-weight	Specifies whether the font is bold.
-tr-font-style	Specifies the font style. Valid values are "normal" (default) or "italic".
-tr-text-decoration	Specifies the text decoration. Currently support normal or underline.