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

From hoteliga
Jump to: navigation, search
(→‎Results Page)
 
(134 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
== Introduction ==
 
== Introduction ==
 
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.
 
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS 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.
 
The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.
  
 
== General Elements ==
 
== General Elements ==
 +
Elements used in this section style all pages.
 +
 +
{| class="wikitable"
 +
! Area / Elements
 +
! Class names
 +
! Implementation
 +
! Comments
 +
|-
 +
| Set the default background color of body
 +
| body
 +
|<pre>body {
 +
  background:#fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Set the default background color of header
 +
| header
 +
| <pre>#header {
 +
  background:#fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the background color of language and currency dropdown
 +
| header dropdown-toggle dropdown-menu
 +
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
 +
  background-color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Set the color of language and currency dropdown text
 +
| header dropdown-toggle dropdown-menu
 +
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Set the color of amenities and navigation buttons
 +
| highlighted
 +
| <pre>.highlighted {
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Set buttons' color
 +
| btn-primary
 +
| <pre>.btn-primary {
 +
  background-color: #ffccc!important;
 +
  border-color: #ffccc!important;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Set buttons' text color
 +
| btn-primary
 +
| <pre>.btn-primary {
 +
  color: #000!important;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the background color of the info box and alert error box
 +
| alert-info
 +
|<pre>.alert-info, .alert-danger {
 +
  background-color: #ffccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the color of the info box and alert error box text
 +
| alert-info
 +
|<pre>.alert-info, .alert-danger {
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the color of the slideshow arrows
 +
| slick-prev slick-next
 +
| <pre>.slick-prev:before, .slick-next:before {
 +
  color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|}
  
 
== Search Page ==
 
== Search Page ==
 +
Page ID: 
 +
 +
<pre>#search</pre>
 +
 +
{| class="wikitable" style="text-align: left;"
 +
! Area / Elements
 +
! Class names
 +
! Implementation
 +
! Comments
 +
|-
 +
| 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
 +
| <pre>#search .visa-card-icon {
 +
  display: none;
 +
}</pre>
 +
|
 +
|-
 +
| Hide all card icons
 +
| payment-method-icons
 +
|<pre>#search .payment-method-icons {
 +
  display: none;
 +
} </pre>
 +
|
 +
|-
 +
| Add background color
 +
| search
 +
| <pre>search {
 +
  background: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Add background image
 +
| search
 +
| <pre>search {
 +
  background: url("") no-repeat center center fixed;
 +
  -webkit-background-size: cover;
 +
  -background-size: cover;
 +
  -background-size: cover;
 +
  -size: cover;
 +
}</pre>
 +
| Inside parentheses ("") put the url of the image
 +
|-
 +
| Hide background image
 +
| search
 +
| <pre>#search {
 +
  background: none;
 +
}</pre>
 +
|
 +
|-
 +
| Change color of main text
 +
| search h2
 +
| <pre>#search h2{
 +
  color: #ffccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change color of search form text
 +
| search searchForm
 +
| <pre>#search #searchForm{
 +
  color: #ffccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change color of main box
 +
| search well
 +
| <pre>#search well{
 +
  color: rgba(245, 245, 245, 1);
 +
}</pre>
 +
| Change the last digit between 0.1 - 1 for opacity.
 +
|-
 +
| Change calendar background color
 +
| daterangepicker
 +
 +
calendar-table
 +
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
 +
  background-color: #ffcccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change calendar selected dates color
 +
| daterangepicker td.active
 +
 +
calendar-table
 +
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
 +
  background-color: #ffcccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|}
  
 
== Results Page ==
 
== Results Page ==
 +
Page ID:
 +
 +
<pre>#searchResults</pre>
 +
{| class="wikitable"
 +
! Area / Elements
 +
! Class names
 +
! Implementation
 +
! Comments
 +
|-
 +
| Change the color of the text
 +
| searchResults
 +
| <pre>#searchResults {
 +
  color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Replace content with a “Terms” button
 +
| terms-conditions-content
 +
 +
terms-conditions-btn
 +
| <pre>#searchResults .terms-conditions-content{
 +
  display: none;
 +
}
 +
 +
#searchResults .terms-conditions-btn{
 +
  display: block;
 +
}</pre>
 +
|
 +
|-
 +
| Change the background color of the modify search box
 +
| modifySearch
 +
| <pre>#modifySearch {
 +
  background-color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the color of the modify search text
 +
| modifySearch
 +
| <pre>#modifySearch {
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the background color of the room type modal
 +
| roomTypeModalLabel modal-content
 +
| <pre>#roomTypeModalLabel .modal-content {
 +
  background-color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the color of the room type modal text
 +
| roomTypeModalLabel modal-content
 +
| <pre>#roomTypeModalLabel .modal-content {
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the background color of the terms modal
 +
| termsModal modal-content
 +
| <pre>#termsModal .modal-content {
 +
  background-color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the color of the terms modal text
 +
| termsModal modal-content
 +
| <pre>#termsModal .modal-content {
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Style Terms and Conditions modal title
 +
| termsModal policy-title
 +
| <pre>#termsModal .policy-title {
 +
  margin-top: 20px;
 +
}</pre>
 +
|
 +
|-
 +
| Style Terms and Conditions modal description
 +
| termsModal policy-description
 +
| <pre>#termsModal .policy-description {
 +
  margin-top: 20px;
 +
}</pre>
 +
|
 +
|-
 +
| Style Partially refundable policy text
 +
| partiallyRefundable
 +
| <pre>.partiallyRefundable {
 +
  color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Style Non-refundable policy text
 +
| nonRefundable
 +
| <pre>.nonRefundable {
 +
  color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
|}
  
 
== Options Page ==
 
== Options Page ==
 +
Page ID:
 +
 +
<pre>#options</pre>
 +
 +
{| class="wikitable"
 +
! Area / Elements
 +
! Class names
 +
! Implementation
 +
! Comments
 +
|-
 +
| Change the text color
 +
| options
 +
| <pre>#options {
 +
  color: #000;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the payment box background color
 +
| options well
 +
| <pre>#options well {
 +
  color: #ffccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Display Children Policy content on demand using a button
 +
| children-policy-txt
 +
 +
show-more-txt
 +
|<pre>#options .children-policy-txt {
 +
  display: none;
 +
}
 +
 +
#options .show-more-txt {
 +
display: block;
 +
}</pre>
 +
|
 +
|-
 +
| Change the color of the text inside info box
 +
| alert-info
 +
|<pre>#options .alert-info {
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the color of amenity
 +
| highlighted
 +
| <pre>#options .highlighted {
 +
  color: #ffccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|-
 +
| Change the color of navigation icons
 +
| highlighted
 +
| <pre>#options .fa-circle {
 +
  color: #ffccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|}
  
 
== Details Page ==
 
== Details Page ==
 +
Page ID:
 +
 +
<pre>#details</pre>
 +
{| class="wikitable" style="text-align: left;"
 +
! Area / Elements
 +
! Class names
 +
! Implementation
 +
! Comments
 +
|-
 +
| 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
 +
| <pre>#details .visa-card-icon{
 +
  display: none;
 +
}</pre>
 +
|
 +
|-
 +
| Hide all card icons
 +
| payment-method-icons
 +
|<pre>#deatils .payment-method-icons{
 +
  display: none;
 +
} </pre>
 +
|
 +
|-
 +
| 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
 +
| <pre>#details .cash{
 +
  display: none;
 +
}</pre>
 +
|
 +
|-
 +
| Hide all payment method descriptions
 +
| payment-method-descriptions
 +
| <pre>#details .payment-method-descriptions{
 +
  display: none;
 +
}</pre>
 +
|
 +
|-
 +
| Change the room decription and payment box background color
 +
| details well
 +
| <pre>#details well {
 +
  color: #ffccc;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|}
  
 
== Manage My Reservation Page ==
 
== Manage My Reservation Page ==
 +
Page ID:
 +
 +
<pre>#desc</pre>
 +
{| class="wikitable" style="text-align: left;"
 +
! Area / Elements
 +
! Class names
 +
! Implementation
 +
! Comments
 +
|-
 +
| Change the color of amenity icons
 +
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
 +
| highlighted
 +
| <pre>#desc .highlighted{
 +
  color: #fff;
 +
}</pre>
 +
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
 +
|}
  
 
== About the Property page ==
 
== About the Property page ==
  
 
== Credit Card Page ==
 
== Credit Card Page ==

Latest revision as of 01:45, 7 June 2021

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

Elements used in this section style all pages.

Area / Elements Class names Implementation Comments
Set the default background color of body body 
body {
  background:#fff;
}
 Find hex codes here.
Set the default background color of header header 
#header {
  background:#fff;
}
 Find hex codes here.
Change the background color of language and currency dropdown header dropdown-toggle dropdown-menu 
#header .dropdown-toggle, #header .dropdown-menu {
  background-color: #000;
}
 Find hex codes here.
Set the color of language and currency dropdown text header dropdown-toggle dropdown-menu 
#header .dropdown-toggle, #header .dropdown-menu {
  color: #fff;
}
 Find hex codes here.
Set the color of amenities and navigation buttons highlighted 
.highlighted {
  color: #fff;
}
 Find hex codes here.
Set buttons' color btn-primary 
.btn-primary {
  background-color: #ffccc!important;
  border-color: #ffccc!important;
}
 Find hex codes here.
Set buttons' text color btn-primary 
.btn-primary {
  color: #000!important;
}
 Find hex codes here.
Change the background color of the info box and alert error box alert-info 
.alert-info, .alert-danger {
  background-color: #ffccc;
}
 Find hex codes here.
Change the color of the info box and alert error box text alert-info 
.alert-info, .alert-danger {
  color: #fff;
}
 Find hex codes here.
Change the color of the slideshow arrows slick-prev slick-next 
.slick-prev:before, .slick-next:before {
  color: #000;
}
 Find hex codes here.

Search Page

Page ID: 

#search
Area / Elements Class names Implementation Comments
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 

#search .visa-card-icon {
  display: none;
}
Hide all card icons payment-method-icons 
#search .payment-method-icons {
  display: none;
}
Add background color search 
search {
  background: #000;
}
 Find hex codes here.
Add background image search 
search {
  background: url("") no-repeat center center fixed;
  -webkit-background-size: cover;
  -background-size: cover;
  -background-size: cover;
  -size: cover;
}
 Inside parentheses ("") put the url of the image
Hide background image search 
#search {
  background: none;
}
Change color of main text search h2 
#search h2{
  color: #ffccc;
}
 Find hex codes here.
Change color of search form text search searchForm 
#search #searchForm{
  color: #ffccc;
}
 Find hex codes here.
Change color of main box search well 
#search well{
  color: rgba(245, 245, 245, 1);
}
 Change the last digit between 0.1 - 1 for opacity.
Change calendar background color daterangepicker

calendar-table 

#search .daterangepicker, .calendar-table, .daterangepicker:after{
  background-color: #ffcccc;
}
 Find hex codes here.
Change calendar selected dates color daterangepicker td.active

calendar-table 

#search .daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #ffcccc;
}
 Find hex codes here.

Results Page

Page ID: 

#searchResults
Area / Elements Class names Implementation Comments
Change the color of the text searchResults 
#searchResults {
  color: #000;
}
 Find hex codes here.
Replace content with a “Terms” button terms-conditions-content

terms-conditions-btn 

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

#searchResults .terms-conditions-btn{
  display: block;
}
Change the background color of the modify search box modifySearch 
#modifySearch {
  background-color: #000;
}
 Find hex codes here.
Change the color of the modify search text modifySearch 
#modifySearch {
  color: #fff;
}
 Find hex codes here.
Change the background color of the room type modal roomTypeModalLabel modal-content 
#roomTypeModalLabel .modal-content {
  background-color: #000;
}
 Find hex codes here.
Change the color of the room type modal text roomTypeModalLabel modal-content 
#roomTypeModalLabel .modal-content {
  color: #fff;
}
 Find hex codes here.
Change the background color of the terms modal termsModal modal-content 
#termsModal .modal-content {
  background-color: #000;
}
 Find hex codes here.
Change the color of the terms modal text termsModal modal-content 
#termsModal .modal-content {
  color: #fff;
}
 Find hex codes here.
Style Terms and Conditions modal title termsModal policy-title 
#termsModal .policy-title {
  margin-top: 20px;
}
Style Terms and Conditions modal description termsModal policy-description 
#termsModal .policy-description {
  margin-top: 20px;
}
Style Partially refundable policy text partiallyRefundable 
.partiallyRefundable {
  color: #000;
}
 Find hex codes here.
Style Non-refundable policy text nonRefundable 
.nonRefundable {
  color: #000;
}
 Find hex codes here.

Options Page

Page ID: 

#options
Area / Elements Class names Implementation Comments
Change the text color options 
#options {
  color: #000;
}
 Find hex codes here.
Change the payment box background color options well 
#options well {
  color: #ffccc;
}
 Find hex codes here.
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;
}
Change the color of the text inside info box alert-info 
#options .alert-info {
  color: #fff;
}
 Find hex codes here.
Change the color of amenity highlighted 
#options .highlighted {
  color: #ffccc;
}
 Find hex codes here.
Change the color of navigation icons highlighted 
#options .fa-circle {
  color: #ffccc;
}
 Find hex codes here.

Details Page

Page ID: 

#details
Area / Elements Class names Implementation Comments
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-descriptions 
#details .payment-method-descriptions{
  display: none;
}
Change the room decription and payment box background color details well 
#details well {
  color: #ffccc;
}
 Find hex codes here.

Manage My Reservation Page

Page ID: 

#desc
Area / Elements Class names Implementation Comments
Change the color of amenity icons

(find hex codes here.)

highlighted 
#desc .highlighted{
  color: #fff;
}
 Find hex codes here.

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=2316"