vCloud Director 9 HTML5 Portal Customization

One of the great features in vCloud Director 9 which has been further enhanced in the latest v9.5 release is the new HTML5 portal:


Even better, VMware has released a toolkit to allow Service Providers to fully customise the look and feel of the portal using CSS themes in their Clarity framework..

The toolkit itself is part of the VMware vcd-ext-sdk repository on github, available in the /ui/theme-generator folder.

The repository has good instructions on how to modify and build a custom theme, but actually uploading and configuring the theme in vCloud Director is only accessible via the vCD API and involves a reasonable amount of manual work.

To help speed up development and allow changes to be easily tested, in my usual mode I’ve written a small PowerShell module that allows quicker/easier theme configuration. The module is available on github at Hopefully this will help those of you who need to develop and test updated themes for your vCloud Director portals.

I’ve included documentation in the repository on each cmdlet, its function and arguments here.

To use the module you’ll need to be connected to a vCloud instance as a user with global ‘Administrator’ access in the ‘System’ organization since changes will affect all portal users. You’ll need to be connected to the vCD environment with PowerCLI (Connect-CIServer…) prior to using the cmdlets.

You can then download the vcd-ht-themes.psm1 file and add it to your session (‘Import-Module vcd-h5-themes.psm1’) to access the cmdlets.

As always, comments and feedback welcome – is there anything else you’d like to see added to this module?


Tagged , , . Bookmark the permalink.

11 Responses to vCloud Director 9 HTML5 Portal Customization

  1. Kent Winsor says:

    Thanks for the tool. I can run Get-Branding, New-Theme, Set-Theme but if I try to use Set-Branding with any parameter I get the error below. Any insight would be greeatly appreciated. Powershell is aware of the function and parameter since tab pre-populates it.

    PS C:\Users\admin\Downloads\vcd-h5-themes-master> Set-Branding -portalName MyCloud
    Set-Branding : Parameter set cannot be resolved using the specified named parameters.
    At line:1 char:1
    + Set-Branding -portalName MyCloud
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : InvalidArgument: (:) [Set-Branding], ParameterBindingException
    + FullyQualifiedErrorId : AmbiguousParameterSet,Set-Branding

    • Jon Waite says:

      Hmm, is it possible you have a cmdlet name clash? What does ‘get-Command Set-Branding’ show? If more than one entry is returned you have another module providing a ‘Set-Branding’ cmdlet and PowerShell is confused about which one to use. To override this you can use ‘vcd-h5-themes\Set-Branding’ as the command. Let me know if you’re still having issues and I’ll take a look at the code, you could also try putting single-quote marks (‘) around the value for -portalName.

      Regards, Jon.

  2. Kent Winsor says:

    I checked for cmdlet name clash and it looks fine.

    PS C:\> Get-Command Set-Branding show

    CommandType Name Version Source
    ———– —- ——- ——
    Function Set-Branding 1.3.0 vcd-h5-themes

    I tried using single quotes yesterday and received same error. Seems like it can’t resolve for the function. If you can take a look that would be awesome.


    • Jon Waite says:

      Hmm, does it work if you specify a portalColor value? Wondering if the addition I accepted to remove portal colors has effectively made this parameter mandatory – will need to do some testing to confirm…

  3. Kent Winsor says:

    I have not been able to get Set-Branding to work at all with any value. Let me know if you can see why it doesn’t work. thanks.

  4. Kent Winsor says:

    Actually correction this worked for me so adding -portalColor with the rest worked.

    PS C:\> Set-Branding -portalColor ‘#3399FF’ -portalName ‘LAB Cloud’
    Branding configuration sent successfully.

  5. Marija says:

    Thank you for the tool. Is there an option to get the .css file for the default theme, not the dark?
    I’ve tried to run “yarn build –theme default”, but I got the following feedback
    “yarn run v1.12.3
    $ node build-theme –theme default
    File to read not found or unreadable: D:/vcd-ext-sdk/ui/theme-generator/src/default/styles.scss

  6. Jon Waite says:

    As far as I know the ‘default’ .css isn’t available anywhere (yet) – if anyone knows differently please let me know! Seems kind of daft to me when the ‘Dark’ theme .css is included in the repository

  7. Yiannis says:


    I try to execute the command Get-Branding and I receive the following errors .. Any Idea ? There is not an SSL issue since I have a valid certificate installed.

    PS C:\Windows\system32> Get-Theme -Server lab.server
    Get-APIVersion : Could not retrieve API versions, Status Code is .
    At C:\Program Files\WindowsPowerShell\Modules\vcd-h5-themes\1.3.0\vcd-h5-themes.psm1:281 char:19
    + $apiVersion = Get-APIVersion -Server $Server
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : NotSpecified: (:) [Write-Error], WriteErrorException
    + FullyQualifiedErrorId : Microsoft.PowerShell.Commands.WriteErrorException,Get-APIVersion

    Get-APIVersion : This can be caused by an untrusted SSL certificate on your Server.
    At C:\Program Files\WindowsPowerShell\Modules\vcd-h5-themes\1.3.0\vcd-h5-themes.psm1:281 char:19
    + $apiVersion = Get-APIVersion -Server $Server
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : NotSpecified: (:) [Write-Error], WriteErrorException
    + FullyQualifiedErrorId : Microsoft.PowerShell.Commands.WriteErrorException,Get-APIVersion

    Get-Theme : Get-Theme requires vCloud API v30 or later (vCloud Director 9.1), the detected API version is .
    At line:1 char:1
    + Get-Theme -Server
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo : NotSpecified: (:) [Write-Error], WriteErrorException
    + FullyQualifiedErrorId : Microsoft.PowerShell.Commands.WriteErrorException,Get-Theme

  8. Naresh Kumar says:

    Hi can I change the font ?

  9. Sam says:

    Hi Jon.

    Hoping you may shed some light. im finally getting around to exploring branding my vCD 10.0.1 instance……and i was checking out the sdk on github.

    im kind of lost on the “using the theme” section. I’ve edited the _selectors.scss file….. but im unsure of how to recombine/recompile it into the dark.css file…. or if I have to upload dark.css, styles.scss, _variables.scss, and the _selectors.scss files once I’ve created a new theme with the API. Or do I justt edit the dark.css file and just upload it.

    The github readme seems like its missing a few steps. so i wanted to see if you’ve played around with it, or if you’ve tried it out.

Leave a Reply

Your email address will not be published. Required fields are marked *

18 + 4 =