home > support > solution library > booking engine > custom html and css

HTML & CSS in the Booking Engine

Tweaking the design with custom CSS

Custom CSS can be used when more flexibility in styling the booking engine is required than is provided by the standard look & feel controls. You should be able to use any CSS however here are some common examples:

/* Change main heading ("Step 1 of 5" etc) font, alignment and capitalisation */
h1 {
  font-family: Georgia, Sans-Serif;
  font-size: 1.4em;
  text-align: left;
  text-transform: none;
}

/* Set link text colour, underline on hover */
a {
  color: #3366CC;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

For more control combine your custom CSS with custom HTML:

Making larger changes using custom HTML

Custom HTML is a handy way to add links back to your website, or to carry over the design from your main website into the booking engine (another alternative to this would be to iframe the Booking Engine).

Custom HTML is placed within the document body, surrounding the standard booking engine HTML. If you are loading your standard website header and footer you may find you need to make some tweaks to your CSS. To see a live example of custom HTML & CSS in the TourCMS booking engine take a look at our TourSift demonstration website.

Allowed HTML elements

<!-- Text -->
<a>, <strong>, <em>, <span>, <p>, <br>, <font>

<!-- Lists -->
<ul>, <li>

<!-- Headings -->
<h1>, <h2>, <h3>, <h4>

<!-- Tables -->
<table>, <tbody>, <tr>, <td>

<!-- Misc -->
<img>, <div>, <span>

Disallowed elements

If there are other elements you feel we should allow please let us know, JavaScript and Flash however are not permitted (although JavaScript tags for the purposes of analytics tracking can be added via the tracking page). If you have a flash banner you may wish to use a static image version of it during the booking process.

More information