Jump to navigation Jump to search

Custom CSS

6,026 bytes added, 20 June
====Disable clicks on dates====
<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 when check-out is not allowed (i.e. for rentals on a weekly basis)===
=== Add a border around the selected dates===
<code>.datestay{border: 1px solid #2f2f2f !important;}</code>
<span class="" style="color: #f3e504; font-size: 250150%;" >{{#fas:lightbulb}} </span> If you use split dates the CSS is:
<code>.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}</code>
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>
=== Hide "Print Booking" on the confirmation screen===
=== Hide "Click here to make another booking" on the confirmation screen===
=== Adjust alignment for RTL languages (Arabic, Hebrew)===
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 colors of warnings===
<code>.alert-danger {
color: #7e7602;
background-color: #fcf8bd;
border-color: #fcf8bd;
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+X6){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> = BOOKING WIDGETS =<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> CSS needs to be added directly in your web site ===Change the hover-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>
*Click on the 'User' icon on the top right and then on 'Account Management (in the old control panel SUB ACCOUNT in the top right) then on ACCOUNT LIST > MANAGE ACCOUNT to apply for a specific sub account
== Navigation=====Hide SUPPORT button===<code>.navbar-top .btngroupdropdown{display: none}</code> ===Hide page help icon on the right===<code>.opener-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 "Help" 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: red }</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> ===Disable the option to create or change views===<code>#view-templates-button{pointer-events: none;}</code>
== Old Calendar ==
===Hide "Show" in the CALENDAR===
<code>.dashgridshowfilter {display:none;}</code>
===Hide suitcase icon (add booking) from CALENDAR===
<code>.icon-suitcase, .fa-suitcase {display:none}</code>
===Hide button 'Add Booking' from CALENDAR===
.widgettype-units .roomrowclassXXX {display: none;} /* replace XXX with the room ID*/
===Hide column on the dashboard tables===
Change the child number in brackets to the desired column.
<code>.dashboardtable th:nth-child(9) {display:none;}</code>
<code>.dashboardtable td:nth-child(9) {display:none;}</code> ===Align the content of a column right===
<code> .bookingtable td:nth-child(8) {text-align: right;} </code>
=== Hide a certain row in the "Info" tab on GUESTS===
<code>.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; }</code>
== Bookings Menu ==
Change the child number in brackets to the desired column.
<code> .bookingtable th:nth-child(12) {display:none;} </code>  <code> .bookingtable td:nth-child(12) {display:none;} </code>
=== Hide cancelled bookings in the BOOKINGS Table ===
=== Hide "Export" button ===
<code>.b24btn_ExportBookings {display:none;}</code>
===Disable moving of bookings===
<code> .pagetypebookingsgrid table {pointer-events: none;}</code>
== Rates Menu ==
Change the child number in brackets to the desired column.
<code> .ratetable th:nth-child(9) {display:none;} </code>  <code> .ratetable td:nth-child(9) {display:none;} </code>  
== Reports Menu ==
=== Hide the "Delete" button for properties ===
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>
==Booking Popup==
Please note: This will not hide the title column (Vat %). See for yourself if you can live with it.
====Prevent invoice items being deleted====
<code>.tr_invoicee .btn-danger, #groupinvoicebulkaction option[value="1"] {display:none !important;}</code>
====Prevent manual entry of charge items ====
====Hide the 'Assign Invoice Number' button====
<code>.pagetypeajaxbookedit .b24btn_AssignInvoiveNumberb24btn_AssignInvoiceNumber{display:none;}</code>
German control panel:
====Hide the 'Continue anyway' buttons====
<code>.statusmsg .btn{display: none}</code>
====Prevent changes of the "Status" field"====
.menusetting-status{pointer-events: none;}
=== Hide Specific Fields ===
<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 ==
=== Hide potential issue "Less than 12 months available"===
<code>.warninglessthan12monthsavailable{ display: none}</code>
=== Hide potential issue "Too many guests in booking xxxxx"===
<code>..warningunitnotassigned{ display: none}</code>
=== Hide 'Template 2' from Guest Management > Booking Templates ===
<code>.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}</code>
=NEW CONTROL PANEL===Navigation=====Hide SUPPORT button===<code>.navbar-top .btngroupdropdown{display: none}</code> ===Hide page help icon on the rightoption to unlock invoices===<code>.openermenusetting-rightinvoicelock {display: none}</code> ===Change header background color===<code>.fixed-top {background-color: #cccccc;}</code>

Navigation menu