Custom CSS: Difference between revisions

Jump to navigation Jump to search
← Older edit
 
(25 intermediate revisions by 3 users not shown)
Line 10: Line 10:


__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 28: Line 59:
.roomoffercalendarmonth .dateavail {pointer-events: none;}</code>
.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)===
=== 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.  


Line 202: 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 214: Line 251:
=== Hide "Click here to make another booking" on the confirmation screen===
=== Hide "Click here to make another booking" on the confirmation screen===
<code>.bookagainlink{display:none;}</code>
<code>.bookagainlink{display:none;}</code>


=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
Line 257: 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 265: 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 274: 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>
<code>#inputnumchild option:nth-child(n+X){display:none;}</code>


=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
=== Adjust alignment for RTL languages (Arabic, Hebrew)===  
Line 301: Line 341:
<code>.at_propnametext {display: none;}</code>
<code>.at_propnametext {display: none;}</code>


= BOOKING WIDGETS =
== 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 339: Line 379:


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


= CONTROL PANEL =
= CONTROL PANEL =
Line 359: 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 366: 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>
Line 376: Line 422:
===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 404: 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: blue }</code>
<code>.inv0 { color: #0000FF !important; }</code>


===Change color and background color of daily prices===
===Change color and background color of daily prices===
Line 430: Line 480:
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 536: Line 591:
<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 570: Line 625:


==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 780: Line 837:


=== Hide potential issue "Too many guests in booking xxxxx"===
=== Hide potential issue "Too many guests in booking xxxxx"===
<code>..warningunitnotassigned{ display: none}</code>
<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"