This article walks you through the process of creating your own FooEvents Ticket Theme which we recommend you read before continuing:
Get Creative with FooEvents Ticket Themes – Part 1
Get Creative with FooEvents Ticket Themes – Part 2
It’s important to keep in mind that the way PDF tickets are generated is slightly different to regular HTML and CSS. There are some styles and elements that might work fine when rendering an HTML email or file, but these styles might not be compatible with the library used to generate the PDF files.
Here are some important things to be aware of when creating or modifying PDF Ticket Theme files:
1. You can use either JPG or PNG images. If PNG images with transparency do not render as intended then you will have to enable the extension “imagick” in PHP. If you’re unsure how to do this then your host might be able to assist.
2. Try to avoid using <table> elements but rather use <div> tags.
3. If you want to center images specifically avoid using the CSS declaration “margin: auto” but rather use “text-align: center”
4. Don’t use Google Fonts. The built-in DejaVu font supports a wide range of characters including the Greek, Cyrillic, Hebrew and Arabic alphabets.
5. Try to avoid nesting elements e.g.
<div> <div>Some content</div> <div>
6. Don’t use the CSS declaration “display: block” on images as it might hide the image in some cases.
7. If you don’t want an element to stretch over two pages, add the declaration “page-break-inside: avoid;”
8. If you are nesting elements then apply CSS padding on the inner container and not the outer container.
9. Use paths for images instead of URLs like in regular HTML.
10. Add a closing </body> tag only and not a closing </html> tag for multiple PDF pages
11. Don’t use the CSS “float” property on a tag that is nested inside another floated tag
12. If a customer is buying more than one ticket for the same event then most PDF ticket themes will display the header and event information followed by 3 tickets, per page. If the PDF ticket looks broken then it might be because all this information does not fit on one page. To fix this you can use a log and/or header image that are not as high, remove padding, margins or text or set it so that only 1 or 2 tickets are shown on one page.