vCloud Director 9.5 tenant UI Custom Theme

[hjelmar]

Hi

In Tom Fojta's las post on "whats new in vCloud Director 9.5" ​ , he refers to the possibility to customize the tenant UI and links to the Theme Builder on GitHub.

I have used the custom theme builder and created a css with it in the output folder. I cannot use this in the vCD admin ui (as it requires .swf) – is this to be modified directly in the Clarity integration of vCD? And if so, is there a guide somewhere (as I am not familiar with Angular). Tried the Github documentation without much luck.

I am mostly interested in changing the logon page look as I have done before in the Flex Portal with a lot less problems.

/Kenneth

[jmoroski · Accepted solution]

I cannot use this in the vCD admin ui (as it requires .swf) – is this to be modified directly in the Clarity integration of vCD?

There are some new API calls to upload and enable the custom theme usage.

You'd first create a new theme:

POST https://<vcd api base>/cloudapi/branding/themes
Body:
{
  "name": "<custom theme name>"
}

Then issue a request to upload the generated CSS file using the transfer service:

POST https://<vcd api base>/cloudapi/branding/themes/<custom theme name>/contents
Body:
{
  "fileName": "<name-of-file>",
  "size": <size-of-css-in-bytes>
}

The POST will return a Link header that contains the upload location.  You would then do a `PUT` to the upload link with the CSS file's binary data.

Once you've done that, you should be able to do

PUT https://<vcd api base>/cloudapi/branding
Body:
{
  "portalName": "string",
  "portalColor": "string",
  "selectedTheme": {
   "name": "<custom theme name>"
  }
}

To set the branding for both the provider and tenant H5 portals.

[hjelmar]

Ah I see, I'll try it out. - Thank you for the very useful explanation

/Kenneth

[jonathanw]

I've been playing around with some custom themes and ended up writing a small powershell module to assist in configuring theme settings and uploading changes to vCD - might be helpful to you too: https://kiwicloud.ninja/2018/11/vcloud-director-9-html5-portal-customization/