Insert the code under “Custom Meta Tags”:

To only have certain rooms hide the Children column and display it for some rooms, make sure that the code to remove the Children column from all of the rooms is taken off or erased. Add the following code along with the particular room id.

This will work when you don’t allow guest to book a particular room in Mybookings Settings:

This will work when you allow guest to book a particular room in Mybookings Settings. The code below will remove the Children column from all of the room types

This will work when you allow guest to book a particular room in Mybookings Settings:

For example, we have hidden children column only for Standard room now:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

<style>
[data-package-id="0"] ~ label > em { display: none; }
[data-package-id="0"] ~ label:before { content: "Insert your text here"; }
</style

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

1. Add the following code in Custom footer for your hotel booking page in order to see "Pitch" on the top line:

2. Add the following code in the Custom Meta Tags to change from "Room" to "Pitch" in the right menu

3. Add the following code in Custom footer to change from "Accommodations" to Pitch(es)

4. To change from "Room Type" to "Pitch type" in Confirmation Page (after the reservation is completed), add the following code in Custom Meta Tag (Confirmation Page Only) section

5. In order to change from "Room Name" to "Pitch Name" in Confirmation Page (after the reservation is completed) add the following code in Custom Meta Tag (Confirmation Page Only) section

• Please add the code below in <style> code here </style>.
• Replace "00000" with the room type ID.
• The following code can be applied to only one room type. To add to other room types as well, the same code needs to be copied again but with another room type ID.

/* 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;}

.only_left
{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;}

This code can be helpful for properties who has a lot of intervals in promotion and the guest applies the Promotional Code

.promo_info
{
display: none !important;
}.package_warning .alert-danger {
 font-size: 0;
}
.package_warning .alert-danger:after{
 content: "insert the needed text here";
 font-size: 12px;
 line-height: 1;
}

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;
}

.room_types .stay tr:nth-child(2) {
  display: none;
}

.room_more {
display: none;
}

.custom-adults.text-center,.col-sm-3.col-xs-3.custom-adults {
  font-size: 0!important;
}.custom-adults.text-center:after,.col-sm-3.col-xs-3.custom-adults:before{
  
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.

.alert.alert-warning.booking_helper {font-size: 0;}
.alert.alert-warning.booking_helper:after {font-size: 14px;  content: 'YOUR TEXT HERE';}

.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Apartment type";
visibility:visible;
margin-left: -35px;
}

Save the code below in Custom Meta Tags section

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):

/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
} 

Add the code below to 'Custom footer' section and duplicate it for all the needed languages:

Please replace the font-size and color ID on the code below

/*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

Please, feel free to replace the color code (#091b48) to the needed one:

.rooms_book {
    background: #091b48;}

You can use this code to change the color of the promo code search bar in Mybookings (please replace the color #)

You can use the following code to remove the the currency button

You can use the following code to remove the language and currency switches:

/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}

/* Remove Address */ 
.map_info {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;
}

Insert the following code to "Custom Meta Tags" section:

Insert the following meta code to "Custom Meta Tags" field:

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>

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;
}

<style>
.legend_booking>div>div:nth-child(4) {
display: none;
}
</style>

<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'View Availability Calendar';
</script>

<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insert Text Here';
</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";
}

.show_promo_code {font-size: 0;} 
.show_promo_code a:after {content:"HAVE A DISCOUNT CODE?";   
font-size: 13px; 
color: red;
}

Add the following code under Custom Meta Tags section.

As a suggestion, the codes for icons can be found on this website. Those code numbers can be replaced with the XXXX in code line content: " \XXXX" (please keep the slash /)

#rooms-search-form .check_availability_group:after {
  content: "YOUR TEXT HERE";
  color: #ff0000;
display: block;
}

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

<style>
label[for="ebanking"]>a:after {
  content: "text here";
  display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
  vertical-align: top;
}
</style>

<style>
label[for="card"]>a:after {
  content: "text here";
  display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
  vertical-align: top;
}
</style>

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

<h4 style="text-align:left"><a href="https://www.cloudbeds.com/" target="_blank"><h4><b>Back to website</b></h4></a>

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement("h1");
NewEl.innerHTML = "</br> Please note that the minimum length of stay is 2 days";
NewEl.className += "text-center";
NewEl.style.fontSize = "19px";
NewEl.appendAfter( document.querySelector(".message_container"));
</script>

.payment_method>.md-radio-inline::after {
 content: "";
 display: block;
 width: 174px;
 height: 58px;
 background-image: url(ADD URL HERE);
 background-size: cover;

.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;
}

.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;}

Add the  following code in Custom Meta Tags section

</style>
.rate-check-arrow + .rate-check-container {
width: 284px;
display: block;
}.rate-check-arrow-text {
width: 0px;
padding-right: 0px;
display: none;
}
.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;
}

Please replace the name in red with your desired name

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

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;}

• Add to "Custom footer" section and copy to all the languages needed
• This code doesn't require <style></style>

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

Add this code to your website within a <div> </div> element:

<iframe src="YOUR_MYBOOKINGS_URL" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>

Add this code to the footer of your web page:

<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>