How To Guides

How To Create A Booking Skin

!

Before You Begin

You may need an app to edit your code. You can use Notepad or any text editor, or any code editor you like/have access to. Code editors have the benefit of highlighting parts of the code in different colours but are not required to edit code.
You can also use the text box on the Booking Skin page to edit this.

1 Rename and Upload Assets

1) Give all of the assets a unique filename. EG: GTM17_Header, GTM17_Header_Mobile

2) Upload all files to the Server in Site Admin → Uploads

• All images should be under 180kb.

Booking Skin Specs

View Specs as a Live Demo

2 Copy CSS Code

Open code to copy from below & paste the entire contents into a Text Editor:

Booking Skin CSS Template

3 Edit CSS Code

1) Work your way down the code, noticing tags that label each section for easy reference:
Eg: BODY-BACKGROUND-IMAGE

2) Update ALL tags that you come across. For example, you will find these within the Image URL's, and when you need to specify a colour: background-color: COLOUR; or an image URL url(BODY-BACKGROUND-IMAGE);

3) When updating colours, specify them as HEX colours- a Hash followed by 6 digits, such as: #00a500. Use this site to select the closest colour: https://www.colorcodepicker.com/

4) Save your file somewhere & keep it open as you will need to copy and paste all code shortly.

4 Uploading Your Skin

1) Go into the Client CCR → Account Tab → Manage Skins

2) Click on Add Skin

3) Skin Name: This is what you add to the end of your event URL. Keep this short & unique. EG: GTM17, NYE16_Clarke, PLOT17

4) Tick 'Enable Menu Bar'

5) Copy & Paste your entire CSS code into the CSS field.

6) Ignore the Header & Script fields.

5 The Footer Field – Moshtix logo

There are 4x logo options, depending on the client's footer colour. Click on the best fit below.




Regular	White Text Will not show black background	All White Will not show black background	All Black

1) Copy the entire code for the logo you require

2) Paste the code into the Footer field, below where you had pasted the CSS

Note: If the client has put the Moshtix logo in the image for their footer please ask them to re-supply without our logo.

6 Preview Your Skin

1) Copy the skin name and open your event page URL

2) Add ?skin=SKINNAME to the end of your event URL to preview

3) Make sure you are using Google Chrome, right click to Inspect.

In the bar under the browser bookmarks bar select the Mobile icon (highlighted in blue) and then refresh.

4) Change to a mobile device (EG: iPhone)

5) Make sure everything looks good!

Things not looking quite right? View the Troubleshooting section below.

Troubleshooting

Header Image

Header image smaller/larger than 400px

Image smaller than 400px

Find the Header and reduce the height. You can either open the image file and find out the height or just trial and error until you get it.
Repeat this for for the mobile header if it is also too small.

Image larger than 400px

Images should not be larger than 400px as this goes against best practice for these pages, as it impacts the user journey negatively.

Header not displaying

There are a number of reasons that a header might not be showing.

1) Check the file name is identical to the name you pasted into the code. This is Case Sensitive and includes the file extension.

2) Check the file name - sometimes spaces and special charachters in the file name can cause them to not display.

3) Check the file extension isn't .jpeg - this file name is not supported. Rename to .jpg and replace the image.

Navigation Menu (Support/Account Buttons)

Buttons in wrong place

Find the Navigation Menu in the CSS.

To fix where they sit you need to change the padding-top to be bigger (down more) or smaller (up more).

These have to sit over the image/header or they will sit in the wrong place on the purchase flow and make it hard for customers to select tickets.

Changing the Button Color/hover colour

To change the Button colour

Find the Navigation Menu and underneath there should be Button Details in the CSS.

To change the Hover colour

Under Navigation Menu there should be a HOVER button details. You can change the hover colours here.

Background Image

White bars showing

Client has included the background image with the a white box for the ticketing details included. They do not need to insert the the white background area, as this is part of the Moshtix webpage. Please ask the client to re-supply artwork as a full background image.

Footer Image

Footer height larger than 100px

If the footer is clipping you need to increase the height of the footer.

Moshtix logo in the wrong place

This logo is based on the top of the footer, so you have to make the number bigger or smaller depending on where it needs to sit.

These have to sit over the image/footer or they will sit in the wrong place on the purchase flow and make it hard for customers to select tickets

No space for the Moshtix logo

If there are too many logos in the footer or another graphic interfering with the Moshtix logo ask client to re-supply artwork to specifications.

The Moshtix logo is inserted over the footer using CSS. If the Moshtix logo has been included in the image for footer, please ask client to re-supply artwork with an 100px wide space for the logo.