Customize mybookings - HTML and CSS Custom Meta Tags – myfrontdesk

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

Change colors/backgrounds of elements, buttons

Change the color of the group code field.

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

Hiding/removing elements

Remove the Children Column

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

zpcq2cr49IH26cpNz4qrzW9gbUJjiinytKysJ2tix-hQlMbSZyzLRbvQlihc9zoRPrre1pNT2zZ-QY1UYJxZrl2cwXTh_TE2LOPtMBuMvvmNRucJL3eoIxYGL2ADlG9Yf4xEOJH- (814×340) - Google Chrome

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

iRCQZ2QwolnWfioHcEdb9rnaDfsknWoHRbuOKLhbJOcl1djBNGxyE4TRZ66kCU-Z4e3miNX6Bwi-DH8raVhi02N1RZcjRWZW_YYlNS7tHyMLfxTZ6ZtJtWcX8u5smiSEpsN-kOKX (560×83) - Google Chrome

Remove children column when the option of selecting rooms to the guests is enabled:

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

Slack | Saurabh Satralkar | Cloudbeds | 1 new item - Google Chrome

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

Remove children column when the option of selecting rooms to the guests is enabled for specific room type

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

Wpno4YoDTM6gbWFeVBnmupidbY6iikG5zsLtw1cO-EfgVcWEemUwRSis6Mwr2g7uqmzOGKR8B67K3IjpzUaCJNchCSF2v-zOq36w_oiawbJ5HyMvrC0HddrQNeeVg3wGq5bfdiKh (569×102) - Google Chrome

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

Remove "Adults" column

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 the “Price From” text

Insert the code under “Custom Meta Tags”:

.av-rates .price-from {
visibility: hidden !important;
display: none;
}

Remove “Standard/Online rate” and “Additional Person Pricing” from all of the room types.

/* Removes additional person pricings*/

.av-per-person-price {
visibility: hidden !important;
display: none;
}

Remove “Standard/Online rate” and “Additional Person Pricing” for a specific room type.

/* Removes additional person pricing for a single room type*/

[data-room-type-id="Room ID here"] .av-per-person-price {
visibility: hidden !important;
display: none;
}

Remove maximum occupancy field

/* Remove Max Occupancy Column */

.av-occupancy {
display: none !important;
}

Remove strikethrough rate after applying promo code

/* Remove strikethrough rate when promo code is applied */

.av-roomrate .av-rate-price .old-price {
display: none;
}

cpAFW3NoCyEenQ_LSbYHlfOcEp1SLRMHyGPyqs58_GaOrFwdAkCYka0dDbYHSJmDX5Qr7Z1hAfUDheP1qZaTgRCuvmdnn8jmCOTwU7o0JmLMRmDdXmljxuAIC0g0kT3uJDo7vsT0 (814×598) - Google Chrome

Remove the number of rooms left “Only x left” from all room types

/* Removing the “Only x left” from all room types */

.av-left-rooms {
visibility: hidden !important;
display: none;
}

Remove “Have a group code?” field

/* Remove "Have a group code?" */

.show_group_code {
display: none;
}

Remove "Minimum Stay" column

/* Code below will remove the "Minimum Stay" text from all of the room types */
.av-max-stay {
display: none !important;
}

Replacing the default text with custom text

Replace “Have a group code” with other text and color

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

Replace the “Price From” text to any desired text

Insert the code under “Custom Meta Tags”:

.price-from {
font-size: 0 !important;
}
.price-from:after {
content: "Price per night";
font-size: 12px;
}

Replace the text "Standard Rate" with any other text

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

Replace the text “Adults” to some other text

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

Replace the text “Children” to some other text

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

Replace the text “Room” to some other text

Insert the code under “Custom Meta Tags”:

/* Change the text "Room" to "Select" */

.av-room-options .no-rooms .type_of_room {
font-size: 0 !important;
}
.av-room-options .no-rooms .type_of_room:after {
content: "Insert your text";
text-align: center;
font-size: 10px;
}

Replace the text "Room" to "Pitch" through the whole booking process

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>

Checkout - [Demo] Mountain Resort & SPA - Google Chrome

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

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

Slack | Yelizaveta Yastrebova (Liza) | Cloudbeds - Google Chrome

Replace the text “Select Accommodation” to any desired text

/* Change the text "Select Accommodation" to any desired text */

.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}

.btn.green.btn-block.select-accommodation-btn:after {
  content: "Make a selection / Your desired text here";
  font-size: 12px;
}

Replace the “Beds” of the dorm room to any desired text.

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

Replace the ‘Check-in’ & ‘Check-out’ to some other text

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

Adding Message at the end of the total amount on Confirmation Page

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>

Confirmation - [Demo] Mountain Resort & SPA - Google Chrome

Reload Booking Engine when the booking is complete by clicking on the hotel logo on top

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>

Customizing the number of rooms left “Only x left”

/* Changing the background color and text color */
.av-left-rooms {
background-color: #3267B8;
text-color: white;
}

How to limit the number of Adults or Children to be selected from the drop-down menu

By default the system will show the maximum number of adults and children to be chosen in the column based on the maximum occupancy setup for that room type.

Example:

The Family Room has maximum occupancy 6 pax.
The Adults column will display 6 adults and the Children column will display 5 children (children must be accompanied by an adult).
This way guests can choose any number of adults and children in total of 6 (e.g guest can choose 2 adults and 4 children or 4 adults with 2 children, etc).

[Demo] Bali Wild Jungle Resort - ottawa, Canada - Best Price Guarantee

Some properties would want to limit the number of adults and children who can sleep in that room.

Add the codes below to the Custom Meta Tags:

Change the number in the parenthesis (n+5) and (n+4) based on the order of adults and children you want to hide

In this example, from total of 6 pax, there could only be maximum 4 adults and 2 children:

(n+5)= The fifth adult onwards will not be shown
(n+4)= The third child onwards will not be shown (in the drop-down, number of children start from 0)

On the following article, you can learn Where to find myfrontdesk room type ID

[data-room-type-id="Room type ID"] .av-adults ul li:nth-child(n+5), [data-room-type-id="Room type ID"] .av-children ul li:nth-child(n+4) {
display: none;
}

Automatic field selection when loading the Booking Engine

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)

Select 2 Adults automatically (all room types)

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.

DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

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>

Select 2 adults automatically (specific room type)

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>

Select a rate plan automatically (all room types)

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>

Slack | Threads | Cloudbeds | 37 new items

Select the rate plan automatically (specific room type)

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 on load ----------------------- */
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {  
packagerate = $('[name="check_roomrate-XXXX"]');
$(packagerate).trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>

Select the room automatically and keep the room selected even after changing the dates

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

Change colors/backgrounds of elements, buttons

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.

Change 'Rooms' button color

.roomtype .bootstrap-select.rooms_select .btn {
 background-color: #727B5F!important;
}

Hiding/removing elements

Remove the Max people column

.available_rooms .roomtype .custom-max-guests, .choose_room .roomtype .custom-max-guests {
display: none;
visibility: hidden !important;
}

Remove the "Price for X Nights" column

.price_for_nights {
display: none !important;
}div.mobile.visible-xs-block.visible-sm-block > table > tbody > tr:nth-child(2) {
display: none !important;
}

[Demo] White Elephant - Manchester, United Kingdom - Best Price Guarantee - Google Chrome

Remove both child and adult column

/* 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 the children option

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

/* Remove "Price From" column */

.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}

Remove "Only # of rooms left" tag

.only_left
{display:none;}

Remove 'Online rate' and 'Additional guest pricing' dropdown

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

Remove the strikethrough base rate price (for the packages)

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

Remove information about promotional packages

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

Slack | kb_requests | Cloudbeds | 39 new items

Hide selector for number of children for specific room types

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

Hide "Included Occupancy" field (in room type details pop-up)

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

Hide "Online rate" field (in room type description)

.room_more {
display: none;
}

Replacing the default text with custom text

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'

Replace "Adults" with "Guests" under 'Choose a room' section

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

Replace the word "Adults" under 'Select Accommodations' section

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>

Slack | cs_internal_coaches | Cloudbeds | 65 new items

Replace "Adults" and "Children" with "Adult and children +5 years old"/"Children - 5 years"

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>

Replace text "Move mouse over the price..." with another text

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

Replace "Rooms" ("Beds") with "Apartments" (or anything else)

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

Replace "Room type" with "Apartment type" (or anything else)

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

Replace the ‘Price of 1 Night(s)’ to any other text

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

Replace the ‘Check-in’ & ‘Check-out’ to some other text

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

Resizing photos/elements

Increase the size of accommodation photos

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

Increase 'Guests' selection button width

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

How to make hotel name clickable on mybookings?

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
}

How to make the Hotel Logo clickable

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>

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>

Change text styles (font, color, size)

Change all fonts

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

Change color of “Your Reservation” text

Add the following code in the Custom Meta Tag section:

<style>
div.col-md-3.reserve_info > h2 {
color: #FF000F;
}
</style>

Change the color of the blue line under “Your Reservation”

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

Change hotel name font, color

/* Hotel Name Font */

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

Change font for 'SEARCH' button

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

Slack | Saurabh Satralkar | Cloudbeds - Google Chrome

Change font for buttons 'BOOK NOW' and 'SELECT ACCOMMODATIONS'

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

Change size/style of text appearing when there is no availability

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

Change font style of property information

/*Header*/
.caption {
font-family: "Georgia";
}

/*Info inside section*/
.map_info {
font-family: "Courier New";
}

Property Information: change the font size and text color

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

<style>
div.portlet-body h6:nth-child(n) {
font-size: 18px;
color: #0B468C;
}
</style>

Change font in date picker (when selecting check-in and check-out)

/*change font (Calendar title)*/


/*change font (Calendar days/dates)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}

Change selected room price font and color

.selected_rooms_price {
font-family: 'Roboto',sans-serif;
font-style: italic;
    font-size: 30px;
    color: #da26b2;
    margin-top: 5px;
    text-align: center;
}

Change colors/backgrounds of elements, buttons

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.

Add image to the background

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

Change the background color of the promo code section

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

.rooms_book {
    background: #091b48;}

Change the color of the promo code search bar in Mybookings

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

Change background of available dates in datepicker

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

Hiding/removing elements

Remove currency switch

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

.last.dropdown {display:
none!important;
}

Remove language and currency switches

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

#lang_currency_switchers { display:
none;

Remove Availability Calendar

/* Remove Availability Calendar */

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

Remove property address and contacts

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

Remove map

You can also check this article for more instructions on how to Replace mybookings map with Google Maps.

/* Remove Map */ 
#map_canvas {display:none;}

Remove Check-in/Check-out policies

.checkin-checkout-terms-block{
display: none;
}

Remove Cancellation Policies

.checkin-checkout-terms-block, .property_info h5, .cancellation_policy {
display: none;
}

Remove the "Property Information" section

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

.portlet.property_info>.portlet-title {
   display: none;
}.portlet.property_info>.portlet-body {
   display: none;
}

Remove "Have a promo code?" section

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

.show_promo_code{
display: none;
}

Hide certain contact detail (address, phone, email)

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>

Remove extra person charge from "Your Reservation" section

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

Remove “Child” & “Extra Child” row from the reservation summary

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

<style>
.row.total_child, .nb_kids {
 display: none;
}
</style>

Remove the “Extra Adult” row from the reservation summary

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

<style>
.row.total_adults {
display: none;
}
</style>

Remove 'Children' column on the reservation confirmation page

Insert the following code to "Custom Meta Tags (Confirmation Page Only)" field:

<style>
.kids_column.book_child, .book_child {
display: none;
}
</style>

Hide 'Restrictions Apply' option

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

Replacing the default text with custom text

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'

Replace the text 'Search' on the search button

Add the code to 'Custom Meta Tags' field;
The phrase/word which replaces the original - will be displayed for all languages

<style>
.check_availability_group .btn {
font-size: 0;
}
.check_availability_group .btn:after {
content: "Your text here";
font-size: 15px;
}
</style>

Replace “Your Reservation” text with any other text

Add the code to 'Custom Meta Tags' field;
The phrase/word which replaces the original - will be displayed for all languages

<style>
div.col-md-3.reserve_info > h2 {
font-size: 0;
}
div.col-md-3.reserve_info > h2:after {
content: "Your text here";
font-size: 27px;
}
</style>

Change the text 'Checkout' to any other text throughout the Booking process (Main page and Confirmation 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>

Replace the texts “Adults” “Children” “Extra Adults” “Extra Children” with any other text in the reservation summary

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"));

Change the text 'Choose a Room' to any other text on Confirmation Page

Add the code to 'Custom Footer' field

<script type="text/javascript">
// Change the Choose a room text to any other text on Confirmation Page
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = "Enter your text here";
</script>

Replace the text “Adults” with “Guests” on Confirmation Page under the Accommodations table

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>

Replace "Availability" text (above the search button) with "View Availability Calendar"

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>

Change "Select Accommodations" text inside the button

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

Change 'BOOK NOW' text inside button

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

Replace "HAVE A PROMO CODE?" with another 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;
}

Replace the text "CHOOSE A ROOM" with custom text

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>

Replace the text message under Payment Methods

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

Checkout - DEMO - Karina's Hostel - Google Chrome

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

Replacing the default icon with custom icons

Replace the icons in front of the amenities

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>

Adding text/image/hyperlink/buttons

Add custom text under 'Search' button

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 custom text under 'BOOK NOW’ button (policies, rules etc)

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 custom text under Bank Transfer Payment Method

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 custom text under Credit Card Method

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 Debit Card payment method

Add this code in 'Custom footer for your hotel booking page' to add Debit next to the Credit card:

<script type="text/javascript">
document.querySelector('#reservationDetailsForm > div.payment_method > div.md-radio-inline > div:nth-child(2) > label > a').innerHTML = 'Debit/Credit Card';
</script>

Add text with link "Get your promo code here" under 'Have a promo code?'

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 Custom Text Header or Footer With Link Back to Website

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>

Other examples:

/*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/'>&#8592; 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/'>&#8592; Back to Website</a></h4> </div>

Add text above calendar/available rooms list

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'

Add Visa/Mastercard Logo to the Payment Page

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;

How to add Visa/MC/AMEX/Discover/Diner credit card logo to MB payment page.

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

Add Scroll Up button

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>

Resizing photos/elements

Increase the size of add-ons photos

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

Customize mybookings - HTML and CSS Custom Meta Tags – myfrontdesk - Google Chrome

Date Picker and Availability Calendar

Change availability calendar month background and border

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

Change colors in date picker (selector of checkin/checkout)

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

Сhange the color of restrictions triangle on the availability calendar

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

Remove the restrictions triangle on the availability calendar

.pink { background: none !important; }

Make the strikethrough for unavailable dates more visible on the availability calendar

/* Following code will apply a strike on the entire table cell for umavailable dates */
.calendar_table tbody>tr>td.unavailable:before {
  content: " ";
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #111;
  width: 100%;
}

Display availability calendar once user opens mybookings page

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>

Rate Checker

The Rate Checker codes below work for both Gallery and List Designs

Open Rate Checker instantly after loading mybookings

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

Change Rate Checker button color to be the same as search button

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

Add your own arrow to Rate checker

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

Hide the rate checker

<style>
.rate-check {display:none !important;}
</style>

Hide the “Powered by Cloudbeds” within the Rate Checker

<style>
div.rate-check-content.channel-container > img {
display: none;
}
</style>

Rename the rate checker

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

Rename "Direct Rate"

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

Hide the channels in Rate Checker

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

Replace the text 'Learn more' with another text on Rate Checker

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

Change the text in rate checker when clicking 'Learn More'

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>

Replacing the text "Prices above may or may not include taxes" with custom text

.prices-without-taxes {font-size: 0;}
.prices-without-taxes:after {font-size: 14px;  content: 'YOUR TEXT HERE';}

Facebook

Replace the default text (description) when adding mybookings link to Facebook

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

Google Search Result

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

Widget

Change the look of floating widget

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

Customize the color of the calendar dates and the button of horizontal widget

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>

Change the text 'Search' on the widget button to any other text

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>

iframe

Please, check this article to learn more about using an iframe with mybookings.

Full height iframe (to fit 100% of the content):

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>

Customize mybookings - HTML and CSS Custom Meta Tags

Important:

Where to begin

Customization codes for Gallery Design

‘Check-in’ to something else:

‘Check-out’ to something else:

Customization codes for List Design

EN text

PT text

For table header

Inside the table (above #of rooms/BEDS selector)

‘Check-in’ to something else

‘Check-out’ to something else

Codes that work on both List design & Gallery Design

Important!

-add background + keep header line

-add background + remove header line

Change “Bank Transfer” to any other text:

Change “Credit Card” to any other text

Change “PayPal” to any other text

Comments

Related articles

Using an iframe with mybookings

Mybookings Website Widgets

Mybookings Booking Engine Overview and FAQ

Calendar Overview

How to vote for or submit your idea in myfrontdesk?

Customize mybookings - HTML and CSS Custom Meta Tags

Important:

Where to begin

Customization codes for Gallery Design

‘Check-in’ to something else:

‘Check-out’ to something else:

Customization codes for List Design

EN text

PT text

For table header

Inside the table (above #of rooms/BEDS selector)

‘Check-in’ to something else

‘Check-out’ to something else

Codes that work on both List design & Gallery Design

Important!

-add background + keep header line

-add background + remove header line

Change “Bank Transfer” to any other text:

Change “Credit Card” to any other text

Change “PayPal” to any other text

Comments

Related articles Using an iframe with mybookings Mybookings Website Widgets Mybookings Booking Engine Overview and FAQ Calendar Overview How to vote for or submit your idea in myfrontdesk?

Related articles

Using an iframe with mybookings

Mybookings Website Widgets

Mybookings Booking Engine Overview and FAQ

Calendar Overview

How to vote for or submit your idea in myfrontdesk?