Custom CSS: Difference between revisions

Jump to navigation Jump to search
← Older edit
No edit summary
 
(129 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]]
<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.


''This page gives Custom CSS examples''


__TOC__
__TOC__
= Booking Engine =
== Property Booking Page ==
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  Custom CSS can be added in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE DEVELOPERS > "Custom CSS"


= BOOKING PAGE =
=== Force the Iframe to have a certain height ===


<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  Custom CSS can be added in SETTINGS > BOOKING ENGINE > DEVELOPERS > "Custom CSS"
/* Style for Extra Large Screen */
@media (max-width:1199px) {
iframe {
height: 292px;
}
}
 
/* Style for Large Screen */
@media (max-width:991px) {
iframe {
height: 2000px;
}
}
 
/* Style for Medium Screen */
@media (max-width:767px) {
iframe {
height: 2200px;
}
}
 
/* Style for Small Screen */
@media (max-width:575px) {
iframe {
height: 2500px;
}
}


=== Bigger room name ===
=== Bigger room name ===
Line 24: Line 55:
<code> .roomoffercalendarmonth{pointer-events: none;}</code>
<code> .roomoffercalendarmonth{pointer-events: none;}</code>


=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis)===
====Disable clicks only on dates not in pointer selection====
<code> .roomoffercalendarmonth .daterequest,
.roomoffercalendarmonth .dateavail {pointer-events: none;}</code>
 
=== Mark days when check-in and/or check-out is not allowed (i.e. for rentals on a weekly basis) in the offer calendar===
To use this option you will need to set your check-in/check-out rules in the CALENDAR. It will not work for check-in and check-out restrictions only set in rates.  
To 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.
NOTE: Limit the check-out in the CALENDAR (click on "Override") to use this function.
 
To highlight when Check-out is not allowed :-


<code> .datenco{background-color:#f4f4f4; color:#cccccc;}</code>
<code> .datenco{background-color:#f4f4f4; color:#cccccc;}</code>
To highlight when Check-in is not allowed :-
<code> .datenci{background-color:#f4f4f4; color:#cccccc;}</code>
To highlight specific days then set the day with the appropriate colour :-
<code> .daymon{background-color:#592323; color:#cccccc;}</code>
<code> .daytue{background-color:#592323; color:#cccccc;}</code>
<code> .daywed{background-color:#592323; color:#cccccc;}</code>
<code> .daythu{background-color:#592323; color:#cccccc;}</code>
<code> .dayfri{background-color:#592323; color:#cccccc;}</code>
<code> .daysat{background-color:#592323; color:#cccccc;}</code>
<code> .daysun{background-color:#592323; color:#cccccc;}</code>


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


<code> body{background-image:url(<nowiki>https://www.beds24.com/pic/p0000/2049/04.jpg</nowiki>);}</code>
<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)===
Line 84: Line 135:
=== Add a border around the selected dates===
=== Add a border around the selected dates===
<code>.datestay{border: 1px solid #2f2f2f !important;}</code>
<code>.datestay{border: 1px solid #2f2f2f !important;}</code>
   
   
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  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:
<code>.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}</code>
<code>.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}</code>


Line 121: Line 171:


<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.
<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)===
Line 177: Line 233:
=== Show number of nights on mobiles===  
=== Show number of nights on mobiles===  
<code>.b24-selector-numnight { display: inline-block !important; }</code>
<code>.b24-selector-numnight { display: inline-block !important; }</code>
=== "Check-in" and "Check-out" text ceases to use the Highlight Background colours and uses a white background instead with narrow width screens ===
<code>#inputcheckingroup { background: transparent !important; border: none !important;}</code>
<code>#inputcheckoutgroup { background: transparent !important; border: none !important;}</code>


=== Hide room picture on check-out page===  
=== Hide room picture on check-out page===  
Line 184: Line 246:
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>


= Multiple Property Booking Page
=== Hide "Print Booking" on the confirmation screen===
<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"
<code>.conf_p{display:none;}</code>
 
=== Hide "Click here to make another booking" on the confirmation screen===
<code>.bookagainlink{display:none;}</code>
 
=== Adjust alignment for RTL languages (Arabic, Hebrew)===
<code>.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 ===
<code>#collapseAdvancedSearch{height: auto; display:block !important;}</code>
<code>#collapseAdvancedSearch{height: auto; display:block !important;}</code>


<code>.b24-agencysearchlink{display:none;}</code>
<code>.b24-agencysearchlink{display:none;}</code>
If the above does not work, please try this:
<code>#b24scroller-fullcontainer {position: sticky; top: 0; z-index: 1000;}</code>


=== Change height of full-width slider ===
=== Change height of full-width slider ===
Line 201: Line 315:


<code>#inputnumadult option:nth-child(n+X){display:none;}</code>
<code>#inputnumadult option:nth-child(n+X){display:none;}</code>
<code>#inputnumchild option:nth-child(n+X){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>
=== Hide Property Name ===
This will remove the individual property names from the Multi Property booking page.
<code>.at_propnametext {display: none;}</code>
== BOOKING WIDGETS ==
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  CSS needs to be added directly in your web site
===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===
Line 229: Line 378:
<code>#iconedit {display: none;}</code>
<code>#iconedit {display: none;}</code>


=== Align all table content right ===
<code>.conf_subheadercenter, .conf_numbercenter{text-align: right !important;}</code>


= CONTROL PANEL =
= CONTROL PANEL =
Line 235: Line 386:
*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
*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;}</code>
 
===Hide "Price Checker Tool" button===
<code>.b24btn_PriceCheck {display: none}</code>
 
===Hide "Try the new calendar" link===
<code>.tryTheNewCalendar {display: none;}</code>
 
===Hide 'Add Booking' button===
<code>.b24btn_AddBooking{display:none}</code>
 
===Hide 'Desktop icon' button===
<code>.fa-desktop{display:none}</code>
 
== Dynamic Multi-Calendar ==
===Hide hover text from prices===
<code>.ui-tooltip { display:none !important; }</code>
===Hide "Intelligence" icon===
<code>.sticky-left .row-intelligence-button{display: none;}</code>
===Hide "Help" icon in left column===
<code>.sticky-left .row-help-button  {display: none;}</code>
===Hide Drag&Drop option===
<code>#dragDropButton  {display: none;}</code>
===Hide "Notes" icon in left column===
<code>.sticky-left .fa-comment-alt-plus, .sticky-left .fa-comment-alt-lines {display: none;}</code>
===Hide "Intelligence" icon===
<code>.sticky-left .row-intelligence-button{display: none;}</code>
===Hide Group booking icons===
<code>.fa-circle{display: none;}</code>
===Display occupancy as color instead of number===
<code>.calendar2 .property-stats-wrapper
{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: #0000FF !important; }</code>
 
===Change color and background color of daily prices===
<code>.price { background-color:#7cc576; color:white;}</code>
===Make inventory row read-only===
<code>.calendar2 .row-room {
pointer-events: none;
}</code>
 
===Make Daily Price row read-only===
<code>.row-price{
pointer-events: none;
}</code>
 
===Change background and font color for "Unallocated" bookings===
<code>..pagetypecalendar2 .overflow-unit{ background-color: #FEE0DD; color: #9E4843;}</code>
 
===Hide the option to create or change views===
<code>#view-templates-button{
display: none;
}</code>
 
===Disable the option to create or change views===
<code>#view-templates-button, #saveViewButton{
pointer-events: none;
}</code>


===Show today in red===
<code>
.today-header{background-color:red !important;}
</code>
== Old Calendar ==
===Hide "Show" in the CALENDAR===
===Hide "Show" in the CALENDAR===
<code>.dashgridshowfilter {display:none;}</code>
<code>.dashgridshowfilter {display:none;}</code>
Line 246: Line 496:
<code>.dashgrid_rowroomname .dropdown ul.dropdown-menu li:nth-child(3) {display:none !important;}</code>
<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) from CALENDAR===
<code>.icon-suitcase, .b24btn_AddBooking{display:none}</code>
<code>.icon-suitcase, .fa-suitcase {display:none}</code>
 
===Hide  button 'Add Booking' from CALENDAR===
<code>.b24btn_AddBooking{display:none}</code>


===Display red when inventory is 0===
===Display red when inventory is 0===
<code>.inv0 .dashgrid_inventory{color:red;}</code>
<code>.inv0 .dashgrid_inventory{color:red;}</code>


===Show weekends (Saturday/Sunday) in red===
===Show weekends (Saturday/Sunday) in a different color===
<code>.weekend2{background-color:red;}</code>
<code>.weekend2{background-color:red;}</code>


Line 262: Line 515:
<code>.todaydate{background-color:red;}</code>
<code>.todaydate{background-color:red;}</code>


===Show past dates in grey===
===Show past dates in a different color===
<code>.pastdate{background-color:grey;}</code>
<code>.pastdate{background-color:grey;}</code>


Line 269: Line 522:


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


===Warning color dates not selling===
===Warning color dates not selling===
Line 278: Line 530:
<code>.dashcontrol #dashid{display: none !important}</code>
<code>.dashcontrol #dashid{display: none !important}</code>


===Hide the "Hamburger" menu from DASHBOARD===
===Hide the "Padlock" menu from DASHBOARD===
<code>.dashcontrol .dropdown{display: none !important}</code>
<code>.dashcontrol .dropdown{display: none !important}</code>


Line 287: Line 539:
<code>.mobiledashaddbooking{display:none;}</code>
<code>.mobiledashaddbooking{display:none;}</code>


===Hide room on Housekeeping Units and Housekeeping Bookings modules====
.widgettype-units .roomrowclassXXX {display: none;} /* replace XXX with the room ID*/
===Hide  column on the dashboard tables===
Change the child number in brackets to the desired column.
<code>.dashboardtable th:nth-child(9) {display:none;}</code>
===Hide  Edit button in the Notes component===
Change the child number in brackets to the desired column.
<code>#dashboardnotea  .btn {display:none;}</code>
==Align the content of a column right==
<code>  .bookingtable  td:nth-child(8) {text-align: right;} </code>


== Guests Menu ==
== Guests Menu ==
Line 292: Line 560:
=== Hide a certain row in the "Info" tab  on  GUESTS===
=== Hide a certain row in the "Info" tab  on  GUESTS===
<code>.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; }</code>
<code>.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; }</code>


== Bookings Menu ==
== Bookings Menu ==
Line 300: Line 567:
=== Hide room name in the BOOKING GRID ===
=== Hide room name in the BOOKING GRID ===
<code>.bookgrid_rowroomname{display: none;}</code>
<code>.bookgrid_rowroomname{display: none;}</code>
=== Hide room name in the BOOKING GRID ===
<code>. pagetypebookingsgrid .todaydate{font-weight:bold;}</code>


=== Hide a certain column in the BOOKING LIST Table ===
=== Hide a certain column in the BOOKING LIST Table ===
Line 306: Line 576:
Examples:
Examples:


<code>.pagetypebookingslist .bookingtable tr > *:nth-child(1) {display: none;}</code> will hide the first column which is 'Number'.
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(2) {display: none;}</code> will hide the first column which is 'Number'.
 
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(11) {display: none;}</code>  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  column on the BOOKINGS table===
Change the child number in brackets to the desired column.  


=== Hide cancelled bookings in the BOOKING Table ===
<code> .bookingtable  th:nth-child(12) {display:none;} </code>
 
===Hide  cancelled bookings BOOKINGS list===
<code>.pagetypebookingslist  .cancelbooking{display:none;} </code>
 
=== Hide cancelled bookings in the BOOKINGS Table ===
<code>.bookingtable .cancelbooking {display:none;}</code>
<code>.bookingtable .cancelbooking {display:none;}</code>


=== Hide "Export" button ===
=== Hide "Export Bookings" buttons ===
<code>.b24btn_ExportBookings {display:none;}</code>
<code>.bookingfilterheadline .floatright .btn {display:none;}</code>
 
===Disable moving of bookings===
<code> .pagetypebookingsgrid table {pointer-events: none;}</code>
 
== Fixed Prices Menu ==
===Hide column on the Fixed Prices table===
Change the child number in brackets to the desired column.


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


== Reports Menu ==
== Reports Menu ==
Line 338: Line 621:
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>


=== Hide the "Delete" button for rooms ===
<code>.pagetyperooms .b24btn_delete{display:none;}</code>


==Booking Popup==
==Booking Popup==
===Hide 'Overview tab===
<code>.gotobookingoverview{display:none;}</code>
===Hide 'Open in new Window' link===
===Hide 'Open in new Window' link===
<code>.pagetypeajaxbookedit.openinnewwindow{display:none;}</code>
<code>.pagetypeajaxbookedit.openinnewwindow{display:none;}</code>
Line 348: Line 635:


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 ===
Line 366: Line 664:


====Hide the 'Assign Invoice Number' button====
====Hide the 'Assign Invoice Number' button====
<code>.pagetypeajaxbookedit .b24btn_AssignInvoiveNumber{display:none;}</code>
<code>.pagetypeajaxbookedit .b24btn_AssignInvoiceNumber{display:none;}</code>


German control panel:  
German control panel:  
Line 378: Line 676:


<code>.pagetypeajaxbookedit #bookingtemplate3button{display:none;}</code>
<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 ===
Line 503: Line 807:


<code>.pagetypeajaxbookedit .menusetting-guestemail{display:none;}</code>
<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 ==
Line 509: Line 825:
<code>.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}</code>
<code>.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}</code>


=== Hide the "Make a Charge using Stripe" button ===
=== Hide the "Stripe" button ===
<code>#makechargeusing{display:none;}</code>
<code>#makechargeusing{display:none;}</code>
=== Hide the Stripe "Refund" button ===
<code>#b24btn_Refund{display:none;}</code>
If your are using the control panel in another language than English you might need to replace the word Refund with what you see on the button.


=== Hide potential issue "Less than 12 months available"===
=== Hide potential issue "Less than 12 months available"===
<code>.warninglessthan12monthsavailable{ display: none}</code>
<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 ===
<code>.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}</code>
<code>.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}</code>
=== Hide the option to unlock invoices===
<code>.menusetting-invoicelock {display:none;}</code>
Retrieved from "https://wiki.beds24.com/index.php/Custom_CSS"