Custom Dashboard Themes

At some point, you might be interested in creating a custom theme that incorporates your organization's image and branding. A few files are used to generate the ultimate look and feel of a dashboard: theme.skel, theme.bnfxml, theme.css, and pcxml.css. For a description of each of these files, see Theme Files. Regardless of your plans for creating or modifying themes, you should become familiar with these files, their structure and content, before starting to create or modify themes.

Creating and Modifying Themes

While it is possible to create a new theme from scratch if you are familiar with Cascading Style Sheets (CSS) and graphics, the easiest way to create a theme is to start with an existing theme and use it as a template. Theme files are stored in <product_root>\Server\doc_root\themes.

Warning: Because CenterView™ Builder updates XML files in real time, you should always work from a copy of the theme files. That way, you won't lose the original theme configuration.

To modify a theme

  1. Open the theme editor by selecting File > Open Theme.

    The theme editor closes any open projects, and you are prompted to save any changes. The theme editor displays a simple default project so you can see how changes to theme settings affect a project's look and feel.

  2. In the Object Browser, browse to and select those portions of the theme that you want to modify.

    Editing themes is very similar to editing a dashboard project, except that the object structure is fixed. You cannot add objects to a theme.

  3. In Object Properties, modify the object attributes to change the theme look and feel.

    Any changes you make in Object Properties are immediately written out to the theme.bnfxml. You can use the File View tab to see how the actual XML looks in the theme.bnfxml.

  4. When finished, save the updated theme.bnfxml and close the theme editor.

Modifying pcxml.css

The pcxml.css file is not modifiable by the theme editor. It is used to set common, theme-type attributes for graph and chart objects in a Corda® Image that is used in a dashboard. There is an attribute control for each object type that responds to the pcxml.css settings:

You can modify pcxml.css using any text editor.

Chart

Sets the background attributes for all elements of a Corda Image, including graphs and maps, even though it uses the keyword Chart. The syntax of the Chart command is as follows:

Chart {color: #hex-value;
gradient-color: #hex-value;
gradient-type: outsidein | insideout | leftright | rightleft | topbottom | bottomtop | doubleleftright | doublerightleft | doubletopbottom | doublebottomtop | radial | elliptical;}

The color attribute defines the main background color for the Corda Image. The gradient-color attribute specifies the secondary background color used for a gradient background. The gradient-type attribute specifies the type of background color gradient (fade) to apply.

Graph

Sets the color theme used for graph bars, pie wedges, lines, etc. You can define a graphic theme by using a pre-defined color palette or overriding one or more theme colors manually. For more information on graph color themes, see Creating New Color Themes in the Corda Builder™ User Guide.

The syntax of the Graph command when using a color theme is as follows:

Graph {color-palette: <theme name>;}

The color-palette attribute specifies the appropriate Corda Image color theme. Currently supported values include the following: Default, Business, Business2, Color Blind Safe, Desert, Earth, Everglades, Green Monochromatic, Gray Scale, Harvest, Nautical1, Nautical2, Nautical3, Ocean, Olive Monochromatic, Pastel, Protan-Deutan, Rainbow, SeaSide, Southwest, Spring, Standard 16, Standard Translucent, Subdued, Sunset, Tan Monochromatic, The 70s, Wetlands, and Winter. The value you select overrides the theme definition used when the Corda Image was created, thereby updating the Corda Image color palette.

The syntax of the Graph command when overriding colors manually is as follows:

Graph {Color1:#hex-value;
Color2:#hex-value;
Color3:#hex-value;
Color4:#hex-value;
Color5:#hex-value;
Color6:#hex-value;
Color7:#hex-value;
Color8:#hex-value;
Color9:#hex-value;
Color10:#hex-value;
Color11:#hex-value;
Color12:#hex-value;
Color13:#hex-value;
Color14:#hex-value;
Color15:#hex-value;
Color16:#hex-value;}

Each color attribute overrides the corresponding color in the color palette currently applied to the Corda Image. Override one or more colors to modify the graph's color palette. The example below shows a pcxml.css .

Sample pcxml.css

Chart {color: #ededed;

gradient-color: #cbcbcb;

gradient-type: TopBottom;}

Graph {Color1:#990000;

Color2:#3300CC;

Color3:#00CC99;

Color4:#CC0099;

Color5:#CC6633;

Color6:#66CCCC;

Color7:#CC3300;

Color8:#CC9900;

Color9:#99CC00;

Color10:#0099CC;

Color11:#33CC66;

Color12:#9900CC;

Color13:#66FFFF;

Color14:#996600;

Color15:#990066;

Color16:#33CC00;}

 

You can also define custom CSS files specifically for use when printing KPIs and pages. These files use syntax identical to the pcxml.css file and are named kpiprintpcxml.css and pageprintpcxml.css.

Modifying Banners

It is often useful to be able to modify a default banner configuration to suit your dashboard's needs. This involves working with the dashboard's theme files. For more information about theme files, see Theme Files.

To modify banner height

  1. In CenterView Builder, select File > Open Theme.

    Browse to and select the theme.bnfxml file in the folder of the theme that contains the banner you want to modify.

  2. In the Object Browser, expand the banner-layouts object.

  3. Select the specific banner-layout object for which you want to specify a new height.

    There are three different banner-layout objects, and each is independently configurable:

    Note: More information about these objects is available in the Corda CenterView Object Reference.

  4. In Object Properties, specify the desired banner height (in pixels) in the height attribute.

To modify banner layout

  1. In CenterView Builder, select File > Open Theme.

    Browse to and select the theme.bnfxml file in the folder of the theme that contains the banner you want to modify.

  2. In the Object Browser, expand the banner-layouts object.

  3. Select the specific banner-layout object for which you want to specify a new height.

    There are three different banner-layout objects, and each is independently configurable:

    Note: More information about these objects is available in the Corda CenterView Object Reference.

  4. Modify the layout object, as well as and the cell objects it contains, to achieve the desired banner look.

    These layout and cell objects are identical to those used to organize dashboard pages and KPIs. For more information, see Page Organization.

  5. In each cell object, specify the banner content you want to appear in that cell.

    Typically, dashboards include pre-defined banner content (such as logos, dates, titles, etc.) that you can insert in the banner cell with a use object.

    Note: More information about these objects is available in the Corda CenterView Object Reference.

To add a banner background image

If desired, you can specify a background image for the dashboard's banner area by doing the following:

  1. Using a text editor, open the theme.skel for the desired theme.

    By default, this file is in <product_root>\Server\doc_root\themes\<theme_name>, where <theme_name> is the folder in which the theme files are stored.

  2. Locate the body.banner entry in the file and insert the desired path to the banner image. For example:

    body.banner {
    background: url(images/yournewbackground.jpg);
    }

  3. Save the modified theme.skel.

  4. In CenterView Builder, select File > Open Theme.

    Browse to and select the theme.bnfxml file in the folder of the theme that contains the banner you want to modify.

  5. Make any change to the theme settings, and then save the theme.

    The only purpose in doing this is to get CenterView Builder to regenerate the theme support files and regenerate theme.css. You can simply make a change, then undo the change and save the theme to accomplish this.

    Warning: Never edit the theme.css file directly or your changes are overwritten the next time CenterView Builder regenerates the theme.