This CSS template will be incorporated into your Client Area login and password recovery pages (e.g. You may want to use this template to incorporate your company logo on the login screen or set some custom background. We’ve included a few examples here to get you started.

Example 1: Add your own logo

You can add your own logo to the login page by setting a background image to a hidden placeholder div called .divPlaceholder1.

.divPlaceholder1 {
    background-image: url(;
    background-repeat: no-repeat;
    width: 474px;
    height: 83px;
    min-width: 474px;
    min-height: 83px;
    display:block !important;
    margin: 0 auto 30px auto;

Example 2: Hide the padlock icon

The padlock icon is embedded in a div named .leftHandImage. You can set its visibility to none or overwrite the background image to something else if you want your own logo to display here.

.leftHandImage {

Example 3: Set a custom background

You can tile your login page with any background you like by setting a background-image property on the body element.

In the below example we have set the background image to a paisley pattern and changed the login box colour to blue.

body {
    background-image: url(;

.tbllogin {
    background-color: #72b1ff !important;

You will need to suffix the background-color attribute with !important to override the default colour.