The VMware Knowledge Base provides support solutions, error messages and troubleshooting guides
Search the VMware Knowledge Base (KB)
View by Article ID
Customizing the vCloud Director user interface using CSS (1026050)
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.
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.
Log into vCloud Director as a system administrator.
Click the Administration tab, then click Branding in the left pane.
Click the Browse button for Theme, select your modified .css file, then click Open.
Click OK to preview the current page using the custom style sheet.
Click Apply to start using the new styles or 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.
Download and install Adobe Flex SDK 4.1.0.16076A from this page.
Compile your modified .css file using the Flex MXMLC:
Download the cloud-director-51-template.css file, which is attached to this article.
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.
Create, copy, or modify these image files:
appBgPattern.png
historyBack_normal.png
historyBack_over.png
historyForward_normal.png
historyForward_over.png
Copy the image files and the CSS file to a single folder.
To create an .swf file with the same name of the style sheet, run this command from the command prompt:
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.
Log into vCloud Director as a system administrator.
Click the Administration tab, then click Branding in the left pane.
Click the Browse button for Theme, select your compiled .swf file, then click Open.
Click Preview to preview the current page using the custom style sheet.
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.
Log into vCloud Director as a system administrator.
Click the Administration tab, then click Branding in the left pane.
Click the Browse button for Login page theme, select your modified .css file, then click Open.
Click OK to preview the current page using the custom style sheet.
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.
