Use this link to share with your colleagues:
Using Theme Builder to Change the Look of Your PTS: https://help.pm.leapevent.tech/a/1035762
With the Theme Builder, you can manage the look of your public ticketing site - no web development skills required. Use this tool to:
- Change fonts
- Utilize your organization's brand colors
- Update your logo
- Preview your changes before they go live
In this article, we'll walk you through how to:
- Get to the Theme Builder editor
- Build/edit your theme!
- View and share your draft
- Publish your draft (or revert your draft back to square one)
Plus, we'll cover some FAQs at the end. The whole process should take about an hour. Let's jump in!
Heads up!
You'll need the System Administrator profile to edit much of your PTS's theme. If you don't have this profile, work with your organization's PatronManager Admin.
1. Get to the Theme Builder
For most of this process, we'll be editing draft settings. That way, you can try all sorts of themes without affecting your published ticketing site.
1.1. Head to the app launcher
1.2. Search "patronticket" and click PatronTicket Settings
1.3. Scroll down to the Public Ticketing Site section and click Theme Builder
1.4. Click Edit Draft Settings
2. Build/edit your theme
Let's redecorate! Click into each corresponding section below for instructions/explanations on each piece of the theme builder.
Throughout the process, be sure to periodically Save and View Draft Theme to see what your draft looks like so far!
You'll want to use two main, distinctive colors in your logo, on your main website, or in your marketing materials. Choose colors which complement each other, but also provide interest and contrast.
Enter a hex # or CSS color in each of the two "Brand" fields.
Did you get an alert?
If your brand colors are too close to each other, you may get an Accessibility warning. That means your website will be hard for some of your patrons to read, and we recommend changing either your chosen brand colors or your design template - which we'll get to later in this article.
Enter your organization's preferred Font URL and Font Family. We recommend fonts from Google Web Fonts to ensure your site is readable across all browsers/devices.
This font will be used for Event, Subscription, and Membership titles and headers on the PTS. Please note that all other text, including text in the sidebar, will use a sans-serif font to ensure readability.
Want your Font Family to be used in other places on the PTS? Suggest a Product Idea!
2.2.1. Go to the Google Web Fonts website
Here's the link: Google Web Fonts
2.2.2. If you know the name of the font, search for it in the upper right; otherwise, narrow down your choices with the filters on the right sidebar
2.2.3. Once you find your font, click its "+" button
2.2.4. Click the black bar reading "1 family selected"
2.2.5. In the pop-up, scroll down a bit, then copy-paste the Font Family and Font URL into their respective fields on the Theme Builder
- Font URL: under "Embed Font", get the whole URL, but nothing else
- Font Family: under "Specify in CSS", grab what's in between the colon and semi-colon
Choose the theme that's right for your organization. You may want to experiment a little bit with brand colors and theme options to get just the right feel.
Click into each available theme below for a look at each of them.
- Overall: bright
- Background color: white
- Header: white background, overlaid logo
- Buttons and links: brand 1 (teal in the example below)
- Header text: brand 2 (pink in the example below)
- Body text: black
For Chromatic, both Brand 1 and Brand 2 should be dark enough to contrast legibly with white.
- Both brand colors are used for text against a white background.
- Overall: dark
-
Background color: brand 2
- You'll need to select a dark color for brand 2 to use this theme
- Header: brand 2 background, overlaid logo
- Buttons and links: brand 1
- Header text: white
- Body text: white
For Cinematic, Brand 2 should be dark enough to contrast legibly with white, and Brand 1 should be light enough to contrast legibly with Brand 1.
- Brand 1 is used for text against Brand 2.
- Brand 2 is used as a background color for both white text and Brand 1 text.
- Overall: bright
- Background color: white
- Header: brand 2 background, overlaid logo
- Buttons and links: brand 1, except in the header where links are white
- Header text: black
- Body text: black
For Moderne, both brand colors should be dark enough to contrast legibly with white.
- Brand 1 is used for text against a white background.
- Brand 2 is used as a background color for white text.
Did you get an alert?
If your brand colors are too close to each other, you may get an Accessibility warning. That means your website will be hard for some of your patrons to read, and we recommend changing either your chosen design template or brand colors.
- Choose which Event List Style you'd like to use:
- Grouped by Event: patrons browse Events, then click into them for more information and available Event Instances
- Chronological by Instance: patrons browse Event Instances, sorted by Instance Date, then click them for more information
- Choose --None-- if you intend to only display the Calendar View
- If you choose --None--, you must check the Enable Event Calendar box
- Check the Enable Event Calendar checkbox to let patrons browse Event Instances in a monthly calendar, then click them for more information
- Choose which Default Event View you'd like your patrons to see when they load your site
- Choose which Subscription List View you'd like to use:
- Expanded Instances: patrons browse through all your Subscription packages to purchase
- Grouped by Event: patrons browse your Subscription events, then click into them for more information and available Subscription packages
Click into each view below to get a feel for how they look:
Do you have beautiful event photos and thumbnails to showcase? Use the Grouped by Event option! Here, events are listed by Ticketable Event Sort Order, and are accompanied by show copy. Click on an event to see the Event Instances and purchase tickets.
We recommend the Chronological by Instance option if you've got a ton of performances, if most of your Events only have one or two Instances, or if you don't have images for each event. Here, your Event Instances are sorted by date with the Ticketable Event Name, Instance Name, and expandable details.
Enable the calendar to give your patrons the option to view daily events by month. Click an Event Instance to go straight to the purchase page for that show.
If the calendar is the best way to see your event offerings, you might want to set the calendar view as the default!
We recommend the Expanded Instances option if you have a single subscription Ticketable Event with several different package (Event Instance) options.
For example, this org sells the 2023 Belles of Broadway Package which has package options for opening nights, a flex pass, and a choose-your-own package.
We recommend the Grouped by Event option if you have many different Subscription Ticketable Events.
For example, this org is currently selling subscriptions for two different seasons, and the Grouped by Event option allows patrons to see both on the main Subscriptions page.
The "Header Image (Mobile)" option is available if you want to display an alternate logo on mobile devices (perhaps a version of your logo that looks better on small screens).
If you want to use the same logo for all screen sizes, you only need to upload an image to the "Header Image" field - mobile devices will default to the main image if no alternate image is provided.
Right from the Theme Builder, click Choose Image, then open the image file from your computer.
3. Look at and share your draft
Alright, ready to see what you've done so far? Just click the View Draft Theme link.
You can share this link with anyone - so share it with your colleagues and get their feedback!
Heads up!
- Your draft site is viewable by anyone with the link, so distribute it with discretion.
- Your draft site, while not public-facing, is still a live site; any purchases made on that site are very real!
4. Publish your draft (or revert it back to square one)
Everything looks good and you're ready to publish - hooray! Click "Publish Draft Theme".
Click OK - your draft setting will go live:
On the other hand, if you don't like your draft at all, you can wipe the slate clean. Click "Clone Published Settings" to make your draft mimic your currently published theme.
You're done! Way to make your website look great!
Theme Builder FAQs
See the settings for your live site in the Published Settings section, and click "View Currently Published Theme" to see it in action!
Click "Clone Published Settings" to copy your published site settings into the draft settings. This is a great option to test design adjustments without starting from scratch!
If you get this accessibility warning, it means one of two things:
- Your brand colors don't have enough contrast (they're too similar)
- Your brand colors don't stand out from your chosen theme
Either way, it's going to be hard for people to read your website, and we recommend you change your brand colors, your chosen theme, or both.
For more about accessibility, check out our Online Accessibility Guidelines article.
Editing the Theme or your Brand Colors requires the System Administrator profile. If you don't see these options in your Theme Builder, work with your organization's PatronManager Admin.