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

From hoteliga
Jump to: navigation, search
(→‎Details Page)
Line 9: Line 9:
  
 
== Results Page ==
 
== Results Page ==
 +
 +
{| class="wikitable"
 +
! Area / Elements
 +
! Instructions
 +
! Example
 +
|-
 +
| Replace content with a “Terms” button
 +
| terms-conditions-content
 +
 +
terms-conditions-btn
 +
| <pre>.terms-conditions-content{
 +
  display: none;
 +
}
 +
 +
.terms-conditions-btn{
 +
display: block;
 +
}</pre>
 +
|}
 +
  
 
== Options Page ==
 
== Options Page ==
 +
{| class="wikitable"
 +
! Area / Elements
 +
! Instructions
 +
! Example
 +
|-
 +
| Display Children Policy content on demand using a button
 +
| children-policy-txt
 +
 +
show-more-txt
 +
|<pre>.children-policy-txt{
 +
  display: none;
 +
}
 +
 +
.show-more-txt{
 +
display: block;
 +
}</pre>
 +
|}
  
 
== Details Page ==
 
== Details Page ==
 +
{| class="wikitable" style="text-align: left;"
 +
!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
  
−
{| class="wikitable" style="text-align: left; width: 800px"
+
paypal-card-icon
−
|style="font-weight:bold" |Area / Elements
+
| <pre>.visa-card-icon{
−
|style="font-weight:bold" |Instructions
+
  display: none;
−
|style="font-weight:bold" |Example
+
}</pre>
 +
|-
 +
| Hide all card icons
 +
| payment-method-icons
 +
|<pre>.payment-method-icons{
 +
  display: none;
 +
} </pre>
 
|-
 
|-
−
|Hide specific credit card icons
+
| Hide specific payment method description
−
|Use the respective credit card icon name to hide an icon as shown in the example.<br><br>visa-card-icon<br>master-card-icon<br>amex-card-icon<br>diners-card-icon<br>discover-card-icon<br>masterpass-card-icon<br>paypal-card-icon
+
| cash
−
|<pre>.visa-card-icon {
+
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
 +
| <pre>.Cash{
 
   display: none;
 
   display: none;
 
}</pre>
 
}</pre>
−
 
 
|-
 
|-
−
|Butter
+
| Hide all payment method descriptions
−
|Ice cream
+
| payment-method-description
−
|1.00
+
| <pre>.payment-method-description{
 +
  display: none;
 +
}</pre>
 
|}
 
|}
  

Revision as of 11:10, 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

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