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.

VMware Cloud Director for Service Provider 8.x
VMware vRealize Operations Tenant App for VMware vCloud Director 1.x
VMware Cloud Director 5.5.x
VMware Cloud Director 5.1.x
VMware Cloud Director for Service Provider 9.x
VMware vCloud Director Extender 1.x
VMware Cloud Director 5.x
VMware Cloud Director 1.0.x
VMware Cloud Director 1.5.x
VMware Cloud Director for Service Provider 9.0.x
VMware Cloud Director for Service Provider 5.6.x

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.