Advanced Customisation Tools
Access via: Account Settings › Design Customisation › Advanced CSS & HTML Customisation
Prefer to watch?
Prefer a video walkthrough? Watch our QuickFile Advanced Customisation Tools Tutorial tutorial on the QuickFile Help Guides YouTube channel.
Introduction
Advanced Customisation lets you add your own CSS, HTML and JavaScript to 12 areas of QuickFile, including your login page, client emails, the client area and printable documents.
You’ll need: a Power User subscription, and a basic working knowledge of CSS or HTML.
Where to find it
Go to Account Settings → Design Customisation → Advanced CSS & HTML Customisation. The page is titled Advanced Customisation – Beta.
The panel on the left has two tabs:
- Preset Templates: one editor for each area of QuickFile (listed below).
- HTML Snippets: reusable blocks of HTML.
What each template changes
| Template | What it styles | How to preview it |
|---|---|---|
| Login page CSS | Your login and password recovery screens | Preview button (opens your login page with ?preview=true) |
| Email Wrapper HTML | The design around every email sent to your clients | No preview: send yourself a test |
| Purchase Payment CSS | Remittance advice for payments you make to suppliers | Preview button |
| Sales Payment CSS | Payment receipts for payments from clients | Preview button |
| Purchase Invoice CSS | Purchase invoices and purchase orders | Preview button |
| Client Statement CSS | Client statements | Preview button |
| Client Area CSS | The pages where clients view and pay invoices | Preview button (client area preview) |
| Client Area Header HTML | Replaces the client area header and menu | Preview button (client area preview) |
| Sales Invoice (mobile) CSS | Sales invoices and estimates opened on a phone. Only works if Mobile Friendly Invoices is switched on in Advanced Features. | Open an invoice link on a phone |
| Client Area Footer HTML | Replaces the client area footer | Preview button (client area preview) |
| Global CSS | Every page of your QuickFile admin area (not the client area) | Reload any page |
| Custom Scripts | JavaScript/jQuery that runs in your admin area | Reload the page it targets |
Sales invoices and estimates aren’t in this list. Style those under Account Settings → Design Customisation → Invoice Customisation.
Save, preview, activate
Nothing you write goes live until you activate it:
- Pick a template on the left. For Email Wrapper, Client Area Header and Client Area Footer, click Import Default to load QuickFile’s own markup as a starting point.
- Write or paste your code into the editor.
- Click Save File. You’ll see “This customisation is currently INACTIVE” and a green Activate button.
- Click Preview to check the result. Previews show your saved code even while it’s inactive.
- Click Activate. The button changes to a red Deactivate, which turns your changes off again without deleting them.
Reading the template list
The coloured bar beside each template shows its status:
| Bar | Meaning |
|---|---|
| Grey | Not used: nothing saved |
| Orange | Saved, but inactive: your clients don’t see it |
| Green | Active: live now |
Other buttons
- Import Default replaces whatever is in the editor with QuickFile’s default markup. It asks you to confirm first. Nothing is saved until you click Save File.
- Delete Customisation removes the saved file completely, putting that area back to QuickFile’s standard design.
Finding the right selector
Every recipe in this guide targets a CSS class (.name) or ID (#name). To find the selector for something else:
- Open the page you want to change. For client-facing pages, use the template’s Preview link.
- Right-click the element and choose Inspect (or press F12).
- Note its
class="…"orid="…". Class names are case-sensitive:.tdtaggedis not the same as.tdTagged. - Try your change in the Styles panel. When it looks right, copy the rule into QuickFile.
Good to know
- Use
!importantto override QuickFile’s own styles:color: #333 !important;. The editor shows a yellow warning triangle beside lines using!important. You can ignore it. - Host images over
https://, for example on your own website. Images loaded overhttp://are blocked. - Refresh hard. If a change doesn’t show, press Ctrl+F5 (Cmd+Shift+R on a Mac).
Troubleshooting
Most problems come down to one of five things: the template isn’t active, the browser cache, QuickFile’s own styles taking priority, a wrong selector, or a typing mistake.
My change doesn’t show up
- Is the template’s bar green? Orange means it’s saved but not active.
- Hard-refresh with Ctrl+F5 (Cmd+Shift+R on a Mac).
- Are QuickFile’s own styles taking priority? Add
!important. - Is the selector right? Inspect the element (F12) and check its exact name, including upper and lower case.
- Is there a typing mistake earlier in the file? A missing
}can stop every rule after it from working. Check your code with the W3C CSS validator.
The preview shows my change, but my clients don’t see it
Previews show saved templates even when they’re inactive. Click Activate to make the change live.
The Log in button is missing from my login page
That only happens in preview mode (?preview=true). Your real login page still has the button.
My client area has lost its menu or Sign out link
Your custom Header HTML replaced the default header. Click Import Default, add your changes to that markup and save. See Client Area Header & Footer.
Opening a client invoice link signed me out
Client links open the client area, which uses a separate login. Open them in a private browser window to stay signed in to QuickFile.
It looks right on screen but wrong in the PDF
Remove rounded corners, shadows, web fonts and flexbox. See PDFs are not browsers.
My logo doesn’t appear
Open the image address in a private window. If it doesn’t load there, it won’t load for anyone else either. The address must start with https://, and your website must allow other sites to show the image.
I’ve broken something. How do I undo it?
Click Deactivate and the standard design comes back at once. To remove your code completely, click Delete Customisation.
Will QuickFile updates break my changes?
They can, because QuickFile sometimes renames classes or changes page layouts. Keep a copy of your code, and check your key pages after QuickFile updates.
Related topics
- Login page CSS: Add your logo, brand colours and a background to your login page.
- Client area CSS: Style the pages where clients view and pay invoices.
- Global CSS template: Change how QuickFile looks for you and your team.