Changes

[[Category:AccountsAccount]][[Category:Booking_Engine]][[Category:Customise_Control_Panel]]<div class="heading">Custom CSS</div> ''This page gives Custom custom CSS examples''which can be used to customize the booking page or the control panel.

= PROPERTY BOOKING PAGE =<span class= Booking Page "" style= "color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> Custom CSS can be added in {{#fas:cog}} (SETTINGS ) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPERS > "Custom CSS"

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

<code> .monthcalendarhead{pointer-events: none;}</code>

<code> .roomoffercalendarmonth{pointer-events: none;}</code>

====Disable clicks only on dates not in pointer selection====<code> .roomoffercalendarmonth .daterequest, .roomoffercalendarmonth .dateavail {pointer-events: none;}</code> === Mark dates days when check-in and/or check-out is not allowed (i.e. for rentals on a weekly basis)===

NOTE: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this function. To highlight when Check-out is not allowed :-  <code> .datenco{background-color:#f4f4f4; color:#cccccc;}</code> To highlight when Check-in is not allowed :-  <code> .datenci{background-color:#f4f4f4; color:#cccccc;}</code> To highlight specific days then set the day with the appropriate colour :-

<code> .datencodaymon{background-color:#f4f4f4592323; color:#cccccc;}</code><code> .daytue{background-color:#592323; color:#cccccc;}</code><code> .daywed{background-color:#592323; color:#cccccc;}</code><code> .daythu{background-color:#592323; color:#cccccc;}</code><code> .dayfri{background-color:#592323; color:#cccccc;}</code><code> .daysat{background-color:#592323; color:#cccccc;}</code><code> .daysun{background-color:#592323; color:#cccccc;}</code>

To use a background image upload it to {{#fas:cog}} (SETTINGS -) > BOOKING PAGE -ENGINE > PICTURES.

Replace '<nowiki>https://www.beds24.com/pic/p0000/2049/04.jpg</nowiki>' with the url of your uploaded picture.

<code> body{background-image:url(<nowiki>https://www.beds24.com/pic/p0000/2049/04.jpg</nowiki>);}</code>

<nowiki>#</nowikicode>.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; }</code>

<nowikicode>#</nowiki>bookingpage{border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px;}</code>

<code>.bookingpagecents {display:none;}</code>

<code>.bookingpagecentshide {display:inline;}</code>

<code>.dayMon{color:#c44a2f !important;}</code>

<code>.dayMon{background-color:#c44a2f !important;}</code>

<code>.daysat{color:#c44a2f !important;}</code>

<code>.daysun{border:1px solid #999999 !important;}</code>

<code>.datestay{border: 1px solid #2f2f2f !important;}</code>

<span class="" style="color: #f3e504; font-size: 150%;" >{{#fas:lightbulb}} </span> If you use split dates the CSS is: <code>.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}</code>

<code>.datenotavail{text-decoration: line-through;}</code>

<code>.datepast{background-color: #xxxxxx; color: #xxxxxx;}</code>

<code>.ui-tooltip{max-width: 500px;}</code>

<code>img{pointer-events: none;}</code>

<code>.roomofferqtyselectlabel{display: block;}</code>

<code>footer .button{display: none;}</code>

<code><nowiki><span class="glyphicon glyphicon-user" aria-hidden="true"></span></nowiki></code> 

<code><nowiki><i class="fa fa-bicycle" aria-hidden="true"></i></nowiki></code> 

<span style=color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> Note: Icons might disappear when the editor is opened again. In this case you will need to enter it again. If you don not show the "Features" module on the booking page you will need to add  <code><link rel="stylesheet" href="include/font-awesome/fontawesome-pro-5.14.0-web/css/all.min.css"></code> in the "Head" section in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER / {{#fas:cog}} (SETTINGS) BOOKING ENGINE > MULTIBOOKING PAGE > DEVELOPER.

<code>.b24fa{display:none;}</code>

<code>#b24scroller .input-group-addon{display:none;}</code>

#topofthebookingpage<code>.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {color: #fffffffff;}</code>

<code>.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {background:white; padding:10px;}</code>

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

<code>#inputnumadult option[value="0"] {display:none !important;}</code>

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

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

<code>.b24-selector-checkin{display:none;}</code>

<code>.b24-selector-checkout{display:none;}</code>

<code>.b24-selector-numnight{display:none;}</code>

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

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

<code>.at_offersummary {display: none;}</code>

<code>.b24-selector-numnight { display: inline-block !important; }</code>

<code>.b24-guest-details-right img {display: none;}</code>

<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code> === Hide "Print Booking" on the confirmation screen===<code>.conf_p{display:none;}</code> === Hide "Click here to make another booking" on the confirmation screen===<code>.bookagainlink{display:none;}</code>  === Adjust alignment for RTL languages (Arabic, Hebrew)=== <code>.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;}</code>

= Multiple Booking Page == Change colors of warnings===<code>.alert-danger { color: #7e7602;background-color: #fcf8bd;border-color: #fcf8bd;}</code> = MULTI PROPERTY BOOKING PAGE =<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> Custom CSS can be added in {{#fas:cog}} (SETTINGS ) > BOOKING PAGE > MULTIPLE PROPERTIES MULTI BOOKING PAGE > DEVELOPERS > "Custom CSS"

<code>#collapseAdvancedSearch{height: auto; display:block !important;}</code>

<code>.b24-agencysearchlink{display:none;}</code>

<code>.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .item {height: 600px;}</code> <code>.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .carousel.slide{height: 500px !important;}</code> === Limit the drop-down list for number of guests ===By default this list goes up to 99. You can limit it with the following code. Substitute X for the desired number + 2. So, if you want the drop-down list to be limited to 10 then X=12. <code>#inputnumadult option:nth-child(n+6){display:none;}</code> <code>#inputnumchild option:nth-child(n+6){display:none;}</code> === Adjust alignment for RTL languages (Arabic, Hebrew)=== <code>.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;}</code> === Hide Property Name ===This will remove the individual property names from the Multi Property booking page.  <code>.at_propnametext {display: none;}</code> = BOOKING WIDGETS =<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> CSS needs to be added directly in your web site

.fullwidthjumboagencyslider .b24fullcontainer===Change the hover-ownerrow1 .b24-owner-slider .carousel.slide{height: 500px !important;}color in the datepicker calendar ===

<code>.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}</code> ===Make only Saturdays clickable in the datepicker calendar ===<code>.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;}</code> = Invoices INVOICES and Print Templates PRINT TEMPLATES =Custom CSS can be added in {{#fas:cog}} (SETTINGS ) > GUEST MANAGEMENT > STYLING > "Custom CSS"

<code>body {text-align: center; font-size: 16px;}</code>

<code>#invoicepropname{font-size: 24px;}</code>

<code>#invoiceaddress{font-size: 18px; padding-bottom: 50px;}</code>

<code>.confirmationtable{font-size: 16px;}</code>

<code>.printbooking2 {margin: 20px;}</code>

<code>#invoicetable{margin-left:auto; margin-right:auto;}</code>

<code>#invoiceprinttime{font-size: 12px;}</code>

<code>#iconedit {display: none;}</code>

 = Control Panel CONTROL PANEL =

*Click on the 'User' icon on the top right and then on 'Account Management (in the old control panel SUB ACCOUNTS > ACCOUNT in the top right) then on ACCOUNT LIST to apply for all sub accounts*Click on the 'User' icon on the top right and then on 'Account Management (in the old control panel SUB ACCOUNTS > ACCOUNT in the top right) then on ACCOUNT LIST > MANAGE ACCOUNT to apply for a specific sub account

==Navigation=Limit the Dashboard selector list on the DASHBOARD====Hide SUPPORT button===Example: Limit it to the first option<code>.navbar-top .btngroupdropdown{display:none}</code>

===Hide page help icon on the right===<code>.pagetypedashboard #dashid option:nthopener-child(n+2)right{display:none;}</code>

===Change header background color===<code>.fixed-top {background-color: #cccccc;}</code> ===Hide "Settings" icon in left column===<code>.#c3sidebarCollapse{display: none !important;} {display: none;}</code> ===Hide "Price Checker Tool" button===<code>.b24btn_PriceCheck {display: none}</code> ===Hide "Try the new calendar" link===<code>.tryTheNewCalendar {display: none;}</code> == Dynamic Multi-Calendar =====Hide "Intelligence" icon===<code>.sticky-left .row-intelligence-button{display: none;}</code>===Hide "HamburgerHelp" icon in left column===<code>.sticky-left .row-help-button {display: none;}</code>===Hide "Notes" icon in left column===<code>.sticky-left .fa-comment-alt-plus, .sticky-left .fa-comment-alt-lines {display: none;}</code>===Display occupancy as color instead of number===<code>.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;}</code>===Change the backgound color of weekends (Saturday/Sunday)===<code>.th-sat, .th-sun {background-color:#ffceaf !important;}</code>===Change the backgound color of past dates===<code>.pastdate{background-color:#d7d7d7;}</code>===Hide Intelligence button===<code>.sticky-left .row-intelligence-button{display: none;}</code>===Hide contect help===<code>.sticky-left .row-help-button {display: none;}</code>===Change color of unavailable dates ===<code>.inv0 { color: blue }</code> ===Change color and background color of daily prices===<code>.price { background-color:#7cc576; color:white;}</code>===Make inventory row read-only===<code>.calendar2 .row-room {pointer-events: none;}</code> ===Make Daily Price row read-only===<code>.row-price{pointer-events: none;}</code> ===Hide the option to create or change views===<code>#view-templates-button{display: none;}</code> ===Disable the option to create or change views===<code>#view-templates-button, #saveViewButton{pointer-events: none;}</code> == Old Calendar =====Hide "Show" in the CALENDAR===<code>.dashgridshowfilter {display:none;}</code> ===Hide "Override row" in the CALENDAR===<code>.dashgrid_rowtype1{display:none;}</code> ===Hide item from dropdown for rooms in the CALENDAR===<code>.dashgrid_rowroomname .dropdown ul.dropdown-menu li:nth-child(3) {display:none !important;}</code> ===Hide suitcase icon (add booking) from CALENDAR===<code>.icon-suitcase, .fa-suitcase {display:none}</code> ===Hide button 'Add Booking' from CALENDAR===<code>.b24btn_AddBooking{display:none}</code> ===Display red when inventory is 0===<code>.inv0 .dashgrid_inventory{color:red;}</code> ===Show weekends (Saturday/Sunday) in a different color===<code>.weekend2{background-color:red;}</code> ===Show a certain day of the week in red===Substitute X with the number of the weekday: Monday=1, Tuesday=2, Wednesday=3, Thursday=4, Friday=5, Saturday=6, Sunday=7 <code>.caldayX{background-color:red;}</code> ===Show today in red===<code>.todaydate{background-color:red;}</code> ===Show past dates in a different color===<code>.pastdate{background-color:grey;}</code> ===Display room name and icons in one line===<code>.dashgrid_rowroomname{display:inline;}</code> <code>.editroomlink{padding-left: 2px;}</code> ===Warning color dates not selling===<code> .dashgrid_inventory_nap{background-color: red; color: white;}</code> == Dashboard =====Hide the Dashboard selector (drop-down menu) from DASHBOARD===<code>.dashcontrol #dashid{display: none !important}</code> ===Hide the "Padlock" menu from DASHBOARD=== <code>.dashcontrol .dropdown{display: none !important}</code> === Hide a certain column in the Departures Table on the DASHBOARD===<code>.mobiledeparture tr > *:nth-child(X) {display: none;}</code>

<code>.mobiledashaddbooking{display:none;}</code>

===Hide room on Housekeeping Units and Housekeeping Bookings modules==== .widgettype-units .roomrowclassXXX {display: none;} /* replace XXX with the room ID*/ ===Hide column on the dashboard tables===Change the blue Login button on child number in brackets to the desired column.  <code>.dashboardtable th:nth-child(9) {display:none;}</code> ==Align the initial Beds24 page content of a column right==<code> .bookingtable td:nth-child(resellers only8){text-align: right;} </code> == Guests Menu == === Hide a certain row in the "Info" tab on GUESTS===<code>.pagetypelogin pagetypeguests .b24btn_Loginviewguest .table tr:nth-child(x) {background-colordisplay:#xxxxxxnone;}</code>

== Bookings Menu ===== Hide property name in the "Make a Charge using Stripe" button BOOKING GRID === <code>.makechargeusinglbookgrid_rowpropname{display:none;}</code>

=== Hide property room name in the BOOKINGS BOOKING GRID === <code>.bookgrid_rowpropnamebookgrid_rowroomname{display: none;}</code>

=== Hide a certain colum column in the BOOKINGS BOOKING LIST Table === <code>.pagetypebookingslist .bookingtable tr > *:nth-child(X) {display: none;}</code>

ExampleExamples: <code>.pagetypebookingslist .bookingtable tr > *:nth-child(1) {display: none;}</code> will hide the first column which is 'Number'. <code>.pagetypebookingslist .bookingtable tr > *:nth-child(10) {display: none;}</code> will hide the first tenth column which is 'NumberEmail'. ===Hide column on the BOOKINGS table===Change the child number in brackets to the desired column.  <code> .bookingtable th:nth-child(12) {display:none;} </code>

<code>.bookingtable .cancelbooking {display:none;}</code> === Hide "Export" button ===<code>.b24btn_ExportBookings {display:none;}</code> ===Disable moving of bookings===<code> .pagetypebookingsgrid table {pointer-events: none;}</code> == Rates Menu =====Hide column on the rates table===Change the child number in brackets to the desired column.  <code> .ratetable th:nth-child(9) {display:none;} </code> == Reports Menu ===== Limit selector list for custom reports === Example: Limit the list to reports 1 - 3: <code>#reportid option:nth-child(n+4){display:none;}</code> === Hide a certain field from 'Available Columns' ===

=== Example: Hide a certain colum in the RATES Table === .pagetyperates .bookingtable tr> *:nth-child(X) {display: none;}'Email' field

=== Hide a certain colum in the Departues Table on the dashboard=== <code>.mobiledeparture tr > *:nth-child(X) pagetypereports2 #guestemail {display: none;}</code>

== Settings Menu ===== Hide a certain row in the "InfoDelete" tab on GUESTSbutton for properties === <code>.pagetypeproperties .pagetypeguests b24btn_delete{display:none;}</code> ==Booking Popup=====Hide 'Open in new Window' link===<code>.viewguest pagetypeajaxbookedit.table tr:nth-child(x) openinnewwindow{display: none; }</code>

=== Charges & Payments ======= Hide potential issue "Less than 12 months available"the VAT column==== <code>.pagetypeajaxbookedit .warninglessthan12monthsavailableinvoicetablevat { display: none;}</code>

=== Hide 'Template 2' from Guest Management > Booking Templates === .pagetypecommunicationbooktemplate #settingformid .background_boxpropPlease note:nth-of-typeThis will not hide the title column (2Vat %){display:none;}. See for yourself if you can live with it.

==BOOKING POPUP==Prevent manual entry of charge items ====<code>.chargenewitemtr input {pointer-events: none;}</code>

===Hide Open in new Window link=Prevent manual entry of payment items ==== .pagetypeajaxbookedit<code>.openinnewwindowpaymentnewitemtr input {displaypointer-events:none;}</code>

<code>.pagetypeajaxbookedit #checkout{display:none;}</code>

<code>.pagetypeajaxbookedit .deletebookingbutton{display:none;}</code>

<code>.icon-suitcase, .b24btn_AddBooking{display:none;}</code>

<code>.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;}</code>

<code>.pagetypeajaxbookedit #bookingprintbutton{display:none;}</code> ====Hide the 'Assign Invoice Number' button====<code>.pagetypeajaxbookedit .b24btn_AssignInvoiceNumber{display:none;}</code> German control panel:  <code>.pagetypeajaxbookedit .b24btn_Rechnungsnummererzeugen{display:none;}</code>

<code>.pagetypeajaxbookedit #bookingtemplate1button{display:none;}</code> <code>.pagetypeajaxbookedit #bookingtemplate2button{display:none;}</code>

<code>.pagetypeajaxbookedit #bookingtemplate2buttonbookingtemplate3button{display:none;}</code>

====Hide the 'Continue anyway' buttons====<code>.pagetypeajaxbookedit #bookingtemplate3buttonstatusmsg .btn{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guestname{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guestcomments{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-hostcomments{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-numadults{display:none;}</code> Children <code>.pagetypeajaxbookedit .menusetting-numchild{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guestphone{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guestmobile{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guestfax{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guestaddress{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-guestcity{display:none;}</code>

Country <code>.pagetypeajaxbookedit .menusetting-guestcountryguestpostcode{display:none;}</code>

Country (manual entry) <code>.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}</code> Country (drop-down list) <code>.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-status{display:none;}</code>

<code>.pagetypeajaxbookedit .menusetting-roomid{display:none;}</code>  ====TAB Detail====Message <code>.pagetypeajaxbookedit .menusetting-hostmessage{display:none;}</code> Custom Questions (X = number of custom question) <code>.pagetypeajaxbookedit .menusetting-guestcustqX{display:none;}</code> Reference <code>.pagetypeajaxbookedit .menusetting-ownerreference{display:none;}</code> Quantity <code>.pagetypeajaxbookedit .menusetting-qty{display:none;}</code> Cancellable <code>.pagetypeajaxbookedit .menusetting-stopcancel{display:none;}</code>

Email (under the Email tab) <code>.pagetypeajaxbookedit .menusetting-guestemailflagtext{display:none;}</code> Status Code

Created in Account <code>.pagetypeajaxbookedit .menusetting-Createdinaccount{display:none;}</code> Original Referrer <code>.pagetypeajaxbookedit .menusetting-OriginalReferrer{display:none;}</code> Time Entered <code>.pagetypeajaxbookedit .menusetting-TimeEntered{display:none;}</code> IP Address <code>.pagetypeajaxbookedit .menusetting-IPAddress{display:none;}</code> API Message <code>.pagetypeajaxbookedit .menusetting-apimessage{display:none;}</code> Guest Database <code>.pagetypeajaxbookedit .menusetting-isguest{display:none;}</code> ====TAB Mail & Actions====Email <code>.pagetypeajaxbookedit .menusetting-guestemail{display:none;}</code> ==Add Booking======Prevent price to be changed====<code>..pagetypeajaxbookedit .menusetting-unitprice, .pagetypeajaxbookedit .menusetting-price { pointer-events: none;}</code> ==Reports == <span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> Custom CSS can be added in {{#fas:cog}} (SETTINGS) > GUEST MANAGEMENT > STYLING > "Custom CSS" ===Hide a the "ShowBooking Notes" column in the CALENDARDaily Unit Activity report=== <code>.dashgridshowfilter reportdailyunitactivity th > *:nth-child(9) {display:none;}</code>

===Hide "Override row" in the CALENDAR=== <code>.dashgrid_rowtype1reportdailyunitactivity td > *:nth-child(9) {display:none;}</code>

==Miscellaneous =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 Change the blue Login button on the initial Beds24 page (add bookingresellers only) and the button 'Add Booking' from CALENDAR=== <code>.icon-suitcase, pagetypelogin .b24btn_AddBookingb24btn_Login{displaybackground-color:none#xxxxxx;}</code>

= Reports == Hide the "Stripe" button ===Custom CSS can be added in<code>#makechargeusing{display:*SUB ACCOUNTS > ACCOUNT LIST to apply for all sub accounts*SUB ACCOUNTS > ACCOUNT LIST none;}</code> MANAGE ACCOUNT to apply for a specific sub account

=== Limit selector list for custom reports Hide potential issue "Too many guests in booking xxxxx"===<code>..warningunitnotassigned{ display: none}</code>

Example=== Hide 'Template 2' from Guest Management > Booking Templates ===<code>.pagetypecommunicationbooktemplate #settingformid .background_boxprop: Limit the list to reports 1 nth- 3of-type(2){display:none;}</code>

#reportid === Hide the option:nthto unlock invoices===<code>.menusetting-child(n+4)invoicelock {display:none;}</code>