Cloudbeds Booking Engine - Customize Text (font, size, colors) and Replace Default Text – myfrontdesk

Customize the text in your Booking Engine by changing the font, size, and colors; or replace the default text to add your own. This article shows the most commonly used code for this process.

For the Custom Meta Tags applicable code: Use the Gallery Design tab.
For color customization: Each color has a different code. If you need any reference, use the Color Picker tool to get your preferred color code.

Customize Booking Engine Text (font, size and colors)

Change All Fonts

Add the code below to Custom Meta Tags section:

<style>
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;
}
/* Calendar Icon - Don't Change or Remove */
i.fa
{
font: normal normal normal 14px/1 FontAwesome !important;
}
</style>

If no arrow icon is shown on the calendar after inserting this code and applying another font to all the tags, remove the <span> tag from the code and save the changes.

Change color of Your Reservation text

Add the code below to Custom Meta Tags section and replace the color code in red:

<style>
div.col-md-3.reserve_info > h2 {
color: #FF000F;
}
</style>

Change the color of the blue line under Your Reservation

Add the code below to Custom Meta Tags section and replace the color name in red:

<style>
.bold_blue { background: red; }
</style>

Change hotel name font, color

Add the code below to Custom Meta Tags section and replace the color and font in red.

<style>
/* Hotel Name Font */.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif !important;
}
</style>

Change font for the Search button

Add the code below to Custom Meta Tags section and replace the font name in red:

<style>
/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 12px;
} 
</style>

Slack | Saurabh Satralkar | Cloudbeds - Google Chrome

Change font for the Book Now and Select Accommodations buttons

color - changes the color of font for word BOOK NOW and Select Accommodation
background - changes the color of the button

<style>
/* Buttons font */.green.btn,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active {
background:#da1176!important;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 12px;
color: #b7f9fd;
}
</style>

Change size/style of text appearing when there is no availability

Add the code below to Custom footer section and duplicate it for all the needed languages:

<style>
.message_container 
{font-size: 16px;
color: #ff5722; 
font-weight: normal; /*font weight - normal, bold, light, etc...*/  
font-style: normal; /*font style - normal, italic*/}
</style>

Click to copy

Change font style of property information

Add the following code on the Custom Meta Tag section and replace the red text with the desired font name:

<style>
/*Header*/
.caption {
font-family: "Georgia" !important;
}/*Info inside section*/
.map_info {
font-family: "Courier New" !important;
}
</style>

Change the font size and text color of the Property Information

Replace the font-size and color ID in red, on the code below:

<style>
div.portlet-body h6:nth-child(n) {
font-size: 18px;
color: #0B468C;
}
</style>

DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

Change font in date picker (when selecting check-in and check-out)

Paste the code below in the Custom Meta Tags section, and replace the font name:

<style>
//*change font (Calendar title)*//*change font (Calendar days/dates)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;}
</style>

Change selected room price font and color

Paste the code below in the Custom Meta Tags section, and replace the data in red.

<style>
/*Room price*/
.selected_rooms_price {
font-family: 'Roboto',sans-serif !important;
font-style: italic;
    font-size: 30px;
    color: #da26b2;
    margin-top: 5px;
    text-align: center;
}   
</style>

Change the room name font, size and color

Paste the code below in the Custom Meta Tags section, and replace the data in red.

<style>
/*Room names*/
.av-name {
font-family: 'Belleza', sans-serif !important;
    font-size: 30px;
    color: #da26b2;}
</style>

Replace the default text with Custom Text

This section shows the code which replace the default booking engine text with your own custom text.

The text entered will be displayed:

Similarly for all languages on the booking engine (those which are available), if code is entered to Custom Meta Tags section.
For the selected language only, if the code is entered to sections Customer header/footer for your hotel booking page.

Replace the text Thank you! on the reservation confirmation page

Add the code to the Custom Meta Tags section
The phrase/word which replaces the original will be displayed for all languages.

<script type="text/javascript">
document.querySelector('.medium.blue').innerHTML = 'Insert Text Here';
</script>

Replace the text Search on the search button

Add the code to the Custom Meta Tags section
The phrase/word which replaces the original will be displayed for all languages.

<style>
.check_availability_group .btn {
font-size: 0;
}
.check_availability_group .btn:after {
content: "Your text here";
font-size: 15px;
}
</style>

Replace Your Reservation text with any other text

Add the code to the Custom Meta Tags section
The phrase/word which replaces the original will be displayed for all languages.

<style>
div.col-md-3.reserve_info > h2 {
font-size: 0;
}
div.col-md-3.reserve_info > h2:after {
content: "Your text here";
font-size: 27px;
}
</style>

Replace the text Checkout to any other text throughout the Booking process (Main page and Confirmation Page)

Add this code to the Custom Footer field:

<script type="text/javascript">
// Change the Checkout text to any other text
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.second > span > b").innerHTML = 'Enter your text here';
</script>
<script type="text/javascript">
// Change the Checkout text to any other text on Confirmation Page
document.querySelector("#wizard > ul > li:nth-child(2) > span > b").innerHTML = 'Enter your text here';
</script>

Replace the texts Adults/Children/Extra Adults/Extra Children with any other text in the reservation summary

Add the code to Custom Footer field:

<script type="text/javascript"> 
function ChangeDefaultTextReservationSummary() {
	if (window.jQuery) {
		setInterval(function() {
			// Checkout page
			$(".col-md-3.reserve_info").each(function() {
                                $(this).html($(this).html().replace("Adults", "Guests"));
				$(this).html($(this).html().replace("Children", "Kids"));
                                $(this).html($(this).html().replace("Extra Adults", "Extra Guests"));
				$(this).html($(this).html().replace("Extra Child(ren)", "Extra Kids"));
			});
		}, 500);
	} else {
		setTimeout(function() { ChangeDefaultTextReservationSummary() }, 50);
	}
}
ChangeDefaultTextReservationSummary();  
</script>

To leave one of the text as it is (without any change), just comment out the code.
Example: To leave the Children text as it is (and not changing it to other text), comment out by putting // (two forward slashes) in front of the code line (example code below)

// $(this).html($(this).html().replace("Children", "Kids"));

Replace the text Adults with Guests on Confirmation Page under the Accommodations table

Add the code to Custom Meta Tags (Confirmation Page Only):

<style>
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4) {
font-size: 0;
}
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4):after {
content: "Guest(s)";
font-size: 14px;
}
</style>

Replace the text Adults to any text on a specific room type

Add the code below to the Custom Meta Tags section and use the code line [data-room-type-id="Room ID here"] before the code as shown below.

To confirm your Cloudbeds room type ID, see: How to Find the Room Type ID on Cloudbeds PMS

<style>
[data-room-type-id="Room ID here"] .av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="Room ID here"] .av-room-options .av-adults .type_of_room:after {
content: "Insert your text here";
text-align: center;
font-size: 10px;
} 
</style>

Replace the text Adults to some other text (all rooms)

If the Allow guests to book specific accommodations option is selected for a particular room type, the text change will be displayed in the Select Accommodations section.

Insert the code under Custom Meta Tags and change the text from Adults to the desired text.

Example: Guests

<style>
.av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-adults .type_of_room:after {
content: "Insert your text here";
text-align: center;
font-size: 10px;
} 
/* Change the text "Adults" to "Guests" when option for the guests to select the particular room is enabled */
th.adults.custom-adults {
font-size: 0 !important;
}
th.adults.custom-adults:after {
content: "Insert your text here";
font-size: 14px;
text-align: center;
} 
/* --------------------------------------------------- */
</style>

[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome

Replace the text Adult to other text for a specific room type (when clicking on Select Accommodations)

Allow guest to book a specific accommodation in the Cloudbeds Booking Engine Settings before continuing with the steps below.

Add the following code to the 'Custom Meta Tag' section
Replace the XXXX with your room type ID.
Replace the text Insert your text here with your custom text

<style>
[data-room-type-id="XXXX"].av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="XXXX"] .av-room-options .av-adults .type_of_room:after {
content: "Insert your text here";
text-align: center;
font-size: 10px;
} 
/* Change the text "Adults" to "Guests" when option for the guests to select the particular room is enabled */
[data-room-type-id="XXXX"] th.adults.custom-adults {
font-size: 0 !important;
}
[data-room-type-id="XXXX"] th.adults.custom-adults:after {
content: "Insert your text here";
font-size: 14px;
text-align: center;
} 
/* --------------------------------------------------- */
</style>

Replace the text Children to some other text

Insert the code under Custom Meta Tags and change the text from Children to the desired text.

Example: Children Over 3

<style>
.av-room-options .av-children .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-children .type_of_room:after {
content: "Insert your text";
text-align: center;
font-size: 10px;
}
/* Change the text "Children" to "Children over 3" when option is changed to allow guests to select room */
th.children.custom-children {
font-size: 0 !important;
}
th.children.custom-children:after {
content: "Insert your text";
text-align: center;
font-size: 14px;
}
</style>

Replace the text Choose a Room to any other text on Confirmation Page

Add the code to the Custom Footer field:

<script type="text/javascript">
// Change the Choose a room text to any other text on Confirmation Page
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = "Enter your text here";
</script>

Replace the Availability text (above the search button) with View Availability Calendar

Copy and paste the code below in the Custom Meta Tags section:

<style>
.button-container .availability { font-size: 0; }
.button-container .availability::after {font-size: 13px; content: "View Availability Calendar"; }
</style>

Replace the Select Accommodations text inside the button

This code is applicable for properties which have the Allow guests to book specific accommodations on the booking engine option enabled.

<style>
button.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
button.btn.green.btn-block.select-accommodation-btn:before {
  font-size: 12px;
  content: "text";
}
</style>

Replace the Book Now text inside button

Add this code to Custom footer for your hotel booking page and duplicate for all desired languages:

<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insert Text Here';
</script>

button.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
button.btn.green.btn-block.select-accommodation-btn:before {
  font-size: 12px;
  content: "text";
}

Replace the Choose a Room text with custom text

Enter the code below to Custom footer for your hotel booking page section. The phrase/word which replaces the original will be displayed for all languages:

<script type="text/javascript">
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.active.first > span > b").innerHTML = 'INSERT TEXT';
</script>

Replace Have a Promo Code? with another text

Enter the code to Custom Meta Tags section (will be displayed similarly for all languages):

<style>
.show_promo_code {font-size: 0;} 
.show_promo_code a:after {content:"HAVE A DISCOUNT CODE?";   
font-size: 13px; 
color: red;
}
</style>

Replace Grand Total to any other text on the Reservation Summary

Add the following code in Custom Meta Tags section and replace the sentence in red:

<style>
div.grand_total > div > div.col-md-4.col-sm-4.col-xs-6 > p {
font-size: 0;
}
div.grand_total > div > div.col-md-4.col-sm-4.col-xs-6 > p:after {
content: "YOUR TEXT HERE";
font-size: 13px;
}
</style>

Checkout - DEMO - Karina's Hostel - Google Chrome

Replace the Have a Group Code with other text and color

Insert the code under Custom Meta Tags section and replace the sentence in red:

<style>
.show_group_code 
{ 
font-size: 0;
} .show_group_code a:after {
content:"HAVE A GROUP DISCOUNT CODE?";   
font-size: 13px; 
color: red;
}
</style>

Replace the Price From text to any desired text

Insert the code under Custom Meta Tags section:

<style>
.price-from {
font-size: 0 !important;
}
.price-from:after {
content: "Price per night";
font-size: 12px;
}
</style>

Click to copy

Replace the Standard Rate text with any other text (all room types)

Insert the code under Custom Meta Tags section and replace the sentence in red:

<style>
[data-package-id="0"] ~ label > em { display: none; }
[data-package-id="0"] ~ label:before { content: "Insert your text here"; }
</style>

Replace the Standard Rate text with any other text (specific room type)

Insert the code under Custom Meta Tags section and replace the sentences in red. The room type ID must be the specific room type that you want to replace the Standard Rate text.

<style>
[data-room-type-id="XXXX"] [data-package-id="0"] ~ label{
font-size: 0;
}
[data-room-type-id="XXXX"] [data-package-id="0"] ~ label::before {
content: "Write your text here";
font-size: 14px;
}
</style>

Replace the text Rooms to some other text

Insert the code under Custom Meta Tags and replace the sentence in red from Room to the desired text:

Example: Select

<style>
.av-room-options .no-rooms .type_of_room {
font-size: 0 !important;
}
.av-room-options .no-rooms .type_of_room:after {
content: "Insert your text";
text-align: center;
font-size: 10px;
} 
</style>

Replace the text Room to Pitch through the whole booking process

Add the following code in Custom footer for your hotel booking page to see Pitch on the top line:

<script type="text/javascript">
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = 'CHOOSE A PITCH';
</script>

Checkout - [Demo] Mountain Resort & SPA - Google Chrome

Add the following code in the Custom Meta Tags to change from Room to Pitch in the right menu:

/* The following code will change the text "Room Selection" to "Pitch Selection:"  */
div.checkout div div.col-md-3.reserve_info p:nth-child(3) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(3):after {
content: "Pitch Selection:";
font-size: 13px;
}
/* The following code will change the text "Room Nights" to "Pitch Nights:" */
div.checkout div div.col-md-3.reserve_info p:nth-child(14) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(14):after {
content: "Pitch Nights:";
font-size: 13px;
}
/* The following code will change the text "Room Total" to "Pitch Total" */
div.reserve_total div:nth-child(1) div:nth-child(1) p {
font-size: 0;
}
div.reserve_total div:nth-child(1) div:nth-child(1) p:after {
content: "Pitch Total:";
font-size: 13px;
}

Add the following code in Custom footer to change from Accommodations to Pitch(es):

<script type="text/javascript">
document.querySelector("div.reserve_success div div.col-md-9 div div.table-responsive.visible-lg-block.visible-md-block h4").innerHTML = 'Pitch(es)';
</script>

Click to copy

To change from Room Type to Pitch type on the Confirmation Page (after the reservation is completed), add the following code in Custom Meta Tag (Confirmation Page Only) section:

<style>
/* The following code will change the text "Room Type" to "Pitch Type" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1):after {
content: "Pitch type";
font-size: 14px;
}
</style>

Click to copy

To change from Room Name to Pitch Name in Confirmation Page (after the reservation is completed) add the following code in Custom Meta Tag (Confirmation Page Only) section:

<style>
/* The following code will change the text "Room Name" to "Pitch Name" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2):after {
content: "Pitch Name";
font-size: 14px;
}
</style>

Click to copy

Slack | Yelizaveta Yastrebova (Liza) | Cloudbeds - Google Chrome

Replace the Select Accommodation text to any desired text

<style>
.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
.btn.green.btn-block.select-accommodation-btn:after {
  content: "Make a selection / Your desired text here";
  font-size: 12px;
}
</style>

Replace the Beds of the dorm room to any desired text

The following code can be applied to only one room type. To add to other room types, the same code needs to be copied again but with another room type ID.

Replace "00000" with the room type ID:

<style>
[data-room-type-id="00000"] .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="00000"] .type_of_room:after {
content: "Any desired text";
text-align: center;
font-size: 10px;
}
</style>

Replace Check-in/Check-out to some other text

Insert the following codes under the Custom Meta Tags section:

Check-in

Replace the Arrival Date below with your custom text:

<style>
#rooms-search-form > div:nth-child(3) > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(3) > label::after {
content: 'Arrival Date';
font-size: 16px;
}
</style>

Check-out

Replace the Departure Date with your custom text:

<style>
#rooms-search-form > div.form-group.checkout-date > label {
font-size: 0;
}
#rooms-search-form > div.form-group.checkout-date > label:after {
content: 'Departure Date';
font-size: 16px;
}
</style>

Replace the Price for x nights text to any other text

Insert the code under Custom Meta Tags and replace the sentences in red to the desired text:

<style>
.av-rates .price-from {
font-size: 0;
}
.av-rates .price-from:before {
content: "Per Person for";
font-size: 12px;
}
.nights_count {
font-size: 12px;
}
.av-rates .price-from:after {
content: " Night(s)";
font-size: 12px;
}
</style>

Replace the Advance Amount text to any other text on the Reservation Summary

Add the following code in Custom Meta Tags section and replace the sentence in red:

<style>
div.advance_amount > div > div.col-md-8.col-sm-8.col-xs-8 > p {
font-size: 0;
}
div.advance_amount > div > div.col-md-8.col-sm-8.col-xs-8 > p:after {
content: "Type new text here";
font-size: 13px;
} 
</style>

Replace the Contact Permission and the message below it to any other text

Add the following code in Custom header for your hotel booking page section and replace the sentence in red (for translated text, save it in the respective custom header section for translations).

<style>
div.opt-in-confirmation > div > div > h4 { font-size: 0; }
div.opt-in-confirmation > div > div > h4::after { content:"Write your text here"; font-size: 17px; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
$("label[for=is_opt_in]").each(function() {
     $(this).html($(this).html().replace("Please let us know if you would like us to contact you or not by selecting one of the options below", "Write your text here")); });
});
</script>

Replace the Bank Transfer method text in the Payment section

Copy the code below, and paste it in the Custom Meta Tags section. Replace the text in red with your preferred one:

<style>
label[for=ebanking] > a {
font-size: 0;
}
label[for=ebanking] > a:after {
content: 'Pay At The Property';
font-size: 14px;
}
</style>

Replace the default text under the Bank Transfer method

Add the code below to the Custom Meta Tags section and replace the text in red with your property requirements about payments with the bank transfer method:

<style>
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div {
font-size: 0;
}
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div:after {
content: "Your text goes here. If you have an apostrophe s in the text, make sure to add a blackward slash before it, so it work\'s as intended"; 
font-size: 13px;
}
</style>

Adding Message at the end of the total amount on Confirmation Page

Add the code under Custom footer for your hotel booking page and replace the text in red:

<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 message goes here......... As long as you need.... </br>';
NewEl.className += "text-center";
NewEl.style.fontSize = '15px';
NewEl.appendAfter( document.querySelector('div.col-md-3.reserve_info'));
</script>

Confirmation - [Demo] Mountain Resort & SPA - Google Chrome

What to do if my customization code is not working?

If the desired customization code is not working as expected, try the following troubleshooting steps:

Confirm that the code has been correctly copied and pasted, without typos or unnecessary/extra spaces.
Paste the code in the correct field, in the Customize the Booking Engine section (For example: Some codes should be placed in the Custom header section, and some other codes need to be pasted in the Custom footer section)
Save your changes after the customization codes are added to the correct fields, and reload/open the Booking Engine on your browser to see the effect
The List Design View is no longer supported in Cloudbeds PMS. Find more details here.

Reach out to our Support Team if none of the solutions above fix the issue.

How can we help you?

Cloudbeds Booking Engine - Customize Text (font, size, colors) and Replace Default Text

Customize Booking Engine Text (font, size and colors)

Replace the default text with Custom Text

Check-in

Check-out

What to do if my customization code is not working?

Need Help?

More reservations.
Happier guests.™

PRODUCTS

SOLUTIONS

COMPANY

RESOURCES

CONTACT US

Cloudbeds Booking Engine - Customize Text (font, size, colors) and Replace Default Text

Customize Booking Engine Text (font, size and colors)

Replace the default text with Custom Text

Check-in

Check-out

What to do if my customization code is not working?

Related articles

Need Help?

More reservations. Happier guests.™

PRODUCTS

SOLUTIONS

COMPANY

RESOURCES

CONTACT US

More reservations.
Happier guests.™