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

From hoteliga
Jump to: navigation, search
(Details Page)
Line 14: Line 14:
 
== Details Page ==
 
== Details Page ==
  
{| class="wikitable" style="text-align: left; width: 600px"
+
{| class="wikitable" style="text-align: left; width: 800px"
 
|style="font-weight:bold" |Area / Elements
 
|style="font-weight:bold" |Area / Elements
|style="font-weight:bold" |Class Name
+
|style="font-weight:bold" |Instructions
 
|style="font-weight:bold" |Example
 
|style="font-weight:bold" |Example
 
|-
 
|-
|Bread
+
|Hide specific credit card icons
|Pie
+
|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
|500.00
+
|<pre>.visa-card-icon {
 +
  display: none;
 +
}</pre>
 +
 
 
|-
 
|-
 
|Butter
 
|Butter

Revision as of 13:35, 19 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

Options Page

Details Page

Area / Elements Instructions Example
Hide specific credit card icons Use the respective credit card icon name to hide an icon as shown in the example.

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;
}
Butter Ice cream 1.00

Manage My Reservation Page

About the Property page

Credit Card Page