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