Custom CSS lets you hide or restyle parts of the Beds24 control panel, for example to hide buttons, make calendar rows read-only or hide fields in the booking popup for staff in a sub account. Add the CSS in Account Management and use the examples below.
Required skills: CSS. For CSS that changes the booking page, widgets and invoices, see How to use Custom CSS.
Where to add the CSS
- To apply it to all sub accounts: click the User icon at the top right, then Account Management (in the old control panel Sub Account at the top right), then Account List.
- To apply it to a specific sub account: click the User icon at the top right, then Account Management (in the old control panel Sub Account at the top right), then Account List > Manage Account.
Contents
Navigation
| Change |
CSS |
| Hide Support button |
.navbar-top .btngroupdropdown{display: none} |
| Hide page help icon on the right |
.opener-right{display: none} |
| Change header background color |
.fixed-top {background-color: #cccccc;} |
| Hide "Settings" icon in left column |
#c3sidebarCollapse {display: none !important;} |
| Hide "Price Checker Tool" button |
.b24btn_PriceCheck {display: none} |
| Hide "Try the new calendar" link |
.tryTheNewCalendar {display: none;} |
| Hide 'Add Booking' button |
.b24btn_AddBooking{display:none} |
| Hide 'Desktop icon' button |
.fa-desktop{display:none} |
Calendar
These examples are for the dynamic multi-calendar.
| Change |
CSS |
| Hide hover text from prices |
.ui-tooltip { display:none !important; } |
| Hide "Intelligence" icon |
.sticky-left .row-intelligence-button{display: none;} |
| Hide "Help" icon in left column |
.sticky-left .row-help-button {display: none;} |
| Hide the drag & drop option |
#dragDropButton {display: none;} |
| Hide "Notes" icon in left column |
.sticky-left .fa-comment-alt-plus, .sticky-left .fa-comment-alt-lines {display: none;} |
| Hide Group booking icons |
.fa-circle{display: none;} |
| Change the background color of weekends (Saturday/Sunday) |
.th-sat, .th-sun {background-color:#ffceaf !important;} |
| Change the background color of past dates |
.pastdate{background-color:#d7d7d7;} |
| Change color of unavailable dates |
.inv0 { color: #0000FF !important; } |
| Change the colour and background colour of daily prices |
.price { background-color:#7cc576; color:white;} |
| Change the background and font colour for "Unallocated" bookings |
.pagetypecalendar2 .overflow-unit{ background-color: #FEE0DD; color: #9E4843;} |
| Show today in red |
.today-header{background-color:red !important;} |
Display occupancy as a colour instead of a number
.calendar2 .property-stats-wrapper
{margin-top: 5px;}
.calendar2 .property-stats-wrapper.empty {
display: inline-block;
background-color: #7AAB0A;
height: 10px;
width: 10px;
border-radius: 50%;
color: transparent;
}
.calendar2 .property-stats-wrapper.medium {
display: inline-block;
background-color: #fe746c;
height: 10px;
width: 10px;
border-radius: 50%;
color: transparent;
}
Make rows read-only
Make the inventory row read-only:
.calendar2 .row-room {
pointer-events: none;
}
Make the Daily Price row read-only:
.row-price{
pointer-events: none;
}
Hide or disable views
Hide the option to create or change views:
#view-templates-button{
display: none;
}
Disable the option to create or change views:
#view-templates-button, #saveViewButton{
pointer-events: none;
}
Old calendar
| Change |
CSS |
| Hide "Show" in the calendar |
.dashgridshowfilter {display:none;} |
| Hide "Override row" in the calendar |
.dashgrid_rowtype1{display:none;} |
| Hide item from dropdown for rooms in the calendar |
.dashgrid_rowroomname .dropdown ul.dropdown-menu li:nth-child(3) {display:none !important;} |
| Hide suitcase icon (add booking) from calendar |
.icon-suitcase, .fa-suitcase {display:none} |
| Hide the 'Add Booking' button from the calendar |
.b24btn_AddBooking{display:none} |
| Display red when inventory is 0 |
.inv0 .dashgrid_inventory{color:red;} |
| Show weekends (Saturday/Sunday) in a different color |
.weekend2{background-color:red;} |
| Show a certain day of the week in red (replace X with the number of the weekday: Monday=1, Tuesday=2, Wednesday=3, Thursday=4, Friday=5, Saturday=6, Sunday=7) |
.caldayX{background-color:red;} |
| Show today in red |
.todaydate{background-color:red;} |
| Show past dates in a different color |
.pastdate{background-color:grey;} |
| Display room name and icons in one line |
.dashgrid_rowroomname{display:inline;}
.editroomlink{padding-left: 2px;}
|
| Warning color dates not selling |
.dashgrid_inventory_nap{background-color: red; color: white;} |
Dashboard
| Change |
CSS |
| Hide the Dashboard selector (drop-down menu) from dashboard |
.dashcontrol #dashid{display: none !important} |
| Hide the "Padlock" menu from dashboard |
.dashcontrol .dropdown{display: none !important} |
| Hide a certain column in the Departures table on the dashboard (replace X with the column number) |
.mobiledeparture tr > *:nth-child(X) {display: none;} |
| Hide the "Add Booking" from mobile dashboard |
.mobiledashaddbooking{display:none;} |
| Hide a room on the Housekeeping Units and Housekeeping Bookings modules (replace XXX with the room ID) |
.widgettype-units .roomrowclassXXX {display: none;} /* replace XXX with the room ID*/ |
| Hide a column on the dashboard tables (change the number in brackets to the column you want) |
.dashboardtable th:nth-child(9) {display:none;} |
| Hide the Edit button in the Notes component |
#dashboardnotea .btn {display:none;} |
Guests menu
| Change |
CSS |
| Hide a certain row in the "Info" tab on Guests (replace x with the row number) |
.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; } |
Bookings menu
| Change |
CSS |
| Hide property name in the booking grid |
.bookgrid_rowpropname{display: none;} |
| Hide room name in the booking grid |
.bookgrid_rowroomname{display: none;} |
| Show today in bold in the booking grid |
.pagetypebookingsgrid .todaydate{font-weight:bold;} |
| Hide a column on the Bookings table (change the number in brackets to the column you want) |
.bookingtable th:nth-child(12) {display:none;} |
| Align the content of a column right in the Bookings table |
.bookingtable td:nth-child(8) {text-align: right;} |
| Hide cancelled bookings in the Bookings list |
.pagetypebookingslist .cancelbooking{display:none;} |
| Hide cancelled bookings in the Bookings table |
.bookingtable .cancelbooking {display:none;} |
| Hide "Export Bookings" buttons |
.bookingfilterheadline .floatright .btn {display:none;} |
| Disable moving of bookings |
.pagetypebookingsgrid table {pointer-events: none;} |
Hide a certain column in the Booking List table
Replace X with the column number:
.pagetypebookingslist .bookingtable tr > *:nth-child(X) {display: none;}
| Example |
CSS |
| Hide the first column, which is 'Number' |
.pagetypebookingslist .bookingtable tr > *:nth-child(2) {display: none;} |
| Hide the tenth column, which is 'Email' |
.pagetypebookingslist .bookingtable tr > *:nth-child(11) {display: none;} |
Fixed Prices menu
| Change |
CSS |
| Hide a column on the Fixed Prices table (change the number in brackets to the column you want) |
.ratetable th:nth-child(9) {display:none;} |
Reports menu
| Change |
CSS |
| Limit the selector list for custom reports (example: reports 1 - 3) |
#reportid option:nth-child(n+4){display:none;} |
| Hide a certain field from 'Available Columns' (example: the 'Email' field) |
.pagetypereports2 #guestemail {display: none;} |
Settings menu
| Change |
CSS |
| Hide the "Delete" button for properties |
.pagetypeproperties .b24btn_delete{display:none;} |
| Hide the "Delete" button for rooms |
.pagetyperooms .b24btn_delete{display:none;} |
| Change |
CSS |
| Hide the 'Overview' tab |
.gotobookingoverview{display:none;} |
| Hide 'Open in new Window' link |
.pagetypeajaxbookedit.openinnewwindow{display:none;} |
Charges and payments
| Change |
CSS |
| Hide the VAT column (this doesn't hide the title column, Vat %) |
.pagetypeajaxbookedit .invoicetablevat {display: none;} |
| Prevent invoice items being deleted |
.tr_invoicee .btn-danger, #groupinvoicebulkaction option[value="1"] {display:none !important;} |
| Prevent manual entry of charge items |
.chargenewitemtr input {pointer-events: none;} |
| Prevent manual entry of payment items |
.paymentnewitemtr input {pointer-events: none;} |
| Change |
CSS |
| Hide the checkout selector |
.pagetypeajaxbookedit #checkout{display:none;} |
| Hide the 'Delete' button |
.pagetypeajaxbookedit .deletebookingbutton{display:none;} |
| Hide the 'Add Booking' button |
.icon-suitcase, .b24btn_AddBooking{display:none;} |
| Hide the 'Copy as new' button |
.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;} |
| Hide the 'Print' button |
.pagetypeajaxbookedit #bookingprintbutton{display:none;} |
| Hide the 'Assign Invoice Number' button |
.pagetypeajaxbookedit .b24btn_AssignInvoiceNumber{display:none;} |
| Hide the 'Assign Invoice Number' button (German control panel) |
.pagetypeajaxbookedit .b24btn_Rechnungsnummererzeugen{display:none;} |
| Hide the 'Template' buttons |
.pagetypeajaxbookedit #bookingtemplate1button{display:none;}
.pagetypeajaxbookedit #bookingtemplate2button{display:none;}
.pagetypeajaxbookedit #bookingtemplate3button{display:none;}
|
| Hide the 'Continue anyway' buttons |
.statusmsg .btn{display: none} |
| Prevent changes to the "Status" field |
.menusetting-status{pointer-events: none;} |
Hide specific fields
Summary tab
| Field |
CSS |
| 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 (manual entry) |
.pagetypeajaxbookedit .menusetting-guestcountry{display:none;} |
| Country (drop-down list) |
.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;} |
| Status |
.pagetypeajaxbookedit .menusetting-status{display:none;} |
| Room Selector |
.pagetypeajaxbookedit .menusetting-roomid{display:none;} |
Detail tab
| Field |
CSS |
| Message |
.pagetypeajaxbookedit .menusetting-hostmessage{display:none;} |
| Custom Questions (X = number of custom question) |
.pagetypeajaxbookedit .menusetting-guestcustqX{display:none;} |
| Reference |
.pagetypeajaxbookedit .menusetting-ownerreference{display:none;} |
| Quantity |
.pagetypeajaxbookedit .menusetting-qty{display:none;} |
| Cancellable |
.pagetypeajaxbookedit .menusetting-stopcancel{display:none;} |
| Flag |
.pagetypeajaxbookedit .menusetting-flagtext{display:none;} |
| Status Code |
.pagetypeajaxbookedit .menusetting-statuscode{display:none;} |
| Created in Account |
.pagetypeajaxbookedit .menusetting-Createdinaccount{display:none;} |
| Original Referrer |
.pagetypeajaxbookedit .menusetting-OriginalReferrer{display:none;} |
| Time Entered |
.pagetypeajaxbookedit .menusetting-TimeEntered{display:none;} |
| IP Address |
.pagetypeajaxbookedit .menusetting-IPAddress{display:none;} |
| API Message |
.pagetypeajaxbookedit .menusetting-apimessage{display:none;} |
| Guest Database |
.pagetypeajaxbookedit .menusetting-isguest{display:none;} |
Mail & Actions tab
| Field |
CSS |
| Email |
.pagetypeajaxbookedit .menusetting-guestemail{display:none;} |
Add booking
| Change |
CSS |
| Prevent the price from being changed |
.pagetypeajaxbookedit .menusetting-unitprice, .pagetypeajaxbookedit .menusetting-price { pointer-events: none;} |
Miscellaneous
| Change |
CSS |
| Change the blue Login button on the initial Beds24 page (resellers only) |
.pagetypelogin .b24btn_Login{background-color:#xxxxxx;} |
| Hide the "Stripe" button |
#makechargeusing{display:none;} |
| Hide the Stripe "Refund" button (if you use the control panel in a language other than English, you might need to replace the word Refund with the text on the button) |
#b24btn_Refund{display:none;} |
| Hide potential issue "Less than 12 months available" |
.warninglessthan12monthsavailable{ display: none} |
| Hide potential issue "Too many guests in booking xxxxx" |
.warningunitnotassigned{ display: none} |
| Hide 'Template 2' from Guest Management > Booking Templates |
.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;} |
| Hide the option to unlock invoices |
.menusetting-invoicelock {display:none;} |
Related Articles