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.
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 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;
}
Add picture to the background

To add a background image to the main area of the booking engine use this code:

/* Add Background Image */ 
.add_white {background: transparent;}
.container1{background-color: transparent;}

/* Change URL here */
.container2 {background: url("http://background.url/file.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }
.chooser, .property center {opacity: 1}

To show the background image on the full page use this code instead:

/* Background to the full page */ 
.page-boxed {
background: url("http://background.url/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 availability button

'color' will change the color of font for word 'Search';'background' will change the color of the button

/* Change Availability Button */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning.active, .btn-warning:active {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
background: #ED1C24;
}

/* Change Availability Button color when clicking on it */
.btn-warning:active:hover {
background: blue;
}
"Availability" text above the search button needs to say ‘View Availability Calendar’

You will need add to code to the “Custom footer for your hotel booking page” section on Mybookings Customization page:

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

You will need add to code to the “Custom footer for your hotel booking page” section on Mybookings Customization page:

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

Add custom text under 'BOOK NOW’ button (policies, rules etc)

You will need add to code to the “Custom footer for your hotel booking page” section on Mybookings Customization 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 CUSTOM TEXT';
NewEl.className += "text-right";
NewEl.style.fontSize = '12px';
NewEl.appendAfter( document.querySelector('.book_now'));
</script>
Change the top line (Header):
/* Change Header */
.page-header.navbar {
background-color: #000000;
}
Hide property name
/* Hide Property Name */
h1 {   
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
Remove "Only # of rooms left" tag
.only_left
{display:none;}
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 the color of the promo code section
/* Promo Code Color */
.show_promo_code a {color:#999;} 

/* Promo Code Hover Color */
.show_promo_code a:hover {color:#777;}
Change The Book Now Button
/* Change the Book Now Button */
.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled, .green.btn.disabled:hover {
color: #fff;
background: #ED1C24;
}
Remove the sad face icon

The sad face is displayed when there is no availability for the selected date on the calendar

.smile {display:none;}
Remove the address and/or map section:
/* Remove Address */ 
.map_info {display:none;} 

/* Remove Map */
#map_canvas {display:none;}  
Change Booking Steps Line
/* Booking Steps - Active Step Color */
.page-breadcrumb li.active a {
background: #12234E;
}

/* Arrow Color */
.page-breadcrumb li.active a:after {
border-left: 30px solid #12234E;
}

/* Inactive Step Color */

.breadcrumb a:after { 
background: #e3e3e3;
}
Change availability calendar header
.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 room selector dropdown
.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}
Remove Check-in/Check-out policies
.checkin-checkout-terms-block{
display: none;
}
Remove Max and Price for x columns along with titles of other columns (Rooms, Adults, Children)
.box_names .price_for_nights,
.box_names .custom-max-guests,
.box_names .roomtype .custom-adults,
.rate-check { display: none; }
Full height iframe (to fit 100% of the content):
<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>

 

Remove additional guest pricing
<style>
#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;}
</style>
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
<style>
.acessa_float_left.acessa_float_description {
display: none;
}
</style>
Change 'Adults' to 'Adult and children +5 years old'

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.

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>
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>
Hide certain contact detail (address, phone, email) from property details in the booking page

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