Global CSS template

Glenn · 7 October 2015 09:43

Access via: Account Settings › Design Customisation › Advanced CSS & HTML Customisation › Global 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

The Global CSS template changes how QuickFile looks for you and your team, on every page of your admin area. Your clients never see it. The client area has its own Client Area CSS.

When you activate it, QuickFile says you may need to log out and back in. In testing, the change appeared as soon as the page was reloaded.

Selector reference

Selector	What it is
`.hMenuBar`	The blue menu bar across the top
`.taggedButton`	The “Tagged” status button on bank statements
`.tagmeButton`	The “Tag Me” status button on bank statements
`td.tdtagged`, `td.tduntagged`	The status cells around those buttons (all lowercase)
`#resultsTbl`	The bank statement table
`.vMenuColumn`	The collapsible custom menu (opened with the `>>` tab)

Each admin page also adds a class to <body> that names the page, such as .page-bank-statement or .page-dashboard-index. Put it in front of a selector to change one page only.

Recipe 1: Colour-code an account

If you work in more than one QuickFile account, give each one a different menu bar colour so you always know which account you’re in.

.hMenuBar {
    background-color: #6b3fa0 !important;
}

Recipe 2: Colour-blind-friendly bank tagging

By default, tagged lines are green and untagged lines are red, which many people can’t tell apart. This recipe uses blue and orange instead, and makes “Tag Me” bold.

/* Tagged = blue */
.taggedButton {
    background-color: #cfe0ff !important;
    border-left-color: #2f5fd0 !important;
    color: #1a3a80 !important;
}

/* Untagged = orange */
.tagmeButton {
    background-color: #ffe2c2 !important;
    border-left-color: #d9730d !important;
    color: #7a3d00 !important;
    font-weight: bold;
}

Recipe 3: Larger bank statement text

#resultsTbl td,
#resultsTbl td * {
    font-size: 14px !important;
}