17,096
edits
Changes
Jump to navigation
Jump to search
[[Category:How to]]
[[Category:Wordpress]]
* Custom CSS can be added in SETTINGS->BOOKING PAGE ->DEVELOPERS > "Custom CSS"
=== Bigger room name === /*code for bigger room name*/ .at_roomnametext{ font-size: 14px /*if you want the text even bigger use a higher number*/ } === Disable click on calendar=== .roomoffercalendarmonth{ pointer-events: none; } .monthcalendarhead{ pointer-events: auto; } === 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 see a background image upload it to SETTINGS -> BOOKING PAGE -> PICTURES. Replace https://www.beds24.com/pic/p0000/2049/04.jpg with the url list of your uploaded picture. /*code fo use an image as background*/ body { background-image:url(https://www.beds24.com/pic/p0000/2049/04.jpg); } === Shadow Around your Booking Page (Adaptive Booking Page Only)=== Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSS" /*code for a shadow around your booking page*/ <nowiki>#</nowiki>bookingpage { -webkit-box-shadowexamples look into this document: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)===Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "[[Custom_CSS|Custom CSS" /*code for rounded corners*/ <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 days of the week ===Example 1: Change the background color for Saturday .daySat {color:#c44a2f !important;} exchange daySat by daySun, dayMon, dayTue, dayeWed, dayThu, dayFri to exchange the backgound color for other days. Example 2: Change the background color for Saturday .daysat {background-color:#ccc !important;} exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days. Example 3: Add a border arround Saturday .daysat {border:1px solid #999999 !important;} exchange daysat by daysun, daymon, daytue, dayewed, daythu, dayfri to exchange the backgound color for other days. === Add a border around the selected dates=== .datestay {border: 1px solid #2f2f2f !important;} === Line through unavailable dates=== .datenotavail { text-decoration: line-through; } === 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 } exchange ffffff with the hex code of the color you want to use. === 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; }
no edit summary
[[Category:Widgets]]
[[Category:Booking Page]]
''This page is about the menu SETTINGS -> BOOKING PAGE -> DEVELOPERS''
Code snippets for the booking page are available in SETTINGS->BOOKING PAGE.
== Custom CSS ==
== External CSS file ==
