Theme Management

The Theme Management screen provides several options to configure themes: create, modify, reset and delete. Custom themes can also be created.

Create a New Theme

1. From the reporter user menu on the main screen, choose Theme Management.

2. From the Select action drop down, choose Create New Theme.

   

3. Enter a Theme Name and optionally any arbitrator to share the theme.

4. Login Options: refer to the Login sample for a preview of changes.

   

   1. For Login color options (Login Background, Login Button Background), click in the color box to open a color picker widget. You can use the sliders, buttons and input boxes to set a color. Verify your color shows in the Hex: input as a hex value and click Select.

      

   2. From Import login image, select the image to show on the login page, above the username and password input boxes.

   3. From Import background image, select the image to show as background on the login page, behind the login box. If not used, then the Login Background color applies.

      If needed, select the Remove Background image check box to remove any imported background image.

   4. From Login Container, select the required color options. The Privacy Security Text box can be used to enter login privacy text:

      

      A Tab Title text value can be entered to show as the browser tab text.

5. Dashboard Options:: refer to the Dashboard sample for a preview of changes.

   

   1. For Dashboard color options (Banner Background, Dashboard Background), click in the color box to open a color picker widget. You can use the sliders, buttons and input boxes to set a color. Verify your color shows in the Hex: input as a hex value and click Select.

      For the dashboard, Theme Color Options are also available for text, Container, Primary Active elements and Containers.

      Click the i icon to open a list of screens affected by a color option, for example, for Dashboard Background:

      

      Additional Arbitrator Configurator colors are also available:

      

   2. Select an image from Import logo image to use as a logo on the banner. The image can be scaled and positioned using Logo Image Ratio and Logo Image Top Padding. An option is also available for a browser tab icon: Import Favicon image.

6. Dashboard Menu Options: the Menu color options group of settings are available to customize the colors of the menu and its text (Menu Background, Menu Text, Menu Hover Text, Menu Button) - using the color pricker widget.

   

7. Widget Options:: refer to the Dashboard sample for a preview of changes. The widget sample is shown on the dashboard.

   

   Set the Widget Header Color, Widget Title Color and Widget Body Color using the color picker widget.

   The Chart Weekend setting can be used to set a different chart color for charts that show daily data over a number of weeks.

   

8. Click Save. When done, the Status shows 100% and a message shows “Theme saved successfully”.

Apply a Theme to the Dashboard

1. Log in on the command line and navigate to the Change Reporter Branding menu.

   

2. At Enter Branding Theme: input box, enter themes/<your-theme-name> and select OK. A console message shows: Putting THEME:themes/<your-theme-name>.

3. If you log in on the reporter now, the theme is shown.

Apply a Theme to the Arbitrator

1. On the selected theme on the Theme Management menu, ensure that the arbitrator is selected in the Arbitrators drop down box and that the theme is saved. (You need to make a change to the theme to save.)

   

2. Click Save. You should now also see an Output: message: “Generating Arbitrator <IP> theme <your-theme-name>”

3. Log in on the command line and navigate to the Change Arbitrator Branding menu.

   

4. At Enter Branding Theme: input box, enter themes/<your-theme-name> and select OK. A console message shows: Putting THEME:themes/<your-theme-name>.

5. If you log in on the arbitrator now, the theme is shown.

Example Custom Theme