|
|
| Line 19: |
Line 19: |
|
| |
|
| To see a list of CSS examples look into this document: [[Custom_CSS|Custom CSS]] | | To see a list of CSS examples look into this document: [[Custom_CSS|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;
| |
| }
| |
|
| |
|
| == External CSS file == | | == External CSS file == |