How to Customize the Look and Feel of the Booking Engine

From hoteliga
Revision as of 11:10, 20 August 2019 by Nerdy (talk | contribs)
Jump to: navigation, search

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

Retrieved from "http://help.hoteliga.com/en/index.php?title=How_to_Customize_the_Look_and_Feel_of_the_Booking_Engine&oldid=1794"