12 Branding the Reservation Form

How to change the colours to match your website

…so the reservation form blends in to the design and branding of your website

If you want to, you can change the colours of the booking form to match your website design and branding. There are two ways to do this.

The quick way

To add the reservation form to your website, you previously went to the ‘Front-End’ panel on your system. Then cut and pasted an ‘iframe’ link to your website. More info about doing this is HERE

That iframe link (now on your website) will look something like this:
iframe src=”https://app.farebookings.com/step1ssl.php?k=295de601dda37dc58205a0b0872d1ef6&s=f&d=pp&lng=gb” width=”100%” height=”1700px” frameborder=”0″ scrolling=”no”

Notice the parameter: s=f
To change the main horizontal bar colour, simply change the s= parameter in the iframe link on your website, to one of the following:
s=f (is the default blue)

Example: s=green

Changing colours using CSS

This method of changing the reservation form colours is more complex. However, it does give you the opportunity to change more parts of the reservation form, and to any colour of your choice, and to add tints, if required.

This extreme example shows you what colours can be changed.

To make these types of colour changes, first go to the ‘Front-End’ panel – you will see an area called CSS Style. This is where we add the instruction code to modify the booking form appearance.

First, in your browser install an extension/add-on called ColorZilla. This will allow you to identify the colours used on your website.

Open the ‘Reservations’ panel. If you want to change the Section Title Bars colour, enter this code into the CSS box in the ‘Front-End’ panel:
.gradient{ background:#1E83C8}

Then open your website and use the ColorZilla tool to identify the colour #code you want to use for the Section Title Bars.
Replace the #1E83C8 code with the new colour code.

Click on ‘Save’ and close. Then open a new Reservations’ panel, to see the change you have just made. (If you don’t see a change, log out of the system and log back in again).

If you want to change the colour of the language bar at the top, repeat the process by adding this code into the CSS box:

#languages{ background: #49db1c}

And again for the border colour and width:

.border3{ border:3px solid #E8E7E8}

And again for the colour inside the boxes:

.border3{ background:#F7FAFF}

If you want a graduated tint instead of a solid colour, then use the ‘CSS Gradient Generator’ in the ColorZilla tool.
When you have created the tint gradient you want in ColorZilla, copy and paste the code generated on the right and use it instead to the colour code in the above examples.

To further change the appearance of the reservation form you can add additional CSS commands. For more info, please ask.

Continue on to
APPS Download + Login Panels or Return to Setup Menu