17,548
edits
Changes
Jump to navigation
Jump to search
<div class="heading">Custom CSS</div>
This page gives custom CSS examples which can be used to customize the booking page or the control panel.
__TOC__
.roomoffercalendarmonth .dateavail {pointer-events: none;}</code>
=== Mark days when check-in and/or check-out is not allowed (i.e. for rentals on a weekly basis)in the offer calendar===
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.
}
</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 =
<code>#iconedit {display: none;}</code>
=== Align all table content right ===
<code>.conf_subheadercenter, .conf_numbercenter{text-align: right !important;}</code>
= CONTROL PANEL =
===Hide "Help" icon in left column===
<code>.sticky-left .row-help-button {display: none;}</code>
===Hide Drag&Drop option===
<code>#dragDropButton {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>
===Hide "Intelligence" icon===
<code>.sticky-left .row-intelligence-button{display: none;}</code>
===Hide Group booking icons===
<code>.fa-circle{display: none;}</code>
===Display occupancy as color instead of number===
<code>.calendar2 .property-stats-wrapper
pointer-events: none;
}</code>
===Change background and font color for "Unallocated" bookings===
<code>..pagetypecalendar2 .overflow-unit{ background-color: #FEE0DD; color: #9E4843;}</code>
===Hide the option to create or change views===
<code>.dashboardtable th:nth-child(9) {display:none;}</code>
===Hide Edit button in the Notes component===
Change the child number in brackets to the desired column.
<code>#dashboardnotea .btn {display:none;}</code>
==Align the content of a column right==
=== Hide room name in the BOOKING GRID ===
<code>.bookgrid_rowroomname{display: none;}</code>
=== Hide room name in the BOOKING GRID ===
<code>. pagetypebookingsgrid .todaydate{font-weight:bold;}</code>
=== Hide a certain column in the BOOKING LIST Table ===
Examples:
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(12) {display: none;}</code> will hide the first column which is 'Number'.
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(1011) {display: none;}</code> will hide the tenth column which is 'Email'.
===Hide column on the BOOKINGS table===
<code> .bookingtable th:nth-child(12) {display:none;} </code>
===Hide cancelled bookings BOOKINGS list===
<code>.pagetypebookingslist .cancelbooking{display:none;} </code>
=== Hide cancelled bookings in the BOOKINGS Table ===
<code> .pagetypebookingsgrid table {pointer-events: none;}</code>
== Rates Fixed Prices Menu =====Hide column on the rates Fixed Prices table===
Change the child number in brackets to the desired column.
=== Hide the "Delete" button for properties ===
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>
=== Hide the "Delete" button for rooms ===
<code>.pagetyperooms .b24btn_delete{display:none;}</code>
==Booking Popup==
<code>.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}</code>
=== Hide the "Make a Charge using Stripe" button ===
<code>#makechargeusing{display:none;}</code>
=== Hide the Stripe "Refund" button ===
<code>#b24btn_Refund{display:none;}</code>
If your are using the control panel in another language than English you might need to replace the word Refund with what you see on the button.
=== Hide potential issue "Less than 12 months available"===
