This article demonstrates how you can create, import and export UI themes in VMware Cloud Director 10.4.1 and later.
You can download my created themes on the bottom of this page.
Introduction
With the 10.4.1 release of Cloud Director (launched on the 8th of December 2022) a new way of branding has been introduced.
In my opinion, this is a major improvement compared to the old way of branding & theming your cloud.
I will cover the following topics in this article.
- How to enable the new themes plugin.
- How to create a new theme.
- How to Import/Export themes.
Enable the new themes plugin
When you logon to the Cloud Director UI, and navigate to More > Customize Portal > Themes you will notice that you need to enable the Branding API first:
Navigate to Administration > Feature Flags > Branding API and choose Enable.
After choosing Enable, the UI informs you if the feature has been enabled succesfully.
Navigate back to More > Customize Portal > Themes and choose Reload Page to complete the activation of the branding feature.
All done! Move to the next section to understand how you can create new themes yourself.
Create a New Cloud Director UI Theme
After the screen has been reloaded, click the Create Theme button and choose a Light-Based or Dark-Based theme.
On the next screen, give your theme a name and change the colors to your liking.
In my example, I am going to build a Marvel / Spiderman theme.
Lucky for me, Color-Hex already had a Spiderman color palette available, so I did not have to search the HEX numbers.
When you create a new theme, you can pick your colors, logo, icon and background.
The screenshots below illustrate the process.
- Theme Name Marvel_Spiderman
- Header #A71814
- Header Font #D9E2E7
- Font #EAEDF0
- Selection #A71814
- App Background #1b2a32
Theme Colors
Theme Branding
The steps for adding your logo, icon and background are straightforward.
I would like to highlight the Platform Name field.
The Platform Name field supports a variable: ${TENANT_NAME}
You can use the ${TENANT_NAME} variable to substitute the name of the platform with the name of the VCD Organization Name at runtime.
Using this variable could be usefull if you want to personalize a single theme for all your tenants.
Have a look at the following figures to understand.
I have created ONE theme: Marvel_Spiderman with the variable in the platform name field.
Provider View
Logged on as Provider, you will see ‘System’ in the top left corner.
Tenant View
Each tenant has an own Organization with Organization Name and Organization Full Name fields populated:
When Organization Org-Marc logs on to the platform, they will have their (company) name on the top bar.
Tenant 2 View
But when vBlog-NL logs on to the platform, they will see their (company) name in the top bar.
As a result, you can have custom branding per tenant with a single theme.
Exporting & Importing your theme
If you run a multi-site Cloud Director environment or if you want to have the same look & feel in your Test Environment as you have in your Production Environment, you might want to export your theme and import it on your other Cloud Director environments.
Follow the steps below to export and import themes.
Export
Navigate to More > Customize Portal > Themes and choose Action > Export
A .zip file will be downloaded to your computer, which includes all the logo, icon, background and style documents required for branding.
Import
Navigate to More > Customize Portal > Themes, and choose Import
Select the .zip file in the wizard and a few seconds later your theme is imported.
- To set this theme for the whole platform, choose Action > Make Default
- To set this theme for a few tenants only, choose Action > Assign and Select the Organizations from the list.
VMware Cloud Director Themes Download
You can download and import my VMware Cloud Director themes below:
If you have created a theme which you want to share on this list, ping me on Twitter and I will add your theme to the list.
