Veeam Cloud Connect Portal – How to Modify the Default Theme in 9.5 Update 4

The Veeam Cloud Connect Portal provides a secure method for Cloud Connect Tenants to initiate their cloud failover plans. From the portal tenants are able to perform the following tasks,

  • Initiate a full site failover by a cloud failover plan
  • Retry a full site failover by a cloud failover plan
  • Undo a full site failover by a cloud failover plan
  • Monitor the full site failover operation and view historical data on previous failover sessions

Since I have put already put together guides on how to change the portal theme for previous versions of Veeam Enterprise Manager I thought I better add one for the Cloud Connect Portal.

Branding is very important as you want your customers to know who they are connecting too. Having the ability to distinguish yourself from everyone else gives a more personalized experience for your customers. So with that lets gets started!

First let’s look at changing the colour from the default Veeam Green to Blue. I have used the same blue from my previous Enterprise Manager theme post so that both portals look the same.

Open the following files,

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\LoginApp\resources\LoginApp-all.css

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\VeeamCloud\resources\VeeamCloud-all_01.css

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\VeeamCloud\resources\VeeamCloud-all_02.css

Search LoginApp-all.css for #54b948 and replace it with #06ABF7 (or any other colour you wish to use)

Then on the same file LoginApp-all.css search for #216f18 and replace it with #06ABF7

Then do the same in VeeamCloud-all_01.css, search for #54b948 and replace it with #06ABF7

Then again for VeeamCloud-all_02.css, search for #54b948 and replace it with #06ABF7

Then on the same file VeeamCloud-all_02.css search for #216f18 and replace it with #06ABF7

Then click on File, then Save All

If you refresh your browser now the Veeam Green colour should have changed

Now let’s look at changing the Company Name from Veeam to your Company Name

Open each of the following files,

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\VeeamCloud\app.js

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\LoginApp\app.js

Scroll down to the bottom on each file and you should see the following entry,

componentCls:’app-header-title’,bind:{html:'<div class=”sup”>Veeam <sup>&#174;

Now replace the word Veeam with your Company Name

Then again on the second file

Replace the word Veeam with your Company Name

Then click File, Save All and refresh your browser

If you would like to change the “Cloud Connect Portal” section you can do so by making the following changes,

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\VeeamCloud\app.js

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\LoginApp\app.js

In the Visual Studio Code Menu click on Edit then Replace, in the Find box type Cloud Connect Portal and in the Replace box enter the text you would like it to display

Then do this for the second file

Then click File and Save All

Then refresh your browser

You can also change the txt above the logon box which by default is “Type in your credentials:

To do this search for “Type in your credentials:” in the file listed below and replace it with what you would like the logon screen to display

C:\Program Files\Veeam\Backup and Replication\CloudPortal\Scripts\build\production\LoginApp\app.js

In this example I am going to change mine to say “Login to Customer Portal

Then click File, Save All.

Then refresh your browser

Last thing we need to change is the name that appears in the browser tab,

To do this open the following file,

C:\Program Files\Veeam\Backup and Replication\CloudPortal\ buy medicine from cannada orlistat is it safe to buy antabuse online Web.Config 

Then Edit the entry –  add key=”AppName” value=”Cloud Connect Portal

Change Cloud Connect Portal to the heading you specified earlier, for this example “Customer Portal

Save the changes and refresh your browser

There you go all done!

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

LINKEDIN

Leave a Reply

Your email address will not be published. Required fields are marked *

LINKEDIN