Branding the Command Center

Updated

You can customize the way the Command Center looks. For example, you can add a logo and change the color of the interface.

These custom changes are also applied to the Web Console and all mobile app devices that access the same web service.

Note: To view the custom changes, mobile app users must log out and log on to the app again.

Before You Begin

Your logos must meet the following requirements:

  • Requirements for the logo on the top left corner of the screen (the header bar):

    • JPG, JPEG, PNG or GIF format

    • 100 x 50 pixels

    • Maximum file size of 50 KB

  • Requirements for the logo on the login screen:

    • JPG, JPEG, PNG or GIF format

    • 280 x 100 pixels

    • Maximum file size of 250 KB

  • Requirements for the background file:

    • JPG, JPEG, PNG or GIF format

    • 1600 x 900 pixels

    • Maximum file size of 750 KB

Procedure

  1. From the navigation pane, go to Manage > Customization > Theme.

    The Theme page appears.

  2. To change the color of the interface, in the Color Settings section, either type the hex color code or select a color from the color box.

    You can change the color for the following areas on the interface:

    • Primary: The background color of the login screen and the navigation pane, and the color of the primary action buttons.

      Note: You can override the background color setting for the navigation pane, by selecting a different color in the Navigation field. In addition, you can override the background color setting for the login screen, by selecting a background image in the Login page section.

    • Secondary: The color of the links and the navigation breadcrumb.

    • Icon: The color of the icons.

    • Header: The background color of the header bar.

    • Header text: The color of text in the header bar drop-down lists.

    • Navigation: The background color of the navigation pane.

    • Navigation text: The color of the text on the navigation pane.

  3. To add a logo on the top left corner of the Command Center interface, in the Header bar section, under Logo, click Select file, and then select a file.

    The Use the same logo on the login page toggle key appears.

  4. Optional: To use the same logo on the Command Center login page, move the Use the same logo on the login page toggle key to the right.

  5. To customize the Command Center interface with your own Cascading Style Sheets (CSS) file, in the Custom CSS section, in the Custom CSS box, enter the CSS script that you want to use.

  6. To customize the login screen, in the Login page section, perform the following steps:

    • To add a logo: Under Logo, click Select file, and then select an image file.

    • To add a new background image: Under Background, click Select file, and select an image file.

    • To add a warning login banner: In the Warning login banner box, enter the warning text.

  7. Click Save.

    The new custom settings appear on the Command Center interface after five minutes.

  8. If the Command Center interface does not update after five minutes, restart the Tomcat services on the Web Console computer.