Difference between revisions of "How to Customize the Look and Feel of the Booking Engine"

From hoteliga
Jump to: navigation, search
(Details Page)
(Details Page)
Line 80: Line 80:
 
| Hide specific payment method description
 
| Hide specific payment method description
 
|  
 
|  
cashy
+
cash
 +
 
 
pay-pal
 
pay-pal
 +
 
bank-deposit
 
bank-deposit
 +
 
bank-full-amount
 
bank-full-amount
 +
 
two-checkout
 
two-checkout
 +
 
cash-checkin
 
cash-checkin
eurobank   veritrans  
+
 
alpha-bank   cash-credit-card   redsys   pay-pal-pre  
+
eurobank
bank-deposit-checkin   fideli-pay cash-credit-card-vault  
+
 
alpha-bank-master-pass   moneris   Sampath  
+
veritrans
cash-credit-card-checkin-vault   asia-pay
+
 +
alpha-bank
 +
 
 +
cash-credit-card
 +
 
 +
redsys
 +
 
 +
pay-pal-pre
 +
 
 +
bank-deposit-checkin
 +
 
 +
fideli-pay
 +
 
 +
cash-credit-card-vault
 +
 
 +
alpha-bank-master-pass
 +
 
 +
moneris
 +
 
 +
Sampath
 +
 
 +
cash-credit-card-checkin-vault
 +
 
 +
asia-pay
 
| <pre>.Cash{
 
| <pre>.Cash{
 
   display: none;
 
   display: none;

Revision as of 11:25, 20 August 2019

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

.terms-conditions-content{
  display: none;
}

.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

.children-policy-txt{
  display: none;
}

.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

masterpass-card-icon

paypal-card-icon

.visa-card-icon{
  display: none;
}
Hide all card icons payment-method-icons
.payment-method-icons{
  display: none;
} 
Hide specific payment method description

cash

pay-pal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

pay-pal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

Sampath

cash-credit-card-checkin-vault

asia-pay

.Cash{
  display: none;
}
Hide all payment method descriptions payment-method-description
.payment-method-description{
  display: none;
}

Manage My Reservation Page

About the Property page

Credit Card Page