This document lists the skin-selectors that can be used in an ADF Faces skin .css file to skin DVT ADF Faces components.
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 aliases are are derivatives of the core anchor color aliases.
Infrequently used specialty color aliases.
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.
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". |
|
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). |
|
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. |
|
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 |
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. |
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. |
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. |
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. |
|