Weins: 1 revision imported

2021-05-19T01:33:20Z

1 revision imported

Beds24>Annette: /* Add icons to descriptive texts (Responsive Booking Page only) */

2020-10-20T13:35:21Z

‎Add icons to descriptive texts (Responsive Booking Page only)

Show changes

Weins: 1版をインポートしました

2019-03-12T02:19:07Z

1版をインポートしました

Beds24>Annette: /* Control Panel */

2019-03-01T17:39:36Z

‎Control Panel

New page

[[Category:Developers]]
[[Category:Widgets]]
[[Category:Booking Page]]
[[Category:Accounts]]

''This page gives Custom CSS examples''

__TOC__

= Booking Page =

Custom CSS can be added in SETTINGS > BOOKING PAGE > DEVELOPERS > "Custom CSS"

=== Bigger room name ===

.at_roomnametext{font-size: 14px;} /*if you want the text even bigger use a higher number*/

=== Disable clicks on calendar selector===

====Disable month back-and-forth toggle====
.monthcalendarhead{pointer-events: none;}

====Disable clicks on dates====
.roomoffercalendarmonth{pointer-events: none;}

=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis)===
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.

.datenco{background-color:#f4f4f4; color:#cccccc;}

=== Background Image ===
To use a background image upload it to SETTINGS -> BOOKING PAGE -> PICTURES.

Replace '<nowiki>https://www.beds24.com/pic/p0000/2049/04.jpg</nowiki>' with the url of your uploaded picture.

body{background-image:url(<nowiki>https://www.beds24.com/pic/p0000/2049/04.jpg</nowiki>);}

=== Shadow around your Booking Page (Adaptive Booking Page only)===

<nowiki>#</nowiki>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;
}

=== Booking Page with rounded corners (Adaptive Booking Page only)===

<nowiki>#</nowiki>bookingpage{border-radius:7px; -webkit-border-radius:7px; -moz-border-radius:7px;}

=== Hide cents===

.bookingpagecents {display:none;}

=== Show prices with cents even if cents are zero ===

.bookingpagecentshide {display:inline;}

=== Mark certain fields in the calendar selector===
You can highlight both the headings of the calendar (i.e. Mon, Tue, Wed, Thu, Fri, Sat, Sun) and all the dates that fall on a given day of the week (i.e. all 4 or 5 dates that fall on a Saturday).

Headings = '.dayMon' (or dayTue, dayWed, dayThu, dayFri, daySat, daySun)

Dates = '.daymon' (or daytue, dayewed, daythu, dayfri, daysat, daysun)

Example 1: Set the font color for the weekday heading of Monday ('Mon')

.dayMon{color:#c44a2f !important;}

Example 2: Set the background color for the weekday heading of Monday ('Mon')

.dayMon{background-color:#c44a2f !important;}

Example 3: Set the font color for all the dates that fall on a Saturday

.daysat{color:#c44a2f !important;}

Example 4: Add a border around all the dates that fall on a Sunday

.daysun{border:1px solid #999999 !important;}

=== Add a border around the selected dates===
.datestay{border: 1px solid #2f2f2f !important;}

=== Line through unavailable dates===
.datenotavail{text-decoration: line-through;}

=== Mark past dates with a different background and text colour===
.datepast{background-color: #xxxxxx; color: #xxxxxx;}

=== Change width of hover image (Adaptive Booking Page only)===
.ui-tooltip{max-width: 500px;}

=== Remove the hover effect on pictures (Adaptive Booking Page only)===
img{pointer-events: none;}

=== Add a label above the room selector for multiple room bookings (Responsive Booking Page only)===
.roomofferqtyselectlabel{display: block;}

=== Hide up button (Responsive Booking Page only)===
footer .button{display: none;}

=== Add icons to descriptive texts (Responsive Booking Page only)===
[https://getbootstrap.com/docs/3.3/components/#glyphicons Bootstrap glyphicons] and [http://fontawesome.io/icons/ Font Awesome icons] can be added to the descriptive fields. To add icons the editor needs to be set to "Source"

Examples:

<nowiki><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</nowiki>
will add a Bootstap icon for a person.

<nowiki><i class="fa fa-bicycle" aria-hidden="true"></i>
</nowiki>
will add a Font Awesomeicon for a bicycle.

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)===
.b24fa{display:none;}

#b24scroller .input-group-addon{display:none;}

=== Change text color of language selector and currency selector (Responsive Booking Page only)===
#topofthebookingpage{color: #ffffff;}

=== Make language selector and currency selector a button (Responsive Booking Page only)===
.b24languagedropdown .btn, .b24languagedropdown .btn.active, .b24languagedropdown .btn:active, .b24currencydropdown .btn, .b24currencydropdown .btn.active, .b24currencydropdown.btn:active {background:white; padding:10px;}

=== Change text color of language selector and currency selector (Responsive Booking Page only)===

#topofthebookingpage a {color: #ffffff}

=== Hide currencies from the currency selector (Responsive Booking Page only) ===

The currency class format is: '''.cur-XXX'''.

'''cur''' is the name of the class and '''XXX''' represents a country code: '''CAD''' = Canadian Dollars, '''GBP''' = British Pounds and so on.
The country codes are:
AUD, BHD, CAD, CLP, CRC, EUR, FJD, GBP, GEL, ILS, ISK, NZD, USD, BGN, BRL, CHF, CNY, CZK, DKK, HKD, HRK, HUF, HUF, IDR, INR, JPY, KRW, LBP, LKR, MAD, MMK, MXN, MYR, NOK, PHP, PLN, RON, RUB, SEK, SGD, THB, TRY, ZAR

This code will remove all currencies except for Euros, Swiss Francs and US Dollars:
.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;}

=== Limit quantity selectors for upsell items ===

By default all the quantity selectors have a range from 0 - 250. You can limit the range:

Example 1: Set the range of the optional quantity selector for your 2nd upsell item (set 'Per Booking') to 0-4:

#optextra2 option:nth-child(n+6){display:none;}

Example 2: Set the range of the optional quantity selector for your 5th upsell item (set 'Per Room/Person/Adult/Child') to 0-20:

#optextraroom5 option:nth-child(n+22){display:none;}

=== Remove Check-in / Check-out selector ===

.b24-selector-checkin{display:none;}

.b24-selector-checkout{display:none;}

=== Change height of full-width slider ===
.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .item {height: 500px;}

.fullwidthjumbopropslider .b24fullcontainer-proprow1 .b24-prop-slider .carousel.slide{ height: 500px !important;}

= Multiple Booking Page =
Custom CSS can be added in SETTINGS > BOOKING PAGE > MULTIPLE PROPERTIES > DEVELOPERS > "Custom CSS"

=== Make search criteria always visible ===

#collapseAdvancedSearch{height: auto; display:block !important;}

.b24-agencysearchlink{display:none;}

=== Change height of full-width slider ===
.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .item {height: 600px;}

.fullwidthjumboagencyslider .b24fullcontainer-ownerrow1 .b24-owner-slider .carousel.slide{height: 500px !important;}

= Invoices =
Custom CSS can be added in SETTINGS > GUEST MANAGEMENT > STYLING > "Custom CSS"

=== Center invoice on the screen and set overall font size===
body {text-align: center; font-size: 16px;}

=== Set font size of property name ===
#invoicepropname{font-size: 24px;}

=== Set font size of address ===
#invoiceaddress{font-size: 18px; padding-bottom: 50px;}

=== TBC ===
#invoicetable{margin-left:auto; margin-right:auto;}

=== TBC ===
#invoiceprinttime{font-size: 12px;}

=== Hide edit button in the invoice ===
#iconedit {display: none;}

= Control Panel =
Custom CSS can be added in:
*SUB ACCOUNTS > ACCOUNT LIST to apply for all sub accounts
*SUB ACCOUNTS > ACCOUNT LIST > MANAGE ACCOUNT to apply for a specific sub account

===Hide the "Add Booking" from mobile DASHBOARD===
.mobiledashaddbooking{display:none;}

===Change the blue Login button on the initial Beds24 page (resellers only)===
.pagetypelogin .b24btn_Login{background-color:#xxxxxx;}

===Hide the "Delete" button in the booking menu===
.pagetypeajaxbookedit .deletebookingbutton{display:none;}

===Hide the "Add Booking" button in the booking menu===
.icon-suitcase, .b24btn_AddBooking{display:none;}

===Hide the "Copy as new" button in the booking menu===
.pagetypeajaxbookedit #bookingcopyasnewbutton{display:none;}

===Hide the "Print" button in the booking menu===
.pagetypeajaxbookedit #bookingprintbutton{display:none;}

===Hide the "Template" buttons in the booking menu===
.pagetypeajaxbookedit #bookingtemplate1button{display:none;}

.pagetypeajaxbookedit #bookingtemplate2button{display:none;}

.pagetypeajaxbookedit #bookingtemplate3button{display:none;}

===Hide "Show" in the CALENDAR===
.dashgrid_rowroomname .dropdown{display:none !important}

===Hide "Override row" in the CALENDAR===
.dashgrid_rowtype1{display:none}

===Hide dropdown for rooms in the CALENDAR===
.dashgridshowfilter {display:none;}

=== Hide the "Make a Charge using Stripe" button ===
.makechargeusingl{display: none}

=== Hide elements from the BOOKINGS pop up ===

Checkout selector
.pagetypeajaxbookedit #checkout{display:none;}

Guest title
.pagetypeajaxbookedit .menusetting-guesttitle{display:none;}

Last Name
.pagetypeajaxbookedit .menusetting-guestname{display:none;}

Guest comments
.pagetypeajaxbookedit .menusetting-guestcomments{display:none;}

Notes
.pagetypeajaxbookedit .menusetting-hostcomments{display:none;}

Adults
.pagetypeajaxbookedit .menusetting-numadults{display:none;}

Children
.pagetypeajaxbookedit .menusetting-numchild{display:none;}

Telephone
.pagetypeajaxbookedit .menusetting-guestphone{display:none;}

Mobile
.pagetypeajaxbookedit .menusetting-guestmobile{display:none;}

Fax
.pagetypeajaxbookedit .menusetting-guestfax{display:none;}

Address
.pagetypeajaxbookedit .menusetting-guestaddress{display:none;}

City
.pagetypeajaxbookedit .menusetting-guestcity{display:none;}

Postcode
.pagetypeajaxbookedit .menusetting-guestpostcode{display:none;}

Country
.pagetypeajaxbookedit .menusetting-guestcountry{display:none;}

Country
.pagetypeajaxbookedit .menusetting-guestcountry2{display:none;}

Status
.pagetypeajaxbookedit .menusetting-status{display:none;}

Room Selector
.pagetypeajaxbookedit .menusetting-roomid{display:none;}

Flag
.pagetypeajaxbookedit .menusetting-flagtext{display:none;}

Email (under the Email tab)
.pagetypeajaxbookedit .menusetting-guestemail{display:none;}

=== Hide property name in the BOOKINGS GRID ===
.bookgrid_rowpropname{display: none;}

=== Hide a certain colum in the BOOKINGS Table ===
.pagetypebookings .bookingtable tr > *:nth-child(X) {display: none;}

=== Hide a certain colum in the RATES Table ===
.pagetyperates .bookingtable tr> *:nth-child(X) {display: none;}

=== Hide a certain colum in the Departues Table on the dashboard===
.mobiledeparture tr > *:nth-child(X) {display: none;}

=== Hide potential issue "Less than 12 months available"===
.warninglessthan12monthsavailable{ display: none}

=== Hide 'Template 2' from Guest Management > Booking Templates ===
.pagetypecommunicationbooktemplate #settingformid .background_boxprop:nth-of-type(2){display:none;}

= Reports =
Custom CSS can be added in:
*SUB ACCOUNTS > ACCOUNT LIST to apply for all sub accounts
*SUB ACCOUNTS > ACCOUNT LIST > MANAGE ACCOUNT to apply for a specific sub account

=== Limit selector list for custom reports ===

Example: Limit the list to reports 1 - 3:

#reportid option:nth-child(n+4){display:none;}

← Older revision	Revision as of 01:33, 19 May 2021
(No difference)

← Older revision	Revision as of 02:19, 12 March 2019
(No difference)

Custom CSS - Revision history

Weins: 1 revision imported

Beds24>Annette: /* Add icons to descriptive texts (Responsive Booking Page only) */

Weins: 1版 をインポートしました

Beds24>Annette: /* Control Panel */

Weins: 1版をインポートしました