This section lists all the custom style properties supported by the latest versin of Klipfolio Dashboard.
[square-brackets] denote the default value.
The properties with this icon are advanced features that are available for the licensed version of Klipfolio
Dashboard. In order to try them in Klipfolio Personal
Dashboard, add
<enterprise>true<enterprise> in
the <setup> block.
Here is an alphabetical list of all CSS properties:
@parse csv / @parse flat / @parse tsv / alertcol / align / asset Upd / base / collabel New / content / definition / description / drilldown / emphasis / fit / format New / formula Upd / height Upd / hidden / hint Upd / indicator Upd / itemcol / key / label / layout / maxcount / maxwidth / name / notelabel / noterow / order / persistence / placement / priority / result New / showresult Upd / type Upd / valign / wrap
Use this directive to instruct Klipfolio Dashboard's XML parser to look for comma separated values instead of XML. Use row { type: item } to specify that each row of data should be treated as an item.
Be sure to place this directive at the top of the style definition.
![[Tip]](/content/live/dev/guide/gfx/admonitions/tip.gif) | Tip |
|---|---|
See our How-To Article for examples and tips on this property. | |
Unlike the rest of the attributes, this is a global directive and must be placed at the top of the style definition.
<style>
@parse flat;
selector {
property_1: value;
property_2: value;
...
}
</style>
This directive instructs the XML parser to preserve all white space as text entities (such as new lines between tags) when extracting text. For example, if you defined a CSS entry to extract the contents of <title>, and the content source had the following entry:
<item>
<title>First contact</title>
...
</item>
Klipfolio Dashboard would normally extract First contact for title. However, if you define @parse flat; at the top of the Klip's CSS, then Klipfolio Dashboard would extract First contact instead.
Use this directive to instruct Klipfolio Dashboard's XML parser to look for tab separated values instead of XML. Use row { type: item } to specify that each row of data should be treated as an item.
Be sure to place this directive at the top of the style definition.
| Tip |
|---|---|
See our How-to Article for examples and tips on this property. | |
Value: [ 0 ] | <positive integer>
Specifies which column the element's content should be displayed in the alert pop-up.
0 - Default. This column is not displayed in the alert pop-up.
<positive integer> - The Nth column in the alert pop-up.
| Tip |
|---|---|
See our How-To Article for examples and tips on this property. | |
Value: [ left ] | middle | right
Sets horizontal alignment of content in a cell unless otherwise predetermined by its type .
left - Default. Horizontally aligns the content in a cell to the left.
middle - Content has the equal amount of white space on its left and right.
right - Horizontally aligns the content in a cell to the right.
Value: "<string>"
Specifies the name of the asset to use for the indicator: asset property.
From Klipfolio Dashboard version 5.3, this property can also be used with indicator: bar to specify colours of the bar graphs.
"<string>" - Name of the asset that is set by the name attribute of the XML parameter <asset> .
| Tip |
|---|---|
See our How-To Article on displaying numbers as images for examples and tips on this property. To find out how, from version 5.3, you can use this parameter to specify colours for indicator: bar, refer to the How-To Article on bar graphs. | |
Value: "<url>"
Used with type: image and type: link to specify the base URL for images and links.
"<url>" - URL to use as the base URL for links.
For example, the <photo> element in the following source contains the filename of the image, but not the URL at which it is located:
...
<item>
<photo>sample_banner.png</photo>
</item>
...
<style>
...
photo {
type: image;
base: "http://www.klipfolio.com/static/klips/klipfolio/";
}
With the use of property base: "http://www.klipfolio.com/static/klips/klipfolio/", you instruct Klipfolio Dashboard to get the image at http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png.
Value: "<string>"
New since version 5.1. Specifies the string to display in the column header if different from label which applies to both the tooltip and column headers.
"<string>" - Desired string to be displayed as the column header label.
Value: cdata | [ firstchild ] | generated | text
cdata - Instructs the Klipfolio Dashboard XML parser not to convert any entities in the enclosed XML.
firstchild - Default. Instructs the Klipfolio Dashboard XML parser to return the first child of the tag. If you are parsing an HTML document, for example, and the first child is a comment, then the field will be blank. Use text instead.
generated - Used with formula: "<mathematical formula>" to indicate to Klipfolio Dashboard that the content for the specified element does not come from a data source.
text - Instructs the Klipfolio Dashboard XML parser to look for the matching end-tag and retrieve the processed data.
Value: "<list of comma-separated element names>" | all
Instructs Klipfolio Dashboard's XML parser to reserve a space for a pre-defined list of elements for the item.
'<list of comma-separated element names>' - List of element names to reserve spaces for. There must be no spaces between the commas.
all - Specifies that spaces should be reserved for all elements.
alert {
type: item;
definition: "sender,summary,date,category,level,url,id,new_property";
}
Note that Klipfolio Dashboard will ignore the values of elements that do not have spaces reserved for them. Therefore, it is important to use definition: all for Klips that use formulas.
| Tip |
|---|---|
See Section 5.4.4, “Reserving Space for Missing Entries” for an example of how to use this property. | |
Value: "<string>"
Textual description of the defined column, to be displayed in the tooltip of its column header.
"<string>" - String that describes a given column.
Value: [ 0 ] | <positive integer>
Specifies that the column for this cell is visible in the specified level of the drilldown.
Add <autodrilldown>true</autodrilldown> to the <setup> block to display each drilldown level rolled up.
0 - Default. Displays this column at all levels of the drilldown. Only type: number columns and the current level's enum will display.
<positive integer> - Specifies the level of the drilldown.
Use with type: enum and itemcol: 1 to display this column and use it as the category that can be further drilled down.
Use with type: number , itemcol: <positive integer> and the formula properties to display the data in the specified column.
| Tip |
|---|---|
See our How-to Articles for examples and tips on how to write a drilldown Klip. | |
Value: [ normal ] | strong
Specifies the weight of the text in the tooltip.
normal - Default. Text in the tooltip is rendered in normal weight.
strong - Text in the tooltip is rendered in bold face.
Value: actual | shrink | stretch | zoom
Specifies how the images ( type: image ) are displayed in the Klip. Used in conjunction with the layout property.
actual - This means the image is not altered in any way. The image will be displayed at actual size, regardless of the Klip's display area.
shrink - This value causes the image to shrink to fit entirely into the Klip's display area, keeping the image's aspect ratio.
stretch - This causes the image to stretch to fill the display area. The image's aspect ratio is NOT maintained by this value, so if you are not careful your images could become very distorted.
zoom - This setting shrinks and crops the image to fit the Klip's display area, maintaining the image's aspect ratio. The image is shrunk to fill the Klip's height or width, whichever is smaller, and then the parts outside the Klip's display area are cropped.
Regardless of which value you use for this property, Klipfolio Dashboard will dynamically resize the images in your Klip as the user changes the size of the Klip's display area.
Replaced hint as of Klipfolio Dashboard 5.1.
Value: "area" New | "currency" | "currency(<currency symbol>)" | "decimal(<positive integer>)" | "endpoints" New | "in(<date format>)" New | "lowpoints" New | "nolocaltime" New | "note(<date format>)" | "out(<date format>)" | "percent" | "period" New | "points" New | "prefix" New | "range(integer1,integer2)" | "refline" New | "sparkline" New | "strong" New | "suffix(<string>)" New
Used in conjunction with type: date , type: graph , or type: number . Specifies how the data values are displayed.
When format values are combined, they must all be on one line, separated by commas with no spaces. There are no restrictions on the order in which they appear when combined.
Values used with type: date :
"in(<date format>)" - New since version 5.1. Specifies the date format to look for in the data source. For example, to display the incoming date, "2009-12-14", as "December 14, 2009" in the Klip, use format: "in(YYYY-MM-DD),out(MMMM DD, YYYY)".
"nolocaltime" - New since version 5.2. Date is not adjusted based on the user's time zone.
"note(<date format>)" - Specifies the format for the date display in the tooltip. For example, to display the incoming date, "2009-12-14", as "December 14, 2009" in the tooltip, use format: "in(YYYY-MM-DD),note(MMMM DD, YYYY)".
"out(<date format>)" - Specifies the format for the date display in the Klip. For example, to display the incoming date, "2009-12-14", as "December 14, 2009" in the Klip, use format: "in(YYYY-MM-DD),out(MMMM DD, YYYY)".
Values used with type: graph :
| Tip |
|---|---|
Starting from version 5.1, the new type: graph gives you the option to display comma-separated values in a column as a sparkline. See our How-To Article on sparklines for examples and tips on the following properties. | |
"area"
- Used with format: sparkline, the
area between the bottom of the graph and sparkline are filled.
"endpoints"
- Used with format: sparkline, each
end of the sparkline is highlighted.
"highpoints"
- Used with format: sparkline, the
point(s) indicating the highest value(s) is highlighted.
"lowpoints"
- Used with format: sparkline, the
point(s) indicating the lowest value(s) is highlighted.
"period(<integer1>,<integer2>[,<integer3>,<integer4>,...])"
- Used with format: sparkline, a
band spanning the specified start and end period values is displayed
vertically behind the graph as a reference. Multiple bands may be displayed
by specifying additional sets of start and end periods.
"points"
- The values of the cell are displayed as points. May
be used with format: sparkline to highlight the values in
the line.
"range(<integer1>,<integer2>)"
- When used with format: sparkline,
the bottom edge of the graph corresponds with integer1
and its top edge corresponds with integer2.
"refband(<integer1>,<integer2>)"
- Used with format: sparkline, a
band spanning the specified values is displayed horizontally behind the
graph as a reference.
"refline(<positive integer>)"
- Used with format: sparkline, a
line is drawn horizontally across the graph at the specified value as a
reference.
"sparkline"
- Displays the values of the cell as a
sparkline.
"strong"
- Used with format: points, all
points representing values in the cell are highlighted. Useful when combined
with format: sparkline to accentuate the values in the
line.
Values used with type: number :
"currency" - Displays the value as currency with a dollar ($) symbol preceding the value.
"currency(<currency symbol>)" - Displays the value as currency with the specified currency symbol. The currency symbol must be a single character (e.g. £, €, ¥). Your Klip file should be saved in the encoding that supports the character (e.g. UTF-8).
"decimal(<positive integer>)" - Displays the value with specified number of decimal places. The remaining decimal point values, if available, are rounded. For example, for "59.497", using format: "decimal(1)" will display the value as "59.5"; using format: "decimal(2)" will display it as "59.50".
"percent" - Displays the value followed by the % symbol. For example, the value "57.6" using format: "percent" is displayed as "58%". To display it as "57.6%", use format: "percent, decimal(1)" to add one decimal point.
"prefix(<string>)" - New since version 5.1. Displays the value preceded by the specified string.
"range(<integer1>,<integer2>)"
- When used with
indicator: bar
to display a value as a bar graph, the left edge of the bar
corresponds with integer1 and its right edge corresponds
with integer2.
"suffix(<string>)" - New since version 5.1. Displays the value followed by the specified string.
| Tip |
|---|---|
See our How-To Articles for examples and tips on the various ways to display numbers using the above properties. | |
Value: average | "<mathematical formula>" | sum
Adds a footer to the column in which this parameter is specified.
The value sum or average can be used to display the sum or the average of all values from that column.
Use your own mathematical formula when you want to display its result as items in the column and in its footer.
Note: the cell must be type: number to use this property.
average - Displays the average of all values in the specified column.
"<mathematical formula>" - Displays the result of a calculation according to the specified mathematical formula. Use element names in the formula, and use content: generated to indicate to Klipfolio Dashboard that the content is not coming from a data source but is generated with the formula.
sum - Displays the sum of all values in the specified column.
To use a different formula for the column footer, use the result property.
To display no result in the column footer, use showresult: none .
| Tip |
|---|---|
See our How-To Articles on displaying numeric data for examples and tips on this property. | |
Value: [ 1 ] | 2 | 3
Number of lines (1.0em) to fit the height of the content in the column. Can be applied to type: image, type: number or type: text. Klipfolio Dashboard will scale the width proportionally.
1 - Default. Content in the cell will have the height of 1 line.
2 - Content in the cell will have the height of 2 lines.
3 - Content in the cell will have the height of 3 lines.
Value: [ false ] | true
Sets the visibility of a column (itemcol).
false - Default. Column is not hidden.
true - Column is hidden. It is used to include columns in formula calculations without displaying them.
| Tip |
|---|---|
See our How-To Article on hiding columns for examples and tips on this property. | |
Deprecated since v5.1. Replaced by format .
Value: asset | bar
Used with type: number , displays a numeric value as a graphic indicator.
asset - Used in conjunction with the XML parameter <asset> , specifies the use of an image to represent the numeric value.
bar - Specifies the use of a bar graph to represent the numeric value.
May be used with format: range to specify the range of the bar graph.
Since version 5.3, may be used with the XML parameter <assets> to specify the colour of the bar graph.
The placement property may be used to determine the number and indicator placement.
The indicator is also used in the column footer (when applicable).
| Tip |
|---|---|
See our How-To Article on displaying numbers as images using indicator: asset for examples and tips. To find out how you can use this parameter to specify colours for indicator: bar, refer to the How-To Article on bar graphs. | |
Value: [ 0 ] | <positive integer>
Specifies which column the element's content is displayed in the Klip.
0 - Default. This column is not displayed in the Klip.
<positive integer> - The Nth column in a Klip.
Use itemcol: 1 for all selectors to position each element in the next available column.
| Tip |
|---|---|
See Section 3.3.2, “Specify the Data to Extract into the Columns of the Klip” for an example. | |
Value: exclude | [ include ] | override
exclude - The data in this column is not to be used for item matching.
include - Default. The data in this column is to be used for item matching.
override - It is similar to include but differs from it in that it overrides all other matching.
It is highly recommended that key: override be used wherever possible, as this ensures that only the latest content of the specified key field is loaded, even if incoming data has matching characters. This prevents duplicate items from being displayed in your Klip. If you don't specify any matching with the key property, then Klipfolio Dashboard will always add new items to the list.
| Tip |
|---|---|
See our How-To Articles for examples and tips on this property. | |
Value: "<string>"
Specifies the string to display as the label for the note row in a tooltip and for the column header in a Klip. If the Klip does not specify a label, the XML element name becomes the default label.
"<string>" - Desired string to be displayed as note and column header labels.
Value: card | frame | [ normal ]
Sets the layout of each Klip item in the specified format.
card - The first one or more columns of types image, number, or text with height: 2 or height: 3 are placed in individual columns consecutively, as specified by the itemcol property, until a column using height: 1 (default) is encountered. Then, 3 subsequent columns are placed in rows 1, 2 and 3, respectively, in the next column. There can be any number of columns starting at itemcol: 1 as long as the columns continue to use height: 2 or height: 3. You may have more than 3 columns that use height: 1; however, content after column 3 is not displayed.
frame - Instructs Klipfolio Dashboard to treat the Klip as having an image that fills the entire display area of the Klip without any text, just like an image in a picture frame.
normal - Default. Columns are placed in the order specified by the itemcol property.
| Tip |
|---|---|
See our How-To Article on displaying images using the frame layout. | |
Value: <positive integer>
Specifies the maximum number of elements to match when extracting repeating blocks.
<positive integer> - The number of elements you want to match.
| Tip |
|---|---|
See Section 5.4.5, “Extracting Repeating Elements” for details. | |
Value: <positive integer>
Sets the maximum width for a column of data in a Klip. The width is measured in 1/2 'grid units', where a 'grid unit' is defined as the current height of two lines in a Klip.
<positive integer> - The number of grid units.
Value: "<string>"
Specifies an addressable name for the property for reference in a definition list or getData(), setData(), or hasData(). If you don't specify a <name> property, Klipfolio Dashboard uses the match criteria for the CSS property.
"<string>" - Desired string to use as a name.
Example:
In the following case, your JavaScript could access the value for summary in the first item of the Klip with Items[0].getData( "summary" ):
summary {
itemcol: 3;
}
Sometimes, however, the matching criterion is quite specific and an element name is not available to be referred to, as in this case:
td[align="right"] + td[align="right"] tt {
itemcol: 4;
noterow: 4;
name: 'total';
label: 'Total:';
}By using name: 'total', your JavaScript can access the value for total in the first item of the Klip with Items[0].getData( "total" ).
Value: false | [ true ]
Specifies whether this cell displays its label in the tooltip.
false - Cell's label is not displayed in its tooltip.
true - Default. Cell's label is displayed in its tooltip.
Value: [ 0 ] | <positive integer>
Specifies which row the content of the cell should be displayed in the tooltip.
0 - Default. The cell is not displayed in any rows in the tooltip.
<positive integer> - The Nth row in the tooltip in which to display the content of the cell.
Value: <positive integer>
When the data source may contain two XML elements for the same value, use order to instruct Klipfolio Dashboard which takes priority if they both appear.
<positive integer> - The number indicating the priority. 1 has the highest priority.
For example, your source may contain both an <link> and <guid> element:
<item>
<link>http://...</link>
<guid>http://...</link>
</item>
If both elements occur and you want the content of <guid> to take priority over <link>, use the order property to tell Klipfolio Dashboard to check for <guid> first.
<style>
item {
type: item;
definition: "url";
}
guid {
type: link;
order: 1;
key: override;
name: "url" ;
}
link {
type: link;
order: 2;
name: "url";
}
</style>
Note the use of name to map the values of <guid> and <link> to the property url.
Value: dashboard | [ normal ]
Specifies the behaviour of items in a Klip.
dashboard - Default behaviours listed below are turned off.
normal - Default. The following default behaviours are respected:
User can remove items manually
Klipfolio Dashboard automatically removes items at an interval set by the user through Item Management
Visited items are dimmed
| Tip |
|---|---|
See our How-To Article on dashboard Klips for examples and tips on this property. | |
Value: [ full ] | left | none | right
Used with the indicator properties, specifies the position of the indicator in relation to the number.
full - Default. Displays an indicator only.
left - Displays an indicator to the left of the number.
none - Displays no indicator.
right - Displays an indicator to the right of the number.
Value: [ 0 ] | <positive integer>
Specifies the priority in which the column should remain visible when the Klip is resized.
0 - Default. Has low priority.
<positive integer> - Priority level for the column (1 is highest; 2 is lower than 1; 3 is lower than 2, ...)
| Tip |
|---|---|
See Section 5.4.3, “Setting Column Priority” for an example. | |
Value: average | "<mathematical formula>" | sum
New since version 5.2.1. Applies the specified mathematical formula to the footer of the column in which the formula property is applied. Used when you want to apply to the column footer a formula that is different from the one that is applied to the items in the column.
Note: the cell must be type: number and use the formula property to use this property.
average - Displays the average of all values in the column's footer.
"<mathematical formula>" - Displays the result of a calculation according to the specified mathematical formula in the column's footer. Use element names in your formula.
sum - Displays the sum of all values in the column's footer.
Value: [ auto ] New | full New | indicator New | none New | number New
Values updated in version 5.1. Used in conjunction with the formula property, specifies the visibility of the result in the footer of a given column.
auto - Default. Settings ( indicator and/or number) used above the footer are used in the footer of the column.
false - Deprecated as of v5.1, replaced by none .
full - Both the indicator and the numerical value are displayed in the footer of the column.
indicator - Only the indicator is displayed in the footer of the column.
none - The result is not displayed in the column footer of the given column.
number - Only the numerical value is displayed in the footer of the column.
true - Deprecated as of v5.1. Replaced by auto .
Value: date | enum | graph New | image | item | link | number | pubdate | scratch | [ text ]
Tells Klipfolio Dashboard to treat the incoming data as a specified type. Default value is text.
date - Klipfolio Dashboard treats the values as a date and displays it in date format. Data is sorted as dates rather than as regular strings.
enum - Klipfolio Dashboard stores the data as an enumeration if the value of the matched XML element in repeating blocks is the same. It is most useful for drilldown , as it organizes the data in a way that increases the performance of the drilldown operation.
graph - New since version 5.1. Used with format: points and/or format: sparkline , the content of the matched XML element is displayed as a graph. Refer to the format property for various options for displaying graphs.
image - Klipfolio Dashboard treats the content of the matched XML element as a URL of an image.
item - The content of the matched XML element as being the start of an item.
link - Klipfolio Dashboard treats the content of the matched XML element as being the clickable URL for the item (first one found counts).
number - Klipfolio Dashboard treats the value as a number. Klipfolio Dashboard will sort the data as numbers rather than as regular strings. Numbers in a column are right-aligned. Refer to the asset , format , and indicator propertiesfor various options for displaying numbers.
pubdate - Klipfolio Dashboard treats the content of the matched XML element as being a publication date.
scratch - Makes the resulting matched structure available through Engines.Data.getScratch ("name") where "name" is the name property assigned to this declaration
text - Klipfolio Dashboard treats the content of the matched XML element as being textual.
Value: bottom | middle | [ top ]
Vertical alignment within calculated cell's height.
bottom - Content is aligned to the bottom of the cell.
middle - Content is has the equal amount of space above and below it.
top - Default. Content is aligned to the top of the cell.