Login page CSS

Introduction

This CSS template will be incorporated into your Client Area login and password recovery pages (e.g. https://mycompany.quickfile.co.uk). 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(https://www.companywizard.co.uk/images/logo_474.png);
    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 {
    display:none;
}

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(https://qfstore.blob.core.windows.net/contentmanagement/img/paisley-tile.png);
}

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

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