Zo maak je een Halloween-kaartthema op maat

Halloween staat voor de deur, dus in dit artikel laat ik je zien hoe je een aangepast Halloween-kaartjesthema kunt maken en naar je hand kunt zetten. Door een eenvoudige sjabloon en CSS aan te passen, transformeren we het Pavilion Ticket Theme in een griezelig, op Halloween geïnspireerd ontwerp dat perfect is voor je volgende Halloween-evenement. A

A FooEvents Kaartjesthema is een set sjabloonbestanden die worden gebruikt om ticket-e-mails weer te geven in FooEvents. Bij het opzetten van een evenement met FooEvents, kun je instellen welk ticket thema je wilt gebruiken voor dat evenement. De ticket e-mails zullen dan worden gegenereerd met behulp van het opgegeven ticket thema. Daarnaast kun je ticket thema's ook gebruiken voor het genereren van PDF-tickets en persoonlijke tickets via FooEvents POS.

Wat we behandelen

We gaan een gratis FooEvents Ticket thema downloaden en hernoemen.
Vervolgens gaan we ons logo en onze headerafbeelding toevoegen aan de map afbeeldingen en de afbeeldingspaden van het logo en de header wijzigen zodat ze naar deze afbeeldingen verwijzen.
Vervolgens uploaden we het ticket-thema en sturen we een testticket om te zien welke kleuren en styling we moeten aanpassen aan ons ontwerp.
Vervolgens zullen we in stappen de CSS en HTML bijwerken om dezelfde kleuren te gebruiken als ons ontwerp, terwijl we regelmatig testen.

1) Aan de slag

Om het eenvoudig te houden, heb ik het Halloween-ontwerp gemodelleerd naar de Paviljoen Kaartjesthema. Hierdoor is het eenvoudig aan te passen omdat de meeste wijzigingen eenvoudige kleurwijzigingen zijn. Download het gratis Pavilion Ticket Theme van de productpagina en pak het uit op je computer.

Tip: Onze ticket thema catalogus bevat veel basisontwerpen met verschillende structurele lay-outs. Zoek een basisthema dat structureel vergelijkbaar is met je ontwerp en gebruik het als uitgangspunt.

2) Hernoem het Kaartjesthema

Na het downloaden hernoemt u de uitgepakte map (paviljoen_kaartje_thema) aan halloween_kaartjes_thema. Houd het bij kleine letters en gebruik underscores-geen spaties. Deze naamgeving is hoe FooEvents verwacht dat aangepaste thema's worden georganiseerd.

Open de halloween_kaartjes_thema map en bewerk de leesmij.txt en config.json bestanden.

In leesmij.txt, veranderen Paviljoen Kaartjesthema naar Halloween Kaartjesthema. Je kunt ook de beschrijving, auteur, enz. bijwerken.

Werk vervolgens de naamwaarde bij in config.json bestand, wijzigen: “naam”: “Paviljoen Kaartjesthema”.” naar “naam”: “Halloween Kaartjesthema”.”.

Je kunt ook instellen in welke formaten dit ticket-thema kan worden gebruikt (HTML, PDF en POS). Ik raad aan om PDF-ondersteuning uit te schakelen (“supports-pdf: false”) zodat we ons kunnen concentreren op het HTML-e-mailthema. Je kunt een apart printvriendelijk PDF-thema gebruiken, of, als je het ondersteunt-pdf ingesteld op Echt, Zorg ervoor dat u de weergave van het PDF-ticket grondig test.

Vervang vervolgens voorbeeld.jpg met je eigen miniatuur zodat je je thema meteen herkent in het scherm Ticket Themes.

3) Het logo en de headerafbeelding bijwerken

Standaard kun je met het originele Pavilion Ticket Theme het logo en de headerafbeelding instellen in Product > Ticketinstellingen. Normaal gesproken zou je deze opties gebruiken om het logo en de headerafbeelding in te stellen, maar voor het Halloween-kaartjesthema gaan we de paden naar het logo en de headerafbeelding hardcoden.

De reden hiervoor is dat het logo en de afbeelding zeer uitgesproken zijn voor het ontwerp van dit ticket thema-je zou ze eigenlijk niet willen gebruiken voor de printvriendelijke PDF-versie van het ticket. Door het logo en de koptekstafbeelding te hardcoderen in het ticket-thema kunnen we een ander logo en een andere koptekstafbeelding opgeven voor de PDF- en POS-versies met behulp van het formulier Ticketinstellingen.

Plaats eerst je logo en headerafbeelding in de map afbeeldingen:

halloween_ticket_thema/afbeeldingen/logo.jpg
halloween_ticket_thema/afbeeldingen/header_afbeelding.jpg

Open de ticket.php bestand en vind de volgende code bovenaan het bestand:

<!-- LOGO -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketLogo'] ) ) : ?>
<p>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketLogo'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>
<?php endif; ?>

<!-- GRAPHIC -->
<?php if ( ! empty( $ticket['WooCommerceEventsTicketHeaderImage'] ) ) : ?>
<img src="<?php echo esc_attr( $ticket['WooCommerceEventsTicketHeaderImage'] ); ?>" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>
<?php endif; ?>

De twee PHP “if” statements die de afbeeldingen omhullen, controleren of de instellingen voor het logo en de headerafbeelding zijn ingeschakeld. We zullen deze instellingen niet gebruiken, dus je kunt de controles verwijderen.

Vervang vervolgens de afbeeldingspaden door het volgende:

Logopad:

/images/logo.jpg

Pad voor headerafbeelding:

<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/header_img.jpg

Your updated code should look like this:

<!-- LOGO -->
<p>
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/logo.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin-bottom:20px;"/>
</p>

<!-- GRAPHIC -->
<img src="<?php echo $theme_packs_url; ?><?php echo $theme_name; ?>/images/header_img.jpg" alt="<?php echo esc_attr( $ticket['name'] ); ?>" style="width: auto; max-width:100%; margin:0 auto; padding:0; display: block; vertical-align: bottom"/>

4) Upload the theme to your test site

Let’s test these changes and make sure the new ticket theme can be assigned to a product, sent successfully, and source the logo and header image correctly.

Upload the ticket theme

You will need a testing site that already has FooEvents installed and configured. Using FTP/SFTP, upload the new ticket theme folder to the following location:

/wp-content/uploads/fooevents/themes/

FooEvents loads custom themes from this path. If you prefer, you can also use FooEvents → Ticket Themes (in WP admin) to manage and preview themes, but for code edits it’s better to use FTP, as you will need to update various files. Later, when we are ready to test, we will upload edited theme files to this same folder and then send ticket emails to a test account.

Set the ticket theme for a test product

Next, we’re going to update a product’s ticket theme settings to use this ticket theme so you can send actual test tickets while you iterate. That way you’re testing the real data and layout you’ll ship.

In WordPress, edit your event product and open Product data → Ticket Settings. Set the HTML ticket theme to your uploaded Halloween Ticket Theme. You will not be using the logo, header image, and color options, so you can leave them blank for now. Later on, if you are using FooEvents PDF Tickets, you can use those settings to customize the PDF ticket.

Send a test ticket

Open an existing order for this product or create a new order, and use the Resend Tickets option in the sidebar to send test ticket emails. Be sure to test single tickets as well as ticket emails that include multiple tickets.The ticket should look similar to the original Pavilion Ticket Theme, the only difference being that the logo and header image are now hard-coded rather than using the logo and header path settings.

5) Modify the colors and layout to match the custom Halloween ticket theme design

This next step can be tricky; however, the templates are designed to be as simple as possible and should be relatively easy to modify. Find existing colors and replace them with the colors used in the design. If your design differs structurally, modify the HTML and CSS to match your design. The output of the template consists of three main files:

├─ header.php ← Logo/header/event meta/top section 
├─ ticket.php ← The main ticket block (repeats per ticket) 
├─ footer.php ← Footer/contact info

Modify these three files as needed, but keep in mind that email clients are opinionated. Keep the markup simple (tables or minimal divs), inline the important styles, and use absolute image URLs. Avoid modern CSS that many clients strip or render inconsistently. It’s best practice to keep the HTML/CSS basic for high compatibility. See the FooEvents guide for reference: Ticket Themes Help.

When you’ve made changes, upload the updated files to:
/wp-content/uploads/fooevents/themes/halloween_ticket_theme/

Tip: Test regularly and keep changes small and incremental. Each time you upload changes, you can hit the resend button on the order screen without having to refresh the page (that will save you a few seconds). Once you have modified the ticket theme to match your own design, test it under different scenarios. Be sure to test single tickets as well as ticket emails that include multiple tickets (sent to purchasers).

Final checks before going live

View the email in Gmail, Outlook, Apple Mail, and on mobile if you can. If you use a preview service like Litmus, run a sweep across common clients. When you’re happy with the ticket design, upload the ticket theme folder to your live site and enable it for your product(s). Run an additional round of testing to make sure your changes reflect correctly and your image paths are working.

Final Word

Customizing a FooEvents ticket theme is super simple. Start with a solid base, rename it, add your artwork, then iterate on the CSS/HTML in small, testable steps. Keep the markup email-simple and don’t get fancy with CSS that clients will ignore.

Feel free to download and modify my Halloween Ticket theme design as well as the completed Halloween Ticket Theme, links below.