Custom CSS: Difference between revisions

Jump to navigation Jump to search
← Older edit
No edit summary
 
(53 intermediate revisions by 3 users not shown)
Line 7: Line 7:
<div class="heading">Custom CSS</div>
<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 which can be used to customize the booking page or the control panel.


__TOC__
__TOC__
= PROPERTY BOOKING PAGE =
= Booking Engine =
== Property Booking Page ==
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  Custom CSS can be added in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE DEVELOPERS > "Custom CSS"
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  Custom CSS can be added in {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE DEVELOPERS > "Custom CSS"
=== Force the Iframe to have a certain height ===
/* Style for Extra Large Screen */
@media (max-width:1199px) {
iframe {
height: 292px;
}
}
/* Style for Large Screen */
@media (max-width:991px) {
iframe {
height: 2000px;
}
}
/* Style for Medium Screen */
@media (max-width:767px) {
iframe {
height: 2200px;
}
}
/* Style for Small Screen */
@media (max-width:575px) {
iframe {
height: 2500px;
}
}


=== Bigger room name ===
=== Bigger room name ===
Line 27: Line 59:
.roomoffercalendarmonth .dateavail {pointer-events: none;}</code>
.roomoffercalendarmonth .dateavail {pointer-events: none;}</code>


=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis)===
=== 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  ===
Line 87: 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 186: 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 192: Line 245:
=== 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===  
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>
=== Hide "Print Booking" on the confirmation screen===
<code>.conf_p{display:none;}</code>
=== Hide "Click here to make another booking" on the confirmation screen===
<code>.bookagainlink{display:none;}</code>


=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
Line 234: Line 293:
</code>
</code>


= MULTI PROPERTY BOOKING PAGE =
==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"
<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"


Line 242: Line 301:


<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 251: Line 314:
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.


<code>#inputnumadult option:nth-child(n+6){display:none;}</code>
<code>#inputnumadult option:nth-child(n+X){display:none;}</code>
 
<code>#inputnumchild option:nth-child(n+6){display:none;}</code>
 
=== Hide "Print Booking" on the confirmation screen===
<code>.conf_p{display:none;}</code>


=== Hide "Click here to make another booking" on the confirmation screen===
<code>#inputnumchild option:nth-child(n+X){display:none;}</code>
<code>.bookagainlink{display:none;}</code>


=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
Line 279: Line 336:
</code>
</code>


= BOOKING WIDGETS =
=== 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
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  CSS needs to be added directly in your web site


Line 316: 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 333: Line 397:


===Hide "Settings" icon in left column===
===Hide "Settings" icon in left column===
<code>.#c3sidebarCollapse{display: none !important;} {display: none;}</code>
<code>#c3sidebarCollapse {display: none !important;}</code>


===Hide "Price Checker Tool" button===
===Hide "Price Checker Tool" button===
Line 340: Line 404:
===Hide "Try the new calendar" link===
===Hide "Try the new calendar" link===
<code>.tryTheNewCalendar {display: none;}</code>
<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 ==
== Dynamic Multi-Calendar ==
===Hide hover text from prices===
<code>.ui-tooltip { display:none !important; }</code>
===Hide "Intelligence" icon===
===Hide "Intelligence" icon===
<code>.sticky-left .row-intelligence-button{display: none;}</code>
<code>.sticky-left .row-intelligence-button{display: none;}</code>
===Hide "Help" icon in left column===
===Hide "Help" icon in left column===
<code>.sticky-left .row-help-button  {display: none;}</code>
<code>.sticky-left .row-help-button  {display: none;}</code>
===Hide Drag&Drop option===
<code>#dragDropButton  {display: none;}</code>
===Hide "Notes" icon in left column===
===Hide "Notes" icon in left column===
<code>.sticky-left .fa-comment-alt-plus, .sticky-left .fa-comment-alt-lines {display: none;}</code>
<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===
===Display occupancy as color instead of number===
<code>.calendar2 .property-stats-wrapper
<code>.calendar2 .property-stats-wrapper
Line 376: Line 454:
<code>.sticky-left .row-help-button {display: none;}</code>
<code>.sticky-left .row-help-button {display: none;}</code>
===Change color of unavailable dates ===
===Change color of unavailable dates ===
<code>.inv0 { color: red }</code>
<code>.inv0 { color: #0000FF !important; }</code>
 
===Change color and background color of daily prices===
===Change color and background color of daily prices===
<code>.price { background-color:#7cc576; color:white;}</code>
<code>.price { background-color:#7cc576; color:white;}</code>
Line 387: Line 466:
<code>.row-price{
<code>.row-price{
pointer-events: none;
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>
}</code>


===Disable the option to create or change views===
===Disable the option to create or change views===
<code>#view-templates-button{
<code>#view-templates-button, #saveViewButton{
pointer-events: none;
pointer-events: none;
}</code>
}</code>
===Show today in red===
<code>
.today-header{background-color:red !important;}
</code>


== Old Calendar ==
== Old Calendar ==
Line 405: Line 497:


===Hide suitcase icon (add booking) from CALENDAR===
===Hide suitcase icon (add booking) from CALENDAR===
<code>.icon-suitcase {display:none}</code>
<code>.icon-suitcase, .fa-suitcase {display:none}</code>


===Hide  button 'Add Booking' from CALENDAR===
===Hide  button 'Add Booking' from CALENDAR===
Line 455: Line 547:


<code>.dashboardtable th:nth-child(9) {display:none;}</code>
<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==
==Align the content of a column right==
Line 470: 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 476: 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(10) {display: none;}</code>  will hide the tenth column which is 'Email'.
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(11) {display: none;}</code>  will hide the tenth column which is 'Email'.


===Hide  column on the BOOKINGS table===
===Hide  column on the BOOKINGS table===
Line 484: Line 584:


<code> .bookingtable  th:nth-child(12) {display:none;} </code>
<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 ===
=== 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===
===Disable moving of bookings===
<code> .pagetypebookingsgrid table {pointer-events: none;}</code>
<code> .pagetypebookingsgrid table {pointer-events: none;}</code>


== Rates Menu ==
== Fixed Prices Menu ==
===Hide column on the rates table===
===Hide column on the Fixed Prices table===
Change the child number in brackets to the desired column.  
Change the child number in brackets to the desired column.  


Line 517: Line 620:
=== Hide the "Delete" button for properties ===
=== Hide the "Delete" button for properties ===
<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 527: 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  ====
====Prevent manual entry of charge items  ====
Line 712: 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 ===
Retrieved from "https://wiki.beds24.com/index.php/Custom_CSS"