.. _theme-management:

Theme Management
-------------------

.. _SP63|Ability to create new custom themes with the new Theme Management screen.:
.. _SP65|Theme Management enhancements - login background image, widget header, background, menu colour,tab text, text colours for Widget header, login and menu.:
.. _SP66|Custom favicon can now be imported.:
.. _SP66|Customizable login privacy text.:
.. _SP66|More color options added for dashboards and widgets.:
.. _SP66|More color options added for arbitrator.:
.. _SP25|Arbitrator SP25 - More color options added for arbitrator.:


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**.
#. From the **Select action** drop down, choose Create New Theme.

   .. image:: /src/images/VAA-theme-mgt0.png

3. Enter a **Theme Name** and optionally any arbitrator to share the theme.
#. **Login Options**: refer to the **Login sample** for a preview of changes.

   .. image:: /src/images/VAA-theme-mgt1.png

   
   a. 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**.
     
      |VAA-theme-mgt-color-picker|
     
     
   b. From **Import login image**, select the image to show on the login page, above
      the username and password input boxes.
   #. 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.
   #. From **Login Container**, select the required color options.
      The **Privacy Security Text** box can be used to enter login privacy text:

      .. image:: /src/images/insights-theme-login-container.png
     
      A **Tab Title** text value can be entered to show as the browser tab text.
#. **Dashboard Options**:: refer to the **Dashboard sample** for a preview of changes.

   .. image:: /src/images/VAA-theme-mgt2.png

   a. 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.

      .. image:: /src/images/theme-color-options-SP66.png

      Additional Arbitrator Configurator colors are also available:

      .. image:: /src/images/theme-arb-color-options-SP66.png


   #. 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**.
#. **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.

   .. image:: /src/images/VAA-theme-mgt3.png

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

   .. image:: /src/images/VAA-theme-mgt4.png

   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.
   
   .. image:: /src/images/VAA-weekend-color.png
   
#. 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.
   
   |VAA-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>``.
#. 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.)

   |VAA-theme-mgt-arbitrator|

2. Click **Save**. You should now also see an **Output:** message: "Generating Arbitrator <IP> theme <your-theme-name>"
#. Log in on the command line and navigate to the **Change Arbitrator Branding** menu.

   |VAA-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>``.
#. If you log in on the arbitrator now, the theme is shown.


Example Custom Theme
.....................


|VAA-dashb-ReleaseNotes-SP63-1|

.. |VAA-theme-mgt-color-picker| image:: /src/images/VAA-theme-mgt-color-picker.png
.. |VAA-change-reporter-branding-menu| image:: /src/images/VAA-change-reporter-branding-menu.png
.. |VAA-theme-mgt-arbitrator| image:: /src/images/VAA-theme-mgt-arbitrator.png
.. |VAA-change-arbitrator-branding-menu| image:: /src/images/VAA-change-arbitrator-branding-menu.png
.. |VAA-dashb-ReleaseNotes-SP63-1| image:: /src/images/VAA-dashb-ReleaseNotes-SP63-1.png