Search the VMware Knowledge Base (KB)
View by Article ID

Customizing the VMware vCloud Director 1.x/5.1 user interface using CSS (1026050)

  • 35 Ratings

Details

You can import a custom style sheet to modify the display of the VMware vCloud Director user interface. For example, you can change the colors and fonts to better match your own corporate look and feel.

Caution: This article applies only to vCloud Director 1.0, 1.5, and 5.1.x. Do not use this article to implement customization to vCloud Directory 5.5. For more information on vCloud Director 5.5, see Customizing the VMware vCloud Director 5.5.x user interface using Cascading Style Sheet (CSS) (2093493).

Notes:
  • It is not possible to change the logo in the vCloud Director 1.0, 1.5, and 5.1.x releases.
  • The CSS templates attached to this article are used by Adobe Flex. To use these templates, you should be comfortable with and have an understanding of Adobe Flex.

Solution

Importing a custom style sheet into vCloud Director 1.x

You can modify the attached cloud-director-template.css file and import the file into vCloud Director to apply the new styles. The template includes information about the styles you can change and their default values. vCloud Director does not support changing styles that are not listed in the template.

  1. Log into vCloud Director as a system administrator.
  2. Click the Administration tab, then click Branding in the left pane.
  3. Click the Browse button for Theme, select your modified .css file, then click Open.
  4. Click OK to preview the current page using the custom style sheet.
  5. Click Apply to start using the new styles.

    Alternatively, click Revert to continue to use the default styles.

Importing a custom style sheet into vCloud Director 5.1

You can modify the attached cloud-director-51-template.css file, compile it using the Adobe Flex SDK, and import the compiled .swf file into vCloud Director to apply the new styles. The template includes information about the styles you can change and their default values. vCloud Director does not support changing styles that are not listed in the template.

  1. Download and install Adobe Flex SDK 4.1.0.16076A from this page.
  2. Compile your modified .css file using the Flex MXMLC:

    1. Download the cloud-director-51-template.css file, which is attached to this article.
    2. Modify the CSS file according to your requirements, and save the file with a different file name.

      Note: Using the default name (cloud-director-51-template.css) may cause compilation errors.

    3. Create, copy, or modify these image files:

      Note: To determine the output of the path to the required files, run the find -iname command.

      • appBgPattern.png
      • historyBack_normal.png
      • historyBack_over.png
      • historyForward_normal.png
      • historyForward_over.png

    4. Copy the image files and the CSS file to a single folder.
    5. To create an .swf file with the same name of the style sheet, run this command from the command prompt:

      C:\Program Files\Adobe\Adobe Flash Builder 4\sdks\flex_sdk_4.1.0.16076A\bin> mxmlc "C:\FolderName\StyleSheetName.css"

      An .swf file with the same name of the style sheet is created. Use this .swf file when importing into vCloud Director.

      Notes:
      • In this example, the path to the Flex 4.1 SDK is C:\Program Files\Adobe\Adobe Flash Builder 4\sdks\flex_sdk_4.1.0.16076A\bin. Change the path according to your installation.
      • For more information on Flex MXMLC, see Compiling with Flex MXMLC.

  3. Log into vCloud Director as a system administrator.
  4. Click the Administration tab, then click Branding in the left pane.
  5. Click the Browse button for Theme, select your compiled .swf file, then click Open.
  6. Click Preview to preview the current page using the custom style sheet.
  7. Click Apply to start using the new styles or click Revert to continue to use the default styles.

Import a custom login page style sheet into vCloud Director 5.1

In vCloud Director 5.1, you can also change the display of the vCloud Director log in page by modifying the attached cloud-director-login-template.css file and importing the file into vCloud Director. The template includes information about the styles you can change and their default values. vCloud Director does not support changing styles that are not listed in the template.
  1. Log into vCloud Director as a system administrator.
  2. Click the Administration tab, then click Branding in the left pane.
  3. Click the Browse button for Login page theme, select your modified .css file, then click Open.
  4. Click OK to preview the current page using the custom style sheet.
  5. Click Apply to start using the new styles or click Revert to continue to use the default styles.

Note: The links in this article were correct as of February 5, 2013. If you find a link is broken, provide feedback and a VMware employee will update the link.

Additional Information

For translated versions of this article, see:

Update History

06/03/2014 - Added under Solution on Step #2 c. You can run command find -iname on the image names in the cell to get the output of path to the required files.

Attachments

Request a Product Feature

To request a new product feature or to provide feedback on a VMware product, please visit the Request a Product Feature page.

Feedback

  • 35 Ratings

Did this article help you?
This article resolved my issue.
This article did not resolve my issue.
This article helped but additional information was required to resolve my issue.

What can we do to improve this information? (4000 or fewer characters)




Please enter the Captcha code before clicking Submit.
  • 35 Ratings
Actions
KB: