Custom CSS

This page gives Custom CSS examples

Booking Page

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

Bigger room name

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

Disable clicks on calendar selector

Disable month back-and-forth toggle

.monthcalendarhead{pointer-events: none;}

Disable clicks on dates

.roomoffercalendarmonth{pointer-events: none;}

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;}

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.

body{background-image:url(https://www.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;	
}

Booking Page with rounded corners (Adaptive Booking Page only)

#bookingpage{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;}

Mark certain fields in the calendar selector

You can highlight both the headings of the calendar (i.e. Mon, Tue, Wed, Thu, Fri, Sat, Sun) and all the dates that fall on a given day of the week (i.e. all 4 or 5 dates that fall on a Saturday).

Headings = '.dayMon' (or dayTue, dayWed, dayThu, dayFri, daySat, daySun)

Dates = '.daymon' (or daytue, dayewed, daythu, dayfri, daysat, daysun)

Example 1: Set the font color for the weekday heading of Monday ('Mon')

.dayMon{color:#c44a2f !important;}

Example 2: Set the background color for the weekday heading of Monday ('Mon')

.dayMon{background-color:#c44a2f !important;}

Example 3: Set the font color for all the dates that fall on a Saturday

.daysat{color:#c44a2f !important;}

Example 4: Add a border around all the dates that fall on a Sunday

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

Add a border around the selected dates

.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;}

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.

Hide icons (Responsive Booking Page only)

.b24fa{display:none;}

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

Change text color of language selector and currency selector (Responsive Booking Page only)

#topofthebookingpage{color: #ffffff;}

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;}

Change text color of language selector and currency selector (Responsive Booking Page only)

#topofthebookingpage a {color: #ffffff}

Hide currencies from the currency selector (Responsive Booking Page only)

The currency class format is: .cur-XXX.

cur is the name of the class and XXX represents a country code: CAD = Canadian Dollars, GBP = British Pounds and so on. The country 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 will remove all currencies except for 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 have a range from 0 - 250. You can limit the range:

Example 1: Set the range of the optional quantity selector for your 2nd upsell item (set 'Per Booking') to 0-4:

#optextra2 option:nth-child(n+6){display:none;}

Example 2: Set the range of the optional quantity selector for your 5th upsell item (set 'Per Room/Person/Adult/Child') to 0-20:

#optextraroom5 option:nth-child(n+22){display:none;}

Remove Check-in / Check-out selector

.b24-selector-checkin{display:none;}

.b24-selector-checkout{display:none;}

Change height of full-width slider

.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .item {height: 500px;}

.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider   .carousel.slide{ height: 500px !important;}

Multiple Booking Page

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

Make search criteria always visible

#collapseAdvancedSearch{height: auto; display:block !important;}

.b24-agencysearchlink{display:none;}

Change height of full-width slider

.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1  .b24-owner-slider .item {height: 600px;}

.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1  .b24-owner-slider   .carousel.slide{height: 500px !important;}

Invoices

Custom CSS can be added in SETTINGS > GUEST MANAGEMENT > STYLING > "Custom CSS"

Center invoice on the screen and set 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;}

TBC

#invoicetable{margin-left:auto; margin-right:auto;}

TBC

#invoiceprinttime{font-size: 12px;}

Hide edit button in the invoice

#iconedit {display: none;}

Control Panel

Custom CSS can be added in:

• SUB ACCOUNTS > ACCOUNT LIST to apply for all sub accounts
• SUB ACCOUNTS > ACCOUNT LIST > MANAGE ACCOUNT to apply for a specific sub account

Hide the "Add Booking" from mobile DASHBOARD

.mobiledashaddbooking{display:none;}

Change the blue Login button on the initial Beds24 page (resellers only)

.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}

Hide the "Delete" button in the booking menu

.pagetypeajaxbookedit .deletebookingbutton{display:none;}

Hide the "Add Booking" button in the booking menu

.icon-suitcase, .b24btn_AddBooking{display:none;}

Hide the "Copy as new" button in the booking menu

.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;}

Hide the "Print" button in the booking menu

.pagetypeajaxbookedit #bookingprintbutton{display:none;}

Hide the "Template" buttons in the booking menu

.pagetypeajaxbookedit #bookingtemplate1button{display:none;}

.pagetypeajaxbookedit #bookingtemplate2button{display:none;}

.pagetypeajaxbookedit #bookingtemplate3button{display:none;}

Hide "Show" in the CALENDAR

.dashgrid_rowroomname .dropdown{display:none !important}

Hide "Override row" in the CALENDAR

.dashgrid_rowtype1{display:none}

Hide dropdown for rooms in the CALENDAR

.dashgridshowfilter {display:none;}

Hide the "Make a Charge using Stripe" button

.makechargeusingl{display: none}

Hide elements from the BOOKINGS pop up

Checkout selector

.pagetypeajaxbookedit #checkout{display:none;}

Guest title

.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}

Last Name

.pagetypeajaxbookedit .menusetting-guestname{display:none;}

Guest comments

.pagetypeajaxbookedit .menusetting-guestcomments{display:none;}

Notes

.pagetypeajaxbookedit .menusetting-hostcomments{display:none;}

Adults

.pagetypeajaxbookedit .menusetting-numadults{display:none;}

Children

.pagetypeajaxbookedit .menusetting-numchild{display:none;}

Telephone

.pagetypeajaxbookedit .menusetting-guestphone{display:none;}

Mobile

.pagetypeajaxbookedit .menusetting-guestmobile{display:none;}

Fax

.pagetypeajaxbookedit .menusetting-guestfax{display:none;}

Address

.pagetypeajaxbookedit .menusetting-guestaddress{display:none;}

City

.pagetypeajaxbookedit .menusetting-guestcity{display:none;}

Postcode

 .pagetypeajaxbookedit .menusetting-guestpostcode{display:none;}

Country

.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}

Country

.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}

Status

.pagetypeajaxbookedit .menusetting-status{display:none;}

Room Selector

.pagetypeajaxbookedit .menusetting-roomid{display:none;}

Flag

.pagetypeajaxbookedit .menusetting-flagtext{display:none;}

Email (under the Email tab)

.pagetypeajaxbookedit .menusetting-guestemail{display:none;}

Hide property name in the BOOKINGS GRID

.bookgrid_rowpropname{display: none;}

Hide a certain colum in the BOOKINGS Table

.pagetypebookings .bookingtable tr > *:nth-child(X) {display: none;}

Hide a certain colum in the RATES Table

.pagetyperates .bookingtable tr> *:nth-child(X)  {display: none;}

Hide a certain colum in the Departues Table on the dashboard

.mobiledeparture tr > *:nth-child(X) {display: none;}

Hide potential issue "Less than 12 months available"

.warninglessthan12monthsavailable{ display: none}

Hide 'Template 2' from Guest Management > Booking Templates

.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}

Reports

Custom CSS can be added in:

• SUB ACCOUNTS > ACCOUNT LIST to apply for all sub accounts
• SUB ACCOUNTS > ACCOUNT LIST > MANAGE ACCOUNT to apply for a specific sub account

Limit selector list for custom reports

Example: Limit the list to reports 1 - 3:

#reportid option:nth-child(n+4){display:none;}