Loading

×Sorry to interrupt
CSS Error

Refresh

Cookie Preference Center

General Information on cookies

When you visit our website, we use cookies to ensure that we give you the best experience. This information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies by clicking on the different category headings to find out more and change your settings. However, blocking some types of cookies may impact your experience on the site and the services we are able to offer. Further information can be found in our

Cookie Policy.

Strictly Necessary

Strictly Necessary

Always Active

Strictly Necessary

Strictly necessary cookies are always enabled since they are essential for our website to function. They enable core functionality such as security, network management, and website accessibility. You can set your browser to block or alert you about these cookies, but this may affect how the website functions. For more information please visit www.aboutcookies.org or www.allaboutcookies.org.

Cookie Details‎

Performance

Performance

Performance

Performance cookies are used to analyze the user experience to improve our website by collecting and reporting information on how you use it. They allow us to know which pages are the most and least popular, see how visitors move around the site, optimize our website and make it easier to navigate.

Cookie Details‎

Please confirm your settings by refreshing the page.

Functional

Functional

Functional

Functional cookies help us keep track of your past browsing choices so we can improve usability and customize your experience. These cookies enable the website to remember your preferred settings, language preferences, location and other customizable elements such as font or text size. If you do not allow these cookies, then some or all of these services may not function properly.

Cookie Details‎

Advertising

Advertising

Advertising

Advertising cookies are used to send you relevant advertising and promotional information. They may be set through our site by third parties to build a profile of your interests and show you relevant advertisements on other sites. These cookies do not directly store personal information, but their function is based on uniquely identifying your browser and internet device.

Cookie Details‎

Advertising Cookies

Consent Leg.Interest

Select All Vendors

Select All Vendors

Select All Hosts

Select All

Clear Filters

Information storage and access

Apply

Confirm My Choices Reject All Allow All

My Subscriptions

Loading

Knowledge Base

Customizing the VMware vCloud Director user interface using CSS (1026050)

Last Updated: 12/7/2017Categories: How toTotal Views: 17444Language:
JapaneseEnglish

2 like this article

Subscribe to get an email
newsletter with new updates

2 people found this helpful Please provide article feedback:

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.

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.

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.

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:

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

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:

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.

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.

Additional Information

For translated versions of this article, see:

日本語: CSS を使用して VMware vCloud Director 1.x/5.1 ユーザー インターフェイスをカスタマイズする (2090098)

Detectable by VMware SkylineTM

Actions

Copy

link to clipboard
copied!

Print

Language:
JapaneseEnglish

Attachments

cloud-director-template.css

cloud-director-51-login-template.css

cloud-director-51-template.css

Additional Resources

KB
•
End Of General Availability of the Free vSphere Hypervisor (ESXi 7.x and 8.x) (2107518)

Result 1 of 1

Ask The Community

Get answers quickly from VMware experts in the community

Post Subject

CONTINUE IN COMMUNITIES

Related Products:

VMware vRealize Operations Tenant App for VMware vCloud Director

VMware Cloud Director for Service Provider

VMware Cloud Director

Related Versions:

VMware vRealize Operations Tenant App for VMware vCloud Director 1.x

VMware vCloud Director Extender 1.x

VMware Cloud Director for Service Provider 9.x

VMware Cloud Director for Service Provider 9.0.x

VMware Cloud Director for Service Provider 8.x

VMware Cloud Director for Service Provider 5.6.x

VMware Cloud Director 5.x

VMware Cloud Director 5.5.x

VMware Cloud Director 5.1.x

VMware Cloud Director 1.5.x

VMware Cloud Director 1.0.x

view all

Take Our Survey

Support Assistant