Cloudbeds Booking Engine - List Design Code (Reference only)

Follow

This article shows the code that worked exclusively for the List Design (Reference only)

The List Design is no longer available on the Booking Engine as of September 1st, 2022. Use this code as a reference only, to transfer your customization code from the List Design to the Gallery Design. Find more details here.

Change colors/backgrounds of elements and buttons

Check How to use Color Pickers for the Cloudbeds Booking Engine for more details about automated customization function  to change Background Color, Header Color, Navigation Arrows, Search Button, General Button Color.

Change the Rooms/Beds button color

Add the following code under the 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 or 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 Cloudbeds Booking Engine 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 the booking engine (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 the 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 or 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>

See the list of code that work for both Gallery and List designs.

Powered by Zendesk