Changes

*== Custom Text ==Any fixed text on the booking page can be exchanged in SETTINGS->BOOKING PAGE ->DEVELOPERS "Custom Text"

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

=== Bigger room name === /*code for bigger room name*/ .at_roomnametext{ font-sizeTo see a list of CSS examples look into this document: 14px /*if you want the text even bigger use a higher number*/ }[[Custom_CSS|Custom CSS]]

=== Disable click on calendar=External CSS file == It is possible to make the booking page use a CSS file that you supply, you must host the CSS file on a secure web server (using https:).roomoffercalendarmonth{ pointer-events: none; }

To do this you need to add the &cssfile parameter to the URL for the booking page, or for example the iframe SRC.monthcalendarhead{ pointer-events: auto; }

=== Mark dates when check-out is not allowed (i.e. for rentals on a weekly basis===To use You could do 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 ratesuse different styling per page or site.

NOTEFor example if your css file is: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this functionhttps://yoursite/path/your.css

.datenco{ background-colorGoto this site and encode it: #f4f4f4; colorhttp: #cccccc; }//meyerweb.com/eric/tools/dencoder/

Add the resulting parameter to the booking page URL like this:&cssfile=== Background Image ===To use a background image upload it to SETTINGS -> BOOKING PAGE -> PICTURES. Replace https://www.beds24.com/pic/p0000/2049/04.jpg with the url of your uploaded picture%3A%2F%2Fyoursite%2Fpath%2Fyour.css

/*code fo use an image as background*/Your CSS file will be included. body {Note: background-image:urlThe external stylesheet needs to be hosted on a secure site (https://www) to be accepted by the secure Beds24 booking page.beds24.com/pic/p0000/2049/04.jpg); }

/*code for a shadow around your booking page*/  <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)=Javascript ==Add code Javascript can be entered in SETTINGS-> BOOKING PAGE -> DEVELOPERS "Custom CSSAdvanced HTML Settings" /*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 the title text color of language selector and currency selector (responsive booking page only)=== #topofthebookingpage{/*javascript to change the titletext*/ color: #ffffff } exchange ffffff with the hex code of the color you want to use<script>document.== Javascript title==* Javascript can be entered in SETTINGS->BOOKING PAGE -'your title';</script>DEVELOPERS"Advanced HTML Settings"

'''Example link : Link to a booking form with dates and room pre populated:'''

| lang ||en (English), ar (Arabic), bg (Bulgarian), ca (Catalan), hr (Croatian), cs (Czech), da (Danish), de (German), el (Greek), es (Spanish), et (Estonian), fi (Finnish), fr (French), he (Hebrew), hu (Hungarian), id (Indonesian - Bahasa Indonesia), it (Italian), ja (Japanese), lt (Lithuanian), mn (Mongolian), my (Burmese), nl (Dutch), no (Norwegian), pl (Polish), pt (Portuguese), ro (Romanian), ru (Russian), sk (Slovak), sl (Slovenian), sr (Serbian), sv (Swedish), th (Thai), tr (Turkish), zh (Chinesesimplified), zt (Chinese traditional) || Sets the default language to open the booking page. (2013 new style booking page pages only)