CSS Invoice customisation. How can I change the label Invoice no to Plan No

Invoice CSS
1

I want to change the default label Invoice No to say Plan No so I can issue an annual plan to my customers that may change as the year progresses.
I can change the label from Invoice No to Plan No and see this label change on the preview of my paln layout.

When I select apply changes and save it says CSS style saved and applied! But as soon as I close the screen I cannot find the template I saved to use it. or maybe I havent saved the area I changed as I got to this area by selecting inspector when I right click on the mouse.

Any advice will be really appreciated regards helen

bespoke invoice design request.pdf (352.1 KB)

2

Changing things in the inspector will only change what you’re seeing in your own browser there - anyone else looking at the same page will still see the default label. There is a way to change this but it requires a bit of a CSS trick, something like this should work:

.tr-invoice-details-invno strong {
  /* hide the default label by shrinking it to zero size */
  font-size: 0;
}

.tr-invoice-details-invno strong::after {
  /* add replacement label after the default one and restore it to normal size */
  font-size: 12px;
  content: "Plan No";
}
3

Thankyou for giving me this suggestion. Is the script you have written already in the css script or does it need to be added. I have tried to find .tr-invoice-details-invo Strong { but can’t seem to see it. If it is already in the programme can you let me know where to look.
regards

Helen.

4

css screen print - to find area to reduce invoice no label to font size 0 so new lable will show.pdf (432.6 KB)

Hi @ian_roberts I have tried to follow your suggestion again and feel that I am now the right area for the code but am still not sure if I need to actually insert a peice of text. I understand coding and design structure but my skill level is generally at the copy and paste level.

5

You would need to add those two blocks that I suggested, just above the /*ADDRESS DETAILS line.

In fact, looking at that latest screenshot I would refine my addition to:

.tr-invoice-details-invno .invoice-details-left-td strong {
  /* hide the default label by shrinking it to zero size */
  font-size: 0;
}

.tr-invoice-details-invno .invoice-details-left-td strong::after {
  /* add replacement label after the default one and restore it to normal size */
  font-size: 12px;
  content: "Plan No";
}
1 Like
6

@ian_roberts. Thankyou for your latest reply. I copied your text, pasted in into the area you suggested and it has worked prefectly. I now have a custom template that works perfectly for the annual plan records I wanted to introduce.

For anyone reading this query who would like to use this fix for their data but feel that the CSS area is too difficlut to deal with I did find a fix when I initially wasn’t sure how to follow Ian Roberts instructions. I selected account settings then invoice customisation. Selected the label box and unticked the invoice no box to hide this label from my invoice (Plan) and then manually added the Plan number into the body of the plans as I created them. A reasonable fix but amending the CSS is so much better because the Plan number will always be correct. So thanks again Ian. really appreciated your help.

7

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