Mybookings offers a number of customization options for those who are either familiar with HTML/CSS or employ a web-designer.
You can easily match your website’s existing branding or create your unique style by customizing
- header and footer,
- background,
- color scheme,
- fonts,
- adding text and hyperlinks,
- hiding default elements
Please note that Cloudbeds does not provide website design support, but we do offer some very easy copy and paste codes that you can use. Our Support Team will be glad to assist you with using the codes provided in this article. Please contact us at support@cloudbeds.com if you need help customizing your booking engine using the customization solutions provided below.
Where to begin
1. In myfrontdesk go to manage > Customize mybookings
2. Enter the customization code to the necessary field (Custom meta tags, Custom header for your hotel booking etc.)
CSS codes should be between <style> and </style> brackets like in the example below:
<style>
.show_promo_code a {color:#999;}
</style>
Customization codes
Please Note: The examples provided below are for reference and may require some additional modification to work correctly.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
font-family:'Open Sans', "Arial", sans-serif !important;
}
/* Calendar Icon - Don't Change or Remove */
i.fa
{
font: normal normal normal 14px/1 FontAwesome !important;
}
/* Hotel Name Font */
.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
Important!
If after inserting this code and applying another font to all the tags you see no arrow icon on calendar (like in screenshot below) - remove <span> tag from the code and save the changes
/* Hotel Name Font */
.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
'color' - changes the color of font for word 'Search';
'background' - changes the color of the button
/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
background: #da1176!important;
border-color: #2d7e7b;
} 
'color' - changes the color of font for word 'BOOK NOW' and 'Select Accommodation';
'background' - changes the color of the button
.green.btn,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active {
background:#da1176!important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
}
Add the code below to 'Custom footer' section and duplicate it for all the needed languages:
.message_container
{font-size: 16px;
color: #ff5722;
font-weight: normal; /*font weight - normal, bold, light, etc...*/
font-style: normal; /*font style - normal, italic*/}
/*Header*/
.caption {
font-family: "Georgia";
}
/*Info inside section*/
.map_info {
font-family: "Courier New";
}
/*change font (Calendar title)*/
/*change font (Calendar days/dates)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
.selected_rooms_price {
font-family: 'Roboto',sans-serif;
font-style: italic;
font-size: 30px;
color: #da26b2;
margin-top: 5px;
text-align: center;
} 
To add a background image to the main area of the booking engine use the code below:
Please note, you need to have background image url, it should end with .jpg.
If you have an image on PC - you need to upload it to any image hosting website or Google Drive and then get the image URL. Here's one of the examples: https://www.codecademy.com/articles/host-images-on-dropbox
-add background + keep header line
.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}
-add background + remove header line
To show the background image on the full page use this code instead:
/* 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 */
.container1, .container2 {
background-color: #fda2b4;
}
.page-header.navbar {
background-color: #6bbeb6;
}
'color' - changes the color of font for word 'Search';
'background' - changes the color of the button
/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
background: #da1176!important;
border-color: #2d7e7b;
} 
.rooms_book {
background: #091b48;}
If you want to change 'BOOK NOW' button style and you allow guests to book individual room types (there is button next to room type 'SELECT ACCOMMODATION') - the code below will change both of these buttons
Color - changes the font color
Background - changes the button color
.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled, .green.btn.disabled:hover {
color: #fff;
background: #ac59b1;}
.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}
/*Change active section color*/
.page-breadcrumb li.active>span {
background: #f13e64;
}
/*Change inactive section color*/
.page-breadcrumb li.active>span:after {
border-left: 30px solid #f13e64;
}
/*Change small arrow in the middle color on CHOOSE A ROOM step*/
.page-breadcrumb li>span {
background: #fbe3e3;
}
/*Change small arrow in the middle color on CHECKOUT step*/
.page-breadcrumb li>span:after {
border-left: 30px solid #fbe3e3;
background - changes the background color
color - changes the font color
/*Changes highlighted dates - checkin and checkout*/
.ui-datepicker .ui-state-checkin, .ui-datepicker .ui-state-checkin .ui-state-default, .ui-datepicker .ui-state-checkout,
.ui-datepicker .ui-state-checkout .ui-state-default {
background: #f48224;
color: #ecfd02;
}
/*Changes dates style between checkin and checkout*/
.ui-datepicker .ui-state-range .ui-state-default {
background: #49bbee;
color: #4b694c;
}
/*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;
}
/* Remove Children Column */
.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,
/* Remove Adult Column */
.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children
{ visibility: hidden !important; }
/* Remove Children Column */
.room_types .children, .kids_block, .roomtype .col_kids, .total_child, .nb_kids, .book_child {
visibility: hidden !important;
}
.choose_room .room_types .custom-children {
visibility: hidden !important;
}
.tarife.kids_tarife {
display: none !important;
}
/* Remove "Price From" column */
.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
/* Remove Availability Calendar */
.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
.only_left
{display:none;}
/* Remove Address */
.map_info {display:none;} 
#wizard-container > div.choose_room > div.available_rooms > div.col-md-9.padding-left-0.col-sm-12.col-xs-12 > div.room_types > div > div.detailed > div.room_more > div > div {visibility: hidden !important;}
.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}
/* Remove Map */
#map_canvas {display:none;} 
.checkin-checkout-terms-block{
display: none;
}
.checkin-checkout-terms-block, .property_info h5, .cancellation_policy {
display: none;
}
Go to mybookings and scroll down to Property Information section, the fields with contact details are basically a numeric list on CSS side.
In example below 'Address' is the field number 1, 'City' is the field number 2 and so on
To hide a certain field add the following code, specifying number of field you want to hide after 'p:nth-child' part in brackets.
In example below 4th field (Contact Name) is hidden:
<style>
body > div.container2 > div > div.container.main-content > div.page-container.property_info > div > div > div.portlet-body > div.map_info > p:nth-child(4) {display:none; }
</style>00000 in code below is myfrontdesk room id, you can find it using dev console in browser or contact our Suport Team to help providing it.
[data-room-type-id="00000"] .roomtype.vertical-align.visible-md-block.visible-lg-block .children.custom-children{
visibility: hidden !important;
}Insert the code to 'Confirmation Only' section
This is recommend for properties that only have dorm beds and no private rooms
.reserve_total .row.total_adults, .reserve_total .row.total_child {
display: none;
}
.room_types .stay tr:nth-child(2) {
display: none;
}
.room_more {
display: none;
}
In these section you find codes which replace the default mybookings text with your custom text. You shouldn't necessarily put the text provided in code templates - you can enter any other text.
!Please note that the text entered will be displayed:
- similary for all languages on mybookings (those which are available) - if code was entered to 'Custom Meta Tags' section
- for selected language only if the code was entered to sections 'Customer header/footer for your hotel booking page'
Add this code to 'Custom footer for your hotel booking page' and duplicate for all the languages:
<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'View Availability Calendar';
</script>
button.btn.green.btn-block.select-accommodation-btn {
font-size: 0;
}
button.btn.green.btn-block.select-accommodation-btn:before {
font-size: 12px;
content: "text";
}Add this code to 'Custom footer for your hotel booking page' and duplicate for all the languages:
<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insert Text Here';
</script>
- Add the code to 'Custom Meta Tags' field;
- The phrase/word which replaces the original - will be displayed for all languages
.custom-adults.text-center {
font-size: 0!important;
}
.custom-adults.text-center:after {
content: "Guests";
font-size: 12px;
}
Some hotels sell accommodation to children starting from specific age for the price of an adult. In this case the guest should book correct amount of adults including the children there. The code below will help to change 'Adults' column name to 'Adults and children +5 years old'. You may change the text or age to any number.
EN text
Add this code to Custom Meta Tags section:
<style>
.custom-adults.text-center:after{
content: " and children + 5 years old";
}
.custom-children.text-center:after{
content: " - 5 years";
}
.col-sm-3.col-xs-3.custom-adults p:after{
content: " and children + 5 years old";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
content: " - 5 years";
}
</style>Add this code to Custome Meta Tags (Confirmation page only) section:
<style>
.book_child:after{
content: " - 5 years old";
}
.book_child.kids_column:after {
content: "";
}
</style>
PT text
Add this code to Custom Meta Tags section:
<style>
.custom-adults.text-center:after{
content: " e crianças + 5 anos";
}
.custom-children.text-center:after{
content: " - 5 anos";
}
.col-sm-3.col-xs-3.custom-adults p:after{
content: " e crianças + 5 anos";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
content: " - 5 anos";
}
</style>Add this code to Custome Meta Tags (Confirmation page only) section:
<style>
.book_child:after{
content: " - 5 anos";
}
.book_child.kids_column:after {
content: "";
}
</style>Enter the code to 'Custom Meta Tags' section (will be displayed similary for all languages):
.show_promo_code {font-size: 0;}
.show_promo_code a:after {content:"HAVE A DISCOUNT CODE?";
font-size: 13px;
color: red;
}
Enter the code to 'Custom Meta Tags' section (will be displayed similarly for all languages):
.alert.alert-warning.booking_helper {font-size: 0;}
.alert.alert-warning.booking_helper:after {font-size: 14px; content: 'YOUR TEXT HERE';}
Enter the code below to 'Custom Meta Tags' section.
The phrase/word which replaces the original - will be displayed for all languages
For table header
.choose_room .roomtype .custom-select-rooms.text-center {
font-size: 0;
}
.choose_room .roomtype .custom-select-rooms.text-center:after{
content: "Accommodation";
font-size: 12px;
line-height: 1;
}
Inside the table (above #of rooms selector)
This word will appear instead of both beds (dorms) / rooms (private room types)
.type_of_room {
visibility:hidden;
}
.type_of_room:after{
content: "Accommodation";
visibility:visible;
}
.custom-select-rooms .type_of_room {
margin-top: -27px;
}
The phrase/word which replaces the original - will be displayed for all languages
.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Apartment type";
visibility:visible;
margin-left: -35px;
}
- Add this code to 'Custom Meta Tags' section;
- You can change the color of the text by changing the code #ff000
#rooms-search-form .check_availability_group:after {
content: "YOUR TEXT HERE";
color: #ff0000;
display: block;
}
Add this code to 'Custom footer for your hotel booking page' and duplicate for all the languages:
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '<br/> YOUR CUSTOM TEXT';
NewEl.className += "text-right";
NewEl.style.fontSize = '12px';
NewEl.appendAfter( document.querySelector('.book_now'));
</script>
Add this code to 'Custom footer for your hotel booking page' and duplicate for all the languages:
- you may change text "Get your promo code here";
- set a correct link to where customer may get a code instead http://www.linktoyourcodehere.
<script type="text/javascript">Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); },
false;var NewEl = document.createElement('p');NewEl.innerHTML = '<a href="http://www.linktoyourcodehere." style="text-decoration:underline;">Get your promo code here</a>';
NewEl.className += "text-center";NewEl.style.fontSize = '12px';NewEl.appendAfter
( document.querySelector('.promo-code'));
</script>
- Add this code to 'Custom header or footer for your hotel booking page' section
- Replace www.cloudbeds.com with link to your website
- Change "Back to website" text to any other text you'd prefer
- Change h4 to h1,h2,h3 to change the font size
- Change "left" to center/right to change the position of the text
<h4 style="text-align:left"><a href="https://www.cloudbeds.com/" target="_blank"><h4><b>Back to website</b></h4></a>
/*Version 1*/ <a href='http://www.acantohotels.com/'><H4>Back to Website</H4></a> /*Version 2: Align the link to the left of the logo and add arrow in front of the text*/ <div class="container"> <h4><a href='http://www.yourhotelwebsitehere.com/'>← Back to Website</a></h4></div> /*Version 3: Align link to the center*/ <div class="container"> <h4 style="text-align:center"><a href='http://www.yourhotelwebsitehere.com/'>← Back to Website</a></h4> </div>
Please put the code below to "Custom footer for your hotel booking page" section (change the text highlighted red):
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '<br/> Please note that the minimum length of stay is 2 days';
NewEl.className += "text-left";
NewEl.style.fontSize = '19px';
NewEl.appendAfter( document.querySelector('.message_container'));
</script>- You can control font size by changing number in line:
NewEl.style.fontSize = '19px';- you can change the position of the text by changing 'NewEl.className += "text-left";' line to 'center' or 'right'
Copy and paste the code to 'Custom Meta Tags' section:
.payment_method>.md-radio-inline::after {
content: "";
display: block;
width: 174px;
height: 58px;
background-image: url(https://www.cloudbeds.com/wp-content/uploads/2018/07/vs_mc.png);
background-size: cover;
Copy and paste the code to 'Custom Meta Tags' section:
.payment_method>.md-radio-inline::after {
content: "";
display: block;
width: 216px;
height: 29px;
background-image: url(https://www.cloudbeds.com/wp-content/uploads/2018/05/ccs.png);
background-size: cover;
}
Please put this code to the 'Custom header' section in 'Mybookings Customization' page and copy the code for all the languages:
.available_rooms .roomtype .first_container {padding-left: 0;}
.available_rooms .room_image { top: 0; padding: 0;}
.available_rooms .col-md-9 div.image_container { width: 100%; height: auto; margin: 0; padding-bottom: 70%; position: relative;}
.image_container div, .image_container a{ position: absolute;}
.room_image img.bigger { margin: 0; position: absolute; right: 0; bottom: 0;}
You can control width by changing the number of px in the element [.choose_room .roomtype .adults.custom-adults button.btn { max-width: 80px; ]
.choose_room .room_types .custom-children {
display: none;
}
.choose_room .roomtype .adults.custom-adults {
width: 20%;
}
.available_rooms .roomtype .adults .adults_select {
width: 100% !important;
}
.choose_room .roomtype .adults.custom-adults button.btn {
max-width: 80px;
}
Alternative code (with borders):
.room {
padding-bottom: 25px;
padding-top: 25px;
}
.image_container>a {
height: 150%;
width: 150%;
margin-top: -40px;
}
.padding-right-0 {
padding-left: 40px;
}
.room_image img.bigger {
margin: 82px 0 0 122px;
}
.ui-widget-header, .ui-datepicker-title, .one_month .ui-datepicker-header, .half_year .ui-datepicker-header, .half_year_popup .ui-datepicker-header, .one_month .ui-datepicker-header{
color: #fff;
background: #cfeef8;
border: 1px solid #e0a240;}
background - changes the background color
color - changes the font color
/*Changes highlighted dates - checkin and checkout*/
.ui-datepicker .ui-state-checkin, .ui-datepicker .ui-state-checkin .ui-state-default, .ui-datepicker .ui-state-checkout,
.ui-datepicker .ui-state-checkout .ui-state-default {
background: #f48224;
color: #ecfd02;
}
/*Changes dates style between checkin and checkout*/
.ui-state-default {
background: #f2f7cc;
color: #4b694c;
}
We use black in example, change #000000 to desired color
.pink {position: relative; }
.pink:after {content: ""; position: absolute; border: 4px solid #000000; top: 0; right: 0; border-left: 4px solid transparent; border-bottom: 4px solid transparent;}
Add this code to 'Custom footer for your hotel booking page' section:
<script type="text/javascript">
window.addEventListener("load", function(event) {document.querySelector('.show_avail_calendar a').click(); }, false); </script>
<style>
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>Please, check the examples on the screenshot below:
1 - before adding the code.
2 - after the code was applied. The rate checker button is the same as search button.
<style>
.rate-check-arrow.arrow-left {
background-image: url(path to your image left) !important;
}
.rate-check-arrow.arrow-left {
background-image: url(path to your image right) !important;
}
</style>
.acessa_float_left.acessa_float_description {
display: none;
}.rate-check-arrow-text {font-size: 0; padding-right: 0;}
.rate-check-arrow-text::after {content: "Price Comparison"; font-size: 11px; line-height: 1.25;}.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name {
font-size: 0;
}
.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name:before {
content:"Desired text here";
font-size: 14px;
}When one word needs to be hidden:
#channel-Airbnb {display: none;}
When two words needs to be hidden:
#channel-Hotel\ Bonanza {display: none;} When Booking.com needs to be hidden:
#channel-Booking\2e com {display: none;}When Airbnb (API) needs to be hidden:
#channel-Airbnb\20 \28 API\29{display: none;}button.rate-check-button.rate-check-learn-more {font-size: 0;}
/*change text content below*/
button.rate-check-button.rate-check-learn-more::after {content: "Text go here"; font-size: 15px;}
<script>//wrap logo inside a hyperlinkdocument.addEventListener('DOMContentLoaded', function(event) { document.querySelector(".rate-check-why .rate-check-content").innerText = "Text go here";}, false);</script>
.prices-without-taxes {font-size: 0;}
.prices-without-taxes:after {font-size: 14px; content: 'YOUR TEXT HERE';}
When sharing mybookings links on Facebook, it will automatically scan the HTML and try to generate a nice looking snippet, usually it adds the text "Cloudbeds uses PCI-Compliant security...".
This can be overridden by adding specific markup tags that Facebook is looking for. The following code should be added to the mybookings 'Custom Meta Tags' section in myfrontdesk:
<meta property="og:title" content="PUT TITLE HERE" />
<meta property="og:description" content="PUT DESCRIPTION HERE" />
<meta property="og:image" content="https://PUT_PREFERABLE_IMAGE_URL_HERE?format=2500w" />
This code should be copied and pasted to your website page! Do not add it to 'Mybookings Customization' section:
/*change text*/
.acessa_float_left.acessa_float_description {font-size:0;}
.acessa_float_left.acessa_float_description:after {content: "text here"; font-size:14px;}
/*Background color and text color*/
.CloudBedsWidget .float_bg2 {background-color:#7dc3ac; color:#000;}
Add this code to your website:
<iframe src="https://hotels.cloudbeds.com/reservation/HvaCsE?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="yourFrame"></iframe>
This code should be added at the bottom of your website page:
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"</script>