The Cloudbeds PMS has a new look! As we work to update our knowledgebase some steps in our articles might not match our new design. Click here for more details.

Cloudbeds Booking Engine - Change Colors (Background, Elements and Buttons)

Follow

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)

Add an image to the background

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>
Change the background color of the promo code section

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>
Change the color of the promo code search bar

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>
Change background of available dates in date picker

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>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Change the color of the round box where the check-marks are surrounded

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>
Change the calendar icon color when your property doesn't have availability

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>
yCxTpIHP3fBvKxXkiMn87RcRc (1137×627) - Google Chrome
Change background color of the no availability message

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>
Change Group Code Field Color

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
Customize the color of Only x left
<style>
.av-left-rooms {
background-color: #3267B8;
color: white;
}
</style>

What to do if my customization code is not working?

If the desired customization code is not working as expected, try the following troubleshooting steps:

  • Confirm that the code has been correctly copied and pasted, without typos or unnecessary/extra spaces.
  • Paste the code in the correct field, in the Customize the Booking Engine section (For example: Some codes should be placed in the Custom header section, and some other codes need to be pasted in the Custom footer section)
  • Save your changes after the customization codes are added to the correct fields, and reload/open the Booking Engine on your browser to see the effect
  • The List Design View is no longer supported in Cloudbeds PMS. Find more details here.

Reach out to our Support Team if none of the solutions above fix the issue.

Powered by Zendesk