Theme Colour Settings

In this guide we'll show you where to start with colour settings, and give you a rough idea of what parts of the site each setting changes. 

To start off: you need to be logged into the admin online area.
Using the left hand menu, select the Config tab, then the Change Theme. This will open a new page.

Next you want to select the colour settings tab. This will open a new window.

All of the colours on the site are customisable, these screenshots can help to demonstrate which major areas the different settings change.

Pro Tip
The best way to customise your site is to look which area you want to change by using the images in this guide, then change the settings around and see how your site changes.

Don't be afraid to have a play! You can always take a screen shot of the colours before you start.

Please note I will be changing the colours of a setting when I cover them to make them standout from the theme branding colours. This is just for demonstrate purposes to illustrate different areas within the images.

Lets begin

(1) Main Background Colour

This is the main theme colour of your page, it should generally be a colour that stands out and matches the main colour of your branding. It is generally used on the menu bars and buttons.

Here is a list of what the Main Background Colour setting controls:

1. Top header top icons on hover background colour
2. Navigation bar background colour
3. Event title background colour
4. Calendar focus date background colour
5. Session times background colour
6. Availability background colour
7. Ticket quantity container on hover background colour
8. Button background colour
   

(2) Secondary Background Colour

This is the colour that will form most of the of the other backgrounds on the site. It is recommend that this be a more neutral colour, as it is used in bigger blocks than the main colour. This will help to make the page easier for your customers to navigate.

Here is a list of what the Secondary Background Colour setting controls:

1. Navigation titles on focus background colour
2. Information container background colours
3. Field background colours

(3) Secondary Button Background

This background settings colour will be used for the buttons described below, which are classed as secondary buttons.

Here is a list of what the Secondary Button Background Colour setting controls:

1. Ticket quantity information container background colour
2. Calendar Month and year background colour, but with a lighter shading add.
3. Forgot Password and close button background colour
4. Sign-In button background colour
5. Logout button background colour

(4) Menu Button Background

This setting will control your icons background colour in the top bar, what we called the header. This is the main colour you will see before you hover your mouse pointer over them.

The icons are:
Home
Account
Basket

(5) Main Font Colour

The main font colour controls the colour of your main text on the ticketing site.

Here is a list of what the setting controls:
1. Navigation bar text colour
2. Event title text colour
3. Link text colour at the bottom of the website, what we call the footer
4. Calendar date number colour when selected (Focused)
5. Ticket quantity information box text colour on hover
6. Product page add to basket button text colour (Focused)
7. Basket number count colour
8. Top icons hover colour
9. Proceed to checkout button text colour - Cart page
10. Basket timer text colour
11. Apply Voucher button text colour - Checkout page
12. Pay Now button text colour - Checkout page
13. Logout text button colour - Account page
14 To checkout button text colour - Hover over Basket Icon action window

(6) Page Background

This colour setting is used to changed the background colour of the pages. What we would call the body background colour. Also some containers on the Cart and Checkout page uses this background colour setting.

Here is some examples of what this setting changes to give you an idea across the ticketing website.

1. Landing page (Index page)
2. Product page page (Event page details)
3. Cart page
4. Checkout page

(7) Text Colour - Over Secondary/Alternate Colour Background

This is your main font colour (Text colour) on most pages of your ticketing website.

Here is a list of what the setting controls:

1. Multiple pages Header container - Header text colour
2. Multiple pages Header container - Icon image colour
3. Product page - All the text colour for the event description
4. Product page - Calendar main text colour
5. Multiple pages - Button font colour (not focused)
6. Multiple pages - All information text colour
7. Checkout page - Billing address text colour

(8) Top Menu Background - Neutral Colour Recommended

This setting is used just to control the header background colour and only controls this.

(9) Accent Colour - Border for Main Colour

The  accent colour is used to control the boarder around containers. Also, the buttons when they are hovered over with the mouse.

Here is examples of what the setting effects.

1. Calendar container border
2. Calendar date numbers (On pointer hover)
3. Button border (On pointer hover)

(10) Event Icon Background Colour

WIP

(11) Footer Colour

WIP

(12) Link Colour

WIP

(13) Index Text colour

WIP

Alternate Site Colour

This is used as the background to the header of the site, as well as a few smaller things within the site. This should be a colour that complements the main and secondary colours well, and we'd recommend it to be more neutral again to help the main colour really pop!

Button Text Color

This is the colour for any text on top of the main background colour, we generally recommend using the secondary background colour for this as it helps to tie the site together. Feel free to experiment though, just make sure they're different enough the text is easy to read.

Text Colour

This is the most common text colour on the site, and will be used for the bigger blocks of text on the event page, basket page, checkout page, and more. This colour will be used over any background that it is either the secondary background, alternate background or page content background so make sure it's easily readible over all of those. We generally recommend this be the same as main background colour, but as always please experiment.

Accent Colour

This colour is used as a border around some buttons when they are hovered on, as well as the colour for the front page main text. This is generally going to be a bright colour that really stands out, we'd recommend making it a colour that is easily legible over your background image, to make sure the text is clear and stands out well when you first enter the site.

Page Content Background Colour

This is the background of the page that will be on every location that doesn't have a background on top of it, this will sometimes have text over it. We'd recommend a neutral colour again here, to make the content on top of it really stand out, the alternate background colour can often be a good choice, as this ties it in well with the header of the site.

Event Icon Background Colour

This allows you to change the background of the event icons on either the home page or collection pages, this one is very much down to you, and what will stand out well with your events. So go wild and see what works!

Footer Colour

This lets you change the colour of the your section of the footer (above the white divider) You can use this to tie it in better with your site, but as standard we'd recommend leaving it black or gray, as this matches it well to the Merlin section of the footer. Just make sure it's a colour that lets the text be easily visible, (the text here uses the button text colour) and see what works for you.

Please feel free to contact support via email or ring our office if you have questions or need more help.

Contact us on [phone]