17,096
edits
Changes
Jump to navigation
Jump to search
Created page with "Category:Developer Category:Widgets Category:Booking Page ''This page gives CSS examples' == Booking page == *Custom CSS can be added in SETTINGS->BOOKING PAG..."
[[Category:Developer]]
[[Category:Widgets]]
[[Category:Booking Page]]
''This page gives CSS examples'
== Booking page ==
*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 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.
/*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-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)===
Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "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;
}
[[Category:Widgets]]
[[Category:Booking Page]]
''This page gives CSS examples'
== Booking page ==
*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 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.
/*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-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)===
Add code in SETTINGS-> BOOKING PAGE -> DEVELOPERS "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;
}
