Customize mybookings - HTML and CSS Custom Meta Tags

Follow

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

You can easily match your website’s existing branding or create your unique style by customizing  

  • header and footer,
  • background,
  • color scheme,
  • fonts,
  • adding text and hyperlinks,
  • hiding default elements

If you're planning to add customized backgrounds/images, check out further information about it on the FAQ section of this article: Mybookings Booking Engine Overview and FAQ

This feature requires the Cloudbeds Plus plan or higher/equivalent.

Important:

  • This article is provided as an additional informational resource for those already familiar with HTML and CSS. The code may become outdated and require additional work on it. Our Support Team will be glad to assist you with using the codes ONLY provided in this article.
  • The examples provided below are for reference and may require some additional modification to work correctly.
  • Cloudbeds does not offer assistance with hotel website webdesign/development, or customization not added to this article
  • The codes provided below work on desktop version of mybookings, and MAY NOT WORK ON MOBILE VERSION

Where to begin

1. In myfrontdesk go to manage > Customize mybookings

2. Enter the code to the mybookings design type which you use: gallery or list design.

3. Enter the customization code to the necessary field (Custom meta tags, Custom header for your hotel booking etc.)

CSS codes should be between <style> and </style> brackets like in the example below:

<style>

.show_promo_code a {color:#999;}

</style>

Customization codes for 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;
}
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
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;
}
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>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
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;
}
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
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;
}
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
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;
}
Have more questions? Contact Support

Comments

Powered by Zendesk