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 https://github.com/jondwaite/vcd-h5-themes. 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?
Jon.
Hello,
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
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.
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.
Thanks,
Kent
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…
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.
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.
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
3
undefined
File to read not found or unreadable: D:/vcd-ext-sdk/ui/theme-generator/src/default/styles.scss
undefined”
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
Hello
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 vportal.inefos.gr
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (:) [Write-Error], WriteErrorException
+ FullyQualifiedErrorId : Microsoft.PowerShell.Commands.WriteErrorException,Get-Theme
Hi can I change the font ?
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.
https://github.com/vmware/vcd-ext-sdk/tree/master/ui/theme-generator
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.