> Essential > CommCell Configuration > Customization

Branding the Command Center

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

  • Requirements for the favicon:

    • JPG, JPEG, or PNG format

    • 16 x 16 pixels

    • Maximum file size of 50 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:

    • Login and banner background: The background color of the login screen.

      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.

    • Header background: The background color of the header bar.

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

    • Navigation bar background: The background color of the navigation pane.

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

    • Page header text: The color of the page header.

    • Action button background: The color of the action buttons such as button, toggle, checkbox, and options for listed entities.

    • Action button text: The text color for the action button.

    • Links: The color of the links.

    • Icon: The color of the icons.

  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. 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 theme customizations on the Command Center interface will take 10 minutes for the changes to take effect.

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

Loading...