Have you ever wanted to customize the login page for the vSphere Web Client?  Did you even know you could do that?  As long as you’re running vSphere 6.0 and later, and know a little bit of html, it’s not that difficult at all.

You’ll need a few things to make this happen.

  • If you area running the virtual appliance, which I hope you are, you’ll need something like WinSCP to help you get your files onto the virtual appliance.
  • If you’re using a windows VM for vCenter, you should just upgrade to version 6.5 and use the built in migration tools to move to a virtual appliance.  If you can’t do that, you can just change the files necessary in windows without any special tools…. but really, upgrade to 6.5 U1 as soon as you can.

How to:

  1. Decide on a general idea of how you want your page to look.  In the picture for this article, I simply changed the vmware logo on the page.  This is relatively easy and doesn’t require changes to any html code.
  2. On the virtual appliance, your files will be in the directories below
    • /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/img
      • Image files
    • /usr/lib/vmware-sso/vmware-sts/webapps/websso/resources/css/login.css
      • css style sheet for the login page
    • /usr/lib/vmware-sso/vmware-sts/webapps/websso/WEB-INF/views/unpentry.jsp
      • code for the actual login page and how it looks overall
  3. On the windows vm, your files will be in the directories below
    • C:\ProgramData\VMware\vCenterServer\runtime\VMwareSTSService\webapps\websso\resources\img
      • Image files
    • C:\ProgramData\VMware\vCenterServer\runtime\VMwareSTSService\webapps\websso\resources\css\login.css
      • css style sheet for the login page
    • C:\ProgramData\VMware\vCenterServer\runtime\VMwareSTSService\webapps\websso\WEB-INF\views\unpentry.jsp
      • code for the actual login page and how it looks overall
  4. Back up all of the files in these directories!  VMware obviously does not support modification of these files, so do this at your own risk.
  5. Images can be easily swapped by naming your new images the same as the old ones in the “img” directory.  If you download the img directory, you can easily see which file names correspond to the images on the login page.  This is the safest, easiest, and least intrusive customization you can do.  Name your new image the same as the one you want to replace, and drop it in the directory on the vCenter server.  Refresh (force refresh) on the login page and you’ll see your new image show up right away.
  6. The colors, fonts, etc, can be customized by adjusting the CSS style sheet, “login.css”.  You should know some html before doing this.
  7. The actual page layout can be completely changed by editing the “unpentry.jsp” file.  You should also know some html for this as well.

If you are just changing images, this is a really quick and easy way to make your login page more personal/professional.  If you want to be more adventurous, change the style sheets and jsp files!

Good luck!