Skip to content

vBlog.nl

All about technology

Menu
  • Home
  • VMware Cloud Director
  • vSphere
  • Automation
    • PowerCLI
    • PowerShell
    • Terraform
  • NSX
  • Horizon DaaS
  • About Us
Menu

UI themes for VMware Cloud Director 10.4.1 and later

Posted on December 16, 2022

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.

Table of Contents

  • Introduction
  • Enable the new themes plugin
  • Create a New Cloud Director UI Theme
    • Provider View
    • Tenant View
    • Tenant 2 View
  • Exporting & Importing your theme
    • Export
    • Import
  • VMware Cloud Director Themes Download

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:

A new branding API is available for VMware Cloud Director. You can enable it through the Branding API feature flag under Administration.

Navigate to Administration > Feature Flags > Branding API and choose Enable.

Navigate to Administration > Feature Flags > Branding API and choose Enable

After choosing Enable, the UI informs you if the feature has been enabled succesfully.

Feature "Branding API" has been enabled.

Navigate back to More > Customize Portal > Themes and choose Reload Page to complete the activation of the branding feature.

Reload now

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.

Color-Hex Spiderman Color Palette

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

Create theme in VMware Cloud Director

Theme Branding

Add logo, icon and background image to your theme

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.

Use the ${TENANT_NAME} variable

Provider View

Logged on as Provider, you will see ‘System’ in the top left corner.

Provider view

Tenant View

Each tenant has an own Organization with Organization Name and Organization Full Name fields populated:

VCD Organization Name & Organization Full Name

When Organization Org-Marc logs on to the platform, they will have their (company) name on the top bar.

Tenant View

Tenant 2 View

But when vBlog-NL logs on to the platform, they will see their (company) name in the top bar.

Tenant View

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.

UI Theme - zip file content

Import

Navigate to More > Customize Portal > Themes, and choose Import

import VCD UI theme

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.
Assign VCD UI theme

VMware Cloud Director Themes Download

You can download and import my VMware Cloud Director themes below:

Marvel_SpidermanMarvel – Spiderman Theme for VMware Cloud Director by Marc Roeleveld

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.

 2,816 total views,  15 views today

Share on Social Media
twitter facebook linkedin reddit emailwhatsapptelegram

Leave a Reply Cancel reply

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

Recent articles

  • VMware Cloud on AWS with FSx for NetApp ONTAP December 28, 2022
  • Workspace ONE Access – Change certificate December 22, 2022
  • UI themes for VMware Cloud Director 10.4.1 and later December 16, 2022
  • VMware Tanzu Kubernetes Grid December 15, 2022
  • Workspace One Access – Not logged in to server FQDN. Please invoke Save before Sync December 12, 2022
  • NSX Edge configuration has failed. 1G hugepage support required. December 7, 2022
  • Horizon DaaS – Unable to connect to Desktop November 24, 2022
  • How to: Request and Install a Lets Encrypt Wildcard SSL on VMware Cloud Director 10.4 October 17, 2022
  • New and improved vSAN 8 explained September 24, 2022
  • How to update a stand alone ESXi host September 13, 2022

Tags

Automation bootstrapping Container Service Extension Credential Manager Desktone.log ESXi EUC EXi GPU Horizon DaaS Instant-Clone Logging NSX nsx-t PowerCLI PowerShell Putty Raspberry PI SSL Tanzu Terraform update vcd-cli vCenter vCloud vCloud Availability vCloud Director VDI vGPU VMware VMworld vSAN vSphere vVols workspace one Zerto

VMware Cloud Provider Blog

  • Usage Meter Registration and Usage Report APIs are now part of Cloud Provider APIs on developer.vmware.com
    by Galina Slavova on February 3, 2023 at 1:12 pm

    We have an important announcement to make – Usage Meter and Usage Report APIs are now part of the Cloud Provider Navigator and can be accessed from the Cloud Provider section on developer.vmware.com. Furthermore, there is a new API for registering Usage Meter with a contract in the VCPP Commerce Portal. Here is how the … Continued The post Usage Meter Registration and Usage Report APIs are now part of Cloud Provider APIs on developer.vmware.com appeared first on VMware Cloud Provider Blog.

  • Introducing Sovereign Cloud Compliance Pack for Aria Operations
    by Amith Vijayanand on February 2, 2023 at 6:30 am

    We are happy to announce the availability of Sovereign Cloud Compliance pack for Aria Operations for our Sovereign Cloud Partners as on 31st January 2023. Introduction of the sovereign cloud compliance pack allows VMware sovereign cloud providers an extended ability to maintain their sovereign posture and allows them to expand their services in to the … Continued The post Introducing Sovereign Cloud Compliance Pack for Aria Operations appeared first on VMware Cloud Provider Blog.

  • VMware Cloud Director extension for VMware Data Solutions 1.1
    by Amith Vijayanand on February 1, 2023 at 6:30 am

    We are glad to announce the general availability of VMware Cloud Director extension for VMware Data Solutions (DSE) version 1.1 as of January 31, 2023. We announced the DSE 1.0, in November 2022, where we introduced the support for data services starting with VMware RabbitMQ (supporting version 1.3) in the VMware Data Solutions portfolio. Today, we announce … Continued The post VMware Cloud Director extension for VMware Data Solutions 1.1 appeared first on VMware Cloud Provider Blog.

  • Introducing A New TechZone Section for VMware Sovereign Cloud
    by Cory Allen on January 31, 2023 at 2:30 pm

    The VMware Sovereign Cloud initiative gives our Cloud Providers the ability to offer flexible, secure, and scalable environments aimed at protecting data sovereignty. We are happy to announce the launch of a new section on our VMware Cloud Tech Zone website for VMware Sovereign Cloud. This site brings together all technical-related content to help our Cloud … Continued The post Introducing A New TechZone Section for VMware Sovereign Cloud appeared first on VMware Cloud Provider Blog.

  • Managed IDS/IPS for VMware Cloud Director
    by Romain Decker on January 30, 2023 at 7:34 pm

    Want to add IDS/IPS services with VMware Cloud Director™ using VMware NSX? There’s a white paper for that! Many VMware Cloud Providers are interested in offering VMware NSX IDS/IPS in their multi-tenant environments managed by VMware Cloud Director. Intrusion Detection Systems (IDS) emerged in the late 1990s to detect traffic patterns indicative of incoming attacks. … Continued The post Managed IDS/IPS for VMware Cloud Director appeared first on VMware Cloud Provider Blog.

©2023 vBlog.nl | Design: Newspaperly WordPress Theme