Changes

Jump to navigation Jump to search

Custom CSS

6,891 bytes added, 20 June
__TOC__
= 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"
=== Bigger room name ===
====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)===
To use a background image upload it to {{#fas:cog}} (SETTINGS) > BOOKING 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>
=== Shadow around your Booking Page (Adaptive Booking Page only)===
=== 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>
<span style=color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> 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.
=== Hide icons (Responsive Booking Page only)===
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>
=== Hide "Print Booking" on the confirmation screen===
<code>.conf_p{display:none;}</code>
= MULTIPLE == 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> === 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"
=== Make search criteria always visible ===
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>
= INVOICES and PRINT TEMPLATES =
*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===
<code>.dashcontrol #dashid{display: none !important}</code>
===Hide the "HamburgerPadlock" menu from DASHBOARD===
<code>.dashcontrol .dropdown{display: none !important}</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 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>
 
</code>
 
====Prevent manual entry of charge items ====
<code>.chargenewitemtr input {pointer-events: none;}</code>
 
====Prevent manual entry of payment items ====
<code>.paymentnewitemtr input {pointer-events: none;}</code>
=== Functions and Buttons ===
====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>

Navigation menu