Custom CSS: Difference between revisions

Jump to navigation Jump to search
No edit summary
No edit summary
Line 11: Line 11:
= BOOKING PAGE =
= BOOKING PAGE =


  Custom CSS can be added in SETTINGS > BOOKING ENGINE > DEVELOPERS > "Custom CSS"
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> 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>


=== 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 29:
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  ===
Line 36: Line 36:
Replace '<nowiki>https://www.beds24.com/pic/p0000/2049/04.jpg</nowiki>' with the url of your uploaded picture.
Replace '<nowiki>https://www.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://www.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 65:
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: 250%;" >{{#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 112:
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.


=== 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 141:


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 152:
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>




= MULTIPLE BOOKING PAGE =
= MULTIPLE BOOKING PAGE =
  Custom CSS can be added in SETTINGS > BOOKING PAGE > MULTIPLE PROPERTIES > DEVELOPERS > "Custom CSS"
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> Custom CSS can be added in SETTINGS > BOOKING PAGE > MULTIPLE PROPERTIES > 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+X){display:none;}</code>


= INVOICES and PRINT TEMPLATES =
= INVOICES and PRINT TEMPLATES =
Line 209: Line 208:


=== 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>




Line 241: Line 240:


===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) and the button 'Add Booking' from CALENDAR===
===Hide suitcase icon (add booking) and the button 'Add Booking' from CALENDAR===
.icon-suitcase, .b24btn_AddBooking{display:none}
<code>.icon-suitcase, .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 red===
.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===
Substitute X with the number of the weekday: Monday=1, Tuesday=2, Wednesday=3, Thursday=4, Friday=5, Saturday=6, Sunday=7  
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;}
<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 grey===
.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>


.dashgrid_rowroomname{display:inline;}
<code>.editroomlink{padding-left: 2px;}</code>
.editroomlink{padding-left: 2px;}




===Warning color dates not selling===
===Warning color dates not selling===
.dashgrid_inventory_nap{background-color: red; color: white;}
<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 "Hamburger" 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>




Line 295: Line 293:


=== 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'.
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(1) {display: none;}</code> 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(10) {display: none;}</code>  will hide the tenth column which is 'Email'.


=== Hide cancelled bookings in the BOOKING Table ===
=== Hide cancelled bookings in the BOOKING 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>


== Rates Menu ==
== Rates Menu ==
=== Hide a certain column in the RATES Table ===
=== Hide a certain column in the RATES Table ===
.pagetyperates .bookingtable tr> *:nth-child(X)  {display: none;}
<code>.pagetyperates .bookingtable tr> *:nth-child(X)  {display: none;}</code>


== 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 336: Line 332:
Example: Hide the 'Email' field
Example: Hide the 'Email' field


.pagetypereports2 #guestemail {display: none;}
<code>.pagetypereports2 #guestemail {display: none;}</code>




Line 343: Line 339:
=== Hide the "Delete" button for properties ===
=== Hide the "Delete" button for properties ===


.pagetypeproperties .b24btn_delete{display:none;}
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>




Line 349: Line 345:


===Hide 'Open in new Window' link===
===Hide 'Open in new Window' link===
.pagetypeajaxbookedit.openinnewwindow{display:none;}
<code>.pagetypeajaxbookedit.openinnewwindow{display:none;}




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


Line 361: Line 357:


====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====
Line 367: Line 363:


====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_AssignInvoiveNumber{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 Specific Fields ===
=== Hide Specific Fields ===
====TAB Summary====
====TAB Summary====


Guest title
Guest title
.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}</code>


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;}
 
<code>.pagetypeajaxbookedit .menusetting-guestpostcode{display:none;}</code>


Country (manual entry)
Country (manual entry)
.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}</code>


Country (drop-down list)
Country (drop-down list)
.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}
 
<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>




Line 444: Line 456:


Message
Message
.pagetypeajaxbookedit .menusetting-hostmessage{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-hostmessage{display:none;}</code>


Custom Questions (X = number of custom question)
Custom Questions (X = number of custom question)
.pagetypeajaxbookedit .menusetting-guestcustqX{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-guestcustqX{display:none;}</code>


Reference
Reference
.pagetypeajaxbookedit .menusetting-ownerreference{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-ownerreference{display:none;}</code>


Quantity
Quantity
.pagetypeajaxbookedit .menusetting-qty{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-qty{display:none;}</code>


Cancellable
Cancellable
.pagetypeajaxbookedit .menusetting-stopcancel{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-stopcancel{display:none;}</code>


Flag
Flag
.pagetypeajaxbookedit .menusetting-flagtext{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-flagtext{display:none;}</code>


Status Code
Status Code
.pagetypeajaxbookedit .menusetting-statuscode{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-statuscode{display:none;}</code>


Created in Account
Created in Account
.pagetypeajaxbookedit .menusetting-Createdinaccount{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-Createdinaccount{display:none;}</code>


Original Referrer
Original Referrer
.pagetypeajaxbookedit .menusetting-OriginalReferrer{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-OriginalReferrer{display:none;}</code>


Time Entered
Time Entered
.pagetypeajaxbookedit .menusetting-TimeEntered{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-TimeEntered{display:none;}</code>


IP Address
IP Address
.pagetypeajaxbookedit .menusetting-IPAddress{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-IPAddress{display:none;}</code>


API Message
API Message
.pagetypeajaxbookedit .menusetting-apimessage{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-apimessage{display:none;}</code>


Guest Database
Guest Database
.pagetypeajaxbookedit .menusetting-isguest{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-isguest{display:none;}</code>




Line 486: Line 511:


Email
Email
.pagetypeajaxbookedit .menusetting-guestemail{display:none;}
 
<code>.pagetypeajaxbookedit .menusetting-guestemail{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 '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>