Custom CSS changes how the Beds24 booking page, multi-property booking page, booking widgets, invoices and print templates look. Copy an example below into the Custom CSS setting for that page and adjust the values. For CSS that changes the control panel, see Customise the control panel with CSS.
Required skills: CSS. To find other class names, use your browser's developer tools.
Contents
- Property booking page
- Multi-property booking page
- Booking widgets
- Invoices and print templates
- Reports
- Control panel
Property booking page
Add the CSS in Settings > Booking Engine > Property Booking Page > Developer > Custom CSS.
| Change | CSS |
|---|---|
| Bigger room name (use a higher number for even bigger text) | .at_roomnametext{font-size: 14px;} /*if you want the text even bigger use a higher number*/ |
| Disable the month back-and-forth toggle in the calendar selector | .monthcalendarhead{pointer-events: none;} |
| Disable clicks on dates in the calendar selector | .roomoffercalendarmonth{pointer-events: none;} |
| Disable clicks only on dates not in pointer selection | .roomoffercalendarmonth .daterequest, .roomoffercalendarmonth .dateavail {pointer-events: none;} |
| Booking page with rounded corners (Adaptive Booking Page only) | {border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px;} |
| Hide cents | .bookingpagecents {display:none;} |
| Show prices with cents even if cents are zero | .bookingpagecentshide {display:inline;} |
| Add a border around the selected dates (second line: if you use split dates) |
.datestay{border: 1px solid #2f2f2f !important;}.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}
|
| Line through unavailable dates | .datenotavail{text-decoration: line-through;} |
| Mark past dates with a different background and text colour | .datepast{background-color: #xxxxxx; color: #xxxxxx;} |
| Change width of hover image (Adaptive Booking Page only) | .ui-tooltip{max-width: 500px;} |
| Remove the hover effect on pictures (Adaptive Booking Page only) | img{pointer-events: none;} |
| Add a label above the room selector for multiple room bookings (Responsive Booking Page only) | .roomofferqtyselectlabel{display: block;} |
| Hide up button (Responsive Booking Page only) | footer .button{display: none;} |
| Hide icons (Responsive Booking Page only) |
.b24fa{display:none;}#b24scroller .input-group-addon{display:none;}
|
| Change the text colour of the language selector and currency selector (Responsive Booking Page only) | .b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {color:#fff;} |
| 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;} |
| Remove 0 from adults or guests selector | #inputnumadult option[value="0"] {display:none !important;} |
| Hide Check-in / Check-out selector |
.b24-selector-checkin{display:none;}.b24-selector-checkout{display:none;}
|
| Hide number of nights selector | .b24-selector-numnight{display:none;} |
| Change the height of the full-width slider |
.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .item {height: 500px;}.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .carousel.slide{ height: 500px !important;}
|
| Hide the offer description on the check-out page | .at_offersummary {display: none;} |
| Show number of nights on mobiles | .b24-selector-numnight { display: inline-block !important; } |
| "Check-in" and "Check-out" text uses a white background instead of the highlight background colours on narrow screens |
#inputcheckingroup { background: transparent !important; border: none !important;}#inputcheckoutgroup { background: transparent !important; border: none !important;}
|
| Hide room picture on check-out page | .b24-guest-details-right img {display: none;} |
| Hide the option to collect credit cards on the booking page (if you use this option only for requests by email) | .bp2bookcollectpayment .panel-pay-card{display:none;} |
| Hide "Print Booking" on the confirmation screen | .conf_p{display:none;} |
| Hide "Click here to make another booking" on the confirmation screen | .bookagainlink{display:none;} |
Force the iframe to a certain height
/* Style for Extra Large Screen */
@media (max-width:1199px) {
iframe {
height: 292px;
}
}
/* Style for Large Screen */
@media (max-width:991px) {
iframe {
height: 2000px;
}
}
/* Style for Medium Screen */
@media (max-width:767px) {
iframe {
height: 2200px;
}
}
/* Style for Small Screen */
@media (max-width:575px) {
iframe {
height: 2500px;
}
}Mark days when check-in or check-out isn't allowed
Use this in the offer calendar, for example for rentals on a weekly basis. Set your check-in and check-out rules in the Calendar: it doesn't work for check-in and check-out restrictions set only in rates.
Note: Limit the check-out in the Calendar (click Override) to use this function.
| Change | CSS |
|---|---|
| Highlight when check-out isn't allowed | .datenco{background-color:#f4f4f4; color:#cccccc;} |
| Highlight when check-in isn't allowed | .datenci{background-color:#f4f4f4; color:#cccccc;} |
| Highlight specific days with the colour you choose |
.daymon{background-color:#592323; color:#cccccc;}.daytue{background-color:#592323; color:#cccccc;}.daywed{background-color:#592323; color:#cccccc;}.daythu{background-color:#592323; color:#cccccc;}.dayfri{background-color:#592323; color:#cccccc;}.daysat{background-color:#592323; color:#cccccc;}.daysun{background-color:#592323; color:#cccccc;}
|
Background image
- Upload the image in Settings > Booking Engine > Pictures.
- Replace
https://beds24.com/pic/p0000/2049/04.jpgwith the URL of your uploaded picture:body{background-image:url(https://beds24.com/pic/p0000/2049/04.jpg);}
Shadow around your booking page (Adaptive Booking Page only)
.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;}Mark certain fields in the calendar selector
You can highlight both the headings of the calendar (Mon, Tue, Wed, Thu, Fri, Sat, Sun) and all the dates that fall on a given day of the week (for example all 4 or 5 dates that fall on a Saturday).
- Headings:
.dayMon(ordayTue,dayWed,dayThu,dayFri,daySat,daySun) - Dates:
.daymon(ordaytue,dayewed,daythu,dayfri,daysat,daysun)
| Example | CSS |
|---|---|
| Set the font colour for the weekday heading of Monday (Mon) | .dayMon{color:#c44a2f !important;} |
| Set the background colour for the weekday heading of Monday (Mon) | .dayMon{background-color:#c44a2f !important;} |
| Set the font colour for all the dates that fall on a Saturday | .daysat{color:#c44a2f !important;} |
| Add a border around all the dates that fall on a Sunday | .daysun{border:1px solid #999999 !important;} |
Add icons to descriptive texts (Responsive Booking Page only)
You can add Bootstrap glyphicons and Font Awesome icons to the descriptive fields. To add icons, set the editor to Source.
| Example | Code |
|---|---|
| Bootstrap icon for a person | <span class="glyphicon glyphicon-user" aria-hidden="true"></span> |
| Font Awesome icon for a bicycle | <i class="fa fa-bicycle" aria-hidden="true"></i> |
Warning: Icons might disappear when you open the editor again. In this case, enter them again.
If you don't show the Features module on the booking page, add this in the Head section in Settings > Booking Engine > Property Booking Page > Developer or Settings > Booking Engine > Multi Booking Page > Developer:
<link rel="stylesheet" href="include/font-awesome/fontawesome-pro-5.14.0-web/css/all.min.css">Hide currencies from the currency selector (Responsive Booking Page only)
The currency class format is .cur-XXX, where cur is the name of the class and XXX is a currency code: CAD = Canadian Dollars, GBP = British Pounds and so on. The codes are:
AUD, BHD, CAD, CLP, CRC, EUR, FJD, GBP, GEL, ILS, ISK, NZD, USD, BGN, BRL, CHF, CNY, CZK, DKK, HKD, HRK, HUF, HUF, IDR, INR, JPY, KRW, LBP, LKR, MAD, MMK, MXN, MYR, NOK, PHP, PLN, RON, RUB, SEK, SGD, THB, TRY, ZAR
This code removes all currencies except Euros, Swiss Francs and US Dollars:
.cur-AUD,.cur-BHD,.cur-CAD,.cur-CLP,.cur-CRC,.cur-FJD,.cur-GBP,.cur-GEL,.cur-ILS,.cur-ISK,.cur-NZD,.cur-BGN,.cur-BRL,.cur-CNY,.cur-CZK,.cur-DKK,.cur-HKD,.cur-HRK,.cur-HUF,.cur-HUF,.cur-IDR,.cur-INR,.cur-JPY,.cur-KRW,.cur-LBP,.cur-MAD,.cur-MMK,.cur-MXN,.cur-MYR,.cur-NOK,.cur-PHP,.cur-PLN,.cur-RON,.cur-RUB,.cur-SEK,.cur-SGD,.cur-THB,.cur-TRY,.cur-ZAR{display: none;}Limit quantity selectors for upsell items
By default, all the quantity selectors range from 0 to 250. You can limit the range:
| Example | CSS |
|---|---|
| Set the range of the optional quantity selector for your 2nd upsell item (set to Per Booking) to 0-4 | #optextra2 option:nth-child(n+6){display:none;} |
| Set the range of the optional quantity selector for your 5th upsell item (set to Per Room/Person/Adult/Child) to 0-20 | #optextraroom5 option:nth-child(n+22){display:none;} |
Adjust alignment for RTL languages (Arabic, Hebrew)
.rtlinject{
float: right;
}
.colorbody-he, .colorbody-he #bookingpage,
.colorbody-ar, .colorbody-ar #bookingpage {
text-align: right;
}
.colorbody-he .ssi_makeabooking, .colorbody-he .panel .fakelink,
.colorbody-ar .ssi_makeabooking, .colorbody-ar .panel .fakelink{
text-align: left;
}
.colorbody-he .datepicker, .colorbody-he .roomoffercalendarmonth td, .colorbody-he .ssi_makeabooking .colorbody-he .b24-guest-details-left, .colorbody-he .b24-guest-details-left.propconfirmbookmessage, .colorbody-he .b24-creditcard, .colorbody-he .b24-guest-details-left,
.colorbody-ar .datepicker, .colorbody-ar .roomoffercalendarmonth td, .colorbody-ar .ssi_makeabooking .colorbody-ar .b24-guest-details-left, .colorbody-ar .b24-creditcard, .colorbody-ar .b24-guest-details-left.propconfirmbookmessage, .colorbody-ar .b24-guest-details-left {
float: right;
}
.colorbody-he .book_bookingbackright, .colorbody-he .b24-guest-details-right, .colorbody-he .questionrow div:first-child, .colorbody-he .book_securelogo, .colorbody-he .ppcancelbutton,
.colorbody-ar .book_bookingbackright, .colorbody-ar .b24-guest-details-right, .colorbody-ar .questionrow div:first-child, .colorbody-ar .book_securelogo, .colorbody-ar .ppcancelbutton{
float: left;
}
.colorbody-he .at_offersummary ul,
.colorbody-ar .at_offersummary ul{
padding-right: 0;
}
.colorbody-he .booktextdiv,
.colorbody-ar .booktextdiv{
width: 100%;
}
.colorbody-he .b24-offer-cal , .colorbody-he .b24-offer-summary, .colorbody-he .b24-offer-slider {
float: right;
}Change the colours of warnings
.alert-danger {
color: #7e7602;
background-color: #fcf8bd;
border-color: #fcf8bd;
}Multi-property booking page
Add the CSS in Settings > Booking Engine > Multi Booking Page > Developer > Custom CSS.
| Change | CSS |
|---|---|
| Change the height of the full-width slider |
.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .item {height: 600px;}.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .carousel.slide{height: 500px !important;}
|
| Hide Property Name (removes the individual property names from the multi-property booking page) | .at_propnametext {display: none;} |
Make search criteria always visible
#collapseAdvancedSearch{height: auto; display:block !important;}
.b24-agencysearchlink{display:none;}If this doesn't work, try:
#b24scroller-fullcontainer {position: sticky; top: 0; z-index: 1000;}Limit the drop-down list for number of guests
By default, this list goes up to 99. Replace X with the number you want + 2: to limit the list to 10, X = 12.
#inputnumadult option:nth-child(n+X){display:none;}
#inputnumchild option:nth-child(n+X){display:none;}Adjust alignment for RTL languages (Arabic, Hebrew)
.rtlinject{
float: right;}
.colorbody-he,
.colorbody-ar {
text-align: right;}
.colorbody-he .b24-prop-module,
.colorbody-he .datepicker, .colorbody-he .roomoffercalendarmonth td,
.colorbody-ar .datepicker, .colorbody-ar .roomoffercalendarmonth td{
float: right;}
.colorbody-he .at_propnametext,
.colorbody-ar .at_propnametext {
padding-right: 10px;
}Booking widgets
Add this CSS directly to your website. For more widget styling, see Customise booking widgets with CSS and JavaScript.
| Change | CSS |
|---|---|
| Change the hover colour in the datepicker calendar | .book-widget .ui-datepicker td .ui-state-active, .book-widget .ui-datepicker td .ui-state-hover, .book-widget.ui-datepicker td .ui-state-active, .book-widget.ui-datepicker td .ui-state-hover {background-color:#ffffff!important; color:#000000!important} |
| Make only Saturdays clickable in the datepicker calendar | .book-widget .ui-datepicker tr > :nth-child(1), .book-widget .ui-datepicker tr > :nth-child(2), .book-widget .ui-datepicker tr > :nth-child(3), .book-widget .ui-datepicker tr > :nth-child(4), .book-widget .ui-datepicker tr > :nth-child(5), .book-widget .ui-datepicker tr > :nth-child(7){pointer-events: none;} |
Invoices and print templates
Add the CSS in Settings > Guest Management > Styling > Custom CSS. See Guest Management Styling.
| Change | CSS |
|---|---|
| Centre the invoice on the screen and set the overall font size | body {text-align: center; font-size: 16px;} |
| Set font size of property name | #invoicepropname{font-size: 24px;} |
| Set font size of address | #invoiceaddress{font-size: 18px; padding-bottom: 50px;} |
| Set font size of the invoice table | .confirmationtable{font-size: 16px;} |
| Change margin | .printbooking2 {margin: 20px;} |
| Centre the invoice table | #invoicetable{margin-left:auto; margin-right:auto;} |
| Set the font size of the print time | #invoiceprinttime{font-size: 12px;} |
| Hide edit button in the invoice | #iconedit {display: none;} |
| Align all table content right | .conf_subheadercenter, .conf_numbercenter{text-align: right !important;} |
Reports
Add the CSS in Settings > Guest Management > Styling > Custom CSS.
| Change | CSS |
|---|---|
| Hide the "Booking Notes" column in the Daily Unit Activity report |
.reportdailyunitactivity th > *:nth-child(9) {display: none;}.reportdailyunitactivity td > *:nth-child(9) {display: none;}
|
Control panel
CSS for the control panel (navigation, calendar, dashboard, bookings, booking popup and more) is added in Account Management. See Customise the control panel with CSS.