How to change the styling of your Ticketsolve website

Natalie Watson

Updated December 12, 2024 15:02

You can change the look and feel of your Ticketsolve website pages (the online customer journey) by using the Look and Feel setting within your account. This setting is available at account level and subdomain level meaning that you can create a totally different look and feel for each of your subdomains if you wish.

Finding the Look and Feel setting

Go to Settings > General Settings and search for the setting called "look_and_feel"

You will also find this setting at the subdomain level:

Go to Settings > Subdomain > Select your subdomain > Settings

Once you are in the Look and Feel setting you can change colours, fonts, logos and background images of your Ticketsolve website.

Changing the styling

Changing the colours

You can go into each field and change the colour of different sections of the website. The colour picker allows you to choose the exact colour you need.

Tip: There are a few different external extensions you can download such as Eye Dropper which allows you to choose colours directly from your website, giving you the hex value of that colour. This means you can exactly match the Ticketsolve website colours to your own website colours.

The preview on the right hand side will show you how the website will look once you change the colours (see below). A warning will appear if the contrast between two colours does not meet accessibility requirements.

Some of the key settings you can change are:

General Layout tab

Background colours.
Text colour - show title and description on show page.
Text links - venue, social icons, return and browse for more tickets.
Navbar text colour and Navbar background colour - the very top of the site where the headers are: Shows, Products, Donations, etc.
Header background - the banner underneath the Navbar where your logo sits.
Card text colour and Card background colour - the blocks on your xxxx.ticketsolve.com/shows page, where each show is listed in a block.

Checkout tab

Navigation - call to action buttons such as Checkout, Continue, Back.

Cart tab

Background and text - the 'Your Cart' pop-up once a ticket is added to the cart.
Main menu icon - the coloured notification next to the shopping trolley icon indicating how many items are in the cart.
CTA background and CTA text - the 'Go to cart page' button at the bottom of the 'Your Cart' pop-up.
Discount background and Discount text - the text that appears underneath a ticket price if it has been discounted, indicating the amount discounted.

Seats tab

Selected, in cart and blocked seats.
To change the colour of available seats, define this either at venue level or on the ticket allocation level if seats are assigned.

Changing fonts

If you would like to change your font, you can use any that are available on Google Fonts. You can have a Body font for standard text and a Heading font for titles.

ezgif.com-gif-maker__1_.gif

To change the font:

1. Find your font on Google Fonts and click it.

2. Click the Select (font name) + icon (right of the font style) to select the style you need.

2. Click the icon (grid in upper right corner) to add it to your Selected Families.

3. View your Selected Families, and select the Use on the web area to get the information you need.

Body or Heading font - should be in the format 'Playfair Display', serif;
- Get this from Google Fonts in the CSS rules to specify families section.
Body or Heading font URL - should be in the format https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500
- Get this from Google Fonts in the <link> section.

4. Go to your Ticketsolve Look and Feel setting and to the Fonts tab.

5. In the "Body font" and "Heading font", paste the font family information e.g. 'Playfair Display', serif;

6. In the "Font URL" boxes paste the URL(s) from the <link> section of Google font, e.g. https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500

7. Click Update to save.

Changing the logo and background image

To change your logo or add a background image, you will first need to upload the image to the subdomain. To do this go to Settings > Subdomains > Uploads.

Upload your image, and then click the Additional Options icon (3 dots right side of image) and select Copy image URL.

Now go to the Other tab of your Look and Feel setting either at account or subdomain level.

Logo image URL - paste your copied logo image URL here and it will display at the header of your site.
- Logos need to be a minimum of 80px vertical (height). If your logo is smaller that 80px high, then use padding above and below to bring it up to 80px, e.g., if you want a 40px high logo, use a 80px png with 20px gaps on top and bottom of the logo (20px gap + 40px logo + 20px gap = 80px).
Background image URL - paste your copied background image URL here.
- If it's a texture type background that should repeat and cover the whole background, put 'repeat' into the "CSS-background-repeat" setting.
- If it's a big image that should fill the whole background, enter 'cover' in the "CSS-background-size" setting. If that stretches your image oddly, change the background size to 'auto' which will make it fill the width of the page, rather than stretching it vertically.

Changing the show card on the listings page

In the Display Flags tab you can change what you want to be displayed on the show cards on your main shows listing page (yourtheatre.ticketsolve.com/shows):

Show category? This is the event category assigned to the show.
Show venues? This is the venue where the event is taking place.
Show company? This is the production company assigned to the show.
Show dates? This is the event date(s).

When displayed, show category and venue are clickable, and will take the user to a filtered page listings only shows under that event category or venue respectively.

Want to extend your branding further and create an even more awesome customer journey? Consider customising and branding your print at home / e-tickets or customising your confirmation page. If you want to learn more about how to create amazing customer journey's that go beyond your website check out our blogs on creating wow customer moments and personas.