Changing the Login Page

You can change the Login page of your Zoomdata environment from the default values by uploading a custom CSS file. This enables you to use your organization's color scheme and branding not only on the background image, but on the background animation, login box, and button. This topic provides examples to change the following features of the login page:

Changing the Login Page Background Gradient

The Customize UI tab in the Zoomdata environment enables you to change the background. You can also change the gradient animation color of the background to match the changes applied to the Login Page background. Use the selector illustrated below:

#init-page-gradient {
background: orange !important;

Changing the Login Box

You can change the color of the Login Box for your Zoomdata environment by using selector shown below:

#login-box.samlEnabled.collapse_login_box {
background-color: orange !important;

You can also make the Login Box transparent by specifying a back-color value of the following:

background-color: rgba (0, 50, 50, 0) !important;

Changing the Login Button Color

You can change the color of the Login button on your Zoomdata environment. Follow the selector below:

input.btn.btn-success.btn-large {
background-color: red !important;

To change the hover color of the Login button, follow the example selector below:

input.btn.btn-success.btn-large:hover {
background-color: blue !important;