17,539
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__
= PROPERTY BOOKING PAGE Booking Engine === Property Booking Page ==
<span class="" 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"
=== Force the Iframe to have a certain height ===
/* Style for Extra Large Screen */
@media (max-width:1199px) {
iframe {
height: 292px;
}
}
/* Style for Large Screen */
@media (max-width:991px) {
iframe {
height: 2000px;
}
}
/* Style for Medium Screen */
@media (max-width:767px) {
iframe {
height: 2200px;
}
}
/* Style for Small Screen */
@media (max-width:575px) {
iframe {
height: 2500px;
}
}
=== Bigger room name ===
.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.
To highlight when Check-in is not allowed :-
<code> .datencodatenci{background-color:#f4f4f4; color:#cccccc;}</code>
To highlight specific days then set the day with the appropriate colour :-
=== Hide "Click here to make another booking" on the confirmation screen===
<code>.bookagainlink{display:none;}</code>
=== Adjust alignment for RTL languages (Arabic, Hebrew)===
</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 > MULTI BOOKING PAGE > DEVELOPERS > "Custom CSS"
</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
<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>.bookingtable .cancelbooking {display:none;}</code>
=== Hide "ExportBookings" button buttons ===<code>.b24btn_ExportBookings bookingfilterheadline .floatright .btn {display:none;}</code>
===Disable moving of bookings===
<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"===
