Client area CSS

Knowledge Base Advanced Customisation
1

Introduction

The Client Area CSS is embedded into all client facing pages within QuickFile, and this essentially is where your clients log in to view and pay their invoices. The Client Area already utilises a default CSS style-sheet, and this customisation provides a way to overwrite these default styles.

Whenever you save a Client Area CSS customisation you will see a link that can be used to instantly preview your changes.

Example 1: Change the text size, font and colour

Most text within the client area is controlled by a class called .general. You can overwrite this class to change various aspects of the main textual content as follows.

.general {
    font-size: 12px !important;
    font-family: "Comic Sans MS" !important;
    color: #999999 !important;
}

You can also explicitly control link text using the following CSS:

.general a {
    color: #CC0000 !important;
}

In the above example we’re making the links red.

Example 2: Modify the shaded cell colours

Within the Client Area there is a class called .darkCell which sets the colour of many table headers. This class can be set from the main theming area in QuickFile based on a number of predefined colour palettes.

792×108 4.03 KB

If you want precise control of the shaded colour here you can overwrite the .darkCell class. Here we’re making it bright red:

.darkCell {
    background-color: #FF0000 !important;
}

Example 3: Hide the messaging buttons

Your client area comes with a fully integrated messaging system to make it easy for your clients to get in touch with you. If you have your own separate system and you’d rather your clients didn’t contact you via QuickFile, you can hide the messaging buttons using the following CSS.

.tblMailAlert, #hypaccountEmail {
  display:none;
}

.vMenuColumn>table>tbody>tr:nth-child(7){
    display:none;
}
.trDb_SendMessage, #hypQueryLink{
    display:none;  
}

Each invoice and estimate also comes with an option to query them using the internal messaging system. You can also hide these buttons with the following CSS:

#hypQueryLink {
    display: none;
}

Fully customising your header and footer banners

The advanced customisation tools also give you full control of the header and footer banners within the Client Area. There are already a basic set of controls within QuickFile for provisioning a header with a basic menu and corporate logo, and the Client Area Header and Client Area Footer HTML templates allow you to overwrite these completely with your own bespoke HTML.

You can find out more about Client Area Header and Footer HTML here.

807×493 11 KB