CSS for Pivot Table Skins and Visual Appearance

Technical Introduction

Technical Introduction Cascading Style Sheets (CSS) is a set of formatting rules used to describe the presentation (that is, the look and formatting) of a Flash Pivot Component Table. It’s also main tool to style web pages written in HTML, XHTML, and any kind of XML document, including SVG and XUL. The text in the cell object is automatically formatted according to the styles defined by concrete class in the style sheet file. You can use style properties to define formatting rulers for any existing class. CSS file for Flash Pivot Component Table is named “default.css” and located in root folder. It is set of classes, which looks like
className {
property1: value;
property2: value;
...
}
Every property has its default value, to change it simply add new line with this property and new value to concrete class. Classes are enumerated and shown in chapter “Styles Map”, all available properties and default values — in “CSS Properties Reference” chapter.

Content

Customizing Pivot Elements

Title bar

Class name: settingsView

CSS properties:
property description
tableButtonStyleName Style name for Table button (1)
See button CSS styling for customization
tableButtonSelectedStyleName Style name for selected Table button
See button CSS styling for customization
chartButtonStyleName Style name for Charts button
See button CSS styling for customization
chartButtonSelectedStyleName Style name for selected Charts button (2)
See button CSS styling for customization
chartCbxStyleName Style name for selection Chart type combobox (3)
zoomCbxStyleName Style name for zoom combobox (5)
Similar to button CSS styling
styleCbxStyleName Style name for style combobox (6)
Similar to button CSS styling
settingsViewExpandButton Style name for Expand/Collapse All button (7)
See button CSS styling for customization
printButtonStyleName Style name for Print button (8)
See button CSS styling for customization
checkBoxStyleName Style name for Full screen checkbox (4)
buttonsBackgroundImage Image for Table (1) & Charts (2) buttons background if Charts active.
Support Scale9 resizing.
buttonsSmallBackgroundImage Image for Table (1) & Charts (2) buttons background if Charts non-active.
Support Scale9 resizing.

Customizing Pivot Grid Cells

Cells Map

Cells Styles List

All cells support Pivot Grid cells CSS properties, some of them supports additional style properties. Also mentioned style inheritance.

  1. .dataCell
    base class for values cells
  2. .totalCell
    class for Totals, Grand Totals, and theirs headers
    inheritance for values: .dataCell > .totalCell
    inheritance for header captions: .headerCell > .totalCell
  3. .headerCell
    class for grid Headers
  4. .expandedHeaderCell
    cell with expanded header
    inheritance: .headerCell > .expandedHeaderCell
  5. .collapsedHeaderCell
    cell with collapsed header
    inheritance: .headerCell > .collapsedHeaderCell
  6. .filterCell
    cell with filter button
    inheritance: .headerCell > .filterCell
  7. .level0 - .level8
    set of styles for children of collapsible headers (.expandedHeaderCell, .hierarchyDrilledDownCell)
    inheritance: .headerCell > collapsible headers > .level#
  8. .sheetHeader
    cells of sheet headers
    Support all default styles and additional property: lineColor (Color)

Filter View

Class name: filterSortView

Properties:
property description
backgroundImage URL of image which will be placed on background on Filter. (1)
paddingLeft Left content padding
paddingRight Right content padding
labelStyleName Style name for label (2)
Customization is equivalent to cell CSS
accordionStyleName Style name for accordion (3)
More details below
checkBoxTreeListStyleName Style name for Fields list items (6)
Customization: style supports one property
  • background — URL of background image
filterOkButtonStyleName Style name for OK button (4)
See button CSS styling for customization
filterCancelButtonStyleName Style name for Cancel button (5)
See button CSS styling for customization

Accordion properties:
property description
backgroundImage URL of image which will be placed on background of accordion (3)
tabStyleName Style name for accordion button (7)
See button CSS styling for customization
tabSelectedStyleName Style name for active accordion button (8)
See button CSS styling for customization
contentStyleName Style name for label accordions elements. Properties:
  • buttonsStyleName — styles for sorting buttons, more details below.

Filter sort buttons (9) :
Supports all button CSS properties. Additional properties:
property description
iconAsc Image file to use as the icon for ascending sorting.
iconDesc Image file to use as the icon for descending sorting.
selectedUpSkin Image file to use as the skin for the background and border when the button is selected and mouse is not over the button. Supports Scale9 resizing.
selectedOverSkin

Image file to use as the skin for the background and border when the button is selected and mouse is over the button. Supports Scale9 resizing.
selectedDownSkin Image file to use as the skin for the background and border when the button is selected and mouse button is pressed. Supports Scale9 resizing.

Customizing Pivot Configurator View

Configurator CSV Version

Class name: measureCellAggregation

Properties:
property description
icon Specifies the URL of image for aggregation icon. Image is set in right, horizontal align is center (1).
iconOver Specifies the URL of image for aggregation icon when the mouse is over the cell. Image is set in right, horizontal align is center.
backgroundImage Specifies the URL of cell background image.
paddingLeft Indicates the padding from the left border of cell to the first character in the text.
iconEmptyCheckbox Specifies the URL of image for check box when it is unchecked (3)
iconCheckbox Specifies the URL of image for check box when it is checked (2)

Class name: levelCell

Properties:
property description
icon Specifies the URL of image for drag icon when the mouse is over the cell (4).
iconValues Specifies the URL of image for values icon when cell name is Values (5).
backgroundImage Specifies the URL of cell background image.

Class name: checkBoxTreeList

Properties:
property description
fontSize The size in points of text in list header.
fontWeight Specifies whether the text is boldface (bold) or normal (normal). Identical to bold property.
color Indicates the color of the text in list header (7).
backgroundImage Specifies the URL of list background image.

Class name: aggregationView

Properties:
backgroundImage Specifies the URL of aggregation list background image (6).

Class name: fieldsList

Properties:
property description
fontSize The size in points of text in list header.
fontWeight Specifies whether the text is boldface (bold) or normal (normal). Identical to bold property.
color Indicates the color of the text in list header.
backgroundImage Specifies the URL of list background image.
backgroundSelectedImage Specifies the URL of list background image when it is selected.

Class name: treeFieldsList

Properties:
property description
fontSize The size in points of text in list header.
fontWeight Specifies whether the text is boldface (bold) or normal (normal). Identical to bold property.
color Indicates the color of the text in list header.
backgroundImage Specifies the URL of list background image.
backgroundSelectedImage Specifies the URL of list background image when it is selected.

Customizing Pivot Charts
Properties:
property description
legendStyleName  
chartViewPieCbxStyleName  
chartViewMeasureCbxStyleName  
colors  
singleColors  
Legend properties:
property description
hideButtonStyleName  
legendSeparatorStyleName Style name for separator line. Properties:
  • backgroundImage —URL of separator image.
backgroundImage  
Hide button properties:
property description
upSkin  
overSkin  
downSkin  
fontSize  
color  
textDecoration  
  • chartToolTip

General Properties Review

Text Format Properties

property default value description
bold false Specifies whether the text is boldface (true) or not (false).
color #000000 Indicates the color of the text.
fontFamily "Arial" The name of the font for text in this cell, as a string. Make sure, that specified font is embedded, otherwise you'll see a default Adobe Flash font.
fontSize 12 The size in points of text in this cell.
fontWeight normal Specifies whether the text is boldface (bold) or normal (normal). Identical to bold property.
italic false Indicates whether text in this cell is italicized (true) or not (false).
textAlign left Indicates the alignment of the text in this cell. Possible values are "left", "right", or "center".
textDecoration none Specifies whether the text is underlined (underline) or not (none). Identical to underline property.
underline false Indicates whether the text in this cell is underlined (true) or not (false).

Pivot Grid Cells CSS Properties

Include all text format properties and additional:

property default value description
backgroundAlpha 1 Indicates this cell background alpha transparency value.
backgroundColor #FFFFFF Indicates this cell background color value.
leftIcon none Specifies the URL of image for cell. Image is set in left, horizontal align is center, left align is specified by paddingLeft property.
paddingLeft 1 Indicates the padding from the left border of cell to the first character in the text or icon (if specified). If no icon specified, value is added to textIndent property.
paddingTop 2 Indicates the padding from the top of cell to the text.
textIndent 2 Indicates the indentation from the left margin of cell (or icon) to the first character in the text. If no icon specified, value is added to paddingLeft property.
useHandCursor false A Boolean value that indicates whether the pointing hand (hand cursor) appears when the mouse rolls over this cell.

Buttons CSS Properties

Include all text format properties and additional:

property description
upSkin Image file to use as the skin for the background and border when the mouse is not over the button. Supports Scale9 resizing.
overSkin Image file to use as the skin for the background and border when the mouse is over the button. Supports Scale9 resizing.
downSkin Image file to use as the skin for the background and border when when the mouse button is down the the button. Supports Scale9 resizing.
disabledSkin Image file to use as the skin for the background and border when the button is disabled. Supports Scale9 resizing.
icon Image file to use as the icon. Icon is placed on left. Note: aligning has influence only to text, not icon.

Images and Scale9 Properties

To insert icon or image via CSS properties (e.g. leftIcon) use this syntax:
leftIcon: url:folder/filename.png;

If change image size, for mostly background objects, they will resize.

One can use the Scale9 property for more powerful scaling: image is divided into 9 pieces with the following resize rules:

  • Content in the center region is scaled normally.
  • Content in the corners is not scaled.
  • Content in the top and bottom regions is scaled horizontally only. Content in the left and right regions is scaled vertically only.

Slicing scheme, that is used for button:

upSkin: url:styles/images/btnUpSkin.png, scaleGridTop=16, scaleGridLeft=25, scaleGridBottom=16, scaleGridRight=25;
Property description
property description
url Image file. Flash Pivot Component supports .jpg, .gif, and .png.
scaleGridTop top margin of center region
scaleGridLeft left margin of center region
scaleGridBottom bottom margin of center region
scaleGridRight right margin of center region