How to Customize the Look and Feel of the Booking Engine
From hoteliga
Contents
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. |
