Difference between revisions of "How to Customize the Look and Feel of the Booking Engine"
(→Results Page) |
|||
(127 intermediate revisions by 2 users not shown) | |||
Line 5: | Line 5: | ||
== General Elements == | == General Elements == | ||
+ | Elements used in this section style all pages. | ||
+ | |||
+ | {| class="wikitable" | ||
+ | ! Area / Elements | ||
+ | ! Class names | ||
+ | ! Implementation | ||
+ | ! Comments | ||
+ | |- | ||
+ | | Set the default background color of body | ||
+ | | body | ||
+ | |<pre>body { | ||
+ | background:#fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Set the default background color of header | ||
+ | | header | ||
+ | | <pre>#header { | ||
+ | background:#fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the background color of language and currency dropdown | ||
+ | | header dropdown-toggle dropdown-menu | ||
+ | | <pre>#header .dropdown-toggle, #header .dropdown-menu { | ||
+ | background-color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Set the color of language and currency dropdown text | ||
+ | | header dropdown-toggle dropdown-menu | ||
+ | | <pre>#header .dropdown-toggle, #header .dropdown-menu { | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Set the color of amenities and navigation buttons | ||
+ | | highlighted | ||
+ | | <pre>.highlighted { | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Set buttons' color | ||
+ | | btn-primary | ||
+ | | <pre>.btn-primary { | ||
+ | background-color: #ffccc!important; | ||
+ | border-color: #ffccc!important; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Set buttons' text color | ||
+ | | btn-primary | ||
+ | | <pre>.btn-primary { | ||
+ | color: #000!important; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the background color of the info box and alert error box | ||
+ | | alert-info | ||
+ | |<pre>.alert-info, .alert-danger { | ||
+ | background-color: #ffccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the color of the info box and alert error box text | ||
+ | | alert-info | ||
+ | |<pre>.alert-info, .alert-danger { | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the color of the slideshow arrows | ||
+ | | slick-prev slick-next | ||
+ | | <pre>.slick-prev:before, .slick-next:before { | ||
+ | color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |} | ||
== Search Page == | == Search Page == | ||
+ | Page ID: | ||
+ | |||
+ | <pre>#search</pre> | ||
+ | |||
+ | {| class="wikitable" style="text-align: left;" | ||
+ | ! Area / Elements | ||
+ | ! Class names | ||
+ | ! 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 | ||
+ | | <pre>#search .visa-card-icon { | ||
+ | display: none; | ||
+ | }</pre> | ||
+ | | | ||
+ | |- | ||
+ | | Hide all card icons | ||
+ | | payment-method-icons | ||
+ | |<pre>#search .payment-method-icons { | ||
+ | display: none; | ||
+ | } </pre> | ||
+ | | | ||
+ | |- | ||
+ | | Add background color | ||
+ | | search | ||
+ | | <pre>search { | ||
+ | background: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Add background image | ||
+ | | search | ||
+ | | <pre>search { | ||
+ | background: url("") no-repeat center center fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -background-size: cover; | ||
+ | -background-size: cover; | ||
+ | -size: cover; | ||
+ | }</pre> | ||
+ | | Inside parentheses ("") put the url of the image | ||
+ | |- | ||
+ | | Hide background image | ||
+ | | search | ||
+ | | <pre>#search { | ||
+ | background: none; | ||
+ | }</pre> | ||
+ | | | ||
+ | |- | ||
+ | | Change color of main text | ||
+ | | search h2 | ||
+ | | <pre>#search h2{ | ||
+ | color: #ffccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change color of search form text | ||
+ | | search searchForm | ||
+ | | <pre>#search #searchForm{ | ||
+ | color: #ffccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change color of main box | ||
+ | | search well | ||
+ | | <pre>#search well{ | ||
+ | color: rgba(245, 245, 245, 1); | ||
+ | }</pre> | ||
+ | | Change the last digit between 0.1 - 1 for opacity. | ||
+ | |- | ||
+ | | Change calendar background color | ||
+ | | daterangepicker | ||
+ | |||
+ | calendar-table | ||
+ | | <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{ | ||
+ | background-color: #ffcccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change calendar selected dates color | ||
+ | | daterangepicker td.active | ||
+ | |||
+ | calendar-table | ||
+ | | <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover { | ||
+ | background-color: #ffcccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |} | ||
== Results Page == | == Results Page == | ||
+ | Page ID: | ||
+ | <pre>#searchResults</pre> | ||
{| class="wikitable" | {| class="wikitable" | ||
! Area / Elements | ! Area / Elements | ||
− | ! | + | ! Class names |
− | ! | + | ! Implementation |
+ | ! Comments | ||
+ | |- | ||
+ | | Change the color of the text | ||
+ | | searchResults | ||
+ | | <pre>#searchResults { | ||
+ | color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
|- | |- | ||
| Replace content with a “Terms” button | | Replace content with a “Terms” button | ||
Line 19: | Line 212: | ||
terms-conditions-btn | terms-conditions-btn | ||
− | | <pre>.terms-conditions-content{ | + | | <pre>#searchResults .terms-conditions-content{ |
display: none; | display: none; | ||
} | } | ||
− | .terms-conditions-btn{ | + | #searchResults .terms-conditions-btn{ |
− | + | display: block; | |
+ | }</pre> | ||
+ | | | ||
+ | |- | ||
+ | | Change the background color of the modify search box | ||
+ | | modifySearch | ||
+ | | <pre>#modifySearch { | ||
+ | background-color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the color of the modify search text | ||
+ | | modifySearch | ||
+ | | <pre>#modifySearch { | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the background color of the room type modal | ||
+ | | roomTypeModalLabel modal-content | ||
+ | | <pre>#roomTypeModalLabel .modal-content { | ||
+ | background-color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the color of the room type modal text | ||
+ | | roomTypeModalLabel modal-content | ||
+ | | <pre>#roomTypeModalLabel .modal-content { | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the background color of the terms modal | ||
+ | | termsModal modal-content | ||
+ | | <pre>#termsModal .modal-content { | ||
+ | background-color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the color of the terms modal text | ||
+ | | termsModal modal-content | ||
+ | | <pre>#termsModal .modal-content { | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Style Terms and Conditions modal title | ||
+ | | termsModal policy-title | ||
+ | | <pre>#termsModal .policy-title { | ||
+ | margin-top: 20px; | ||
+ | }</pre> | ||
+ | | | ||
+ | |- | ||
+ | | Style Terms and Conditions modal description | ||
+ | | termsModal policy-description | ||
+ | | <pre>#termsModal .policy-description { | ||
+ | margin-top: 20px; | ||
+ | }</pre> | ||
+ | | | ||
+ | |- | ||
+ | | Style Partially refundable policy text | ||
+ | | partiallyRefundable | ||
+ | | <pre>.partiallyRefundable { | ||
+ | color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Style Non-refundable policy text | ||
+ | | nonRefundable | ||
+ | | <pre>.nonRefundable { | ||
+ | color: #000; | ||
}</pre> | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
|} | |} | ||
+ | == Options Page == | ||
+ | Page ID: | ||
+ | |||
+ | <pre>#options</pre> | ||
− | |||
{| class="wikitable" | {| class="wikitable" | ||
! Area / Elements | ! Area / Elements | ||
− | ! | + | ! Class names |
− | ! | + | ! Implementation |
+ | ! Comments | ||
+ | |- | ||
+ | | Change the text color | ||
+ | | options | ||
+ | | <pre>#options { | ||
+ | color: #000; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the payment box background color | ||
+ | | options well | ||
+ | | <pre>#options well { | ||
+ | color: #ffccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
|- | |- | ||
| Display Children Policy content on demand using a button | | Display Children Policy content on demand using a button | ||
Line 39: | Line 322: | ||
show-more-txt | show-more-txt | ||
− | |<pre>.children-policy-txt{ | + | |<pre>#options .children-policy-txt { |
display: none; | display: none; | ||
} | } | ||
− | .show-more-txt{ | + | #options .show-more-txt { |
display: block; | display: block; | ||
}</pre> | }</pre> | ||
+ | | | ||
+ | |- | ||
+ | | Change the color of the text inside info box | ||
+ | | alert-info | ||
+ | |<pre>#options .alert-info { | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the color of amenity | ||
+ | | highlighted | ||
+ | | <pre>#options .highlighted { | ||
+ | color: #ffccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |- | ||
+ | | Change the color of navigation icons | ||
+ | | highlighted | ||
+ | | <pre>#options .fa-circle { | ||
+ | color: #ffccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
|} | |} | ||
== Details Page == | == Details Page == | ||
+ | Page ID: | ||
+ | |||
+ | <pre>#details</pre> | ||
{| class="wikitable" style="text-align: left;" | {| class="wikitable" style="text-align: left;" | ||
− | !Area / Elements | + | ! Area / Elements |
− | ! | + | ! Class names |
− | ! | + | ! Implementation |
+ | ! Comments | ||
|- | |- | ||
| Hide specific Card icons | | Hide specific Card icons | ||
Line 65: | Line 374: | ||
discover-card-icon | discover-card-icon | ||
− | + | master-pass-card-icon | |
+ | |||
+ | alpha-bank-icon | ||
paypal-card-icon | paypal-card-icon | ||
− | | <pre>.visa-card-icon{ | + | |
+ | maestro-card-icon | ||
+ | | <pre>#details .visa-card-icon{ | ||
display: none; | display: none; | ||
}</pre> | }</pre> | ||
+ | | | ||
|- | |- | ||
| Hide all card icons | | Hide all card icons | ||
| payment-method-icons | | payment-method-icons | ||
− | |<pre>.payment-method-icons{ | + | |<pre>#deatils .payment-method-icons{ |
display: none; | display: none; | ||
} </pre> | } </pre> | ||
+ | | | ||
|- | |- | ||
| Hide specific payment method description | | Hide specific payment method description | ||
− | | cash | + | | |
− | fideli-pay | + | cash |
− | | <pre>. | + | |
+ | 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 | ||
+ | | <pre>#details .cash{ | ||
display: none; | display: none; | ||
}</pre> | }</pre> | ||
+ | | | ||
|- | |- | ||
| Hide all payment method descriptions | | Hide all payment method descriptions | ||
− | | payment-method- | + | | payment-method-descriptions |
− | | <pre>.payment-method- | + | | <pre>#details .payment-method-descriptions{ |
display: none; | display: none; | ||
}</pre> | }</pre> | ||
+ | | | ||
+ | |- | ||
+ | | Change the room decription and payment box background color | ||
+ | | details well | ||
+ | | <pre>#details well { | ||
+ | color: #ffccc; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
|} | |} | ||
== Manage My Reservation Page == | == Manage My Reservation Page == | ||
+ | Page ID: | ||
+ | |||
+ | <pre>#desc</pre> | ||
+ | {| class="wikitable" style="text-align: left;" | ||
+ | ! Area / Elements | ||
+ | ! Class names | ||
+ | ! Implementation | ||
+ | ! Comments | ||
+ | |- | ||
+ | | Change the color of amenity icons | ||
+ | (find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].) | ||
+ | | highlighted | ||
+ | | <pre>#desc .highlighted{ | ||
+ | color: #fff; | ||
+ | }</pre> | ||
+ | | Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here]. | ||
+ | |} | ||
== About the Property page == | == About the Property page == | ||
== Credit Card Page == | == Credit Card Page == |
Latest revision as of 01:45, 7 June 2021
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
Elements used in this section style all pages.
Area / Elements | Class names | 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. |
Change the background color of language and currency dropdown | header dropdown-toggle dropdown-menu | #header .dropdown-toggle, #header .dropdown-menu { background-color: #000; } |
Find hex codes here. |
Set the color of language and currency dropdown text | header dropdown-toggle dropdown-menu | #header .dropdown-toggle, #header .dropdown-menu { color: #fff; } |
Find hex codes here. |
Set the color of amenities and navigation buttons | highlighted | .highlighted { color: #fff; } |
Find hex codes here. |
Set buttons' color | btn-primary | .btn-primary { background-color: #ffccc!important; border-color: #ffccc!important; } |
Find hex codes here. |
Set buttons' text color | btn-primary | .btn-primary { color: #000!important; } |
Find hex codes here. |
Change the background color of the info box and alert error box | alert-info | .alert-info, .alert-danger { background-color: #ffccc; } |
Find hex codes here. |
Change the color of the info box and alert error box text | alert-info | .alert-info, .alert-danger { color: #fff; } |
Find hex codes here. |
Change the color of the slideshow arrows | slick-prev slick-next | .slick-prev:before, .slick-next:before { color: #000; } |
Find hex codes here. |
Search Page
Page ID:
#search
Area / Elements | Class names | 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; } |
|
Add background color | search | search { background: #000; } |
Find hex codes here. |
Add background image | search | search { background: url("") no-repeat center center fixed; -webkit-background-size: cover; -background-size: cover; -background-size: cover; -size: cover; } |
Inside parentheses ("") put the url of the image |
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 search form text | search searchForm | #search #searchForm{ 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
Page ID:
#searchResults
Area / Elements | Class names | Implementation | Comments |
---|---|---|---|
Change the color of the text | searchResults | #searchResults { color: #000; } |
Find hex codes here. |
Replace content with a “Terms” button | terms-conditions-content
terms-conditions-btn |
#searchResults .terms-conditions-content{ display: none; } #searchResults .terms-conditions-btn{ display: block; } |
|
Change the background color of the modify search box | modifySearch | #modifySearch { background-color: #000; } |
Find hex codes here. |
Change the color of the modify search text | modifySearch | #modifySearch { color: #fff; } |
Find hex codes here. |
Change the background color of the room type modal | roomTypeModalLabel modal-content | #roomTypeModalLabel .modal-content { background-color: #000; } |
Find hex codes here. |
Change the color of the room type modal text | roomTypeModalLabel modal-content | #roomTypeModalLabel .modal-content { color: #fff; } |
Find hex codes here. |
Change the background color of the terms modal | termsModal modal-content | #termsModal .modal-content { background-color: #000; } |
Find hex codes here. |
Change the color of the terms modal text | termsModal modal-content | #termsModal .modal-content { color: #fff; } |
Find hex codes here. |
Style Terms and Conditions modal title | termsModal policy-title | #termsModal .policy-title { margin-top: 20px; } |
|
Style Terms and Conditions modal description | termsModal policy-description | #termsModal .policy-description { margin-top: 20px; } |
|
Style Partially refundable policy text | partiallyRefundable | .partiallyRefundable { color: #000; } |
Find hex codes here. |
Style Non-refundable policy text | nonRefundable | .nonRefundable { color: #000; } |
Find hex codes here. |
Options Page
Page ID:
#options
Area / Elements | Class names | Implementation | Comments |
---|---|---|---|
Change the text color | options | #options { color: #000; } |
Find hex codes here. |
Change the payment box background color | options well | #options well { color: #ffccc; } |
Find hex codes here. |
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 color of the text inside info box | alert-info | #options .alert-info { 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. |
Details Page
Page ID:
#details
Area / Elements | Class names | 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 |
#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; } |
|
Change the room decription and payment box background color | details well | #details well { color: #ffccc; } |
Find hex codes here. |
Manage My Reservation Page
Page ID:
#desc
Area / Elements | Class names | Implementation | Comments |
---|---|---|---|
Change the color of amenity icons
(find hex codes here.) |
highlighted | #desc .highlighted{ color: #fff; } |
Find hex codes here. |