Custom CSS

This page gives CSS examples'

Contents

1 Booking page

• Custom CSS can be added in SETTINGS > BOOKING PAGE > MULTIPLE PROPERTIES > DEVELOPERS > "Custom CSS"

• Custom CSS can be added in SETTINGS > BOOKING PAGE > DEVELOPERS > "Custom CSS"

1.1 Bigger room name

.at_roomnametext{font-size: 14px;} /*if you want the text even bigger use a higher number*/

1.2 Disable click on calendar

.roomoffercalendarmonth{pointer-events: none;}

.monthcalendarhead{pointer-events: auto;}

1.3 Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis

To use this option you will need to set your check-in / check-out rules in the CALENDAR. It will not work for check-in and check-out restrictions only set in rates.

NOTE: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this function.

.datenco{
background-color: #f4f4f4;
color: #cccccc;
}

1.4 Background Image

To use a background image upload it to SETTINGS -> BOOKING PAGE -> PICTURES. Replace https://www.beds24.com/pic/p0000/2049/04.jpg with the url of your uploaded picture.

/*code fo use an image as background*/
body {
background-image:url(https://www.beds24.com/pic/p0000/2049/04.jpg);
}

1.5 Shadow Around your Booking Page (Adaptive Booking Page Only)

Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"

/*code for a shadow around your booking page*/

#bookingpage {
-webkit-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);
-moz-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 10, 10, 0.38);
margin-bottom: 20px;	
}

1.6 Booking Page with Rounded Corners (Adaptive Booking Page Only)

Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS"

/*code for rounded corners*/

#bookingpage {
border-radius: 7px;
-webkit-border-radius: 7px;	
-moz-border-radius: 7px;		
}

1.7 Hide cents

.bookingpagecents {display:none;}

1.8 Show prices with cents even if cents are zero

.bookingpagecentshide {display:inline;}

1.9 Mark certain days of the week

Example 1: Change the background color for Saturday

.daySat {color:#c44a2f !important;}

exchange daySat by daySun, dayMon, dayTue, dayeWed, dayThu, dayFri to exchange the backgound color for other days.

Example 2: Change the background color for Saturday

.daysat {background-color:#ccc !important;}

exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days.

Example 3: Add a border arround Saturday

.daysat {border:1px solid #999999 !important;}

exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days.

1.10 Add a border around the selected dates

.datestay {border: 1px solid #2f2f2f !important;}

1.11 Line through unavailable dates

.datenotavail {
text-decoration: line-through;
}

1.12 Change width of hover image (adaptive booking page only

.ui-tooltip {
 max- width: 500px;}

1.13 Remove the hover effect on pictures (adaptive booking page only)

img { pointer-events: none; }

1.14 Add a label above the room selector for multiple room bookings (responsive booking page only)

.roomofferqtyselectlabel {
display: block;}

1.15 Hide up button (responsive booking page only)

footer .button{
display: none;
}

1.16 Add icons to descriptive texts (responsive booking page only)

Bootstrap glyphicons and Font Awesome icons can be added to the descriptive fields. To add icons the editor needs to be set to "Source"

Examples:

<span class="glyphicon glyphicon-user" aria-hidden="true"></span> will add a Bootstap icon for a person.

<i class="fa fa-bicycle" aria-hidden="true"></i> will add a Font Awesomeicon for a bicycle.

Note: Icons might disappear when the editor is opened again. In this case you will need to enter it again.

1.17 Hide icons (responsive booking page only)

.b24fa{
display: none; 
}

#b24scroller .input-group-addon{
display: none; 
}

1.18 Change text color of language selector and currency selector (responsive booking page only)

#topofthebookingpage{
color: #ffffff 
}

exchange ffffff with the hex code of the color you want to use.

1.19 Make language selector and currency selector a button (responsive booking page only)

.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active,         .b24currencydropdown.btn:active {
background: white;
padding: 10px;
}