Updated vSphere Login UI customizations for vSphere 7.x & 8.x

It has been more than a decade since the vSphere UI has transition to an HTML-based interface and while not officially supported, users do have the ability to customize the login screen for a variety of use cases from internal disclaimers and compliance to customer branding as I have demonstrated in the past.

Although the general modification process has mostly stayed consistent, there has been subtle changes across vCenter Server releases which I have blogged about here, here and here.

I recently had a few folks ask whether the previous guidance was still applicable to the latest vCenter Server releases and given the previous articles were focused on vSphere 6.0 and 6.5, I figured its time for an update 🙂

Disclaimer: This is not officially supported by VMware, please use at your own risk.

Here is an example of one of my development vCenter Servers running the latest 8.0 Update 3 release ... I wonder if would make the cut as a feature enhancement for a default theme? 😅

via GIPHY

Credit goes to Amy Lewis for this epic picture of Duncan Epping!

OK, joking aside, the reason I am showing you this example is that I will be using it to demonstrate the various customizations options that you could experiment with.

All relavent files pertaining to the visualization of the vSphere UI login screen is located in /usr/lib/vmware-sso/vmware-sts/webapps/ROOT.war and one change from earlier vCenter Server releases is that the extraction of the WAR file is now placed under a new directory /var/lib/sso/webapps/ and more importantly /var/lib/sso/webapps/ROOT.war is a symlink to the path above, so do not modify or remove the file from that directory.

You can make live updates to your environment by navigating to /var/lib/sso/webapps/ROOT/ directory which is where the extracted contents of the ROOT.war file.

Login Header - This is located in /var/lib/sso/webapps/ROOT/WEB-INF/views/unpentry.jsp and look for the title section right under the login-wrapper div

• See the example unpentry.jsp file on L131 for the "Epping vCenter Server" text

Login Credentials Field - This is located in /var/lib/sso/webapps/ROOT/WEB-INF/views/unpentry.jsp and look for the username and password section under the login-group (non-IdP) div where you can pre-populate the username or password field, which I would only recommend for lab environments where you are the only user or you do not mind hardcoding the credentials.

• See the example unpentry.jsp file on L136-137 for the pre-filled credential text

Login Button - This is located in /var/lib/sso/webapps/ROOT/resources/css/login.css to automatically activate the login button (so you do not need to click into username or password field) and requires adding enableLoginButton();

• See the example websso.js file on L147 for adding the text

Login Visualization (below the Login button) - Using this animated login example we need to download all required Javascript resource files and then add them to /var/lib/sso/webapps/ROOT/WEB-INF/views/unpentry.jsp file.

• Download the particles.min.js and place that under /var/lib/sso/webapps/ROOT/resources/js directory
• Download the partical.js and and place that under /var/lib/sso/webapps/ROOT/resources/js directory
• See the example unpentry.jsp on L106 referencing the partical.js script
• See the example unpentry.jsp on L135 referencing the particles.min.js script
• See the example unpentry.jsp on L174 which renders the animation

Note: If you add any new files that will be referenced in your Javascript, make sure you change the user and group ownership of the files to sts:lwis as this is a behavior change with VCSA 8.x and later.

Login Picture and Background Color - This is located in /var/lib/sso/webapps/ROOT/resources/css/clr-ui.min.css which is the minify version of /var/lib/sso/webapps/ROOT/resources/css/clr-ui.css and is what is loaded by the vSphere UI. The easiest way to play around with these setting is to use Chrome Developer or something equilvenet to identify the CSS sections on the modifications that are required. You can then apply the changes to clr-ui.css BUT you must then minify the file to produce the clr-ui.min.css file. You can use any online Javascript minify tool to compress the contents and then download the results into clr-ui.min.css.

• Download your desired background image and place that under /var/lib/sso/webapps/ROOT/resources/img directory
• See the example clr-ui.css on L5824-5825 for the text modification