Difference between revisions of "How to Customize the Look and Feel of the Booking Engine"
From hoteliga
Line 128: | Line 128: | ||
!Example | !Example | ||
|- | |- | ||
− | | | + | | Change the color of amenity icons |
− | | | + | | highlighted |
− | + | | <pre>#desc .highlighted{ | |
− | + | color: #fff; | |
− | | <pre># | ||
− | |||
}</pre> | }</pre> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|} | |} | ||
Revision as of 15:09, 20 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 |
---|---|---|
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; } |
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; } |
Change the color of amenity | highlighted | #desc.highlighted{ color: #000; } |
Manage My Reservation Page
Area / Elements | Instructions | Example |
---|---|---|
Change the color of amenity icons | highlighted | #desc .highlighted{ color: #fff; } |