To match corporate branding standards and to create a fully custom cloud experience, we can customize the VMware Cloud Director Service Provider Admin Portal and the VMware Cloud Director Tenant Portal of each organization. In addition, we can modify and add custom links to the two upper right menus in the VMware Cloud Director portals.

As part of the installation, VMware Cloud Director contains two themes – default and dark. We can create, manage, and apply custom themes. In addition, we can change the portal name, the logo, and the browser icon. In addition, the browser title adopts the portal name that we set.

We can set the branding attributes at a system level, so that we customize the VMware Cloud Director Service Provider Admin Portal. The VMware Cloud Director Tenant Portal for each organization adopts the system branding attributes unless we configured branding attributes for the particular tenant.

All these customizations must be performed leveraging the branding vCloud OpenAPI methods (see the official API docs for Branding and Branding Theme). Check out this VMware KB article, if you don’t know how to establish an API session with VMware Cloud Director.

In this example, we’re going to modify the style of the default branding (provider).

Creating and enabling a new theme

First, we have to create the new theme ID. In this example, we’re going to name it “myCustomTheme”.

POST https://vcd1a.lab.local/cloudapi/branding/themes
Accept: application/*;version=35.0
Content-Type: application/json

{
	"themeType": "custom",
	"name": "myCustomTheme"
}

To confirm the new theme has been successfully created make a GET call.

GET https://vcd1a.lab.local/cloudapi/branding/themes
Accept: application/*;version=35.0

Now, we have to create the custom branding theme. The theme file is a single CSS file. In our example theme, I’ve simply changed the background logo with a custom one (for more information about creating custom themes check out this blog article):

.login-wrapper {
	display: flex;
	height: 100%;
	background: url("data:image/jpeg;base64,...");
	background-size: 100%;
	background-position: 25.2rem 0;
	background-repeat: no-repeat;
}

I’ve saved this in a file called myCustomTheme.css.

Next, we have to update the custom theme’s content with our theme CSS using myCustomTheme as the theme identifier in the URL (note that the specified size must match the actual size of the CSS file in bytes or the upload in the next step will fail!):

POST https://vcd1a.lab.local/cloudapi/branding/themes/myCustomTheme/contents
Accept: application/*;version=35.0
Content-Type: application/json

{
	"fileName": "myCustomTheme.css",
	"size": 1382794
}

The operation doesn’t return any data structure, but we are going to copy the provided URL Link header.

Next, we are going to make a PUT call to the URL provided in the Link header to upload the branding theme contents CSS file as binary, in our case https://vcd1a.lab.local/transfer/f715fb66-0458-4be6-a649-6ddba54acbe1/myCustomTheme.css:

If we get a 200 OK response, the file upload was successful.

As a last step, we have to enable the new theme. We also set a new name for the portal, e.g. “Lab Cloud Portal”:

PUT https://vcd1a.lab.local/cloudapi/branding
Accept: application/*;version=35.0
Content-Type: application/*

{
	"portalName": "Lab Cloud Portal",
	"selectedTheme": {
		"themeType": "custom",
		"name": "myCustomTheme"
 	}
}

Now let’s check the result in the web browser:

Branding the portal logo and icon

First, we’re customizing the portal logo by uploading a new image called cloud-logo.png using a binary PUT request (we must specify the appropriate content type header for the PNG image format):

PUT https://vcd1a.lab.local/cloudapi/branding/logo
Accept: application/*;version=35.0
Content-Type: image/png

The operation doesn’t return any data structure, but a 204 No Content HTTP response. So we can directly check the portal look using the web browser.

Note the new cloud logo left of the “Lab Cloud Portal” label in the first screenshot, and on the top right of the second screenshot.

A second thing to customize is the portal website favorite icon aka favicon. We upload it again using a PUT request along with the required content type header for the PNG logo (in this example, we’re using the same image cloud-logo.png as for the portal logo):

PUT https://vcd1a.lab.local/cloudapi/branding/icon
Accept: application/*;version=35.0
Content-Type: image/png

The operation doesn’t return any data structure, but a 204 No Content HTTP response. Let’s check the favicon in the web browser:

The new favicon is shown in the browser tab.