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
If you're planning to add customized backgrounds/images, check out further information about it on the FAQ section of this article: Mybookings Booking Engine Overview and FAQ
This feature requires the Cloudbeds Plus plan or higher/equivalent.
Important:
- This article is provided as an additional informational resource for those already familiar with HTML and CSS. The code may become outdated and require additional work on it. Our Support Team will be glad to assist you with using the codes ONLY provided in this article.
- The examples provided below are for reference and may require some additional modification to work correctly.
- Cloudbeds does not offer assistance with hotel website webdesign/development, or customization not added to this article
- The codes provided below work on desktop version of mybookings, and MAY NOT WORK ON MOBILE VERSION
Where to begin
1. In myfrontdesk go to manage > Customize mybookings
2. Enter the code to the mybookings design type which you use: gallery or list design.
3. 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 for Gallery Design
/* Changing the color of the input field*/
#group_code_input {
background-color: Any color code. Starts with # ;
}
![[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/003/159/072/original/f3b2d385-a4cf-4fb2-915e-435d4c4823d9.png)
Insert the code under “Custom Meta Tags”:
th.children.custom-children {
visibility: hidden !important;
display: none;
}
td.children {
visibility: hidden !important;
display: none;
}
.av-children {
visibility: hidden !important;
display: none;
}
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.
[data-room-type-id="Room ID here"] .av-children {
visibility: hidden !important;
display: none;
}

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

/* Remove the Children column from all of the room types */
th.children.custom-children {
visibility: hidden;
display: none !important;
}
.btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden !important;
display: none !important;
}
This will work when you allow guest to book a particular room in Mybookings Settings:

/* Hiding Children Column when the option is enabled for guests to select the rooms for specific room type. Replace “00000” with the Room ID*/
[data-room-type-id="00000"] th.children.custom-children {
visibility: hidden;
display: none !important;
}
[data-room-type-id="00000"] .btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden;
display: none !important;
}
For example, we have hidden children column only for Standard room now:
Insert the code under “Custom Meta Tags”:
th.adults.custom-adults {
visibility: hidden !important;
display: none;
}td.adults {
visibility: hidden !important;
display: none;
}.av-adults {
visibility: hidden !important;
display: none;
}
/* Remove strikethrough rate when promo code is applied */
.av-roomrate .av-rate-price .old-price {
display: none;
}

/* Remove "Have a group code?" */
.show_group_code {
display: none;
}
![[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/003/159/036/original/35d786b8-7584-4cc2-8db5-6fb8ea2ef1cf.png)
.show_group_code
{
font-size: 0;
} .show_group_code a:after {
content:"HAVE A GROUP DISCOUNT CODE?";
font-size: 13px;
color: red;
}
![[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/003/159/160/original/df09e962-557a-4c7a-83f0-1c68278254b3.png)
Insert the code under “Custom Meta Tags”:
/* Change the text "Adults" to "Guests" */
.av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-adults .type_of_room:after {
content: "Insert your text here";
text-align: center;
font-size: 10px;
}
/* Change the text "Adults" to "Guests" when option for the guests to select the particular room is enabled */
th.adults.custom-adults {
font-size: 0 !important;
}
th.adults.custom-adults:after {
content: "Insert your text here";
font-size: 14px;
text-align: center;
}
/* --------------------------------------------------- */
Insert the code under “Custom Meta Tags”:
/* Change the text "Children" to "Children over 3" */
.av-room-options .av-children .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-children .type_of_room:after {
content: "Insert your text";
text-align: center;
font-size: 10px;
}
/* Change the text "Children" to "Children over 3" when option is changed to allow guests to select room */
th.children.custom-children {
font-size: 0 !important;
}
th.children.custom-children:after {
content: "Insert your text";
text-align: center;
font-size: 14px;
}
1. Add the following code in Custom footer for your hotel booking page in order to see "Pitch" on the top line:
<script type="text/javascript">
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = 'CHOOSE A PITCH';
</script>
2. Add the following code in the Custom Meta Tags to change from "Room" to "Pitch" in the right menu
/* The following code will change the text "Room Selection" to "Pitch Selection:" */
div.checkout div div.col-md-3.reserve_info p:nth-child(3) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(3):after {
content: "Pitch Selection:";
font-size: 13px;
}
/* The following code will change the text "Room Nights" to "Pitch Nights:" */
div.checkout div div.col-md-3.reserve_info p:nth-child(14) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(14):after {
content: "Pitch Nights:";
font-size: 13px;
}
/* The following code will change the text "Room Total" to "Pitch Total" */
div.reserve_total div:nth-child(1) div:nth-child(1) p {
font-size: 0;
}
div.reserve_total div:nth-child(1) div:nth-child(1) p:after {
content: "Pitch Total:";
font-size: 13px;
}
![Checkout - [Demo] Mountain Resort & SPA - Google Chrome](https://media.screensteps.com/image_assets/assets/003/521/738/original/651836ef-c3ec-4eb1-8cbb-80e26ae994b6.png)
3. Add the following code in Custom footer to change from "Accommodations" to Pitch(es)
<script type="text/javascript">
document.querySelector("div.reserve_success div div.col-md-9 div div.table-responsive.visible-lg-block.visible-md-block h4").innerHTML = 'Pitch(es)';
</script>
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
/* The following code will change the text "Room Type" to "Pitch Type" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1):after {
content: "Pitch type";
font-size: 14px;
}
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
/* The following code will change the text "Room Name" to "Pitch Name" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2):after {
content: "Pitch Name";
font-size: 14px;
}
- 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.
/* Changing the "Beds" of dorm room to any desired text */
[data-room-type-id="00000"] .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="00000"] .type_of_room:after {
content: "Any desired text";
text-align: center;
font-size: 10px;
}
‘Check-in’ to something else:
Insert the code under “Custom Meta Tags”:
- Replace 'Arrival Date' with your custom text
#rooms-search-form > div:nth-child(3) > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(3) > label::after {
content: 'Arrival Date';
font-size: 16px;
}
‘Check-out’ to something else:
Insert the code under “Custom Meta Tags”:
- Replace 'Departure Date' with your custom text
#rooms-search-form > div.form-group.checkout-date > label {
font-size: 0;
}
#rooms-search-form > div.form-group.checkout-date > label:after {
content: 'Departure Date';
font-size: 16px;
}

Add under “Custom footer for your hotel booking page”:
<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 message goes here......... As long as you need.... </br>';
NewEl.className += "text-center";
NewEl.style.fontSize = '15px';
NewEl.appendAfter( document.querySelector('div.col-md-3.reserve_info'));
</script>
Add the following code in "Custom Meta Tag":
img.logo{
cursor: pointer;
}
Add the following code in “Custom footer for your hotel booking page”:
<script>
document.getElementsByClassName('logo')[0].addEventListener('click', function() {window.location.href = 'http://www.website-name.com';});
</script>
In order to apply the codes from this section, as your first step, save the following scripts in the Custom Header section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
If you wish to apply multiple codes at once (e.g Select 2 Adults automatically & Select a rate plan automatically), you would need to use different intervals for each code (one code with 1000 ms* and the other with 2000 ms, etc). See where the interval is placed below.
*ms =millisecond (this is how fast the code being run)

When loading the booking engine, 2 adults/guests will be automatically selected
The following code does not work if you allow guests to book specific accommodations on mybookings.

Save the following code in the Custom Footer section
<script>
/* ----------------------- Select 2 Adults on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
},3000);
});
});
</script>
When loading the booking engine, 2 adults/guests will be automatically selected for a specific room type
The following code does not work if you allow guests to book specific accommodations on mybookings.

Save the following code in the Custom Footer section and replace the XXXX with the desired myfrontdesk room type ID
Check out this article to learn where to find the myfrontdesk room type ID
<script>
/* ----------------------- Select 2 Adults on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id=”XXXX”] div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
});
</script>
Save the following code in the Custom Footer Section and replace the number 2 with any other number of the sequence of other rate plans
Example: if the desired rate plan to be loaded is in the sequence number 3 from the sandard rate, replace the number 2 with 3.
The sequence means the numbering of the package on your booking engine page, as shown below
<script>
/* ----------------------- Select the rate plan on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() { $('div.av_roomtype>div.av-info>div.av-rates>div.av-roomrate-wrapper>div:nth-child(2)>div.md-radio>input[type=radio]').trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>

Save the following code in the Custom Footer section
- Replace XXXX with the myfrontdesk room type ID
- Replace the number 2 with any other number of the sequence of other rate plans
Check out this article to learn where to find the myfrontdesk room type ID
Example, if the desired rate plan to be loaded is in the sequence number 3 from the standard rate, replace the number 2 with 3. The sequence means the numbering of the package on the booking engine page as shown below.
<script>
/* ----------------------- Select the rate plan for specific roomtype on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() { $('[data-room-type-ID="XXXX"] div.av_roomtype>div.av-info>div.av-rates>div.av-roomrate-wrapper>div:nth-child(2)>div.md-radio>input[type=radio]').trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>

Save the following code in the Custom Footer section and replace the XXXX with the myfrontdesk room type ID.
Check out this article to learn where to find myfrontdesk room type ID
If the time format of your myfrontdesk account is Gregorian Format (DD/MM/YYYY), apply the following code keep the code
<script>
/* ----------------------- Select the rooms when date is changed ----------------------- */
$(window).on('hashchange', function(e) {
//Get Check-in date
var CheckInDate = $('#start_date_not_mobile').val();
CheckInDate = CheckInDate.split("/"); // Adding for change
CheckInDate = CheckInDate[1] + "/" + CheckInDate[0] + "/" + CheckInDate[2]; //Adding for change
var DateIn = new Date(CheckInDate);
//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
CheckOutDate = CheckOutDate.split("/"); // Adding for change
CheckOutDate = CheckOutDate[1] + "/" + CheckOutDate[0] + "/" + CheckOutDate[2]; //Adding for change
var DateOut = new Date(CheckOutDate);
//Get difference between the time of those dates
var GetTime = DateOut.getTime() - DateIn.getTime();
//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);
//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1)
{
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
}
}).trigger('hashchange'); // End of window hash.
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>
If the time format of your myfrontdesk account is USA (MM/DD/YYYY), apply the following code:
<script>
/* ----------------------- Select the rooms when date is changed ----------------------- */
$(window).on('hashchange', function(e) {
//Get Check-in date
var CheckInDate = $('#start_date_not_mobile').val();
var DateIn = new Date(CheckInDate);
//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
var DateOut = new Date(CheckOutDate);
//Get difference between the time of those dates
var GetTime = DateOut.getTime() - DateIn.getTime();
//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);
//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1)
{
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
}
}).trigger('hashchange'); // End of window hash.
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>
Customization codes for List Design
If you are previously using the Gallery Design, make sure to disable the Gallery Design in order to use the List Design.
1. Click 'Manage' (gear icon)
2. Go to 'Mybookings Settings'
3. Untick the box 'Use Gallery Design'
4. Save
For customized backgrounds/images, check out further information on the FAQ section of this article: Mybookings Booking Engine Overview and FAQ
There is an automated customization function which will help you to easily change the following:
- Background Color
- Header Color
- Navigation Arrows
- Search Button
- General Button Color
Check How to Use Color Pickers for Mybookings for more details.
.roomtype .bootstrap-select.rooms_select .btn {
background-color: #727B5F!important;
}

.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}

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


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 the code to 'Custom Meta Tags' field;
- The phrase/word which replaces the original - will be displayed for all languages
.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;
}

- Add the code to 'Custom Meta Tags' field;
- The phrase/word which replaces the original - will be displayed for all languages
- It applies if you have Customized Individual Rooms
<style>
.adults.custom-adults {
font-size: 0!important;
}
.adults.custom-adults:after {
content: "ANY TEXT";
font-size: 12px;
}
</style>

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 Custom 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 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: "Apartments";
font-size: 12px;
line-height: 1;
}
Inside the table (above #of rooms/BEDS selector)
This word will appear instead of both beds (dorms) / rooms (private room types)
.type_of_room {
visibility:hidden;
}
.type_of_room:after{
content: "Apartments";
visibility:visible;
}
.custom-select-rooms .type_of_room {
margin-left: -25px;
}

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

Save the code below in Custom Meta Tags section
div.price_for_nights.text-center > span {
font-size: 0;
}
div.price_for_nights.text-center > span::after {
content: "Price for X Days";
font-size: 12px;
}
div.mobile.visible-xs-block.visible-sm-block.rm-type-dorm > table > tbody > tr:nth-child(2) > td:nth-child(1) {
font-size: 0;
}
div.mobile.visible-xs-block.visible-sm-block.rm-type-dorm > table > tbody > tr:nth-child(2) > td:nth-child(1):after {
content: "Price for X Days";
font-size: 12px;
}


‘Check-in’ to something else
#rooms-search-form > div:nth-child(3) > div > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(3) > div > label:after {
content: "Get today";
font-size: 14px;
}
‘Check-out’ to something else
#rooms-search-form > div:nth-child(4) > div > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(4) > div > label:after {
content: "Return Before";
font-size: 14px;
}


Please put this code to the 'Custom meta tags' section in 'Mybookings Customization' page and copy the code for all the languages:
.available_rooms .roomtype .first_container {padding-left: 0;}
.available_rooms .roomtype .room_image { top: 0; padding: 0;}
.available_rooms .roomtype div.image_container { width: 100%; height: auto; margin: 0; padding-bottom: 70%; position: relative;}
.roomtype .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;
}

Codes that work on both List design & Gallery Design
In case you want the guests to click on the hotel name and be redirected, for example, back to the website, please, apply the following codes:
Step 1: Add this to footer section and replace google url with your url:
<script type="text/javascript">
document.getElementsByClassName('hotel_name margin-left-160')[0].addEventListener('click', function(){ window.open('https://www.google.com', '_blank') });
</script>
Step 2: to add this to meta tags section:
body > div.page-header.page-header-wrap.navbar > div > h1{
cursor: pointer
}
1. Add the following code in the Custom Meta Tag section. This will change the mouse cursor to hand when you hover over the logo
.logo {
cursor: pointer;
}
2. Add the following code in the Custom Footer of the hotels page:
Replace https://www.google.com to any other link that you want to redirect your guests. This code will open the website in a NEW browser window
<script type="text/javascript">
document.getElementsByClassName('logo')
[0].addEventListener('click', function(){
window.open('https://www.google.com',
'_blank') });
</script>
![[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/003/521/744/original/8fd35837-c695-4ee2-a799-7718b109f46a.png)
If you want to redirect the guests to the personal website/main website of the property after clicking on the logo, please use the following code.
Add the code in the Custom Footer of the hotel booking page:
Replace https://www.google.com to any other link that you want to redirect your guests. This code will open the website in the SAME browser window
<script>
document.getElementsByClassName('logo')
[0].addEventListener('click', function()
{window.location.href =
'https://www.google.com';});
</script>
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

Add the following code in the Custom Meta Tag section:
<style>
div.col-md-3.reserve_info > h2 {
color: #FF000F;
}
</style>


<style>
.bold_blue { background: red; }
</style>


/* Hotel Name Font */
.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}

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

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

For customized backgrounds/images, check out further information on the FAQ section of this article: Mybookings Booking Engine Overview and FAQ
There is an automated customization function which will help you to easily change the following:
- Background Color
- Header Color
- Navigation Arrows
- Search Button
- General Button Color
Check How to Use Color Pickers for Mybookings for more details.
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 */
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 #)
#promo_code_input {
background-color: #efc0ff;
}

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

You can use the following code to remove the the currency button
.last.dropdown {display:
none!important;
}

You can use the following code to remove the language and currency switches:
#lang_currency_switchers { display:
none;

/* Remove Availability Calendar */
.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}

/* Remove Address */
.map_info {display:none;}

You can also check this article for more instructions on how to Replace mybookings map with Google Maps.
/* 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:
.portlet.property_info>.portlet-title {
display: none;
}.portlet.property_info>.portlet-body {
display: none;
}

Insert the following meta code to "Custom Meta Tags" field:
.show_promo_code{
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>
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
Recommended for properties that only have dorm beds and no private rooms
.reserve_total .row.total_adults, .reserve_total .row.total_child {
display: none;
}

Insert the following code to "Custom Meta Tags" field:
<style>
.row.total_child, .nb_kids {
display: none;
}
</style>


Insert the following code to "Custom Meta Tags" field:
<style>
.row.total_adults {
display: none;
}
</style>


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


In this section you can 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:
- Similarly 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 the code to 'Custom Footer' field
<script type="text/javascript">
// Change the Checkout text to any other text
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.second > span > b").innerHTML = 'Enter your text here';
</script>
<script type="text/javascript">
// Change the Checkout text to any other text on Confirmation Page
document.querySelector("#wizard > ul > li:nth-child(2) > span > b").innerHTML = 'Enter your text here';
</script>
Add the code to 'Custom Footer' field
<script type="text/javascript">
function ChangeDefaultTextReservationSummary() {
if (window.jQuery) {
setInterval(function() {
// Checkout page
$(".col-md-3.reserve_info").each(function() {
$(this).html($(this).html().replace("Adults", "Guests"));
$(this).html($(this).html().replace("Children", "Kids"));
$(this).html($(this).html().replace("Extra Adults", "Extra Guests"));
$(this).html($(this).html().replace("Extra Child(ren)", "Extra Kids"));
});
}, 500);
} else {
setTimeout(function() { ChangeDefaultTextReservationSummary() }, 50);
}
}
ChangeDefaultTextReservationSummary();
</script>


If you do not want to change one of the text or leave it as it is, just comment out the code. For example, to leave the "Children" text as it is and not changing it to other text, you must comment out by putting // (two forward slashes) in front of the code line:
// $(this).html($(this).html().replace("Children", "Kids"));
Add the code to Custom Meta Tags (Confirmation Page Only)
<style>
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4) {
font-size: 0;
}
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4):after {
content: "Guest(s)";
font-size: 14px;
}
</style>
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>

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";
}
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 below to 'Custom footer for your hotel booking page' section.
The phrase/word which replaces the original - will be displayed for all languages.
<script type="text/javascript">
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.active.first > span > b").innerHTML = 'INSERT TEXT';
</script>

Change “Bank Transfer” to any other text:
Add the following code in Custom Meta Tags section
label[for=ebanking] > a {
font-size: 0;
}
label[for=ebanking] > a::after {
content: 'Cash on Arrival';
font-size: 14px;
}


Change “Credit Card” to any other text
label[for=card] > a {
font-size: 0;
}
label[for=card] > a::after {
content: 'Credit/Debit card';
font-size: 14px;
}


Change “PayPal” to any other text
label[for=rPayPal] > a {
font-size: 0;
}
label[for=rPayPal] > a::after {
content: 'Pay with Credit/Debit card via PayPal';
font-size: 14px;
}
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 /)
<style>
.amenities_tab li::before, ul.amenities li::before{
content: " \XXXX ";
color: #3267B8;
}
</style>


- 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 'Meta Tags section'
- Please note that the text added will be the same on all mybookings languages
<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>

- Add this code 'Meta Tags section'
- Please note that the text added will be the same on all mybookings languages
<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>

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>

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("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>
- 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.
Please replace the 'ADD URL HERE' with a valid image link, for example from google images
.payment_method>.md-radio-inline::after {
content: "";
display: block;
width: 174px;
height: 58px;
background-image: url(ADD URL HERE);
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;
}

Save the following code in Custom Meta Tags section
<div>
<button onclick="topFunction()" id="myBtn" title="Scroll up"> Scroll Up </button>
</div>
<style>
html {
scroll-behavior: smooth;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 999999; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #26A69C; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 10px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
box-shadow: 0.5em 0.5em 0.5em rgb(11, 70, 140, 0.5);
}
#myBtn:hover {
background-color: #12234E; /* Add a background color on hover */
}
</style>
<script type="text/javascript">
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
@media screen and (min-width: 992px) {
.about .col-md-4 {
min-width: auto;
width: 40%;
}
.about .col-md-8 {
width: 60%;
}
.about .img {
width: 100%;
height: auto;
padding-top: 50%;
}
.room_services .img div {
top: 0;
position: absolute;
}


.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) {
setTimeout(function() {
document.querySelector('.show_avail_calendar a').click();
}, 1000);
}, false);
</script>

The Rate Checker codes below work for both Gallery and List Designs
</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>

<style>
.rate-check {display:none !important;}
</style>
.acessa_float_left.acessa_float_description {
display: none;
}
<style>
div.rate-check-content.channel-container > img {
display: none;
}
</style>
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:
#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;}


- Add to "Custom footer" section and copy to all the languages needed
- This code doesn't require <style></style>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelector(".rate-check-why .rate-check-content").innerText = "test";
}, 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" />
You can prevent the Google search results from displaying a direct link to mybookings with the code below.
- Add the following code in the Custom header section:
<script>
$(document).ready(function () {
$('head').append('<meta name="googlebot" content="noindex" />');
$('head').append('<meta name="robots" content="noindex" />');
});
</script
- Add the following two lines of code in the Custom Meta Tags Section:
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
Note: It may take a day or two to show the results on Google Search Engine. Alternatively, the procedure of removing mybookings link from Google search can be found here
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;}
This code should be copied and pasted to your website page! If the widget is pasted in an iframe, the following styling should be saved right after the widget script. Do not add it to 'Mybookings Customization' section:
<style>
/* Background color of the “GO” button */
.widgetHotelsForm .horizontal-widget a {
background: #007d8a!important;
border-color: #007d8a!important;
top: 5px;
}
/* Background color of the selected date */
.CloudBedsDatePicker.pika-single .is-selected .pika-button {
background: #007D8A !important;
}
/* Background color of today’s date when we hover on it */
.CloudBedsDatePicker.pika-single .is-today .pika-button:hover {
background: #007D8A !important;
font-weight: bold;
}
/* Background color of the dates that are hovered around */
.CloudBedsDatePicker .pika-button:hover {
background: #888;
}
</style>
This code should be copied and pasted to your website page! Do not add it to 'Mybookings Customization' section:
<script>
document.querySelector("body > div.CloudBedsWidget.ver- > div > div > a").innerHTML = 'Search';
</script>
Please, check this article to learn more about using an iframe with mybookings.
Please, pay attention that the part of the code which contains a link to your mybookings page needs to be updated every time you copy a code from this article.
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>