Difference between revisions of "How to Customize the Look and Feel of the Booking Engine"
(→Search Page) |
(→Search Page) |
||
Line 56: | Line 56: | ||
maestro-card-icon | maestro-card-icon | ||
| <pre>#search .visa-card-icon { | | <pre>#search .visa-card-icon { | ||
− | |||
display: none; | display: none; | ||
− | |||
}</pre> | }</pre> | ||
| | | | ||
Line 65: | Line 63: | ||
| payment-method-icons | | payment-method-icons | ||
|<pre>#search .payment-method-icons { | |<pre>#search .payment-method-icons { | ||
− | |||
display: none; | display: none; | ||
− | |||
} </pre> | } </pre> | ||
| | | | ||
Line 74: | Line 70: | ||
| search | | search | ||
| <pre>#search { | | <pre>#search { | ||
− | |||
background: none; | background: none; | ||
− | |||
}</pre> | }</pre> | ||
| | | | ||
Line 83: | Line 77: | ||
| search h2 | | search h2 | ||
| <pre>#search h2{ | | <pre>#search h2{ | ||
− | |||
color: #ffccc; | color: #ffccc; | ||
− | |||
}</pre> | }</pre> | ||
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
Line 92: | Line 84: | ||
| search well | | search well | ||
| <pre>#search well{ | | <pre>#search well{ | ||
− | |||
color: rgba(245, 245, 245, 1); | color: rgba(245, 245, 245, 1); | ||
− | |||
}</pre> | }</pre> | ||
− | | Change the last digit between 0.1 - 1 for opacity | + | | Change the last digit between 0.1 - 1 for opacity. |
|- | |- | ||
| Change calendar background color | | Change calendar background color | ||
Line 103: | Line 93: | ||
calendar-table | calendar-table | ||
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{ | | <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{ | ||
− | |||
background-color: #ffcccc; | background-color: #ffcccc; | ||
− | |||
}</pre> | }</pre> | ||
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
Line 114: | Line 102: | ||
calendar-table | calendar-table | ||
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover { | | <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover { | ||
− | |||
background-color: #ffcccc; | background-color: #ffcccc; | ||
− | |||
}</pre> | }</pre> | ||
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. |
Revision as of 16:51, 27 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
Area / Elements | Class name | Implementation | Comments |
---|---|---|---|
Set the default background color of body | body | body { background:#fff; } |
Find hex codes here. |
Set the default background color of header | header | #header { background:#fff; } |
Find hex codes here. |
Search Page
Area / Elements | Class name | Implementation | 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 | Comments |
---|---|---|---|
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 the background color of the info box | info-alert | #options .info-alert { background-color: #ffccc; } |
Find hex codes here. |
Change the color of the text inside info box | info-alert | #options .info-alert { color: #fff; } |
Find hex codes here. |
Change the color of amenity | highlighted | #options .highlighted { color: #ffccc; } |
Find hex codes here. |
Change the color of navigation icons | highlighted | #options .fa-circle { color: #ffccc; } |
Find hex codes here. |
Change buttons' color | btn-primary | #optios .btn-primary { background-color: #ffccc!important; border-color: #ffccc!important; } |
Find hex codes here. |
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 | Comments |
---|---|---|---|
Change the color of amenity icons
(find hex codes here.) |
highlighted | #desc .highlighted{ color: #fff; } |
Find hex codes here. |