Client area header and footer HTML

Access via: Account Settings › Design Customisation › Advanced CSS & HTML Customisation › Client Area Header HTML or Client Area Footer HTML (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

Replace the header and footer of your client area with your own HTML, for example to show your logo instead of your company name or to add your company details to the footer.

Just need a simple banner? Account Settings → Design Customisation → Client Area Customisation is quicker and needs no code.

Read this first: the header replaces everything

Client Area Header HTML replaces the whole header, including the Sign out and Settings links and the Accounts Overview and Statement menu.

Always start from Import Default. If you paste in just a logo, your clients lose the menu and the Sign out link.

Step by step

Open Client Area Header HTML, click Import Default and confirm. QuickFile’s standard header markup loads into the editor.
Change only what you need (see the recipe below), then click Save File.
Click Preview. The preview shows saved templates even before you activate them, with the note “You are currently using your own custom HTML in the header.”
Do the same for Client Area Footer HTML.
Put the styling in Client Area CSS.
Activate all the templates you’ve used.

The default header

This is what Import Default loads. Your company name appears in place of “John Smith”.

<div class="options-menu">
    <div class="mmi mmi-2"><a href="/clientarea/statement">Statement</a></div>
    <div class="mmi mmi-3"><a href="/clientarea/mail">Contact Us</a></div>
</div>

<div class="head-banner">
    <div class="header-inner">
        <div class="co-name-lbl">John Smith</div>
        <div class="r_header_box">
            <div><a href="/login/signout"><i class="fa fa-sign-out"></i> Sign out</a></div>
            <div><a href="/clientarea/settings"><i class="fa fa-cog"></i> Settings</a></div>
        </div>
    </div>
</div>

<div class="h-menu dark-cell">
    <div class="h-menu-inner">
        <div class="mi mi-1"><a href="/clientarea/dashboard">Accounts Overview</a></div>
        <div class="mi mi-2"><a href="/clientarea/statement">Statement</a></div>
        <div class="btn_mobile_menu"><i class="fa fa-bars mob-menu-ico"></i></div>
    </div>
</div>

Recipe: Your logo instead of your company name

Find the co-name-lbl line in the default header and replace it with:

<div class="co-name-lbl">
    <img src="https://www.yourcompany.co.uk/logo.png" alt="Your Company Ltd" height="56">
</div>

Then add some spacing in Client Area CSS:

.co-name-lbl { padding: 12px 20px !important; }

Recipe: Company details in the footer

<div class="footer-banner">
  <div class="footer-inner">
    Your Company Ltd &middot; 1 High Street, Town, AB1 2CD &middot;
    Registered in England &amp; Wales No. 01234567 &middot; VAT No. GB123456789<br>
    <a href="https://www.yourcompany.co.uk/terms">Terms of business</a> &middot;
    <a href="mailto:accounts@yourcompany.co.uk">accounts@yourcompany.co.uk</a>
  </div>
</div>

Finishing touch: matching Client Area CSS

.co-name-lbl         { padding: 12px 20px !important; }
.h-menu.dark-cell    { background-color: #0f2a44 !important; }
.h-menu .mi a:hover  { background-color: #1d4570 !important; }
.footer-banner       { background-color: #f2f5f9 !important; }
.footer-inner        { color: #5f6b7a !important; font-size: 12px !important; }
.footer-inner a      { color: #0f2a44 !important; }