CSS and customisation

[MGP]

Hi, I’m quite new to QF, I’m really liking it so far, but the pintable’s are not working that well for me. The invoices, delivery notes and statements.

I have read all of the CSS info on the knowledge base and community but everything kind of assumes you have a decent knowledge of how this all works. I have done some HTML and PHP in the past and I understand what CSS is and what it does so I’m not starting from complete scratch, but I have no idea how to actually change it, where to change it, how to save it.

Is there anyone at QF or a freelancer that has a chargeable service for doing this type of thing?

I actually would quite like to do it myself but I really just don’t know where to start…

Any help or suggestions gratefully accepted

[QFSteve]

Hello @MGP

Best place to start would be looking at the standard designs.

Which Invoice design is closest to what you are after?
What would you like to add and where?

If there is any sensitive information please feel free to send me a private message with screenshots.

[MGP]

Thanks Steve, that was quick!

To be fair its not so much what I want to change, its how or where do I change it??

[QFSteve]

Hello @MGP

Most can be changed in Sales > Invoice Customisation

Click on each section to view options e.g. payment terms/logo

If there is anything more specific just let me know

[MGP]

Thank you, yeah I see that bit, it was the CSS really, Where do you go to edit it?

[QFSteve]

Hello @MGP

Preview an invoice and select “Invoice style gallery” at the top.
Choose the closest layout to what you are after and select customise this style

This will bring up the editor (give the new style a name)

Upon saving the new design will show in “Invoice style gallery”

As I said what are you trying to change?

[MGP]

More the delivery note and customer statement really, the invoice I can live with.

The statement has far too much info on it for me, I need to strip it back and rejig the layout. And the delivery note, is a rejig thing really too, the logo covers up items etc… Id like to change the fonts and some bits and pieces.

The invoice seems quite easy to get at and to alter but I can’t seem to get at the del note and statement.

[MGP]

Knowledge base implies that you can do the same thing when you have it on the screen as a del note but fore me the option to customise is unavailable when its being viewed as a del note…

[QFSteve]

Hello @MGP

In terms of the delivery note, it is derived directly from your invoice.
If you haven’t already I would perfect the invoice template first.

Once you have done this you can go into customise the layout and save a copy of it (as a delivery note)
It will have all the same CSS saved on it.

Follow the below article to edit your default delivery note default

Creating delivery notes

Introduction If you’re dealing in physical goods then no doubt you’ll want to print a delivery note or packing slip to go with your outbound deliveries. The delivery note often resembles a cut-down version of your invoice, minus the financial details. Creating a simple delivery note based on your invoice can easily be achieved in QuickFile, this guide explains how. How do I create a delivery note? In QuickFile delivery notes are derived from invoices or estimates. When previewing simply go in…

If you preview an invoice then select, More Options > View as Deliver Note

[QFSteve]

Hello @MGP

In terms of the statement, it will also take elements from your default CSS such as logo, company address etc.

To edit the statement in any great depth you will need to use the Advanced Customisation Tools (requires a Power User Subscription). This can be very difficult if you have limited knowledge of CSS/Html.

Advanced Customisation Tools

Introduction The Advanced Customisation tools are available to all Power-User Subscribers and offer a unique way to control a number of key visual aspects within QuickFile through the use of CSS and HTML. These tools are divided into two different sections: preset templates HTML snippets What are preset templates? Preset templates allow you to inject your own custom CSS and HTML into key areas within QuickFile. When you open the Advanced Customisation area you will see a left hand column wit…

The Advanced Customisation Tools can be accessed by going into:
Account Settings > Design Customisation then select Client Statement CSS

https://support.quickfile.co.uk/t/client-statement-css/8948

Depending on what you want to remove, you may want to have a look in the forum, for example, I found this when looking for you.

Removing field in client statement

Hi Glenn is there a way to remove the Invoiced (eg last 30 days) field in the statement For credit control, when a client has a number of invoices overdue I send them a statement. The final amount outstanding shows well as does the list of individual invoices overdue… But the Invoiced (last 30 days) comes up in print /PDF as just “Invoiced” and is usually a different amount to the total amount outstanding… This looks pretty confusing to the client… E.g. recently a series of monthly invoic…

[MGP]

I’m missing something here then. I have already read that, as soon as I click view as delivery note, the option to edit disappears. I’m OK with HTML and alright with CSS (I’m happy to do some study as well) I just dont seem to be able to get that far…

So following the steps above, when I am viewing as delivery note, what exactly do I click at that point?

[QFSteve]

Hello @MGP

Have you got the Invoice looking the way you want (logo, text style/size etc)?

Editing a Delivery note Instructions (and links to default CSS) are on this article
https://support.quickfile.co.uk/t/creating-delivery-notes/8841

[MGP]

Read that too… I’m getting there, there are chunks missing from the instructions but I have a delnote with the css I want now.

So what about if the html needs tweeking, for example the delnote has a due date and a payment instruction comment etc…