Login page CSS

Access via: Account Settings › Design Customisation › Advanced CSS & HTML Customisation › Login page CSS (left-hand list)

Prefer to watch?

Prefer a video walkthrough? Watch our Customise QuickFile with CSS, HTML and scripts tutorial on the QuickFile Help Guides YouTube channel.

Introduction

Brand your login and password recovery screens with your logo, your colours and a background.

The CSS loads on your account’s own login page, for example https://yourcompany.quickfile.co.uk/login.

To preview: save the template and click Preview. This opens your login page with ?preview=true. The Log in button is hidden in preview mode, so don’t worry when it’s missing.

Selector reference

Selector	What it is
`body`	Page background
`.tblWrapper_row1`	The heading row (“Account Login” and your company name)
`.tblWrapper_row1 h1`	The “Account Login” heading
`.accNameHeader`	Your company name under the heading
`.divPlaceholder1`	An empty, hidden space above the form, for your logo
`.tbllogin`	The white login card
`.form-row label`	Field labels (Email, Password)
`.text_input_l`	The email and password boxes
`.link_1`	“Forgot your password?” and “Show password” links
`.btnsubmit`	The Log in button

Recipe 1: Add your logo

.divPlaceholder1 is hidden until you show it. This rule makes it visible and displays your logo as its background. Set width and height to the size you want the logo shown at.

.divPlaceholder1 {
    display: block !important;
    background: url(https://www.yourcompany.co.uk/logo.png) no-repeat center / contain;
    width: 300px;
    height: 80px;
    margin: 0 auto 20px auto;
}

For a sharp logo on high-resolution screens, upload an image twice the size you show it at (600 × 160 px here).

Recipe 2: Let the logo replace the heading

Once your logo is showing, you may not need “Account Login” and your company name as well. Hide the heading row and move the logo up:

.tblWrapper_row1 { display: none; }

.divPlaceholder1 {
    display: block !important;
    background: url(https://www.yourcompany.co.uk/logo.png) no-repeat center / contain;
    width: 300px;
    height: 80px;
    margin: 30px auto 20px auto;
}

Recipe 3: Brand colours

Colour the Log in button and links, and add an accent line to the top of the card:

.tbllogin {
    border-top: 5px solid #0f2a44 !important;
}
.btnsubmit {
    background-color: #0f2a44 !important;
    border-color: #0f2a44 !important;
}
.btnsubmit:hover {
    background-color: #1d4570 !important;
}
.link_1 {
    color: #c2410c !important;
}

Recipe 4: Background colour or image

When you darken the page, also make the heading white so it stays readable:

body {
    background: linear-gradient(135deg, #0f2a44 0%, #1d4f7a 100%) fixed !important;
}
.tblWrapper_row1 h1,
.accNameHeader {
    color: #ffffff !important;
}

To use a photo instead, replace the background line with:

body {
    background: url(https://www.yourcompany.co.uk/login-bg.jpg) no-repeat center center fixed !important;
    background-size: cover !important;
}

All together

body {
    background: linear-gradient(135deg, #0f2a44 0%, #1d4f7a 100%) fixed !important;
}
.tblWrapper_row1 { display: none; }
.divPlaceholder1 {
    display: block !important;
    background: url(https://www.yourcompany.co.uk/logo-white.png) no-repeat center / contain;
    width: 300px; height: 80px; margin: 30px auto 20px auto;
}
.tbllogin   { border-top: 5px solid #f5a623 !important; }
.btnsubmit  { background-color: #0f2a44 !important; border-color: #0f2a44 !important; }
.btnsubmit:hover { background-color: #1d4570 !important; }
.link_1     { color: #0f2a44 !important; }