This chapter describes the construction of the Custom Purchase Receipt for the Cale Default Template to help you design your one based on the default template.
The Cale Default Purchase Template uses a table to organize the elements to display
It uses 20 rows at the bottom and the top and 2 columns on each side to set the margins to approximately 2.5 cm
Inside this area is the receipt itself generate with a header image, several rows for the data, and at the bottom several rows for the footer with company details.
The layout is closed with another image
The whole layout is based on 1652x2272 pixels on 200 DPI to generate a PDF with the size of an A4 page
•The header image has a size of 1254x220 pixels
•The margins left, and right are set to a fixed with by using a transparent image 71x3 pixels
•The top and bottom margins are set to a fixed height by using a transparent image 200x200 pixels
•The content section between the yellow header and footer is bordered with a thin grey line
•The footer image is 1254x40 pixels
•Empty rows have a non-break space ( ) and are added as dividers and to fill out the page
•Some rows have only one <td> cell using colspan="3" or colspan="5" depending their location.
•The coloured rows are set using an in-line style for background-color.
<tr><td colspan="7" align="center" style="background-color: #faec65; font-size: 20px;">[DataCompanyName]</td></tr>
If you do not need a specific row, replace the label and the data in it with on break space to keep the length of the page intact.
| Note: Both images look as if they are not wide enough. This is caused by some data rows where the name of the label and the name of the field are much longer that the final text to print will be! This image below also depicts border lines that normally should not be visible but are made visible to display the structure of the table. |
Example of a PDF receipt
