Client area CSS

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

Introduction

The client area is where your clients view and pay invoices, see statements and contact you. Client Area CSS controls how it looks.

It also styles your custom header and footer HTML, so keep all your client area styles here.

Previewing: the template’s Preview button opens a simplified client area showing just your header and footer. To check styles on a real page, open a client’s invoice link in a private browser window. Opening it in the same window signs you out of QuickFile.

Selector reference

Selector	What it is
`.head-banner`	The white banner at the top
`.co-name-lbl`	Your company name (top left)
`.r_header_box`	Sign out and Settings links (top right)
`.h-menu.dark-cell`	The menu bar (Accounts Overview, Statement)
`.h-menu .mi a`	Links in the menu bar
`.button-base-m`	Buttons such as “Download PDF or Print”
`#hypQueryLink`	The “Query Invoice” button
`.footer-banner`, `.footer-inner`	The footer strip and its text
`.invoice-…`	The invoice itself. This follows your invoice theme, set in Invoice Customisation.

Recipe 1: Brand the menu bar, name and buttons

/* Menu bar in your brand colour */
.h-menu.dark-cell        { background-color: #0f2a44 !important; }
.h-menu .mi a:hover      { background-color: #1d4570 !important; }

/* Company name */
.co-name-lbl             { color: #0f2a44 !important; font-weight: bold !important; }

/* Outline buttons */
.button-base-m {
    background: #ffffff !important;
    border: 1px solid #0f2a44 !important;
    color: #0f2a44 !important;
}

Recipe 2: Hide “Query Invoice”

Use this if you’d rather clients contacted you another way, such as by phone or through a helpdesk.

#hypQueryLink { display: none !important; }

Recipe 3: Style the footer