You can modify the styling, logos, and bookmark icon of the VMware theme on the VMware Integrated OpenStack dashboard.

Your custom theme can include the following items:
  • _styles.scss: additional styles
  • _variables.scss: color code definitions
  • favicon.ico: bookmark icon of the VMware Integrated OpenStack dashboard
  • logo.svg: graphic displayed in the top-left corner of each page
  • logo-splash.svg: graphic displayed on the login page

Prerequisites

  • Custom logos should be 216 pixels long by 35 pixels wide. Graphics with different dimensions might not be displayed properly.
  • Custom logo files must be in SVG format.

Procedure

  1. Create a directory named themes that includes your custom theme files.

    Use the following directory structure:

    • The _styles.scss and _variables.scss files must be in the themes directory.
    • The favicon.ico, logo.svg, and logo-splash.svg files must be in the themes/img directory.

    It is not necessary to include all five files in your theme. For example, you can choose to include custom logos only and use the default styles.

  2. Archive the themes directory into a TAR file named themes.tar.
    Note: The TAR filename must be themes.tar.
  3. In vSphere, create a content library and upload your themes.tar file to it.

    For information about content libraries, see Using Content Libraries.

  4. Log in to the Integrated OpenStack Manager web interface as the admin user.
  5. In OpenStack Deployment, click the name of your deployment and open the Manage tab.
  6. On the Settings tab, select Horizon Theme and click Enable.
  7. Enter the name of the content library containing your themes.tar file and click OK.

Results

The VMware Integrated OpenStack dashboard service restarts and loads your custom theme files. After the service becomes available, you can log in and switch to the VMware theme to display your customizations.

What to do next

On the Horizon Theme page, you can click Edit to specify a different content library or Disable to stop using your custom theme.

Note: After you edit or disable the custom theme, clear the browser cache so that the updated theme can be displayed.