WilliamLam.com

  • About
    • About
    • Privacy
  • VMware Cloud Foundation
  • VKS
  • Homelab
    • Resources
    • Nested Virtualization
  • VMware Nostalgia
  • Apple
You are here: Home / Not Supported / VMworld Hackathon vSphere Client Login UI Theme

VMworld Hackathon vSphere Client Login UI Theme

09.27.2017 by William Lam // 7 Comments

For those of you who attended this years VMworld Hackathon (US/Europe), you may have noticed something different when logging into the vSphere Web/H5 Client? In case you missed it or could not attend, here is a GIF demonstrating what you would have saw:

via GIPHY

No, the VMworld Hackathon environment was not hacked 😉 but instead I had built a very special VMworld Hackathon vSphere Client Login UI Theme for the event. I was also getting tired of looking at our boring blue login screen. Customizing the vSphere Client Login UI has been possible (though not officially supported by VMware) since vSphere 6.0 which I have written about here, here and most recently here (due to vSphere 6.5 Update 1 changes). Having received a large number of requests from folks who attended the Hackathon as well as folks who had heard or saw the customization who wish to replicate this in their own environment, I have posted the instructions below.

This slick customization would not have been possible without the help from Timo Sugliani (thanks dude!) who was the one that made me aware of the two of the creatives that then gave me the idea to combine them into a vSphere Client Login UI Theme. The first is V for Vendetta image which can be found here and the second is super slick interactive Bootstrap animation which can be found here. Lastly, I added my own touch by using a Mr. Robot font from this site here which goes really well with the overall theme.

Option A (Easy):

Step 1 - As a pre-caution, you should backup the original websso.war before overriding the file in case you want to revert back to the original default behavior:

Step 2 - Download the websso.war package which contains all the customization mentioned below and then copy that to the vCenter Server Appliance (VCSA) located under /usr/lib/vmware-sso/vmware-sts/webapps and you are done.

Note: The websso.war has been created specifically for a vSphere 6.5 Update 1 environment. Simply copying this to earlier version of vSphere probably will not work and you will need to use Option B for earlier vSphere versions.

Option B (Difficult):

If you wish to manually reproduce this or modify the customization, you can follow the instructions below.

Step 1 - Update /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/css/login.css with the following:

Added the following to L21-24

background-image: url(../../resources/img/code.jpg);
background-size: 100%;
background-repeat:no-repeat;
background-color: #000000;

Step 2 - For the image that was used in the VMworld Hackathon, download it from https://i.ytimg.com/vi/7v6qI4vFSRs/maxresdefault.jpg and save it to /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/img/code.jpg

Step 3 - For the Mr. Robot text used in the VMworld Hackathon, visit https://fontmeme.com/mr-robot-tv-show-font/ and generate the text you wish to use and then save it to /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/img/hackathon-title.png

Step 4 - For the Bootstrap animation used in the VMworld Hackathon, visit https://bootsnipp.com/snippets/56A0W#comments and select the "JS" tab and copy the Javascript snippet and save it to /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/js/partical.js

Step 5 - Update /usr/lib/vmware-sso/vmware-sts/webapps/websso/WEB-INF/views/unpentry.jsp with the following:

Added the following to L17-19

     <div id="particles-js"><canvas class="particles-js-canvas-el" width="991" height="496" style="width: 100%; height: 100%;"></canvas></div>
     <div id="particles-js"></div>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>

Added the following to L63

     <script type="text/javascript" src="../../resources/js/partical.js"></script>

Added the following to L128

     <img src="../../resources/img/hackathon-title.png"/>

More from my site

  • VMworld Hackathon Hardware/Software BOM
  • VMworld Hackathon 2017 Highlights
  • VMware Explore Barcelona 2024 presentations now available
  • First Look at VMware Cloud Foundation 9
  • On-Demand session URLs for VMware Explore Las Vegas 2024

Categories // Not Supported, VMworld, vSphere 6.5, vSphere Web Client Tags // Hackathon, vmworld, vsphere web client

Comments

  1. *protectedJames Cober says

    09/28/2017 at 6:23 am

    Where is the download link you mention in Option A?

    Reply
    • William Lam says

      09/28/2017 at 6:35 am

      Would be useful if I added the link 🙂

      Try now

      Reply
  2. *protectedthevirtualpaddy says

    09/28/2017 at 7:48 am

    It's a shame, but these folders don't exist in 6.5 U1 appliance - only 6.5 GA.

    Reply
    • *protectedthevirtualpaddy says

      09/28/2017 at 7:51 am

      Ignore previous comment!! Cue embarrassment!!

      Reply
  3. *protectedAndreas Paulsson says

    09/28/2017 at 11:18 am

    Really cool! Here's a suggestion for a fling, an GUI editor for making custom login pages for the different products 🙂 Perhaps even go as far as making own themes for the HTML5 client? 🙂

    Reply
  4. *protectedChris says

    10/02/2017 at 4:47 pm

    How well will this survive future upgrades?

    Reply
  5. *protectedneil says

    12/09/2017 at 12:30 pm

    would love to be able to do this in a non vcentre or vcsa environment

    Neil

    Reply

Thanks for the comment!Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search

Thank Author

Author

William is Distinguished Platform Engineering Architect in the VMware Cloud Foundation (VCF) Division at Broadcom. His primary focus is helping customers and partners build, run and operate a modern Private Cloud using the VMware Cloud Foundation (VCF) platform.

Connect

  • Bluesky
  • Email
  • GitHub
  • LinkedIn
  • Mastodon
  • Reddit
  • RSS
  • Twitter
  • Vimeo

Recent

  • VMware Flings is now available in Free Downloads of Broadcom Support Portal (BSP) 05/19/2025
  • VMUG Connect 2025 - Minimal VMware Cloud Foundation (VCF) 5.x in a Box  05/15/2025
  • Programmatically accessing the Broadcom Compatibility Guide (BCG) 05/06/2025
  • Quick Tip - Validating Broadcom Download Token  05/01/2025
  • Supported chipsets for the USB Network Native Driver for ESXi Fling 04/23/2025

Advertisment

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Copyright WilliamLam.com © 2025