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

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