Advanced Customisation Tools

Glenn · 6 October 2015 19:23

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="…" or id="…". Class names are case-sensitive: .tdtagged is 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 !important to 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 over http:// 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.