Customize Mybookings - HTML and CSS Custom Meta Tags

Follow

Mybookings offers a number of more in-depth customization options for those who are either familiar with HTML/CSS or employ a web-designer.

Settings > Booking Engine > Customize mybookings

You can use the custom meta tags box in the "customize mybookings" section to add javascript, CSS and other features to the HEAD section of your mybookings site's HTML. Please do not insert normal/simple text there, or it can break the page.

Cloudbeds does not provide website design troubleshooting support, but we do offer some very easy copy and paste widgets that you can use.

If you'd like to learn more about HTML and CSS in general, here are a couple of great places to start:

W3schools HTML Tutorial

Codecademy HTML & CSS web design course

Customization Examples:

Below are some custom CSS examples. You will need to change values in the coding to modify what is displayed. Coloring can be changed by using an HTML hex code, link to an HTML color tool here:

http://www.w3schools.com/colors/colors_picker.asp

Whatever code you insert should be between <style> brackets like in the example below:

Example:

<style>

.show_promo_code a {color:#999;}

</style>

Please Note:

  • The examples provided below are for reference and may require some additional modification to work correctly.
  • Make sure to copy and paste the full lengths of code listed below.
  • For additional help with modifying coding, please contact your web-designer.
Change text styles (font, color, size)

Here you may find more codes to change font properties: https://www.w3schools.com/css/css_font.asp

Here you may find HEX color codes if you need to change text color (codes start with #): https://www.quackit.com/css/css_color_codes.cfm

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 hotel name font, color
/* Hotel Name Font */

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

'color' - changes the color of font for word 'Search';

'background' - changes the color of the button

/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
background: #da1176!important;
border-color: #2d7e7b;
} 
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
.available_rooms.col-md-9 div.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";
}
Change font in date picker (when selecting checkin and checkout)
/*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
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 mybookings page
.container1, .container2 {
    background-color: #fda2b4;
}
Change the header color
.page-header.navbar {
    background-color: #6bbeb6;
}
Change SEARCH button

'color' - changes the color of font for word 'Search';

'background' - changes the color of the button

/* Change Search Button */

.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
background: #da1176!important;
border-color: #2d7e7b;
} 
Change the background color of the promo code section
.rooms_book {
    background: #091b48;}
Change the color of BOOK NOW and SELECT ACCOMMODATIONS buttons

If you want to change 'BOOK NOW' button style and you allow guests to book individual room types (there is button next to room type 'SELECT ACCOMMODATION') - the code below will change both of these buttons

Color - changes the font color

Background - changes the button color

.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled, .green.btn.disabled:hover {
    color: #fff;
    background: #ac59b1;}
Change 'Rooms' button color
.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}
Change 'Choose a Room' and 'Checkout' Arrows Color
/*Change active section color*/
.page-breadcrumb li.active>span {
    background: #f13e64;
}

/*Change inactive section color*/
.page-breadcrumb li.active>span:after {
    border-left: 30px solid #f13e64;
}

/*Change small arrow in the middle color on CHOOSE A ROOM step*/
.page-breadcrumb li>span {
       background: #fbe3e3;
}

/*Change small arrow in the middle color on CHECKOUT step*/
.page-breadcrumb li>span:after {
       border-left: 30px solid #fbe3e3;
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;
}
Hiding/removing elements
Remove both child and adult column from the booking engine
/* 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 Availability Calendar
/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
Remove "Only # of rooms left" tag
.only_left
{display:none;}
Remove property address and contacts
/* Remove Address */ 
.map_info {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 map
/* 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 {
display: none;
}
Remove deposit policies
.cancellation_policy {
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>
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;
}
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 "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 '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>

Tip: You can change the text inside any button on Mybookings page  using the same code, but replacing '.green.btn.disabled' with the name of different classes.

Replace "Adults" with "Guests"
  • Add the code to 'Custom Meta Tags' field;
  • The phrase/word which replaces the original - will be displayed for all languages
.custom-adults.text-center {
  font-size: 0!important;
}
.custom-adults.text-center:after {
  content: "Guests";
  font-size: 12px;
}
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 Custome Meta Tags (Confirmation page only) section:

<style>
.book_child:after{
  content: " - 5 years old";
}
.book_child.kids_column:after {
    content: "";
}
</style>
PT text

Add this code to Custom Meta Tags section:

<style>
.custom-adults.text-center:after{
  content: " e crianças + 5 anos";
}
.custom-children.text-center:after{
  content: " - 5 anos";
}
.col-sm-3.col-xs-3.custom-adults p:after{
 content: "  e crianças + 5 anos";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
 content: "  - 5 anos";
}
</style>

Add this code to Custome Meta Tags (Confirmation page only) section:

<style>
.book_child:after{
  content: " - 5 anos";
}
.book_child.kids_column:after {
    content: "";
}
</style>
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 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" 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

.custom-select-rooms.text-center {
visibility:hidden;
}
.custom-select-rooms.text-center:after{
content: "Apartments";
visibility:visible;
margin-left: -35px;
}

Inside the table (above #of rooms selector)

.type_of_room {
visibility:hidden;
}
.type_of_room:after{
content: "Apartments";
visibility:visible;
margin-left: -35px;
}
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;
}
Resizing photos/elements
Increase the size of accommodation photos
.available_rooms .roomtype .first_container {padding-left: 0;}
.available_rooms .room_image {  top: 0;  padding: 0;}
.available_rooms .col-md-9 div.image_container {  width: 100%;  height: auto;  margin: 0;  padding-bottom: 70%;  position: relative;}
.image_container div, .image_container a{  position: absolute;}
.room_image img.bigger {  margin: 0;  position: absolute;  right: 0;  bottom: 0;}

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;
}
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;}
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) {document.querySelector('.show_avail_calendar a').click(); }, false); </script>
Rate Checker
Change Rate Checker button color to be the same as search button
<style>
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>

Please, check the examples on the screenshot below:

1 - before adding the code.

2 - after the code was applied. The rate checker button is the same as search button.

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 'Book Direct With Us' on Mybookings widget
.acessa_float_left.acessa_float_description {
display: none;
}
Rename the rate checker
.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;}
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;} 
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 clikcing 'Learn More'
<script>//wrap logo inside a hyperlinkdocument.addEventListener('DOMContentLoaded', function(event) {  document.querySelector(".rate-check-why .rate-check-content").innerText = "Text go here";}, false);</script>
Widget
Change 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;}
iframe
Full height iframe (to fit 100% of the content):

Add this code to your website:

<iframe src="https://hotels.cloudbeds.com/reservation/HvaCsE?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="yourFrame"></iframe>

 

This code should be added at the bottom of your website page:

<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"</script>
  • Don't forget to use <style> before all the customization code and to add </style> in the end.
  • Prefer to add the opening code in the very first line and the closing code in the very end of your customization.
  • You don't need to use multiple <style></style>.
Have more questions? Contact Support

Comments

Powered by Zendesk