- Posts: 21
- Thank you received: 0
Invoice Formatting
- Tim Serr
-
Topic Author
- Offline
- Junior Member
-
4 years 10 months ago - 4 years 10 months ago #139048
by Tim Serr
Invoice Formatting was created by Tim Serr
Hey there, absolutely LOVE this extension! Fantastic work and robust functionality.
I am, however, experiencing issues with the PDF Invoice. I've searched the forums and documentation but can't seem to find an answer on best practices for creating the invoice.
I've used inline CSS in hopes this would be okay, but it seems not to be working.
I've attached 2 images: one with the desired outcome (parts of the invoice intentionally blurred) and the other after it's run through the PDF engine.
What are the limitations in HTML coding for the PDF to print correctly?
I'm using Membership Pro version 2.20.2.
Invoice Settings: PDF Font left on default of Times New Roman (I've also tried different fonts with no success)
Any help is appreciated!
Following is the code I inserted to create the desired Invoice:
I am, however, experiencing issues with the PDF Invoice. I've searched the forums and documentation but can't seem to find an answer on best practices for creating the invoice.
I've used inline CSS in hopes this would be okay, but it seems not to be working.
I've attached 2 images: one with the desired outcome (parts of the invoice intentionally blurred) and the other after it's run through the PDF engine.
What are the limitations in HTML coding for the PDF to print correctly?
I'm using Membership Pro version 2.20.2.
Invoice Settings: PDF Font left on default of Times New Roman (I've also tried different fonts with no success)
Any help is appreciated!
Following is the code I inserted to create the desired Invoice:
Code:
<div style="max-width: 800px; margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
color: #555;">
<table cellpadding="0" cellspacing="0" style="width: 100%; line-height: inherit; text-align: left;">
<tr style="padding-bottom: 20px;">
<td colspan="2" style="padding: 5px; vertical-align: top;">
<table style="width: 100%; line-height: inherit;">
<tr>
<td style="font-size: 45px; line-height: 45px; color: #333; padding: 5px; vertical-align: top;"><img src="https://www.website.com/someimage.png" style="width: 100%; max-width: 300px;" /></td>
<td style="text-align: right;">Invoice No: [INVOICE_NUMBER]<br /> Invoice Date: [INVOICE_DATE]<br /> Invoice Status: [INVOICE_STATUS]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 5px; vertical-align: top;padding-bottom: 40px;">
<table style="width: 100%; line-height: inherit; text-align: left;">
<tr>
<td style="padding: 5px; vertical-align: top;">
<p>Community Association<br />123 Main<br />City, Province <br /><a href="mailto:###" style="color: #daa550; text-decoration: none;">###</a></p>
</td>
<td style="padding: 5px; vertical-align: top; text-align: right;padding-bottom: 40px;">[NAME]<br />[ADDRESS]<br />[CITY], [STATE] [ZIP]<br />[EMAIL]</td>
</tr>
</table>
</td>
</tr>
<tr style="background: #eee; border-bottom: 1px solid #ddd; font-weight: bold;">
<td style="padding: 5px; vertical-align: top;">Payment Method</td>
<td style="padding: 5px; vertical-align: top; text-align: right;">Transaction ID</td>
</tr>
<tr style="padding-bottom: 20px;">
<td style="padding: 5px; vertical-align: top;">[PAYMENT_METHOD]</td>
<td style="padding: 5px; vertical-align: top; text-align: right;">[TRANSACTION_ID]</td>
</tr>
<tr style="background: #eee; border-bottom: 1px solid #ddd; font-weight: bold;">
<td style="padding: 5px; vertical-align: top;">Item</td>
<td style="padding: 5px; vertical-align: top; text-align: right;">Price</td>
</tr>
<tr style="border-bottom: none;">
<td style="padding: 5px; vertical-align: top;">[ITEM_NAME]</td>
<td style="padding: 5px; vertical-align: top; text-align: right;">[ITEM_AMOUNT]</td>
</tr>
<tr style="border-top: 2px solid #eee; font-weight: bold;">
<td style="padding: 5px; vertical-align: top;"> </td>
<td style="border-top: 2px solid #eee; padding: 5px; vertical-align: top; text-align: right;">Total: [TOTAL_AMOUNT]</td>
</tr>
</table>
</div>
Last edit: 4 years 10 months ago by Tim Serr.
Please Log in or Create an account to join the conversation.
- Tuan Pham Ngoc
- Offline
- Administrator
-
- Tim Serr
-
Topic Author
- Offline
- Junior Member
-
- Tuan Pham Ngoc
- Offline
- Administrator
-
- Tim Serr
-
Topic Author
- Offline
- Junior Member
-
- Tuan Pham Ngoc
- Offline
- Administrator
-
- Tim Serr
-
Topic Author
- Offline
- Junior Member
-
- Tuan Pham Ngoc
- Offline
- Administrator
-