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>®
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\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
stevenonofaro.com 