CSS and customisation

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

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.

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??

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

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

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?

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.

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…

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

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

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.

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


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.

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?

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

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…

This topic was automatically closed after 4 days. New replies are no longer allowed.