Difference between revisions of "How to Customize the Look and Feel of the Booking Engine"
From hoteliga
| Line 115: | Line 115: | ||
} </pre> | } </pre> | ||
|- | |- | ||
| − | | | + | | Change the color of amenity |
| − | | | + | | highlighted |
| − | + | | <pre> #desc.highlighted{ | |
| + | color: #000; | ||
| + | }</pre> | ||
| + | |} | ||
| − | + | == Manage My Reservation Page == | |
| + | {| class="wikitable" style="text-align: left;" | ||
| + | !Area / Elements | ||
| + | !Instructions | ||
| + | !Example | ||
| + | |- | ||
| + | | Hide specific Card icons | ||
| + | | visa-card-icon | ||
| − | |||
| − | + | | <pre>#search .visa-card-icon{ | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | | <pre># | ||
display: none; | display: none; | ||
}</pre> | }</pre> | ||
|- | |- | ||
| − | | Hide all | + | | Hide all card icons |
| − | | payment-method- | + | | payment-method-icons |
| − | | <pre># | + | |<pre>#search .payment-method-icons{ |
display: none; | display: none; | ||
| − | }</pre> | + | } </pre> |
|} | |} | ||
| − | |||
== About the Property page == | == About the Property page == | ||
== Credit Card Page == | == Credit Card Page == | ||
Revision as of 15:05, 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 |
|---|---|---|
| Hide specific Card icons | visa-card-icon
|
#search .visa-card-icon{
display: none;
}
|
| Hide all card icons | payment-method-icons | #search .payment-method-icons{
display: none;
}
|
