Difference between revisions of "How to Customize the Look and Feel of the Booking Engine"
(→Search Page) |
(→Options Page) |
||
| Line 122: | Line 122: | ||
! Instructions | ! Instructions | ||
! Example | ! Example | ||
| + | ! Comment | ||
|- | |- | ||
| Display Children Policy content on demand using a button | | Display Children Policy content on demand using a button | ||
| Line 128: | Line 129: | ||
show-more-txt | show-more-txt | ||
|<pre>#options .children-policy-txt{ | |<pre>#options .children-policy-txt{ | ||
| + | |||
display: none; | display: none; | ||
| + | |||
} | } | ||
#options .show-more-txt{ | #options .show-more-txt{ | ||
| + | |||
display: block; | display: block; | ||
| + | |||
| + | }</pre> | ||
| + | | | ||
| + | |- | ||
| + | | Change color of the info box | ||
| + | |<pre>#options .info-alert{ | ||
| + | |||
| + | bacground-color: #ffccc; | ||
| + | |||
}</pre> | }</pre> | ||
|} | |} | ||
Revision as of 17:24, 23 August 2019
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 | #options .info-alert{
bacground-color: #ffccc;
}
|
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. |
