This article includes the code to change your Booking Engine colors (background, elements, and buttons) to match your brand's.
- For the Custom Meta Tags applicable code: Use the Gallery Design tab.
- For color customization: Each color has a different code. If you need any reference, use the Color Picker tool to get your preferred color code.
Change Booking Engine Colors (Background, Elements and Buttons)
To add a background image to the main area of the booking engine use the code below:
- You need to have background image URL, it should end with .jpg.
- If you have an image on PC, upload it to any image hosting website, like Google Photos (Drive) and then get the image URL.
- Remember to keep this image as public in the hosting website.
1. Add Background and Keep Header Line
Paste this code in the Custom Meta Tags section:
<style>
.add_white {background: transparent;}
.container1{background-color: transparent;}
/* Change URL here */
.container2 {background: url("http://addbackgroundurlhere.com/file.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }
.chooser, .property center {opacity: 1}
</style>
2. Add Background and Remove Header Line
To show the background image on the full page paste this code instead, in the Custom Meta Tags section:
<style>
/* Background to the full page */
.page-boxed {
background: url("http://addbackgroundurlhere.com/file.jpg") !important;
background-position: center center;
background-attachment: fixed !important;
background-repeat: no-repeat;
background-size: cover !important;
background-color:#ffffff;
}
.chooser, .property center {opacity: 1}
/* Add Transparency */
.page-footer, .page-header.navbar {background: transparent; } /* Transparent Header & Footer */
.container1, .container2 {background-color: transparent;} /* Transparent Main Background */
</style>
Add the code below in the Custom Meta Tags section, and replace the color code #091b48 for your desired color code:
<style>
.rooms_book {
background: #091b48;}
</style>
Add the code below in the Custom Meta Tags section, and replace the color code #efc0ff for your desired color code:
<style>
#promo_code_input {
background-color: #efc0ff;
}
</style>
Add the code below in the Custom Meta Tags section, and replace the color code #ffcc00 for your desired color code:
<style>
/*Changes background of available dates*/
.legend.av {
background: #ffcc00;
}
.half_year .ui-datepicker td, .half_year_popup .ui-datepicker td, .one_month .ui-datepicker td {
background-color: #ffcc00;
}
</style>
Add the following code in both Custom Meta Tags and Custom Meta Tags (Confirmation Page Only) sections. Change the the #007D8A code to any other desired color code:
<style>
.bg-green-jungle {
border-color: #007D8A !important;
background: #007D8A !important;
}
</style>
By default, when your property doesn't have availability, the following screen will be displayed, and the calendar icon has red color.
Add the following code into Custom Meta Tags section to change the icon color. Replace the color name with the desired color or use a code (example – #00FF00):
<style>
div.message_container:before
{
color: Green; /*You can add your color here*/
}
</style>
When your property doesn't have availability, the following screen will be displayed, and highlighted area is white color by default.
Add the following code into Custom Meta Tags section to change the background color. Replace the highlighted code with the desired color name / code (example – #00FF00).
<style>
div.message_container
{
background-color: #D9D2E9; /*You can add your color here*/
}
</style>
Insert the code under Custom Meta Tags. The red numbers need to be replaced with your desired code color:
<style>
#group_code_input {
background-color:#FF5733;
}
</style>![[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/005/569/389/original/ae4d03e4-ffeb-4a16-82d8-c26a34575e57.png)
<style>
.av-left-rooms {
background-color: #3267B8;
color: white;
}
</style>![[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/005/569/392/original/92dd656f-7367-4fbb-8528-8718c563e8ec.png)
