Custom CSS: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
Sorenjensen (talk | contribs) |
||
| (19 intermediate revisions by 3 users not shown) | |||
| Line 13: | Line 13: | ||
== Property Booking Page == | == 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 203: | 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 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+ | <code>#inputnumadult option:nth-child(n+X){display:none;}</code> | ||
<code>#inputnumchild option:nth-child(n+ | <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 357: | Line 397: | ||
===Hide "Settings" icon in left column=== | ===Hide "Settings" icon in left column=== | ||
<code> | <code>#c3sidebarCollapse {display: none !important;}</code> | ||
===Hide "Price Checker Tool" button=== | ===Hide "Price Checker Tool" button=== | ||
| Line 364: | 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 406: | 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: | <code>.inv0 { color: #0000FF !important; }</code> | ||
===Change color and background color of daily prices=== | ===Change color and background color of daily prices=== | ||
| Line 432: | 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 538: | Line 591: | ||
<code>.bookingtable .cancelbooking {display:none;}</code> | <code>.bookingtable .cancelbooking {display:none;}</code> | ||
=== Hide "Export" | === Hide "Export Bookings" buttons === | ||
<code>. | <code>.bookingfilterheadline .floatright .btn {display:none;}</code> | ||
===Disable moving of bookings=== | ===Disable moving of bookings=== | ||
| Line 572: | 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 782: | Line 837: | ||
=== Hide potential issue "Too many guests in booking xxxxx"=== | === Hide potential issue "Too many guests in booking xxxxx"=== | ||
<code> | <code>.warningunitnotassigned{ display: none}</code> | ||
=== Hide 'Template 2' from Guest Management > Booking Templates === | === Hide 'Template 2' from Guest Management > Booking Templates === | ||