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;
}
|
Find hex codes here. |
| 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;
}
|
Find hex codes here. |
| Change calendar selected dates color | daterangepicker td.active
calendar-table |
#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}
|
Find hex codes here. |
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 | Comment |
|---|---|---|---|
| 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;
}
|
|
| Change color of the info box | info-alert | #options .info-alert{
background-color: #ffccc;
}
|
|
| Change color of the text inside info box | info-alert | #options .info-alert{
color: #fff;
}
|
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 | Comment |
|---|---|---|---|
| Change the color of amenity icons
(find hex codes here.) |
highlighted | #desc .highlighted{
color: #fff;
}
|
Find hex codes here. |
