17,539
edits
Changes
Jump to navigation
Jump to search
=NEW CONTROL PANEL=
==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>
<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 dates 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.
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> .daymon{background-color:#592323; 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>
=== Background Image ===
=== 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>
=== Hide option to collect credit cards from Booking page if you want to use this option only for requests via Email===
<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>
== 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"
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>
=== 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>.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 and PRINT TEMPLATES =
<code>#iconedit {display: none;}</code>
=== Align all table content right ===
<code>.conf_subheadercenter, .conf_numbercenter{text-align: right !important;}</code>
= CONTROL PANEL =
*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 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 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 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 "SettingsIntelligence" icon in left column===<code>.sticky-left .farow-ellipsisintelligence-h 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
color: transparent;
}</code>
===Change the backgound color of weekends (Saturday/Sunday)===
<code>.weekend2th-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 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> ===Change background and font color for "Unallocated" bookings===<code>..pagetypecalendar2 .overflow-unit{ background-color:#7cc576FEE0DD; color:white#9E4843;}</code> ===Hide the option to create or change views===<code>#view-templates-button{display: none;}</code>
===Make inventory row read-onlyDisable the option to create or change views===<code>..calendar2 .row#view-templates-room button, #saveViewButton{
pointer-events: 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>
===Hide Edit button in the Notes component===Change the child number in brackets to the desired column. <code>#dashboardnotea .dashboardtable td:nth-child(9) 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===
Change the child number in brackets to the desired column.
<code> .bookingtable th:nth-child(12) {display:none;} </code>
===Hide cancelled bookings BOOKINGS list===<code> .bookingtable pagetypebookingslist td:nth-child(12) .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.
<code> .ratetable th:nth-child(9) {display:none;} </code> <code> .ratetable td:nth-child(9) {display:none;} </code>
== Reports Menu ==
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>
=== Hide the "Delete" button for rooms ===
<code>.pagetyperooms .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>
</code>
====Prevent manual entry of charge items ====
====Hide the 'Assign Invoice Number' button====
<code>.pagetypeajaxbookedit .b24btn_AssignInvoiveNumberb24btn_AssignInvoiceNumber{display:none;}</code>
German control panel:
<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 ==
<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"===
<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 ===
=== Hide the option to unlock invoices===
<code>.menusetting-invoicelock {display:none;}</code>
