Customize mybookings - List Design Codes

Follow

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

On this article you can find the codes that work exclusively for List Design.

Change colors/backgrounds of elements, buttons

For customized backgrounds/images, check out further information about security 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/Beds' button color

Add the following code under 'Custom Meta Tags' section and replace with the desired color code

<style>
.roomtype .bootstrap-select.rooms_select .btn {
 background-color: #727B5F!important;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

Hide/remove elements

Remove the 'Max' people column
<style>
.available_rooms .roomtype .custom-max-guests, .choose_room .roomtype .custom-max-guests {
display: none;
visibility: hidden !important;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Remove the 'Price for X Nights' column
<style>
.price_for_nights {
display: none !important;
}div.mobile.visible-xs-block.visible-sm-block > table > tbody > tr:nth-child(2) {
display: none !important;
}
</style>
Remove both' child and adult' columns
<style>
/* 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; }
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Remove the 'children' column only
<style>
.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;
}
</style>
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
Remove 'Price From' column
<style>
.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Remove 'Only # of rooms left' tag
<style>
.only_left
{display:none;}
</style>
Remove 'Online rate' and 'Additional guest pricing' dropdown
<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>
Remove the strikethrough base rate price (for the packages)
<style>
.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}
</style>
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

<style>
.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;
}
</style>
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 the myfrontdesk Room ID - On the following article, you can learn Where to find myfrontdesk room type ID

<style>
[data-room-type-id="00000"] .roomtype.vertical-align.visible-md-block.visible-lg-block .children.custom-children{
visibility: hidden !important;
}
</style>
Hide 'Included Occupancy' field (in room type details pop-up)
<style>
.room_types .stay tr:nth-child(2) {
  display: none;
}
</style>
Hide 'Online rate' field (in room type description)
<style>
.room_more {
display: none;
}
</style>

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

  • Similarly for all languages on mybookings (those which are available) - if code was entered to the '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
<style>
.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;
}
</style>

 

DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Replace the word 'Adults' under 'Select Accommodations' section
  • Add the code to 'Custom Meta Tags' section
  • 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.

English 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: "XX";
}
</style>

Portuguese 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):

<style>
.alert.alert-warning.booking_helper {font-size: 0;}
.alert.alert-warning.booking_helper:after {font-size: 14px;  content: 'YOUR TEXT HERE';}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
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

<style>
.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;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

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

This word will appear instead of both beds (dorms) / rooms (private room types)

<style>
.type_of_room {
 visibility:hidden;
}
.type_of_room:after{
 content: "Apartments";
 visibility:visible;
}
.custom-select-rooms .type_of_room {
   margin-left: -25px;
}
</style>
Replace 'Room type' with 'Apartment type' (or anything else)

The phrase/word which replaces the original - will be displayed for all languages

<style>
.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Apartment type";
visibility:visible;
margin-left: -35px;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Replace the ‘Price of 1 Night(s)’ to any other text

Save the code below in Custom Meta Tags section

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

Save the code below in Custom Meta Tags section and replace the words in red with your desired text

‘Check-in’

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

‘Check-out’

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

Resize photos/elements

Increase the size of accommodation photos

Add the following code on 'Custom meta tags' section:

<style>
.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;}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Increase 'Guests' selection button width

You can control width by changing the number of px in the element

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

Alternative code (with borders)

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

On the following article you can find codes that work for both Gallery and List designs

Powered by Zendesk