Me again… I’m now committing to moving over to Quickfile, so I need to tinker with the customisation of the invoices and estimates to get them just so. I remember from our previous conversations that the system was only really built to handle simple HTML in the note/terms boxes, but I continue to try and push it
But alas, I’m really stuck… I’ve amended the invoice payment terms to display what I’m after and it looks fine online, but it goes all skewif on the pdf
What are you trying to achieve? There may be another way. Even examples of what you’ve tried would help as none of us (apart from the qf team) can see what you’ve done
I’m trying to add the following table to the Payment Terms field:
<table style="width:630px;font-family:Arial;font-size:11px;font-style: normal;font-weight: normal;font-variant: normal; border-collapse: collapse"><th colspan = "3" style = "background-color: #000; color:#fff;width: 50px; text-align: left; font-weight: bold; padding:4px;">Ways to pay...</th><tr><td><center><img src="https://www.****.co.uk/resources/bank7.png" alt="Bank Transfer" width="100"></center></td><td colspan ="3" style = "padding:4px;"><strong>Bank Transfer</strong><br>The best way to pay this invoice is by bank transfer using BACS or Faster Payment.<DL>Send your payments to:<br><DD>Account Name:***<DD>Sort Code:**-**-**<DD>Account:********<DD>Reference:<i>Your invoice number</i></DL></td></tr><tr><td colspan = "3"><p><center>You can also make payment by <strong>Direct Debit, credit or debit card, or using your PayPal account</strong><br>Just log on to your <a href="https://*****.quickfile.co.uk">Client Account</a> to set up your payment.</p></center></td></tr><tr><td colspan = "3" style = "background-color: #000;"></td></tr></table>
It displays fine in the online previews, but goes all wrong on the pdf print.
Any thoughts or assistance is greatly appreciated.
Will
Ok, I’ve had a look, and I’ll be honest, I’m not sure what I done, except this:
There were <dd> which weren’t closed
You had colspan=“3” on all on table rows, only the first one should have been colspan=“3”, the rest were colspan=“4” as it didn’t take into account the first column (the image)
Not sure if it was the way you pasted it, but some of the attributes had spaces between the name and the value: colspan = "3" for example.
The code I’ve now got is this (uncompressed, with image holder)
<table style="width:630px;font-family:Arial;font-size:11px;font-style: normal;font-weight: normal;font-variant: normal; border-collapse: collapse;">
<th colspan="4" style="background-color: #000; color:#fff;width: 50px; text-align: left; font-weight: bold; padding:4px;">
Ways to pay...
</th>
<tr>
<td>
<center>
<img src="http://placehold.it/100x50" alt="Bank Transfer">
</center>
</td>
<td colspan="3" style="padding:4px;">
<strong>Bank Transfer</strong><br>
The best way to pay this invoice is by bank transfer using BACS or Faster Payment.
<dl>
Send your payments to:<br>
<dd>Account Name:***</dd>
<dd>Sort Code:**-**-**</dd>
<dd>Account:********</dd>
<dd>Reference:<i>Your invoice number</i></dd>
</dl>
</td>
</tr>
<tr>
<td colspan="4">
<p>
<center>You can also make payment by
<strong>Direct Debit, credit or debit card, or using your PayPal account</strong>
<br>Just log on to your <a href="https://*****.quickfile.co.uk">Client Account</a> to set up your payment.
</center>
</p>
</td>
</tr>
<tr>
<td colspan="4" style="background-color: #000;"> </td>
</tr>
</table>
And the compressed version:
<table style="width:630px;font-family:Arial;font-size:11px;font-style: normal;font-weight: normal;font-variant: normal; border-collapse: collapse;"><th colspan="4" style="background-color: #000; color:#fff;width: 50px; text-align: left; font-weight: bold; padding:4px;">Ways to pay...</th><tr><td><center><img src="http://placehold.it/100x50" alt="Bank Transfer"></center></td><td colspan="3" style="padding:4px;"><strong>Bank Transfer</strong><br>The best way to pay this invoice is by bank transfer using BACS or Faster Payment.<dl>Send your payments to:<br><dd>Account Name:***</dd><dd>Sort Code:**-**-**</dd><dd>Account:********</dd><dd>Reference:<i>Your invoice number</i></dd></dl></td></tr><tr><td colspan="4"><p><center>You can also make payment by <strong>Direct Debit, credit or debit card, or using your PayPal account</strong><br>Just log on to your <a href="https://*****.quickfile.co.uk">Client Account</a> to set up your payment.</center></p></td></tr><tr><td colspan="4" style="background-color: #000;"> </td></tr></table>
With a bit of luck, that will help you. Even if it doesn’t fix the issue (I notice no space by Direct Debit), that should hopefully give you an idea of where to go. Any more issues, please reply
Edit I should add, that although it looks good OK in the PDF, the online version is still different
I’ve fixed it, and amended the code above.
I just thought I’d mention… JSFiddle.net is a really good tool for testing your markup without committing it to QF. In general it’s an excellent tool for all kinds of front-end testing.
The PDF generator has a slightly less sophisticated rendering engine than your browser so it can be tricky at times to get things to match up. Having unclosed tags will definitely break things on the PDF side.
