After pointing your domain over to our IP to get set-up for white-labeling your dashboard, you may want to customize the overall feel to more seamlessly integrate with your branding.

In this article, you'll learn:

  1. Getting Started with CSS Customization
  2. Customizing Login Screen Background
  3. Customizing Login Button Colors

__________________________

Getting Started with CSS Customization

Any changes to your white-label dashboard's CSS can be done right from your account settings page.

1. Navigate to "My Account" on the top right of your dashboard.

2. Head to the White-label section

3. Click "Change CSS"

4. This is the area you'll insert your custom CSS.

Note: Customization to your white-label dashboard will not show unless you have already pointed your domain or sub-domain over to our IP address. The changes will only be reflected when logging into your white-label dashboard with that domain.

__________________________

Customizing Login Screen Background

There are two ways to change the default login screen background. It can be replaced by another image or a different color.

Image

To add your own image as the background to the login page, you'll first need to upload that image to a public directory (or even the media library of your own project) and than you can insert the image link in this code & paste within your CSS settings.

body#login-page .welcome-screen {
background-image:url(/public/your_image_url.jpg)!important;
}

Note: Replace '/public/your_image_url.jpg' with the your image link.

Color 

To add your own color as the background to the login page, find the color that you want to replace it with, and than you can insert that color in this code & paste within your CSS settings.

body#login-page .welcome-screen {
background-color:#000000!important;
}

Note: Replace '#000000' with your color code
__________________________

Customizing Login Button Colors

You may want to change the login buttons to accommodate your brand's colors.

To do so, insert your color in this code & paste within your CSS settings.

body#login-page .button {
background-color: #000000
}

Note: Replace '#000000' with your color code
_____________________

To customize your dashboard's main menu colors, get in touch with our support team 😄 

Did this answer your question?