Difference between revisions of "Custom CSS"

From Beds24 Wiki
Jump to navigation Jump to search
(93 intermediate revisions by 5 users not shown)
Line 4: Line 4:
 
[[Category:Account]]
 
[[Category:Account]]
 
[[Category:Booking_Engine]]
 
[[Category:Booking_Engine]]
 
+
[[Category:Customise_Control_Panel]]
  ''This page gives Custom CSS examples''
+
<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__
 
__TOC__
 
+
= PROPERTY BOOKING PAGE =
= 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"
 
 
  Custom CSS can be added in SETTINGS > BOOKING ENGINE > DEVELOPERS > "Custom CSS"
 
  
 
=== Bigger room name ===
 
=== Bigger room name ===
.at_roomnametext{font-size: 14px;} /*if you want the text even bigger use a higher number*/
+
<code> .at_roomnametext{font-size: 14px;} /*if you want the text even bigger use a higher number*/</code>
  
 
=== Disable clicks on calendar selector===
 
=== Disable clicks on calendar selector===
  
 
====Disable month back-and-forth toggle====
 
====Disable month back-and-forth toggle====
.monthcalendarhead{pointer-events: none;}
+
<code> .monthcalendarhead{pointer-events: none;}</code>
  
 
====Disable clicks on dates====
 
====Disable clicks on dates====
.roomoffercalendarmonth{pointer-events: none;}
+
<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)===
 
=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis)===
Line 29: Line 32:
 
NOTE: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this function.
 
NOTE: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this function.
  
.datenco{background-color:#f4f4f4; color:#cccccc;}
+
<code> .datenco{background-color:#f4f4f4; color:#cccccc;}</code>
  
 
=== Background Image  ===
 
=== Background Image  ===
To use a background image upload it to SETTINGS -> BOOKING ENGINE -> PICTURES.
+
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.
+
Replace '<nowiki>https://beds24.com/pic/p0000/2049/04.jpg</nowiki>' with the url of your uploaded picture.
  
body{background-image:url(<nowiki>https://www.beds24.com/pic/p0000/2049/04.jpg</nowiki>);}
+
<code> body{background-image:url(<nowiki>https://beds24.com/pic/p0000/2049/04.jpg</nowiki>);}</code>
  
 
=== Shadow around your Booking Page (Adaptive Booking Page only)===
 
=== Shadow around your Booking Page (Adaptive Booking Page only)===
<nowiki>#</nowiki>bookingpage {
+
<code>.bookingpage {
-webkit-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);
+
webkit-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);
-moz-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);
+
-moz-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38);  
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
+
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 10, 10, 0.38);
+
box-shadow: 0 1px 2px rgba(0, 10, 10, 0.38);
margin-bottom: 20px;
+
margin-bottom: 20px;}</code>
}
 
  
 
=== Booking Page with rounded corners (Adaptive Booking Page only)===
 
=== Booking Page with rounded corners (Adaptive Booking Page only)===
<nowiki>#</nowiki>bookingpage{border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px;}
+
<code>{border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px;}</code>
  
 
=== Hide cents===
 
=== Hide cents===
.bookingpagecents {display:none;}
+
<code>.bookingpagecents {display:none;}</code>
  
 
=== Show prices with cents even if cents are zero ===
 
=== Show prices with cents even if cents are zero ===
.bookingpagecentshide {display:inline;}
+
<code>.bookingpagecentshide {display:inline;}</code>
  
 
=== Mark certain fields in the calendar selector===
 
=== Mark certain fields in the calendar selector===
Line 66: Line 68:
 
Example 1: Set the font color for the weekday heading of Monday ('Mon')
 
Example 1: Set the font color for the weekday heading of Monday ('Mon')
  
.dayMon{color:#c44a2f !important;}
+
<code>.dayMon{color:#c44a2f !important;}</code>
  
  
 
Example 2: Set the background color for the weekday heading of Monday ('Mon')
 
Example 2: Set the background color for the weekday heading of Monday ('Mon')
  
.dayMon{background-color:#c44a2f !important;}
+
<code>.dayMon{background-color:#c44a2f !important;}</code>
  
  
 
Example 3: Set the font color for all the dates that fall on a Saturday
 
Example 3: Set the font color for all the dates that fall on a Saturday
  
.daysat{color:#c44a2f !important;}
+
<code>.daysat{color:#c44a2f !important;}</code>
  
  
 
Example 4: Add a border around all the dates that fall on a Sunday
 
Example 4: Add a border around all the dates that fall on a Sunday
  
.daysun{border:1px solid #999999 !important;}
+
<code>.daysun{border:1px solid #999999 !important;}</code>
  
 
=== Add a border around the selected dates===
 
=== Add a border around the selected dates===
.datestay{border: 1px solid #2f2f2f !important;}
+
<code>.datestay{border: 1px solid #2f2f2f !important;}</code>
 
 
 
   
 
   
  If you use split dates the CSS is:
+
<span class="" style="color: #f3e504; font-size: 150%;" >{{#fas:lightbulb}} </span> If you use split dates the CSS is:
.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}
+
<code>.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}</code>
  
 
=== Line through unavailable dates===
 
=== Line through unavailable dates===
.datenotavail{text-decoration: line-through;}
+
<code>.datenotavail{text-decoration: line-through;}</code>
  
 
=== Mark past dates with a different background and text colour===
 
=== Mark past dates with a different background and text colour===
.datepast{background-color: #xxxxxx; color: #xxxxxx;}
+
<code>.datepast{background-color: #xxxxxx; color: #xxxxxx;}</code>
  
 
=== Change width of hover image (Adaptive Booking Page only)===
 
=== Change width of hover image (Adaptive Booking Page only)===
.ui-tooltip{max-width: 500px;}
+
<code>.ui-tooltip{max-width: 500px;}</code>
  
 
=== Remove the hover effect on pictures (Adaptive Booking Page only)===
 
=== Remove the hover effect on pictures (Adaptive Booking Page only)===
img{pointer-events: none;}
+
<code>img{pointer-events: none;}</code>
  
 
=== Add a label above the room selector for multiple room bookings (Responsive Booking Page only)===
 
=== Add a label above the room selector for multiple room bookings (Responsive Booking Page only)===
.roomofferqtyselectlabel{display: block;}
+
<code>.roomofferqtyselectlabel{display: block;}</code>
  
 
=== Hide up button (Responsive Booking Page only)===
 
=== Hide up button (Responsive Booking Page only)===
footer .button{display: none;}
+
<code>footer .button{display: none;}</code>
  
 
=== Add icons to descriptive texts (Responsive Booking Page only)===
 
=== Add icons to descriptive texts (Responsive Booking Page only)===
Line 113: Line 114:
 
Examples:
 
Examples:
  
<nowiki><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+
<code><nowiki><span class="glyphicon glyphicon-user" aria-hidden="true"></span></nowiki></code>
</nowiki>
+
 
 
will add a Bootstap  icon for a person.
 
will add a Bootstap  icon for a person.
  
<nowiki><i class="fa fa-bicycle" aria-hidden="true"></i>
+
<code><nowiki><i class="fa fa-bicycle" aria-hidden="true"></i></nowiki></code>
</nowiki>
+
 
 
will add a Font Awesomeicon for a bicycle.
 
will add a Font Awesomeicon for a bicycle.
  
  Note: Icons might disappear when the editor is opened again. In this case you will need to enter it again.
+
<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)===
 
=== Hide icons (Responsive Booking Page only)===
.b24fa{display:none;}
+
<code>.b24fa{display:none;}</code>
  
#b24scroller .input-group-addon{display:none;}
+
<code>#b24scroller .input-group-addon{display:none;}</code>
  
 
=== Change text color of language selector and currency selector (Responsive Booking Page only)===
 
=== Change text color of language selector and currency selector (Responsive Booking Page only)===
.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {color:#fff;}
+
<code>.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {color:#fff;}</code>
  
 
=== Make language selector and currency selector a button (Responsive Booking Page only)===
 
=== Make language selector and currency selector a button (Responsive Booking Page only)===
.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {background:white; padding:10px;}
+
<code>.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {background:white; padding:10px;}</code>
  
 
=== Hide currencies from the currency selector (Responsive Booking Page only) ===
 
=== Hide currencies from the currency selector (Responsive Booking Page only) ===
Line 142: Line 149:
  
 
This code will remove all currencies except for Euros, Swiss Francs and US Dollars:  
 
This code will remove all currencies except for Euros, Swiss Francs and US Dollars:  
.cur-AUD,.cur-BHD,.cur-CAD,.cur-CLP,.cur-CRC,.cur-FJD,.cur-GBP,.cur-GEL,.cur-ILS,.cur-ISK,.cur-NZD,.cur-BGN,.cur-BRL,.cur-CNY,.cur-CZK,.cur-DKK,.cur-HKD,.cur-HRK,.cur-HUF,.cur-HUF,.cur-IDR,.cur-INR,.cur-JPY,.cur-KRW,.cur-LBP,.cur-MAD,.cur-MMK,.cur-MXN,.cur-MYR,.cur-NOK,.cur-PHP,.cur-PLN,.cur-RON,.cur-RUB,.cur-SEK,.cur-SGD,.cur-THB,.cur-TRY,.cur-ZAR{display: none;}
+
<code>.cur-AUD,.cur-BHD,.cur-CAD,.cur-CLP,.cur-CRC,.cur-FJD,.cur-GBP,.cur-GEL,.cur-ILS,.cur-ISK,.cur-NZD,.cur-BGN,.cur-BRL,.cur-CNY,.cur-CZK,.cur-DKK,.cur-HKD,.cur-HRK,.cur-HUF,.cur-HUF,.cur-IDR,.cur-INR,.cur-JPY,.cur-KRW,.cur-LBP,.cur-MAD,.cur-MMK,.cur-MXN,.cur-MYR,.cur-NOK,.cur-PHP,.cur-PLN,.cur-RON,.cur-RUB,.cur-SEK,.cur-SGD,.cur-THB,.cur-TRY,.cur-ZAR{display: none;}</code>
  
 
=== Remove 0 from adults or guests selector ===
 
=== Remove 0 from adults or guests selector ===
#inputnumadult option[value="0"] {display:none !important;}
+
<code>#inputnumadult option[value="0"] {display:none !important;}</code>
  
 
=== Limit quantity selectors for upsell items ===
 
=== Limit quantity selectors for upsell items ===
Line 153: Line 160:
 
Example 1: Set the range of the optional quantity selector for your 2nd upsell item (set 'Per Booking') to 0-4:
 
Example 1: Set the range of the optional quantity selector for your 2nd upsell item (set 'Per Booking') to 0-4:
  
#optextra2 option:nth-child(n+6){display:none;}
+
<code>#optextra2 option:nth-child(n+6){display:none;}</code>
  
  
 
Example 2: Set the range of the optional quantity selector for your 5th upsell item (set 'Per Room/Person/Adult/Child') to 0-20:
 
Example 2: Set the range of the optional quantity selector for your 5th upsell item (set 'Per Room/Person/Adult/Child') to 0-20:
  
#optextraroom5 option:nth-child(n+22){display:none;}
+
<code>#optextraroom5 option:nth-child(n+22){display:none;}</code>
  
 
=== Hide Check-in / Check-out selector ===
 
=== Hide Check-in / Check-out selector ===
.b24-selector-checkin{display:none;}
+
<code>.b24-selector-checkin{display:none;}</code>
  
.b24-selector-checkout{display:none;}
+
<code>.b24-selector-checkout{display:none;}</code>
  
 
=== Hide number of nights selector ===
 
=== Hide number of nights selector ===
.b24-selector-numnight{display:none;}
+
<code>.b24-selector-numnight{display:none;}</code>
  
 
=== Change height of full-width slider ===
 
=== Change height of full-width slider ===
.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .item {height: 500px;}
+
<code>.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .item {height: 500px;}</code>
  
.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider  .carousel.slide{ height: 500px !important;}
+
<code>.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider  .carousel.slide{ height: 500px !important;}</code>
  
 
=== Hide the offer description on the check-out page===  
 
=== Hide the offer description on the check-out page===  
.at_offersummary {display: none;}
+
<code>.at_offersummary {display: none;}</code>
  
 
=== Show number of nights on mobiles===  
 
=== Show number of nights on mobiles===  
.b24-selector-numnight { display: inline-block !important; }
+
<code>.b24-selector-numnight { display: inline-block !important; }</code>
  
 
=== Hide room picture on check-out page===  
 
=== Hide room picture on check-out page===  
.b24-guest-details-right img  {display: none;}
+
<code>.b24-guest-details-right img  {display: none;}</code>
  
 
=== Hide option to collect credit cards from Booking page if you want to use this option only for requests via Email===  
 
=== Hide option to collect credit cards from Booking page if you want to use this option only for requests via Email===  
.bp2bookcollectpayment .panel-pay-card{display:none;}
+
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>
  
 +
=== Hide "Print Booking" on the confirmation screen===
 +
<code>.conf_p{display:none;}</code>
  
= MULTIPLE BOOKING PAGE =
+
=== Hide "Click here to make another booking" on the confirmation screen===
  Custom CSS can be added in SETTINGS > BOOKING PAGE > MULTIPLE PROPERTIES > DEVELOPERS > "Custom CSS"
+
<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 > MULTI BOOKING PAGE > DEVELOPERS > "Custom CSS"
  
 
=== Make search criteria always visible ===
 
=== Make search criteria always visible ===
  
#collapseAdvancedSearch{height: auto; display:block !important;}
+
<code>#collapseAdvancedSearch{height: auto; display:block !important;}</code>
  
.b24-agencysearchlink{display:none;}
+
<code>.b24-agencysearchlink{display:none;}</code>
  
 
=== Change height of full-width slider ===
 
=== Change height of full-width slider ===
.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1  .b24-owner-slider .item {height: 600px;}
+
<code>.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1  .b24-owner-slider .item {height: 600px;}</code>
  
.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1  .b24-owner-slider  .carousel.slide{height: 500px !important;}
+
<code>.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1  .b24-owner-slider  .carousel.slide{height: 500px !important;}</code>
  
 
=== Limit the drop-down list for number of guests ===
 
=== Limit the drop-down list for number of guests ===
 
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.
 
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.
  
#inputnumadult option:nth-child(n+X){display:none;}
+
<code>#inputnumadult option:nth-child(n+6){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 =
 
= INVOICES and PRINT TEMPLATES =
Custom CSS can be added in SETTINGS > GUEST MANAGEMENT > STYLING > "Custom CSS"
+
Custom CSS can be added in {{#fas:cog}} (SETTINGS) > GUEST MANAGEMENT > STYLING > "Custom CSS"
  
 
=== Center invoice on the screen and set overall font size===
 
=== Center invoice on the screen and set overall font size===
body {text-align: center; font-size: 16px;}
+
<code>body {text-align: center; font-size: 16px;}</code>
  
 
=== Set font size of property name ===
 
=== Set font size of property name ===
#invoicepropname{font-size: 24px;}
+
<code>#invoicepropname{font-size: 24px;}</code>
  
 
=== Set font size of address ===
 
=== Set font size of address ===
#invoiceaddress{font-size: 18px; padding-bottom: 50px;}
+
<code>#invoiceaddress{font-size: 18px; padding-bottom: 50px;}</code>
  
 
=== Set font size of the invoice table ===
 
=== Set font size of the invoice table ===
.confirmationtable{font-size: 16px;}
+
<code>.confirmationtable{font-size: 16px;}</code>
  
 
=== Change margin===  
 
=== Change margin===  
.printbooking2 {margin: 20px;}
+
<code>.printbooking2 {margin: 20px;}</code>
  
 
=== TBC ===
 
=== TBC ===
#invoicetable{margin-left:auto; margin-right:auto;}
+
<code>#invoicetable{margin-left:auto; margin-right:auto;}</code>
  
 
=== TBC ===
 
=== TBC ===
#invoiceprinttime{font-size: 12px;}
+
<code>#invoiceprinttime{font-size: 12px;}</code>
  
 
=== Hide edit button in the invoice ===
 
=== Hide edit button in the invoice ===
#iconedit {display: none;}
+
<code>#iconedit {display: none;}</code>
  
  
 
= CONTROL PANEL =
 
= CONTROL PANEL =
 
Custom CSS can be added in:
 
Custom CSS can be added in:
*SUB ACCOUNTS > 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 to apply for all sub accounts
*SUB ACCOUNTS > ACCOUNT LIST > MANAGE ACCOUNT to apply for a specific sub account
+
*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
  
== Calendar ==
+
==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===
 
===Hide "Show" in the CALENDAR===
.dashgridshowfilter {display:none;}
+
<code>.dashgridshowfilter {display:none;}</code>
  
 
===Hide "Override row" in the CALENDAR===
 
===Hide "Override row" in the CALENDAR===
.dashgrid_rowtype1{display:none;}
+
<code>.dashgrid_rowtype1{display:none;}</code>
  
 
===Hide item from dropdown for rooms in the CALENDAR===
 
===Hide item from dropdown for rooms in the CALENDAR===
.dashgrid_rowroomname .dropdown ul.dropdown-menu li:nth-child(3) {display:none !important;}
+
<code>.dashgrid_rowroomname .dropdown ul.dropdown-menu li:nth-child(3) {display:none !important;}</code>
 +
 
 +
===Hide suitcase icon (add booking) from CALENDAR===
 +
<code>.icon-suitcase, .fa-suitcase {display:none}</code>
  
===Hide suitcase icon (add booking) and the button 'Add Booking' from CALENDAR===
+
===Hide button 'Add Booking' from CALENDAR===
.icon-suitcase, .b24btn_AddBooking{display:none}
+
<code>.b24btn_AddBooking{display:none}</code>
  
 
===Display red when inventory is 0===
 
===Display red when inventory is 0===
.inv0 .dashgrid_inventory{color:red;}
+
<code>.inv0 .dashgrid_inventory{color:red;}</code>
  
===Show weekends (Saturday/Sunday) in red===
+
===Show weekends (Saturday/Sunday) in a different color===
.weekend2{background-color:red;}
+
<code>.weekend2{background-color:red;}</code>
  
 
===Show a certain day of the week in red===
 
===Show a certain day of the week in red===
Example: calday5 can be used to change the color of Fridays.
+
Substitute X with the number of the weekday: Monday=1, Tuesday=2, Wednesday=3, Thursday=4, Friday=5, Saturday=6, Sunday=7
.calday5{background-color:red;}
+
<code>.caldayX{background-color:red;}</code>
  
 
===Show today in red===
 
===Show today in red===
.todaydate{background-color:red;}
+
<code>.todaydate{background-color:red;}</code>
  
===Show past dates in grey===
+
===Show past dates in a different color===
.pastdate{background-color:grey;}
+
<code>.pastdate{background-color:grey;}</code>
  
 
===Display room name and icons in one line===
 
===Display room name and icons in one line===
 +
<code>.dashgrid_rowroomname{display:inline;}</code>
 +
 +
<code>.editroomlink{padding-left: 2px;}</code>
  
.dashgrid_rowroomname{display:inline;}
+
===Warning color dates not selling===
.editroomlink{padding-left: 2px;}
+
<code> .dashgrid_inventory_nap{background-color: red; color: white;}</code>
  
 
== Dashboard ==
 
== Dashboard ==
 
 
===Hide the Dashboard selector (drop-down menu) from DASHBOARD===
 
===Hide the Dashboard selector (drop-down menu) from DASHBOARD===
.dashcontrol #dashid{display: none !important}
+
<code>.dashcontrol #dashid{display: none !important}</code>
  
===Hide the "Hamburger" menu from DASHBOARD===
+
===Hide the "Padlock" menu from DASHBOARD===
.dashcontrol .dropdown{display: none !important}
+
<code>.dashcontrol .dropdown{display: none !important}</code>
  
 
=== Hide a certain column in the Departures Table on the DASHBOARD===
 
=== Hide a certain column in the Departures Table on the DASHBOARD===
.mobiledeparture tr > *:nth-child(X) {display: none;}
+
<code>.mobiledeparture tr > *:nth-child(X) {display: none;}</code>
  
 
===Hide the "Add Booking" from mobile DASHBOARD===
 
===Hide the "Add Booking" from mobile DASHBOARD===
.mobiledashaddbooking{display:none;}
+
<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>
 +
 +
==Align the content of a column right==
 +
<code>  .bookingtable  td:nth-child(8) {text-align: right;} </code>
  
 
== Guests Menu ==
 
== Guests Menu ==
  
 
=== Hide a certain row in the "Info" tab  on  GUESTS===
 
=== Hide a certain row in the "Info" tab  on  GUESTS===
.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; }
+
<code>.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; }</code>
 
 
  
 
== Bookings Menu ==
 
== Bookings Menu ==
 
 
=== Hide property name in the BOOKING GRID ===
 
=== Hide property name in the BOOKING GRID ===
.bookgrid_rowpropname{display: none;}
+
<code>.bookgrid_rowpropname{display: none;}</code>
  
 
=== Hide room name in the BOOKING GRID ===
 
=== Hide room name in the BOOKING GRID ===
.bookgrid_rowroomname{display: none;}
+
<code>.bookgrid_rowroomname{display: none;}</code>
  
 
=== Hide a certain column in the BOOKING LIST Table ===
 
=== Hide a certain column in the BOOKING LIST Table ===
.pagetypebookingslist .bookingtable tr > *:nth-child(X) {display: none;}
+
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(X) {display: none;}</code>
 
   
 
   
Examples:
+
Examples:
.pagetypebookingslist .bookingtable tr > *:nth-child(1) {display: none;} will hide the first column which is 'Number'.
+
 
.pagetypebookingslist .bookingtable tr > *:nth-child(10) {display: none;} will hide the tenth column which is 'Email'.
+
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(1) {display: none;}</code> will hide the first column which is 'Number'.
 +
 
 +
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(10) {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 in the BOOKING Table ===
+
=== Hide cancelled bookings in the BOOKINGS Table ===
.bookingtable .cancelbooking {display:none;}
+
<code>.bookingtable .cancelbooking {display:none;}</code>
  
 
=== Hide "Export" button ===
 
=== Hide "Export" button ===
.b24btn_ExportBookings {display:none;}
+
<code>.b24btn_ExportBookings {display:none;}</code>
 +
 
 +
===Disable moving of bookings===
 +
<code> .pagetypebookingsgrid table {pointer-events: none;}</code>
  
 
== Rates Menu ==
 
== Rates Menu ==
 +
===Hide column on the rates table===
 +
Change the child number in brackets to the desired column.
  
=== Hide a certain column in the RATES Table ===
+
<code> .ratetable th:nth-child(9) {display:none;} </code>
.pagetyperates .bookingtable tr> *:nth-child(X) {display: none;}
 
  
 
== Reports Menu ==
 
== Reports Menu ==
 
 
=== Limit selector list for custom reports ===
 
=== Limit selector list for custom reports ===
  
 
Example: Limit the list to reports 1 - 3:
 
Example: Limit the list to reports 1 - 3:
  
#reportid option:nth-child(n+4){display:none;}
+
<code>#reportid option:nth-child(n+4){display:none;}</code>
  
 
=== Hide a certain field from 'Available Columns' ===
 
=== Hide a certain field from 'Available Columns' ===
Line 332: Line 511:
 
Example: Hide the 'Email' field
 
Example: Hide the 'Email' field
  
.pagetypereports2 #guestemail {display: none;}
+
<code>.pagetypereports2 #guestemail {display: none;}</code>
 +
 
 +
 
 +
== Settings Menu ==
 +
=== Hide the "Delete" button for properties ===
 +
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>
  
 
==Booking Popup==
 
==Booking Popup==
 
 
===Hide 'Open in new Window' link===
 
===Hide 'Open in new Window' link===
.pagetypeajaxbookedit.openinnewwindow{display:none;}
+
<code>.pagetypeajaxbookedit.openinnewwindow{display:none;}</code>
 
 
  
 
=== Charges & Payments ===
 
=== Charges & Payments ===
 +
====Hide the VAT column====
 +
<code>.pagetypeajaxbookedit .invoicetablevat {display: none;}</code>
  
====Hide the VAT column====
 
.pagetypeajaxbookedit .invoicetablevat {display: none;}
 
 
Please note: This will not hide the title column (Vat %). See for yourself if you can live with it.
 
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 ===
 
=== Functions and Buttons ===
 
 
====Hide the checkout selector====
 
====Hide the checkout selector====
.pagetypeajaxbookedit #checkout{display:none;}
+
<code>.pagetypeajaxbookedit #checkout{display:none;}</code>
  
 
====Hide the 'Delete' button====
 
====Hide the 'Delete' button====
.pagetypeajaxbookedit .deletebookingbutton{display:none;}
+
<code>.pagetypeajaxbookedit .deletebookingbutton{display:none;}</code>
  
 
====Hide the 'Add Booking' button====
 
====Hide the 'Add Booking' button====
.icon-suitcase, .b24btn_AddBooking{display:none;}
+
<code>.icon-suitcase, .b24btn_AddBooking{display:none;}</code>
  
 
====Hide the 'Copy as new' button====
 
====Hide the 'Copy as new' button====
.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;}
+
<code>.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;}</code>
  
 
====Hide the 'Print' button====
 
====Hide the 'Print' button====
.pagetypeajaxbookedit #bookingprintbutton{display:none;}
+
<code>.pagetypeajaxbookedit #bookingprintbutton{display:none;}</code>
  
 
====Hide the 'Assign Invoice Number' button====
 
====Hide the 'Assign Invoice Number' button====
.pagetypeajaxbookedit .b24btn_AssignInvoiveNumber{display:none;}
+
<code>.pagetypeajaxbookedit .b24btn_AssignInvoiceNumber{display:none;}</code>
 +
 
 +
German control panel:
  
German Version: .pagetypeajaxbookedit .b24btn_Rechnungsnummererzeugen{display:none;}
+
<code>.pagetypeajaxbookedit .b24btn_Rechnungsnummererzeugen{display:none;}</code>
  
 
====Hide the 'Template' buttons====
 
====Hide the 'Template' buttons====
.pagetypeajaxbookedit #bookingtemplate1button{display:none;}
+
<code>.pagetypeajaxbookedit #bookingtemplate1button{display:none;}</code>
  
.pagetypeajaxbookedit #bookingtemplate2button{display:none;}
+
<code>.pagetypeajaxbookedit #bookingtemplate2button{display:none;}</code>
  
.pagetypeajaxbookedit #bookingtemplate3button{display:none;}
+
<code>.pagetypeajaxbookedit #bookingtemplate3button{display:none;}</code>
  
 +
====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 ===
 
=== Hide Specific Fields ===
 +
====TAB Summary====
  
TAB 'Summary':
+
Guest title
  
Guest title
+
<code>.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}</code>
.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}
+
 
<br>
+
Last Name
Last Name
+
 
.pagetypeajaxbookedit .menusetting-guestname{display:none;}
+
<code>.pagetypeajaxbookedit .menusetting-guestname{display:none;}</code>
  
 
Guest comments  
 
Guest comments  
.pagetypeajaxbookedit .menusetting-guestcomments{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestcomments{display:none;}</code>
  
 
Notes  
 
Notes  
.pagetypeajaxbookedit .menusetting-hostcomments{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-hostcomments{display:none;}</code>
  
 
Adults  
 
Adults  
.pagetypeajaxbookedit .menusetting-numadults{display:none;}
 
  
Children  
+
<code>.pagetypeajaxbookedit .menusetting-numadults{display:none;}</code>
  .pagetypeajaxbookedit .menusetting-numchild{display:none;}
+
 
 +
Children
 +
   
 +
<code>.pagetypeajaxbookedit .menusetting-numchild{display:none;}</code>
  
 
Telephone  
 
Telephone  
.pagetypeajaxbookedit .menusetting-guestphone{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestphone{display:none;}</code>
  
 
Mobile
 
Mobile
.pagetypeajaxbookedit .menusetting-guestmobile{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestmobile{display:none;}</code>
  
 
Fax  
 
Fax  
.pagetypeajaxbookedit .menusetting-guestfax{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestfax{display:none;}</code>
  
 
Address  
 
Address  
.pagetypeajaxbookedit .menusetting-guestaddress{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestaddress{display:none;}</code>
  
 
City  
 
City  
.pagetypeajaxbookedit .menusetting-guestcity{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestcity{display:none;}</code>
  
 
Postcode  
 
Postcode  
  .pagetypeajaxbookedit .menusetting-guestpostcode{display:none;}
 
  
Country
+
<code>.pagetypeajaxbookedit .menusetting-guestpostcode{display:none;}</code>
.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}
+
 
 +
Country (manual entry)
  
Country
+
<code>.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}</code>
.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}
+
 
 +
Country (drop-down list)
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}</code>
  
 
Status  
 
Status  
.pagetypeajaxbookedit .menusetting-status{display:none;}
+
 
 +
<code>.pagetypeajaxbookedit .menusetting-status{display:none;}</code>
  
 
Room Selector  
 
Room Selector  
.pagetypeajaxbookedit .menusetting-roomid{display:none;}
+
<code>.pagetypeajaxbookedit .menusetting-roomid{display:none;}</code>
 +
 
 +
 
 +
====TAB Detail====
 +
Message
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-hostmessage{display:none;}</code>
 +
 
 +
Custom Questions (X = number of custom question)
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-guestcustqX{display:none;}</code>
 +
 
 +
Reference
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-ownerreference{display:none;}</code>
 +
 
 +
Quantity
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-qty{display:none;}</code>
 +
 
 +
Cancellable
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-stopcancel{display:none;}</code>
  
 
Flag
 
Flag
.pagetypeajaxbookedit .menusetting-flagtext{display:none;}
 
  
Email (under the Email tab)
+
<code>.pagetypeajaxbookedit .menusetting-flagtext{display:none;}</code>
  .pagetypeajaxbookedit .menusetting-guestemail{display:none;}
+
 
 +
Status Code
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-statuscode{display:none;}</code>
 +
 
 +
Created in Account
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-Createdinaccount{display:none;}</code>
 +
 
 +
Original Referrer
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-OriginalReferrer{display:none;}</code>
 +
 
 +
Time Entered
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-TimeEntered{display:none;}</code>
 +
 
 +
IP Address
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-IPAddress{display:none;}</code>
 +
 
 +
API Message
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-apimessage{display:none;}</code>
 +
 
 +
Guest Database
 +
 
 +
<code>.pagetypeajaxbookedit .menusetting-isguest{display:none;}</code>
 +
 
 +
====TAB Mail & Actions====
 +
Email
 +
 
 +
<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 ==
 +
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  Custom CSS can be added in {{#fas:cog}} (SETTINGS) > GUEST MANAGEMENT > STYLING > "Custom CSS"
 +
 
 +
=== Hide a the "Booking Notes" column in the Daily Unit Activity report===
 +
<code>.reportdailyunitactivity th > *:nth-child(9) {display: none;}</code>
 +
 
 +
<code>.reportdailyunitactivity td > *:nth-child(9) {display: none;}</code> 
  
 
== Miscellaneous ==
 
== Miscellaneous ==
  
 
===Change the blue Login button on the initial Beds24 page (resellers only)===
 
===Change the blue Login button on the initial Beds24 page (resellers only)===
.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}
+
<code>.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}</code>
  
 
=== Hide the "Make a Charge using Stripe" button ===
 
=== Hide the "Make a Charge using Stripe" button ===
#makechargeusing{display:none;}
+
<code>#makechargeusing{display:none;}</code>
  
 
=== Hide potential issue "Less than 12 months available"===
 
=== Hide potential issue "Less than 12 months available"===
.warninglessthan12monthsavailable{ display: none}
+
<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 'Template 2' from Guest Management  > Booking Templates ===
.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}
+
<code>.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}</code>
 +
 
 +
=== Hide the option to unlock invoices===
 +
<code>.menusetting-invoicelock {display:none;}</code>

Revision as of 11:08, 20 June 2022

Custom CSS
This page gives custom CSS examples which can be used to customize the booking page or the control panel.

Contents

1 PROPERTY BOOKING PAGE

Custom CSS can be added in (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE DEVELOPERS > "Custom CSS"

1.1 Bigger room name

.at_roomnametext{font-size: 14px;} /*if you want the text even bigger use a higher number*/

1.2 Disable clicks on calendar selector

1.2.1 Disable month back-and-forth toggle

.monthcalendarhead{pointer-events: none;}

1.2.2 Disable clicks on dates

.roomoffercalendarmonth{pointer-events: none;}

1.2.3 Disable clicks only on dates not in pointer selection

.roomoffercalendarmonth .daterequest, .roomoffercalendarmonth .dateavail {pointer-events: none;}

1.3 Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis)

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.

.datenco{background-color:#f4f4f4; color:#cccccc;}

1.4 Background Image

To use a background image upload it to (SETTINGS) > BOOKING ENGINE > PICTURES.

Replace 'https://beds24.com/pic/p0000/2049/04.jpg' with the url of your uploaded picture.

body{background-image:url(https://beds24.com/pic/p0000/2049/04.jpg);}

1.5 Shadow around your Booking Page (Adaptive Booking Page only)

.bookingpage { webkit-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38); -moz-box-shadow:0 1px 2px rgba(0, 10, 10, 0.38); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 10, 10, 0.38); margin-bottom: 20px;}

1.6 Booking Page with rounded corners (Adaptive Booking Page only)

{border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px;}

1.7 Hide cents

.bookingpagecents {display:none;}

1.8 Show prices with cents even if cents are zero

.bookingpagecentshide {display:inline;}

1.9 Mark certain fields in the calendar selector

You can highlight both the headings of the calendar (i.e. Mon, Tue, Wed, Thu, Fri, Sat, Sun) and all the dates that fall on a given day of the week (i.e. all 4 or 5 dates that fall on a Saturday).

Headings = '.dayMon' (or dayTue, dayWed, dayThu, dayFri, daySat, daySun)

Dates = '.daymon' (or daytue, dayewed, daythu, dayfri, daysat, daysun)


Example 1: Set the font color for the weekday heading of Monday ('Mon')

.dayMon{color:#c44a2f !important;}


Example 2: Set the background color for the weekday heading of Monday ('Mon')

.dayMon{background-color:#c44a2f !important;}


Example 3: Set the font color for all the dates that fall on a Saturday

.daysat{color:#c44a2f !important;}


Example 4: Add a border around all the dates that fall on a Sunday

.daysun{border:1px solid #999999 !important;}

1.10 Add a border around the selected dates

.datestay{border: 1px solid #2f2f2f !important;}

If you use split dates the CSS is: .prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}

1.11 Line through unavailable dates

.datenotavail{text-decoration: line-through;}

1.12 Mark past dates with a different background and text colour

.datepast{background-color: #xxxxxx; color: #xxxxxx;}

1.13 Change width of hover image (Adaptive Booking Page only)

.ui-tooltip{max-width: 500px;}

1.14 Remove the hover effect on pictures (Adaptive Booking Page only)

img{pointer-events: none;}

1.15 Add a label above the room selector for multiple room bookings (Responsive Booking Page only)

.roomofferqtyselectlabel{display: block;}

1.16 Hide up button (Responsive Booking Page only)

footer .button{display: none;}

1.17 Add icons to descriptive texts (Responsive Booking Page only)

Bootstrap glyphicons and Font Awesome icons can be added to the descriptive fields. To add icons the editor needs to be set to "Source"

Examples:

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

will add a Bootstap icon for a person.

<i class="fa fa-bicycle" aria-hidden="true"></i>

will add a Font Awesomeicon for a bicycle.

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

<link rel="stylesheet" href="include/font-awesome/fontawesome-pro-5.14.0-web/css/all.min.css">

in the "Head" section in (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER / (SETTINGS) BOOKING ENGINE > MULTIBOOKING PAGE > DEVELOPER.

1.18 Hide icons (Responsive Booking Page only)

.b24fa{display:none;}

#b24scroller .input-group-addon{display:none;}

1.19 Change text color of language selector and currency selector (Responsive Booking Page only)

.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {color:#fff;}

1.20 Make language selector and currency selector a button (Responsive Booking Page only)

.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {background:white; padding:10px;}

1.21 Hide currencies from the currency selector (Responsive Booking Page only)

The currency class format is: .cur-XXX.

cur is the name of the class and XXX represents a country code: CAD = Canadian Dollars, GBP = British Pounds and so on. The country codes are:

AUD, BHD, CAD, CLP, CRC, EUR, FJD, GBP, GEL, ILS, ISK, NZD, USD, BGN, BRL, CHF, CNY, CZK, DKK, HKD, HRK, HUF, HUF, IDR, INR, JPY, KRW, LBP, LKR, MAD, MMK, MXN, MYR, NOK, PHP, PLN, RON, RUB, SEK, SGD, THB, TRY, ZAR

This code will remove all currencies except for Euros, Swiss Francs and US Dollars: .cur-AUD,.cur-BHD,.cur-CAD,.cur-CLP,.cur-CRC,.cur-FJD,.cur-GBP,.cur-GEL,.cur-ILS,.cur-ISK,.cur-NZD,.cur-BGN,.cur-BRL,.cur-CNY,.cur-CZK,.cur-DKK,.cur-HKD,.cur-HRK,.cur-HUF,.cur-HUF,.cur-IDR,.cur-INR,.cur-JPY,.cur-KRW,.cur-LBP,.cur-MAD,.cur-MMK,.cur-MXN,.cur-MYR,.cur-NOK,.cur-PHP,.cur-PLN,.cur-RON,.cur-RUB,.cur-SEK,.cur-SGD,.cur-THB,.cur-TRY,.cur-ZAR{display: none;}

1.22 Remove 0 from adults or guests selector

#inputnumadult option[value="0"] {display:none !important;}

1.23 Limit quantity selectors for upsell items

By default all the quantity selectors have a range from 0 - 250. You can limit the range:


Example 1: Set the range of the optional quantity selector for your 2nd upsell item (set 'Per Booking') to 0-4:

#optextra2 option:nth-child(n+6){display:none;}


Example 2: Set the range of the optional quantity selector for your 5th upsell item (set 'Per Room/Person/Adult/Child') to 0-20:

#optextraroom5 option:nth-child(n+22){display:none;}

1.24 Hide Check-in / Check-out selector

.b24-selector-checkin{display:none;}

.b24-selector-checkout{display:none;}

1.25 Hide number of nights selector

.b24-selector-numnight{display:none;}

1.26 Change height of full-width slider

.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .item {height: 500px;}

.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .carousel.slide{ height: 500px !important;}

1.27 Hide the offer description on the check-out page

.at_offersummary {display: none;}

1.28 Show number of nights on mobiles

.b24-selector-numnight { display: inline-block !important; }

1.29 Hide room picture on check-out page

.b24-guest-details-right img {display: none;}

1.30 Hide option to collect credit cards from Booking page if you want to use this option only for requests via Email

.bp2bookcollectpayment .panel-pay-card{display:none;}

1.31 Hide "Print Booking" on the confirmation screen

.conf_p{display:none;}

1.32 Hide "Click here to make another booking" on the confirmation screen

.bookagainlink{display:none;}


1.33 Adjust alignment for RTL languages (Arabic, Hebrew)

.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; }

1.34 Change colors of warnings

.alert-danger { color: #7e7602; background-color: #fcf8bd; border-color: #fcf8bd; }

2 MULTI PROPERTY BOOKING PAGE

Custom CSS can be added in (SETTINGS) > BOOKING PAGE > MULTI BOOKING PAGE > DEVELOPERS > "Custom CSS"

2.1 Make search criteria always visible

#collapseAdvancedSearch{height: auto; display:block !important;}

.b24-agencysearchlink{display:none;}

2.2 Change height of full-width slider

.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .item {height: 600px;}

.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .carousel.slide{height: 500px !important;}

2.3 Limit the drop-down list for number of guests

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.

#inputnumadult option:nth-child(n+6){display:none;}

#inputnumchild option:nth-child(n+6){display:none;}

2.4 Adjust alignment for RTL languages (Arabic, Hebrew)

.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; }

3 BOOKING WIDGETS

CSS needs to be added directly in your web site

3.1 Change the hover-color in the datepicker calendar

.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}

3.2 Make only Saturdays clickable in the datepicker calendar

.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;}

4 INVOICES and PRINT TEMPLATES

Custom CSS can be added in (SETTINGS) > GUEST MANAGEMENT > STYLING > "Custom CSS"

4.1 Center invoice on the screen and set overall font size

body {text-align: center; font-size: 16px;}

4.2 Set font size of property name

#invoicepropname{font-size: 24px;}

4.3 Set font size of address

#invoiceaddress{font-size: 18px; padding-bottom: 50px;}

4.4 Set font size of the invoice table

.confirmationtable{font-size: 16px;}

4.5 Change margin

.printbooking2 {margin: 20px;}

4.6 TBC

#invoicetable{margin-left:auto; margin-right:auto;}

4.7 TBC

#invoiceprinttime{font-size: 12px;}

4.8 Hide edit button in the invoice

#iconedit {display: none;}


5 CONTROL PANEL

Custom CSS can be added in:

  • 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

5.1 Navigation

5.1.1 Hide SUPPORT button

.navbar-top .btngroupdropdown{display: none}

5.1.2 Hide page help icon on the right

.opener-right{display: none}

5.1.3 Change header background color

.fixed-top {background-color: #cccccc;}

5.1.4 Hide "Settings" icon in left column

.#c3sidebarCollapse{display: none !important;} {display: none;}

5.1.5 Hide "Price Checker Tool" button

.b24btn_PriceCheck {display: none}

5.1.6 Hide "Try the new calendar" link

.tryTheNewCalendar {display: none;}

5.2 Dynamic Multi-Calendar

5.2.1 Hide "Intelligence" icon

.sticky-left .row-intelligence-button{display: none;}

5.2.2 Hide "Help" icon in left column

.sticky-left .row-help-button {display: none;}

5.2.3 Hide "Notes" icon in left column

.sticky-left .fa-comment-alt-plus, .sticky-left .fa-comment-alt-lines {display: none;}

5.2.4 Display occupancy as color instead of number

.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; }

5.2.5 Change the backgound color of weekends (Saturday/Sunday)

.th-sat, .th-sun {background-color:#ffceaf !important;}

5.2.6 Change the backgound color of past dates

.pastdate{background-color:#d7d7d7;}

5.2.7 Hide Intelligence button

.sticky-left .row-intelligence-button{display: none;}

5.2.8 Hide contect help

.sticky-left .row-help-button {display: none;}

5.2.9 Change color of unavailable dates

.inv0 { color: red }

5.2.10 Change color and background color of daily prices

.price { background-color:#7cc576; color:white;}

5.2.11 Make inventory row read-only

.calendar2 .row-room { pointer-events: none; }

5.2.12 Make Daily Price row read-only

.row-price{ pointer-events: none; }

5.2.13 Disable the option to create or change views

#view-templates-button{ pointer-events: none; }

5.3 Old Calendar

5.3.1 Hide "Show" in the CALENDAR

.dashgridshowfilter {display:none;}

5.3.2 Hide "Override row" in the CALENDAR

.dashgrid_rowtype1{display:none;}

5.3.3 Hide item from dropdown for rooms in the CALENDAR

.dashgrid_rowroomname .dropdown ul.dropdown-menu li:nth-child(3) {display:none !important;}

5.3.4 Hide suitcase icon (add booking) from CALENDAR

.icon-suitcase, .fa-suitcase {display:none}

5.3.5 Hide button 'Add Booking' from CALENDAR

.b24btn_AddBooking{display:none}

5.3.6 Display red when inventory is 0

.inv0 .dashgrid_inventory{color:red;}

5.3.7 Show weekends (Saturday/Sunday) in a different color

.weekend2{background-color:red;}

5.3.8 Show a certain day of the week in red

Substitute X with the number of the weekday: Monday=1, Tuesday=2, Wednesday=3, Thursday=4, Friday=5, Saturday=6, Sunday=7 .caldayX{background-color:red;}

5.3.9 Show today in red

.todaydate{background-color:red;}

5.3.10 Show past dates in a different color

.pastdate{background-color:grey;}

5.3.11 Display room name and icons in one line

.dashgrid_rowroomname{display:inline;}

.editroomlink{padding-left: 2px;}

5.3.12 Warning color dates not selling

.dashgrid_inventory_nap{background-color: red; color: white;}

5.4 Dashboard

5.4.1 Hide the Dashboard selector (drop-down menu) from DASHBOARD

.dashcontrol #dashid{display: none !important}

5.4.2 Hide the "Padlock" menu from DASHBOARD

.dashcontrol .dropdown{display: none !important}

5.4.3 Hide a certain column in the Departures Table on the DASHBOARD

.mobiledeparture tr > *:nth-child(X) {display: none;}

5.4.4 Hide the "Add Booking" from mobile DASHBOARD

.mobiledashaddbooking{display:none;}

5.4.5 Hide room on Housekeeping Units and Housekeeping Bookings modules=

.widgettype-units .roomrowclassXXX {display: none;} /* replace XXX with the room ID*/

5.4.6 Hide column on the dashboard tables

Change the child number in brackets to the desired column.

.dashboardtable th:nth-child(9) {display:none;}

5.5 Align the content of a column right

.bookingtable td:nth-child(8) {text-align: right;}

5.6 Guests Menu

5.6.1 Hide a certain row in the "Info" tab on GUESTS

.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; }

5.7 Bookings Menu

5.7.1 Hide property name in the BOOKING GRID

.bookgrid_rowpropname{display: none;}

5.7.2 Hide room name in the BOOKING GRID

.bookgrid_rowroomname{display: none;}

5.7.3 Hide a certain column in the BOOKING LIST Table

.pagetypebookingslist .bookingtable tr > *:nth-child(X) {display: none;}

Examples:

.pagetypebookingslist .bookingtable tr > *:nth-child(1) {display: none;} will hide the first column which is 'Number'.

.pagetypebookingslist .bookingtable tr > *:nth-child(10) {display: none;} will hide the tenth column which is 'Email'.

5.7.4 Hide column on the BOOKINGS table

Change the child number in brackets to the desired column.

.bookingtable th:nth-child(12) {display:none;}

5.7.5 Hide cancelled bookings in the BOOKINGS Table

.bookingtable .cancelbooking {display:none;}

5.7.6 Hide "Export" button

.b24btn_ExportBookings {display:none;}

5.7.7 Disable moving of bookings

.pagetypebookingsgrid table {pointer-events: none;}

5.8 Rates Menu

5.8.1 Hide column on the rates table

Change the child number in brackets to the desired column.

.ratetable th:nth-child(9) {display:none;}

5.9 Reports Menu

5.9.1 Limit selector list for custom reports

Example: Limit the list to reports 1 - 3:

#reportid option:nth-child(n+4){display:none;}

5.9.2 Hide a certain field from 'Available Columns'

Example: Hide the 'Email' field

.pagetypereports2 #guestemail {display: none;}


5.10 Settings Menu

5.10.1 Hide the "Delete" button for properties

.pagetypeproperties .b24btn_delete{display:none;}

5.11 Booking Popup

5.11.1 Hide 'Open in new Window' link

.pagetypeajaxbookedit.openinnewwindow{display:none;}

5.11.2 Charges & Payments

5.11.2.1 Hide the VAT column

.pagetypeajaxbookedit .invoicetablevat {display: none;}

Please note: This will not hide the title column (Vat %). See for yourself if you can live with it.

5.11.2.2 Prevent invoice items being deleted

.tr_invoicee .btn-danger, #groupinvoicebulkaction option[value="1"] {display:none !important;}

5.11.2.3 Prevent manual entry of charge items

.chargenewitemtr input {pointer-events: none;}

5.11.2.4 Prevent manual entry of payment items

.paymentnewitemtr input {pointer-events: none;}

5.11.3 Functions and Buttons

5.11.3.1 Hide the checkout selector

.pagetypeajaxbookedit #checkout{display:none;}

5.11.3.2 Hide the 'Delete' button

.pagetypeajaxbookedit .deletebookingbutton{display:none;}

5.11.3.3 Hide the 'Add Booking' button

.icon-suitcase, .b24btn_AddBooking{display:none;}

5.11.3.4 Hide the 'Copy as new' button

.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;}

5.11.3.5 Hide the 'Print' button

.pagetypeajaxbookedit #bookingprintbutton{display:none;}

5.11.3.6 Hide the 'Assign Invoice Number' button

.pagetypeajaxbookedit .b24btn_AssignInvoiceNumber{display:none;}

German control panel:

.pagetypeajaxbookedit .b24btn_Rechnungsnummererzeugen{display:none;}

5.11.3.7 Hide the 'Template' buttons

.pagetypeajaxbookedit #bookingtemplate1button{display:none;}

.pagetypeajaxbookedit #bookingtemplate2button{display:none;}

.pagetypeajaxbookedit #bookingtemplate3button{display:none;}

5.11.3.8 Hide the 'Continue anyway' buttons

.statusmsg .btn{display: none}

5.11.3.9 Prevent changes of the "Status" field"

.menusetting-status{pointer-events: none;}

5.11.4 Hide Specific Fields

5.11.4.1 TAB Summary

Guest title

.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}

Last Name

.pagetypeajaxbookedit .menusetting-guestname{display:none;}

Guest comments

.pagetypeajaxbookedit .menusetting-guestcomments{display:none;}

Notes

.pagetypeajaxbookedit .menusetting-hostcomments{display:none;}

Adults

.pagetypeajaxbookedit .menusetting-numadults{display:none;}

Children

.pagetypeajaxbookedit .menusetting-numchild{display:none;}

Telephone

.pagetypeajaxbookedit .menusetting-guestphone{display:none;}

Mobile

.pagetypeajaxbookedit .menusetting-guestmobile{display:none;}

Fax

.pagetypeajaxbookedit .menusetting-guestfax{display:none;}

Address

.pagetypeajaxbookedit .menusetting-guestaddress{display:none;}

City

.pagetypeajaxbookedit .menusetting-guestcity{display:none;}

Postcode

.pagetypeajaxbookedit .menusetting-guestpostcode{display:none;}

Country (manual entry)

.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}

Country (drop-down list)

.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}

Status

.pagetypeajaxbookedit .menusetting-status{display:none;}

Room Selector .pagetypeajaxbookedit .menusetting-roomid{display:none;}


5.11.4.2 TAB Detail

Message

.pagetypeajaxbookedit .menusetting-hostmessage{display:none;}

Custom Questions (X = number of custom question)

.pagetypeajaxbookedit .menusetting-guestcustqX{display:none;}

Reference

.pagetypeajaxbookedit .menusetting-ownerreference{display:none;}

Quantity

.pagetypeajaxbookedit .menusetting-qty{display:none;}

Cancellable

.pagetypeajaxbookedit .menusetting-stopcancel{display:none;}

Flag

.pagetypeajaxbookedit .menusetting-flagtext{display:none;}

Status Code

.pagetypeajaxbookedit .menusetting-statuscode{display:none;}

Created in Account

.pagetypeajaxbookedit .menusetting-Createdinaccount{display:none;}

Original Referrer

.pagetypeajaxbookedit .menusetting-OriginalReferrer{display:none;}

Time Entered

.pagetypeajaxbookedit .menusetting-TimeEntered{display:none;}

IP Address

.pagetypeajaxbookedit .menusetting-IPAddress{display:none;}

API Message

.pagetypeajaxbookedit .menusetting-apimessage{display:none;}

Guest Database

.pagetypeajaxbookedit .menusetting-isguest{display:none;}

5.11.4.3 TAB Mail & Actions

Email

.pagetypeajaxbookedit .menusetting-guestemail{display:none;}

5.12 Add Booking

5.12.1 Prevent price to be changed

..pagetypeajaxbookedit .menusetting-unitprice, .pagetypeajaxbookedit .menusetting-price { pointer-events: none;}

5.13 Reports

Custom CSS can be added in (SETTINGS) > GUEST MANAGEMENT > STYLING > "Custom CSS"

5.13.1 Hide a the "Booking Notes" column in the Daily Unit Activity report

.reportdailyunitactivity th > *:nth-child(9) {display: none;}

.reportdailyunitactivity td > *:nth-child(9) {display: none;}

5.14 Miscellaneous

5.14.1 Change the blue Login button on the initial Beds24 page (resellers only)

.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}

5.14.2 Hide the "Make a Charge using Stripe" button

#makechargeusing{display:none;}

5.14.3 Hide potential issue "Less than 12 months available"

.warninglessthan12monthsavailable{ display: none}

5.14.4 Hide potential issue "Too many guests in booking xxxxx"

..warningunitnotassigned{ display: none}

5.14.5 Hide 'Template 2' from Guest Management > Booking Templates

.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}

5.14.6 Hide the option to unlock invoices

.menusetting-invoicelock {display:none;}