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

You can upload a custom logo, style sheet, or bookmark icon to the OpenStack Management Server and configure it to display as your theme.

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 or PNG format.

Procedure

  1. Log in to the OpenStack Management Server as viouser.
  2. Create the /opt/vmware/vio/custom/horizon directory and transfer the desired theme files to this directory.
  3. If your deployment is not using a custom.yml file, copy the template custom.yml file to the /opt/vmware/vio/custom directory. 
    sudo mkdir -p /opt/vmware/vio/custom
sudo cp /var/lib/vio/ansible/custom/custom.yml.sample /opt/vmware/vio/custom/custom.yml
  4. Open the /opt/vmware/vio/custom/custom.yml file in a text editor.
  5. Configure the desired theme elements.
    • To configure a bookmark icon, uncomment the horizon_favicon parameter and set its value to the path of your icon file.
    • To configure a dashboard logo (displayed in the top-left corner of each page), uncomment the horizon_logo parameter and set its value to the path of your dashboard logo file.
    • To configure a login logo, uncomment the horizon_logo_splash parameter and set its value to the path of your login logo file.
    • To configure additional styles, uncomment the horizon_custom_stylesheet parameter and set its value to the path of your stylesheet.
    • To configure color code definitions, uncomment the horizon_custom_variables parameter and set its value to the path of your stylesheet.
  6. Deploy the updated configuration. 
    sudo viocli deployment configure

    Deploying the configuration briefly interrupts OpenStack services.

Results

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

Note: If you edit or disable the custom theme at a later time, clear the browser cache so that the updated theme can be displayed.