Customizing The Login Page

Customize Login Page

It is possible to customize the login page for VDV by adding your own text, header image and changing the background color or background image.

 

In db.web.browser go to Configure > Web Site Setup > Login Page Setup. To change the layout click Configure tab at the top. There you can add, edit or remove text from the login page. To change the header banner click the folder icon at and locate a new banner image (Recommended size is 900x120px. Before you save your changes you can see how it looks like by clicking Login Page tab at the top and then click save when satisfied.

 

 Adding a background image to the Login page

Before continuing, note that customizing the login page in db.web.browser overwrites the index.html file so other changes made earlier directly to the index.html file will be deleted. This means that if you add a background image and then edit your login page in db.web.browser you will have to add your background image again.

 

To add an image to the login page background you must enter the image code to the body of the html text. 

 

Find index.html under Vista Data Vision > db.web.browser > vdv_www

 

Paste the following code in the end of the page body code just before the latter parenthesis. It should start in line 49.  

background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

   

HTML code with no backround photo.    

body {
  margin:0;
  border:0;
  padding:10px;
  background:#FFFFFF;
  text-align: center;
  color: #fff;
} 

     

HTML code with background photo added.        

body {
  margin:0;
  border:0;
  padding:10px;
  /*background:#FFFFFF;*/
  text-align: center;
  color: #fff;
  background: url(images/background.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
   background-size: cover;
}

        

The image must be situated in the relevant folder. In this case under the images folder. 

Change the image link so it includes the name of the relevant image. Such as in this case where the image name is backround.jpg then the relevant link images/backround.jpg is used.

 

This how the code should look.

  

This is an example of how the final login page can look. It can be a good idea to use a logo in a png format when using a custom background image.