Difference between revisions of "How to Customize the Look and Feel of the Booking Engine"
From hoteliga
(→Options Page) |
(→Details Page) |
||
| Line 71: | Line 71: | ||
maestro-card-icon | maestro-card-icon | ||
| − | | <pre>.visa-card-icon{ | + | | <pre>#details .visa-card-icon{ |
display: none; | display: none; | ||
}</pre> | }</pre> | ||
| Line 77: | Line 77: | ||
| 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> | ||
| Line 122: | Line 122: | ||
asia-pay | asia-pay | ||
| − | | <pre>.cash{ | + | | <pre>#details .cash{ |
display: none; | display: none; | ||
}</pre> | }</pre> | ||
| Line 128: | Line 128: | ||
| Hide all payment method descriptions | | Hide all payment method descriptions | ||
| payment-method-description | | payment-method-description | ||
| − | | <pre>.payment-method-description{ | + | | <pre>#details .payment-method-description{ |
display: none; | display: none; | ||
}</pre> | }</pre> | ||
Revision as of 14:30, 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
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;
}
|
| 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-description | #details .payment-method-description{
display: none;
}
|
