CSS Purchase Invoices

Invoice CSS
1

Hello,

I’m trying to make some changes to the Purchase Invoice CSS. A large part of my supplies are done through Self-Billed royalties, I would like to change the “PURCHASE”, to “SELF BILLING INV”.

I am struggling to locate what the element is called, I’ve tried both invoice-header and PurchaseView1_dvHeader using the below code, but I’m not having much luck.

.transform-invoice-header{
content: “SELF BILLING INV”;
}

Ideally I’d like to be able to switch between “PURCHASE” and “SELF BILLING INV” depending on what the invoice is for, but at a worst case, all the internal purchases could say SELF BILLING INV as they don’t get issued for any purpose.

This would represent a huge time saving for me as I currently create my invoices in Excel to issue, then again in accounts package.

Thanks!
Alan

2

I raised a similar topic for adapting the CSS for sales invoices and received some very useful instructions from @ian_roberts about how to an inspect element. This may also assist you with what element that you want to transform…Non VAT registered business - "Sub Total" display:none

3

That is a fantastic thread but unfortunately can’t seem to get it to do anything in my use case , even to hide the “PURCHASE”. @ian_roberts are you able to advise at all?

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
5

Hi Iain,

Thanks for that but can’t seem to get it to do anything. I also tried only using the first section to hide “purchase” but it didn’t appear to do anything. (I cleared cache several times).

Were you able to get results?

6

@QFMathew @Glenn are either of you able to help advise on this? Would love to get a solution here.
Cheers alan

7

Hi @alan.mackintosh

I’ve just tried Ian’s solution and managed to get this working, although it did require a hard refresh (Ctrl + F5).

May be worth trying this when viewing the purchase invoice.

8

Ah. It has worked on the actual invoices but not when I clicked the preview in the CSS Editor screen.
Thanks @ian_roberts for the solution

1 Like
9

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