HTML & CSS in the Booking Engine (article)

Susana Moleón Moya
Susana Moleón Moya
  • Updated

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 can configure it by going to Configuration > Channels > Design look & feel in your TourCMS account. 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.