How to Customize the Look and Feel of the Booking Engine
Contents
Introduction
The changes of the look and feel of the booking engine can be done via the CSS language. A person with basic web development skills can easily follow these instructions.
The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.
General Elements
Search Page
Area / Elements | Instructions | Example | Comments |
---|---|---|---|
Hide specific Card icons | visa-card-icon
master-card-icon amex-card-icon diners-card-icon discover-card-icon master-pass-card-icon alpha-bank-icon paypal-card-icon maestro-card-icon |
#search .visa-card-icon { display: none; } |
|
Hide all card icons | payment-method-icons | #search .payment-method-icons { display: none; } |
|
Hide background image | search | #search { background: none; } |
|
Change color of main text | search h2 | #search h2{ color: #ffccc; } |
|
Change color of main box | search well | #search well{ color: rgba(245, 245, 245, 1); } |
Change the last digit between 0.1-1 for opacity |
Change calendar background color | daterangepicker
calendar-table |
#search .daterangepicker, .calendar-table, .daterangepicker:after{ background-color: #ffcccc; } |
|
Change calendar selected dates color | daterangepicker td.active
calendar-table |
#search .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #ffcccc; } |
Results Page
Area / Elements | Instructions | Example |
---|---|---|
Replace content with a “Terms” button | terms-conditions-content
terms-conditions-btn |
#searchResults .terms-conditions-content{ display: none; } #searchResults .terms-conditions-btn{ display: block; } |
Options Page
Area / Elements | Instructions | Example |
---|---|---|
Display Children Policy content on demand using a button | children-policy-txt
show-more-txt |
#options .children-policy-txt{ display: none; } #options .show-more-txt{ display: block; } |
Details Page
Area / Elements | Instructions | Example |
---|---|---|
Hide specific Card icons | visa-card-icon
master-card-icon amex-card-icon diners-card-icon discover-card-icon master-pass-card-icon alpha-bank-icon paypal-card-icon maestro-card-icon |
#details .visa-card-icon{ display: none; } |
Hide all card icons | payment-method-icons | #deatils .payment-method-icons{ display: none; } |
Hide specific payment method description |
cash paypal bank-deposit bank-full-amount two-checkout cash-checkin eurobank veritrans alpha-bank cash-credit-card redsys paypal-pre bank-deposit-checkin fideli-pay cash-credit-card-vault alpha-bank-master-pass moneris sampath cash-credit-card-checkin-vault asia-pay |
#details .cash{ display: none; } |
Hide all payment method descriptions | payment-method-descriptions | #details .payment-method-descriptions{ display: none; } |
Manage My Reservation Page
Area / Elements | Instructions | Example |
---|---|---|
Change the color of amenity icons
(find hex codes here.) |
highlighted | #desc .highlighted{ color: #fff; } |