Troubleshooting & Advanced Editing for Templates
Written by Kali Patrick
Updated at July 27th, 2024
Table of Contents
Troubleshooting PDF Template Issues
The table below describes common PDF template issues and errors, and how to correct them.
| Issue/Error | Possible Solutions |
|---|---|
| Your template is adding a blank page. |
Go into the Source code for that template.
Then find and delete the following line:
<div class="clearb" style="height: 1px; overflow: hidden;"> </div> |
| Images added to Invoice template using the {{ticket_images_rendered}} Template Tag are much bigger than the same images on the Ticket. |
The Invoice template needs some extra CSS to regulate the size of the rendered images.
Go into the Source code for that template.
Add this code to the CSS section: .rendered-image { |
| Images display in the template editor, but not when viewing on the Ticket / Estimate / Invoice pages. |
If you are hosting the images on certain free image hosting sites, they will not render due to an SSL issue.
Host images on your own domain/website if possible. |
| The "Paid" (and possibly other) images on the Invoice prints black or inversed on Mac computers. |
This can happen with transparent PNG images due to a known issue with the PDF rendering engine and some printer drivers. HP printers seem more prone to this and are less likely to have a fix.
We suggest updating the printer drivers. Some have success when they download the PDF, open it in the Preview app, and in Preferences set the Window background to white, and print from there. |
Advanced Editing: Remove Invoice Line Item Columns
You can remove columns from the {{invoice_line_items_table}} Template Tag in the Invoice Template. These steps also work for the {{estimate_line_items_table}} Template Tag in the Estimate Template.
For example, suppose you want to remove the "Item" column.
Add this style in the Source editor:
.invbody-items tr td:first-child {
display: none;
}
Then delete this in the Source editor:
<th class="first">
<div class="item">Item</div>
</th>
Before/After:
To remove a column other than the first one, insert this style into the Source editor instead:
.invbody-items tr td:nth-child(#) {
display: none;
}
IMPORTANT: Replace the # sign with the actual number from the left of where your column is, then delete that column code in the source code. This will tell Syncro to remove that column and you'll be all set.