You ‘ve probably seen on the internet articles talking about UI customization on the login page of VMware products such as VCAC, Log Insight or VROPS. So let’s make a cute VROPS login page….
Everything is done by modifying the graphical elements of the following folder:
This is cool but once you are logged in, the UI gets back to our pretty « blue » VMware look and feel. Let’s make so more modifications….
This is a modified version of the light theme. I never asked the dev team but I didn’t find anyway to dynamically add a theme, by looking at some files in the Virtual Applilance, I think themes are hardcoded. So the technic I found to do that is pretty uncommon:
- Step 1: Create a backup of the theme you want to modify, in my case it’s the light theme
- Step 2: Open your VROPS with the selected theme (light or dark) and make a screenshot of the screen
- Step 3: Download a color meter and open it, I use photoshop
- Step 4: With the color meter on the screenshot of VROPS UI, point the color you want to modify (for flat color you can point anywhere, for gradient you have to select the first or the last pixel of the gradient). Note the hexadecimal code for the color. The first color of the background is #57A3D5
- Step 5: There are two main files that contain the graphical information of a particular theme, for the light theme:
- Step 6: Download those two files on your desktop and open them with notepad++
- Step 7: Those files are huge and contains thousands of colors. With notepad++ I do a « search » of the color I found in step 4:
Between the line 15476 and 15487 of the file light-all-debug_01.css are the color resources for the gradient background of VROPS for each Web browser UI engine. Back to photoshop.
- Step 7: With photoshop, select the new color you want to apply as the starting color of the gradiant and another color as the ending color of the gradient:
My new starting color is: #FFA3D5
My new ending color is: #FF6A9B
- Step 8: Replace those two new colors by the original colors in light-all-debug_01.css:
- Step 9: Save and put that file back to the VROPS appliance and reload the UI. Also you might have to clean the Web Browser cache.
- Step 10: When logged in, the interface also contain images that you can modify to match your already modified color, those images are here:
Done! You can use those tricks to change pretty much everything. Some graphical elements are pretty hard two find because those two resource files are big, and a particular color can apply to multiple UI elements so you cannot find a particular element by its color everytime. You’ll have to spend some time testing to make you own theme!
Share this article if you liked it 😉