In a previous post I walked you through how to modify the default theme of Enterprise Manager 9.5. Now it’s time to do the same with Enterprise Manager 10. I have been playing with Enterprise Manager for a while now and I especially like the ability to integrate the product with vCloud Director. After using the Enterprise Manager plugin for vCloud Director I wanted to make a few changes to the theme so that I could better integrate it with our customized vCloud theme. The below guide covers some of the basic changes you can make to the main Enterprise Manager Portal theme and also the Self-Service Backup Portal.

This is default Enterprise Manager 10 main menu.

We are going to edit the following files to change the default Veeam green to blue for this example. Take a backup of each file before continuing,

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\MainApp\resources\MainApp-all_1.css

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\MainApp\resources\MainApp-all_2.css

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\MainApp\resources\MainApp-all_3.css

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\MonthlyReportApp\resources\MonthlyReportApp-all.css

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\static\assets\errors.css

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\VCloud\resources\VCloud-all.css

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\VSphere\resources\VSphere-all.css

Once again I have used Visual Studio Code to make the changes to each of the files. Click on File then Open File to open each one in a different tab then select Edit from the drop down menu then Replace. Enter the default green #2a6e52 colour code at the top and then your new colour code #2E86C1 below, then click the Replace All icon to the right. Click on each of the CSS file tabs and click the Replace All button. This colour will be present in each file.

Then select File and Save All.

Next we have a few more codes to change, enter the other default green #245f47 colour code at the top and then your new colour code #2874A6 below, then click the Replace All icon to the right. Click on each of the CSS file tabs and click the Replace All button. Note the second two green colour codes don’t appear in the MainApp-all_3.css and errors.css file.

Then select File and Save All.

Then again in the Find box change the colour code to #1b4735 and then change the Replace code to #21618C, then click the Replace All icon to the right. Click on each of the CSS file tabs and click the Replace All button. Note the second two green colour codes don’t appear in the MainApp-all_3.css and errors.css file.

Feel free to get more creative with your colours, I am just using a few different variations of blue for this example.

Then select File and Save All.

In the Find box change the colour code to #215741 and then change the Replace code to #21618C, then click the Replace All icon to the right. Click on each of the CSS file tabs and click the Replace All button. Note that MainApp-all_3.css and errors.css does not have this colour code present.

In the Find box change the colour code to #4e846e and then change the Replace code to #2E86C1, then click the Replace All icon to the right. Click on each of the CSS file tabs and click the Replace All button. Note that MainApp-all_2.css, MainApp-all_3.css and errors.css does not have this colour code present.

In the Find box change the colour code to #54b948 and then change the Replace code to #2E86C1 (try a lighter version of your previous colour), then click the Replace All icon to the right. Click on each of the CSS file tabs and click the Replace All button. Note that MainApp-all_2.css, MainApp-all_3.css and errors.css does not have this colour code present.

Then open the following css file,

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\web\css\prettify.css

In the Find box change the colour code to #060, #066, #080 and #044 and then change the Replace code to #2E86C1, then click the Replace All icon to the right. Click on each of the CSS file tabs and click the Replace All button.

Then select File and Save All.

Now you are ready to launch Enterprise Manager and view the new updated menu colour scheme. Initially you may need to open your browser in incognito mode to show the changes straight away.

Below is an example from the Self-Service Backup Portal.

The updated view once logged in from the Self-Service Backup Portal.

Next we need to modify the default green colour which appears when you hover over the main menu items and the user menu in the top right. Below is an example from the vCloud Self-Service Portal.

Here is an example from the main Enterprise Manager Portal.

Once again its time to change another colour code so we can repeat the same process.

Now this colour code was fun to locate! In the Find box change the colour code to #245c45 and then change the Replace code to #2874A6 (use a light colour here again), then click the Replace All icon to the right. This code only needs to be changed on the MainApp-all_2.css, MonthlyReportApp-all.css, Vcloud-all.css and vSphere-all.css.

Then select File and Save All.

Then in the Find box change the colour code to #1f4d3a and then change the Replace code to #2874A6, then click the Replace All icon to the right. This code only needs to be changed on the MainApp-all_2.css, MainApp-all_3.css, MonthlyReportApp-all.css, Vcloud-all.css and vSphere-all.css.

Then select File and Save All.

Then refresh each of the portals, now when we hover over the buttons the green background is gone and it has changed to a different shade of blue.

Example from the vCloud Self-Service Portal.

Example from the main Enterprise Manager Portal.

Now it’s time to remove the icon that displays on the left-hand side of the menu. The icon itself is very small and you can replace the image with anything you like but for this example I am just going to remove it.

Icon from the Tenant Self Service Portal.

Icon from the main Enterprise Manager Portal.

Browse to the following directory and take a backup copy of the png file.

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\VCloud\resources\images\siteLogo16.png

Rename siteLogo16.png to old_siteLogo16.png

Close and open the page and the icon will no longer appear.

Now for the main Enterprise Manager portal

Browse to the following directory and take a backup copy of the png file.

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\MainApp\resources\images\veeam\icons\logo32.png

Rename logo32.png to old_logo32.png

Close and open the page and the icon will no longer appear. If it doesn’t change straight away try it using incognito or inprivate browsing mode to see if it’s just cached.

Now let’s edit the logon screen welcome message for the vCloud Self-Service Portal,

Open the following file,

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\VCloud\login\app.js

Then click Edit, Replace and in the Find box enter Welcome! Please sign in. and in the Replace box enter the text you would like to display then click the Replace All button.

Then click File and Save All

Once again if it doesn’t update straight away just close the browser and open another incognito window as its most likely cached. The logon screen welcome message should now be updated.

You can also update the logon message for the main Enterprise Manager Portal.  To do this open the following file,  

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\MainApp\login\app.js

Then click Edit, Replace and in the Find box enter Sign in and in the Replace box enter the text you would like to display then click the Replace All button.

Then select File and Save All

Once again if it doesn’t update straight away just close the browser and open another incognito window as its most likely cached. The logon screen welcome message should now be updated.

You can also modify the header section at the top of the vCloud Self-Service Portal login screen.

To do this we need to open the following file,

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\VCloud\resources\localization.js

In the Find box enter Self-Service and in the Replace box enter the text you would like to display then click the Replace All button.

Next open the web.config file from the following location,

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\Web.config

In the Find box enter Self-Service and in the Replace box enter the text you would like to display then click the Replace All button.

Then select File and Save.

Then close and open your browser and the portal should be updated! You may need to initially clear your browser cache or open incognito mode for it change.

The same modification can also be made to the main Enterprise Manager Portal login screen.

To change the heading Veeam Backup Enterprise Manager which is displayed in the top left corner open the following app.js file.

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\scripts\build\production\MainApp\login\app.js

In the Find box enter Veeam Backup Enterprise Manager and in the Replace box enter the text you would like to display then click the Replace All button.

Next open the web.config file from the following location,

C:\Program Files\Veeam\Backup and Replication\Enterprise Manager\WebApp\Web.config

In the Find box enter Veeam Backup Enterprise Manager and in the Replace box enter the text you would like to display then click the Replace All button.

Then select File and Save.

Then close and open your browser and the portal should be updated! You may need to initially clear your browser cache or open incognito mode for it change.

I hope this post has helped you guys put your own personal touch on the Enterprise Manager Portal. If you are not using it then it’s time to get on board because it’s a great product! Especially when it comes to vCloud Director Integration!

 

As always use the subscribe box above for new post notifications and follow me on twitter @steveonofaro

 

 

 

 

 

 

Advertisement