Changes

Jump to navigation Jump to search

Custom CSS

1,811 bytes added, 12:25, 6 April 2020
no edit summary
= BOOKING PAGE =
<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 ===
<code> .at_roomnametext{font-size: 14px;} /*if you want the text even bigger use a higher number*/</code>
=== Disable clicks on calendar selector===
====Disable month back-and-forth toggle====
<code> .monthcalendarhead{pointer-events: none;}</code>
====Disable clicks on dates====
<code> .roomoffercalendarmonth{pointer-events: none;}</code>
=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis)===
NOTE: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this function.
<code> .datenco{background-color:#f4f4f4; color:#cccccc;}</code>
=== Background Image ===
Replace '<nowiki>https://www.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>
=== Shadow around your Booking Page (Adaptive Booking Page only)===
<nowiki>#</nowikicode>.bookingpage { -webkit-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: 0 1px 2px rgba(0, 10, 10, 0.38); margin-bottom: 20px; }</code>
=== Booking Page with rounded corners (Adaptive Booking Page only)===
<nowikicode>#</nowiki>bookingpage{border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px;}</code>
=== Hide cents===
<code>.bookingpagecents {display:none;}</code>
=== Show prices with cents even if cents are zero ===
<code>.bookingpagecentshide {display:inline;}</code>
=== Mark certain fields in the calendar selector===
Example 1: Set the font color for the weekday heading of Monday ('Mon')
<code>.dayMon{color:#c44a2f !important;}</code>
Example 2: Set the background color for the weekday heading of Monday ('Mon')
<code>.dayMon{background-color:#c44a2f !important;}</code>
Example 3: Set the font color for all the dates that fall on a Saturday
<code>.daysat{color:#c44a2f !important;}</code>
Example 4: Add a border around all the dates that fall on a Sunday
<code>.daysun{border:1px solid #999999 !important;}</code>
=== Add a border around the selected dates===
<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: <code>.prevdatestay, .datestay{border: 1px solid #2f2f2f !important;}</code>
=== Line through unavailable dates===
<code>.datenotavail{text-decoration: line-through;}</code>
=== Mark past dates with a different background and text colour===
<code>.datepast{background-color: #xxxxxx; color: #xxxxxx;}</code>
=== Change width of hover image (Adaptive Booking Page only)===
<code>.ui-tooltip{max-width: 500px;}</code>
=== Remove the hover effect on pictures (Adaptive Booking Page only)===
<code>img{pointer-events: none;}</code>
=== Add a label above the room selector for multiple room bookings (Responsive Booking Page only)===
<code>.roomofferqtyselectlabel{display: block;}</code>
=== Hide up button (Responsive Booking Page only)===
<code>footer .button{display: none;}</code>
=== Add icons to descriptive texts (Responsive Booking Page only)===
Examples:
<code><nowiki><span class="glyphicon glyphicon-user" aria-hidden="true"></span></nowiki></code> 
will add a Bootstap icon for a person.
<code><nowiki><i class="fa fa-bicycle" aria-hidden="true"></i></nowiki></code> 
will add a Font Awesomeicon for a bicycle.
<span style=color:#fe746c;“ >{{#fas:exclamation-triangle}} </span> Note: 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)===
<code>.b24fa{display:none;}</code>
<code>#b24scroller .input-group-addon{display:none;}</code>
=== Change text color of language selector and currency selector (Responsive Booking Page only)===
<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)===
<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) ===
This code will remove all currencies except for Euros, Swiss Francs and US Dollars:
<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 ===
<code>#inputnumadult option[value="0"] {display:none !important;}</code>
=== Limit quantity selectors for upsell items ===
Example 1: Set the range of the optional quantity selector for your 2nd upsell item (set 'Per Booking') to 0-4:
<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:
<code>#optextraroom5 option:nth-child(n+22){display:none;}</code>
=== Hide Check-in / Check-out selector ===
<code>.b24-selector-checkin{display:none;}</code>
<code>.b24-selector-checkout{display:none;}</code>
=== Hide number of nights selector ===
<code>.b24-selector-numnight{display:none;}</code>
=== Change height of full-width slider ===
<code>.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .item {height: 500px;}</code>
<code>.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .carousel.slide{ height: 500px !important;}</code>
=== Hide the offer description on the check-out page===
<code>.at_offersummary {display: none;}</code>
=== Show number of nights on mobiles===
<code>.b24-selector-numnight { display: inline-block !important; }</code>
=== Hide room picture on check-out page===
<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===
<code>.bp2bookcollectpayment .panel-pay-card{display:none;}</code>
= MULTIPLE BOOKING PAGE =
<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 ===
<code>#collapseAdvancedSearch{height: auto; display:block !important;}</code>
<code>.b24-agencysearchlink{display:none;}</code>
=== Change height of full-width slider ===
<code>.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .item {height: 600px;}</code>
<code>.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .carousel.slide{height: 500px !important;}</code>
=== 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.
<code>#inputnumadult option:nth-child(n+X){display:none;}</code>
= INVOICES and PRINT TEMPLATES =
=== Center invoice on the screen and set overall font size===
<code>body {text-align: center; font-size: 16px;}</code>
=== Set font size of property name ===
<code>#invoicepropname{font-size: 24px;}</code>
=== Set font size of address ===
<code>#invoiceaddress{font-size: 18px; padding-bottom: 50px;}</code>
=== Set font size of the invoice table ===
<code>.confirmationtable{font-size: 16px;}</code>
=== Change margin===
<code>.printbooking2 {margin: 20px;}</code>
=== TBC ===
<code>#invoicetable{margin-left:auto; margin-right:auto;}</code>
=== TBC ===
<code>#invoiceprinttime{font-size: 12px;}</code>
=== Hide edit button in the invoice ===
<code>#iconedit {display: none;}</code>
===Hide "Show" in the CALENDAR===
<code>.dashgridshowfilter {display:none;}</code>
===Hide "Override row" in the CALENDAR===
<code>.dashgrid_rowtype1{display:none;}</code>
===Hide item from dropdown for rooms in the CALENDAR===
<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===
<code>.icon-suitcase, .b24btn_AddBooking{display:none}</code>
===Display red when inventory is 0===
<code>.inv0 .dashgrid_inventory{color:red;}</code>
===Show weekends (Saturday/Sunday) in red===
<code>.weekend2{background-color:red;}</code>
===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
<code>.caldayX{background-color:red;}</code>
===Show today in red===
<code>.todaydate{background-color:red;}</code>
===Show past dates in grey===
<code>.pastdate{background-color:grey;}</code>
===Display room name and icons in one line===
<code>.dashgrid_rowroomname{display:inline;}</code>
.dashgrid_rowroomname{display:inline;} <code>.editroomlink{padding-left: 2px;}</code>
===Warning color dates not selling===
<code> .dashgrid_inventory_nap{background-color: red; color: white;}</code>
== Dashboard ==
 
===Hide the Dashboard selector (drop-down menu) from DASHBOARD===
<code>.dashcontrol #dashid{display: none !important}</code>
===Hide the "Hamburger" menu from DASHBOARD===
<code>.dashcontrol .dropdown{display: none !important}</code>
=== Hide a certain column in the Departures Table on the DASHBOARD===
<code>.mobiledeparture tr > *:nth-child(X) {display: none;}</code>
===Hide the "Add Booking" from mobile DASHBOARD===
<code>.mobiledashaddbooking{display:none;}</code>
=== Hide a certain row in the "Info" tab on GUESTS===
<code>.pagetypeguests .viewguest .table tr:nth-child(x) {display: none; }</code>
== Bookings Menu ==
 
=== Hide property name in the BOOKING GRID ===
<code>.bookgrid_rowpropname{display: none;}</code>
=== Hide room name in the BOOKING GRID ===
<code>.bookgrid_rowroomname{display: none;}</code>
=== Hide a certain column in the BOOKING LIST Table ===
<code>.pagetypebookingslist .bookingtable tr > *:nth-child(X) {display: none;}</code>
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(10) {display: none;} </code> will hide the tenth column which is 'Email'.
=== Hide cancelled bookings in the BOOKING Table ===
<code>.bookingtable .cancelbooking {display:none;}</code>
=== Hide "Export" button ===
<code>.b24btn_ExportBookings {display:none;}</code>
== Rates Menu ==
 
=== Hide a certain column in the RATES Table ===
<code>.pagetyperates .bookingtable tr> *:nth-child(X) {display: none;}</code>
== Reports Menu ==
 
=== Limit selector list for custom reports ===
Example: Limit the list to reports 1 - 3:
<code>#reportid option:nth-child(n+4){display:none;}</code>
=== Hide a certain field from 'Available Columns' ===
Example: Hide the 'Email' field
<code>.pagetypereports2 #guestemail {display: none;}</code>
=== Hide the "Delete" button for properties ===
<code>.pagetypeproperties .b24btn_delete{display:none;}</code>
===Hide 'Open in new Window' link===
<code>.pagetypeajaxbookedit.openinnewwindow{display:none;}
=== 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.
====Hide the checkout selector====
<code>.pagetypeajaxbookedit #checkout{display:none;}</code>
====Hide the 'Delete' button====
====Hide the 'Add Booking' button====
<code>.icon-suitcase, .b24btn_AddBooking{display:none;}</code>
====Hide the 'Copy as new' button====
<code>.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;}</code>
====Hide the 'Print' button====
<code>.pagetypeajaxbookedit #bookingprintbutton{display:none;}</code>
====Hide the 'Assign Invoice Number' button====
<code>.pagetypeajaxbookedit .b24btn_AssignInvoiveNumber{display:none;}</code> German control panel:
German Version: <code>.pagetypeajaxbookedit .b24btn_Rechnungsnummererzeugen{display:none;}</code>
====Hide the 'Template' buttons====
<code>.pagetypeajaxbookedit #bookingtemplate1button{display:none;}</code>
<code>.pagetypeajaxbookedit #bookingtemplate2button{display:none;}</code>
<code>.pagetypeajaxbookedit #bookingtemplate3button{display:none;}</code>
=== Hide Specific Fields ===
 
====TAB Summary====
Guest title
<code>.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}</code>
Last Name
<code>.pagetypeajaxbookedit .menusetting-guestname{display:none;}</code>
Guest comments
<code>.pagetypeajaxbookedit .menusetting-guestcomments{display:none;}</code>
Notes
<code>.pagetypeajaxbookedit .menusetting-hostcomments{display:none;}</code>
Adults
.pagetypeajaxbookedit .menusetting-numadults{display:none;}
<code>.pagetypeajaxbookedit .menusetting-numadults{display:none;}</code> Children <code>.pagetypeajaxbookedit .menusetting-numchild{display:none;}</code>
Telephone
<code>.pagetypeajaxbookedit .menusetting-guestphone{display:none;}</code>
Mobile
<code>.pagetypeajaxbookedit .menusetting-guestmobile{display:none;}</code>
Fax
<code>.pagetypeajaxbookedit .menusetting-guestfax{display:none;}</code>
Address
<code>.pagetypeajaxbookedit .menusetting-guestaddress{display:none;}</code>
City
<code>.pagetypeajaxbookedit .menusetting-guestcity{display:none;}</code>
Postcode
<code>.pagetypeajaxbookedit .menusetting-guestpostcode{display:none;}</code>
Country (manual entry)
<code>.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}</code>
Country (drop-down list)
<code>.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}</code>
Status
<code>.pagetypeajaxbookedit .menusetting-status{display:none;}</code>
Room Selector
<code>.pagetypeajaxbookedit .menusetting-roomid{display:none;}</code>
Message
<code>.pagetypeajaxbookedit .menusetting-hostmessage{display:none;}</code>
Custom Questions (X = number of custom question)
<code>.pagetypeajaxbookedit .menusetting-guestcustqX{display:none;}</code>
Reference
<code>.pagetypeajaxbookedit .menusetting-ownerreference{display:none;}</code>
Quantity
<code>.pagetypeajaxbookedit .menusetting-qty{display:none;}</code>
Cancellable
<code>.pagetypeajaxbookedit .menusetting-stopcancel{display:none;}</code>
Flag
<code>.pagetypeajaxbookedit .menusetting-flagtext{display:none;}</code>
Status Code
<code>.pagetypeajaxbookedit .menusetting-statuscode{display:none;}</code>
Created in Account
<code>.pagetypeajaxbookedit .menusetting-Createdinaccount{display:none;}</code>
Original Referrer
<code>.pagetypeajaxbookedit .menusetting-OriginalReferrer{display:none;}</code>
Time Entered
<code>.pagetypeajaxbookedit .menusetting-TimeEntered{display:none;}</code>
IP Address
<code>.pagetypeajaxbookedit .menusetting-IPAddress{display:none;}</code>
API Message
<code>.pagetypeajaxbookedit .menusetting-apimessage{display:none;}</code>
Guest Database
<code>.pagetypeajaxbookedit .menusetting-isguest{display:none;}</code>
Email
<code>.pagetypeajaxbookedit .menusetting-guestemail{display:none;}</code>
== Miscellaneous ==
===Change the blue Login button on the initial Beds24 page (resellers only)===
<code>.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}</code>
=== Hide the "Make a Charge using Stripe" button ===
<code>#makechargeusing{display:none;}</code>
=== Hide potential issue "Less than 12 months available"===
<code>.warninglessthan12monthsavailable{ display: none}</code>
=== Hide 'Template 2' from Guest Management > Booking Templates ===
<code>.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}</code>
Retrieved from "https://wiki.beds24.com/index.php/Special:MobileDiff/16465"

Navigation menu