CSS Purchase Invoices

Invoice CSS
4

I don’t think any of the .transform-* stuff works for purchases, only for (sales) invoices and estimates. The options for CSS customisation of purchases are much more limited than for invoices since a QuickFile purchase record isn’t normally something you would send to anyone else - it only exists for your own internal record keeping.

That said, I think I have found a way to “cheat the system”… Try the following for your purchase invoice CSS under “advanced customisation”:

.invoice-header {
    font-size: 0 !important;
}

.invoice-header::after {
    font-size: 24px;
    content: "SELF-BILLING INV";
}

The .transform classes for invoices actually change the behaviour of the HTML renderer and make it replace the default text of the relevant element with the transformed text. The special handling of transforms doesn’t happen for purchases so the trick I’ve used here is:

  • the first rule has the effect of hiding (but not removing entirely) the word PURCHASE by making the font size zero
  • then the second rule inserts SELF-BILLING INV after the (now invisible) word PURCHASE and restores it to the size that PURCHASE would normally have been.
1 Like