How to Customize the Look and Feel of the Booking Engine

From hoteliga
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

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