One of our most popular features has received a major face-lift! Selecting a unique and customizable ticket theme for your HTML tickets has been part of FooEvents for a while but now it is possible to do the same with PDF tickets! Read on to find out how you can take advantage of this exciting and long-anticipated new feature.
How does this new feature work?
The new PDF Ticket Theme feature allows you to select a unique ticket theme that will be applied to the PDF tickets that attendees receive for a specific event. Two themes are included by default when you install or update the FooEvents PDF Tickets plugin version 1.5.x. The “Default PDF Single Theme” displays each ticket on a separate page and also includes the event logo, header image and event information on each page. The “Default PDF Multiple Theme” displays the event logo, header image and event information and then 3 tickets before displaying the event information and the next 3 tickets again on a new page. For the default themes you can choose a logo to display in the ticket as well as colors for the border and “Add to calendar” button. If you are using one of the premium FooEvents Ticket Themes that supports PDF tickets then you will also be able to set a header image.
Browse the Ticket Theme Gallery
How do I use the new PDF Ticket Themes?
To start using this new feature you would need to update or install version 1.5.x of the FooEvents PDF Tickets plugin and version 1.9.2+ of FooEvents for WooCommerce. Once you’ve done this you will see a new setting allowing you to select a PDF Ticket Theme for that event.
To see this setting you can follow these steps:
1. Edit an event
2. Go to the Event tab
3. Look for the select dropdown called PDF Ticket Theme. You will find this dropdown box right below the HTML Ticket Theme option.
Here you will be able to select a specific PDF ticket theme that will be used for that event’s tickets.
How do I find additional PDF Ticket Themes?
If you want to choose from more themes then head over to the FooEvents Ticket Themes page to see the PDF-compatible ticket themes available for purchase.
Browse the Ticket Theme Gallery
How do I install a new PDF Ticket Theme that I’ve downloaded or purchased?
To install a new PDF-compatible Ticket Theme, follow these steps:
1. In your WordPress Admin Area, go to Tickets and then Ticket Themes
2. Browse to select the theme that you downloaded from the FooEvents Ticket Themes page
3. Click on Upload Ticket Theme
4. Click on the preview image of the theme to send a test email
This new theme will now be available for selection in the “PDF Ticket Theme” when you edit your event.
How does this new functionality affect me if I’m currently sending PDF tickets to my customers?
This update was designed to have minimal impact on your existing setup while giving you full access to the new features. Once you update to FooEvents for WooCommerce version 1.9.2+ and FooEvents PDF Tickets version 1.5.x there should be no disruption when sending ticket emails.
We’ve given the default PDF ticket theme a more modern look so you might notice your tickets looking slightly different.
If you’ve previously made modifications to the files called “pdf-ticket-template-single.php” and “pdf-ticket-template-multiple.php” then you will have to redo these changes in the new PDF Ticket Theme files.
How can I modify the PDF Ticket Theme to have a different layout, color scheme or additional images?
We recommend that you first read this post: https://www.fooevents.com/get-creative-with-fooevents-ticket-themes-part-2/
The way in which PDF tickets are generated is somewhat different from 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 differences to be aware of when modifying your PDF Ticket Theme files:
1. For best results use JPG images only. PNG images with transparency might not render as intended.
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
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