hoteliga - User contributions [en]

How to Customize the Look and Feel of the Booking Engine

2021-06-06T23:45:30Z

Era: /* Results Page */

== 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 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.

{| 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 ==
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 ==
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 ==
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 ==
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 ==
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 ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2021-06-06T23:44:12Z

Era: /* Results Page */

== 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 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.

{| 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 ==
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 ==
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 {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Style Terms and Conditions modal description
| termsModal policy-description
| <pre>#termsModal .policy-description {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| 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 ==
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 ==
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 ==
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 ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2021-05-21T16:34:20Z

Era: /* Results Page */

== 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 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.

{| 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 ==
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 ==
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].
|-
|}

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

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2021-05-21T16:00:18Z

Era: /* Results Page */

== 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 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.

{| 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 ==
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 ==
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 {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Style Terms and Conditions modal description
| termsModal policy-description
| <pre>#termsModal .policy-description {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| 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 ==
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 ==
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 ==
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 ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2021-05-21T15:54:08Z

Era: /* Results Page */

== 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 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.

{| 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 ==
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 ==
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 {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Style Terms and Conditions modal description
| termsModal policy-description
| <pre>#termsModal .policy-description {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
|}

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

== Credit Card Page ==