Version

Custom Themes

This section is about developing ReportPlus themes to style your dashboards. If you wish to learn more about existing styles, review the Dashboard Styling topic in the User Guide.

Custom themes for ReportPlus are a collection of color and style attributes that specify the look and feel for a dashboard; they include dashboard and widget background colors, outline colors, font types, and other specifications. They are defined in the XML Configuration File within the DashboardTheming feature.

<key>DashboardTheming</key>
  <dict>
  <key>Enabled</key>
  <true/>
  <key>Settings</key>
  <dict>
    <key>ThemesList</key>
    <string></string>
    <key>DefaultTheme</key>
    <string></string>
    <key>Themes</key>
      <array>
        <dict>
          ....
        </dict>
      </array>
  • Enabled: enables/disables the selection of themes when users are creating a dashboard. By default, this is set to <true/>

  • ThemesList: the list of themes that a user will see when opening the Themes menu. If left empty, users will see all of ReportPlus' pre-defined themes. By default, ThemesList will be populated will all ReportPlus themes.

  • DefaultTheme: the default theme for all dashboards. If left empty, the default theme will be The Blues.

  • Themes: the list of custom themes that are not part of the standard complement. It is an array of dictionaries, with each dictionary representing a different custom theme. Any number of custom themes can be added.

Creating a new Custom Theme

In order to create a new custom theme, you will need to:

You download the custom theme used in this guide here.

Creating a new dictionary for your Theme

The first step for you to create a custom theme is to add a new dictionary to the Themes array under DashboardTheming. This will allow you to define your theme’s style settings. For the purposes of this example, we will name the Theme "Nautilus".

<key>DashboardTheming</key>
  <dict>
  <key>Enabled</key>
  <true/>
  <key>Settings</key>
  <dict>
    <key>ThemesList</key>
    <string></string>
    <key>DefaultTheme</key>
    <string></string>
    <key>Themes</key>
      <array>
        <dict>
          <key>Name</key>
          <string>Nautilus</string>
          ...
        </dict>
      </array>

Defining your Theme Colors

All ReportPlus themes have a basic 8-color palette, which will be used by the application to style your widgets; these are what users see as start colors when editing a widget. You can, however, include more than 8 colors in your theme.

The colors below are the ones you can modify within the theme:

<key>Themes</key>
  <array>
    <dict>
      <key>Name</key>
      <string>Nautilus</string>
      <key>Palette</key>
        <array>
        <string>#8FEEB9</string>
        <string>#A4F3FF</string>
        <string>#98B6EC</string>
        <string>#6992DC</string>
        <string>#32D37A</string>
        <string>#0B9CAF</string>
        <string>#4A79CC</string>
        <string>#174187</string>
        </array>
      <key>PaletteCF</key>
      <dict>
        <key>Red</key>
        <string>#FF005A</string>
        <key>Yellow</key>
        <string>#FFB91D</string>
        <key>Green</key>
        <string>#3FAE3F</string>
      </dict>
      <key>DashboardBackgroundColor</key>
      <string>#EAEEF4</string>
      <key>WidgetBackgroundColor</key>
      <string>#FFFFFF</string>
      <key>ForegroundColor</key>
      <string>#174187</string>
      <key>OutlineColor</key>
      <string>#646464</string>
      <key>GridAltRowColor</key>
      <string>#E6E6E6</string>
      <key>SingleRowSideBarColor</key>
      <string>#0B9CAF</string>
      <key>SingleRowBackgroundColor</key>
      <string>#8DDCE8</string>
      ...
    </dict>
  </array>
SETTING DESCRIPTION SAMPLE COLOR SAMPLE DASHBOARD

Palette

Defines colors associated to a theme Users can see them when using charts in the Visualization Settings section under Start Color.

Range of colors (#8FEEB9, #A4F3FF, #98B6EC, #6992DC, #32D37A, #0B9CAF, #4A79CC, #174187)

StartColors_Desktop

PaletteCF

Defines colors for conditional formatting. The settings must be named Red, Yellow and Green, but any color can be assigned to them.

Red (#FF005A), Yellow (#FFB91D), Green (#3FAE3F)

ConditionalFormatting_Desktop

DashboardBackgroundColor

The background color for the dashboard.

Solitude (#EAEEF4)

DashboardBackgroundColor_Desktop

WidgetBackgroundColor

The background color for widgets in the dashboard.

White (#FFFFFF)

WidgetBackgroundColor_Desktop

ForegroundColor

The color of the text, the overflow button, and all other dashboard buttons. It does not change the button colors in the top or bottom bar.

Dark Cerulean (#174187)

ForegroundColor_Desktop

OutlineColor

The outline color for all axes in charts.

Dim Gray (#646464)

OutlineColors_Desktop

GridAltRowColor

The alternate color for grid rows. All other rows are colored with the WidgetBackground color.

Whisper (#E6E6E6)

GridAltRowColor_Desktop

SingleRowSideBarColor

For Text View visualizations, the color of the left side of the bar.

Bondi Blue (#0B9CAF)

SingleRowSideBarColor_Desktop

SingleRowBackgroundColor

For Text View visualizations, the color of the bar.

Anakiwa(#8DDCE8)

SingleRowSideBarColor_Desktop

You can define these colors in Palette.

Defining your Font Style and Size

Custom themes also allow you to define fonts for different sections of the dashboard editor, their size and style. You can find these settings in DashboardTheming immediately after the color settings.

<key>Themes</key>
  <array>
    <dict>
      <key>Name</key>
      <string>Nautilus</string>
      ...
        <key>ValueFontFile</key>
        <string>OpenSans-Bold</string>
        <key>CopyFontFile</key>
        <string>OpenSans-Bold</string>
        <key>CopyBoldFontFile</key>
        <string>OpenSans-Bold</string>
        <key>ValueFontSizeL</key>
        <integer>142</integer>
        <key>ValueFontSizeM</key>
        <integer>50</integer>
        <key>ValueFontSizeS</key>
        <integer>24</integer>
        <key>HeaderFontSize</key>
        <integer>14</integer>
        <key>CopyFontSize</key>
        <integer>11</integer>
...
</dict>
</array>
  • ValueFontFile: the font used for key-value pairs, such as the ones in Text visualizations.

  • CopyFontFile: the font for widget titles, chart labels and grid visualization rows.

  • CopyBoldFontFile: the font used for visualization headers. This applies, for example, to Grid and Tree Map headers.

  • ValueFontSizeL: defines the size for the Large Font size. This setting applies to Grid visualizations; users can choose font sizes through Style Grid Settings in the UI.

  • ValueFontSizeM: defines the size for the Medium Font size. This setting applies to Grid visualizations; users can choose font sizes through Style Grid Settings in the UI.

  • ValueFontSizeS: defines the size for the Small Font Size. This setting applies to Grid visualizations; users can choose font sizes through Style Grid Settings in the UI.

  • HeaderFontSize: font size for widget titles.

  • CopyFontSize: font size for all other texts in widgets, including labels.

The available fonts in ReportPlus are the ones included in the following list; please note that the names of the fonts are case-sensitive.

  • Arvo and Arvo-Bold.

  • Crescent-Regular

  • DroidSerif

  • Futurist

  • Georgia and Georgia-Bold

  • GeosansLight

  • MyriadPro-Regular and MyriadPro-Bold

  • NewCicle-Fina

  • OpenSans, OpenSans-Bold, OpenSans-Light, OpenSans-Semibold

  • PTSans-Bold

Configuring other style elements

Custom themes also allow you to define fonts for different sections of the dashboard editor, their size and style. You can find these settings in DashboardTheming immediately after the color settings.

<key>Themes</key>
  <array>
    <dict>
      <key>Name</key>
      <string>Nautilus</string>
        ...
        <key>DashboardPadding</key>
        <integer>10</integer>
        <key>AndroidDashboardPadding</key>
        <integer>15</integer>
        <key>WidgetPadding</key>
        <integer>20</integer>
        <key>WidgetMargin</key>
        <integer>3</integer>
        <key>WidgetShadowSize</key>
        <integer>0</integer>
        ...
    </dict>
  </array>
  • DashboardPadding: defines the padding for Desktop and iOS dashboards.

  • AndroidDashboardPadding: defines the padding for Android dashboards.

  • WidgetPadding: defines the padding for dashboard widgets.

  • WidgetMargin: defines the margin (space) between each widget.

  • WidgetShadowSize: the size of the shadow for any widget.

The dashboard below has been styled with the following values:

  • DashboardPadding: 4

  • WidgetPadding: 10

  • WidgetMargin: 5

  • WidgetShadowSize: 4

CustomThemeDashboardStyle_Desktop

Adding your Theme to ThemesList

Once you have completely configured your dashboard theme, add it to ThemesList for your users to be able to select it.

<key>DashboardTheming</key>
  <dict>
  <key>Enabled</key>
  <true/>
  <key>Settings</key>
  <dict>
    <key>ThemesList</key>
    <string>The Blues,Admirable,Coral Reef,Nautilus</string>
    ...
DisplayedThemes_Desktop
Note
NOTE

Keep in mind that if you only add only your custom theme to ThemesList, users will only see that theme. If you want users to see any other themes, you will need to add them as well.

Modifying DefaultTheme

You can easily set up your custom theme as the default theme for ReportPlus users who wish to create new dashboards by modifying the DefaultTheme in DashboardTheming.

<key>DashboardTheming</key>
  <dict>
  <key>Enabled</key>
  <true/>
  <key>Settings</key>
  <dict>
    <key>ThemesList</key>
    <string>The Blues,Admirable,Coral Reef,Nautilus</string>
    <key>DefaultTheme</key>
	<string>Nautilus</string>
	<key>Themes</key>
	<array>
          <dict>
          	<key>Name</key>
          	<string>Nautilus</string>
          	...
          </dict>
         <array>