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.
Contents
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.
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>
Hide or Remove elements
<style>
.available_rooms .roomtype .custom-max-guests, .choose_room .roomtype .custom-max-guests {
display: none;
visibility: hidden !important;
}
</style>
<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>![[Demo] White Elephant - Manchester, United Kingdom - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/005/436/042/original/74445c28-118b-4d55-8bc7-cb8b7625d135.png)
<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>
<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>
<style>
.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
</style>
<style>
.only_left
{display:none;}
</style>
<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>
<style>
.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}
</style>
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>
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><style>
.room_types .stay tr:nth-child(2) {
display: none;
}
</style>
<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
- 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>
- 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>
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>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>
- 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>
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>
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>
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>
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>
Resize photos or elements
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>
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>
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.
