How to change the design of your booking widget

 Where can I find it? Dashboard>>> Design. 

In the Design tab, you can change the design and personalize your booking widget, either related to visualization or to remove or add sections depending on your needs. 

Which designs are available

First of all, you have to decide which design you want to choose:

You have 3 options to choose from:

1. bookingbox-v3 (Light Mode)
   
   
   
2. bookingbox-v3 (Dark Mode)
   
   
   
   
3. bookingbox-v2
   
   
   

Options 1 and 2 give you the option to display a booking calendar in large size and with rounded corners, you have the possibility to have a white or dark mode.

Option 3 gives you the possibility to display a calendar in a smaller size and with square corners.

Customizing your Calendar

If you want to customize your booking box for the bookingbox-v3 (Light or Dark Mode) you can copy and paste the following code and change the values to match the colours of your web page, there are infinite possibilities of modifying it.

:root {

--turitop-color: #26b4e1;
--turitop-fontfamily: "Helvetica" ,sans-serif;
--turitop-background-color: #000000;
--turitop-font-color: #f2f2f2;
--turitop-selectedday-background: #02703c;
--turitop-available-color: #5fbe7d;
--turitop-NotAvailable-color:#6c6c6c;
--turitop-TooLate-event-color: #7F059D;
--turitop-TooLate-background: #DDBBE5;
--turitop-CurrentDay-background: #DDBBE5;
--turitop-CurrentDayBorder-color-style: 1px dashed grey;

}

If you are using the bookingbox-v2, then you will need to use the following code instead:

/*** Background ***/ html, body, div.booking-box {background:#ffffff; } 
/***Service Title***/ div.booking-box-header h1 {color: #4F5155;} 

/***Calendar***/ 
/***Month Title***/ .eventsCalendar-currentTitle .monthTitle {background-color:#F58500; color: #FFF; } 

/****Days***/ /***Current Day***/ .eventsCalendar-daysList li.current a {background-color: #fff; color: #666; } 
/***Open Days**/ .eventsCalendar-daysList li.dayWithEvents a {background-color: #5cb85c; color: #FFF;} 
/***Closed Days***/ .eventsCalendar-day a {background-color: #CC7070; color: #424242;} 
/***Selected Day***/ .eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a, .eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a:hover {background-color: #F58500; color: #FFF;} 

/**** Hours ***/ 
/**** Hours available ***/ .event-label , label.event-label:hover {background: #5cb85c; color: #FFF;} 
/**** Closed hours***/ .event-label-closed {background: #fbc6bf; color: #ee1c00; } 
/**** Selected hour ***/ .event-label-selected, .event-label-selected:hover { background: #F58500; color: #fff;} 
/**** Hours available but closed by released ***/ .too-late, .too-late a, .too-late .event { background: #DDBBE5 !important; color: #7F059D !important; } 
/**** Hours not available (Event started) ***/ label.event-label-closed.event_started { background: lightgray !important; color: gray !important; text-decoration: line-through } 

/***Buttons***/ 
/***Buy Buttons***/ .product-buy-now, .buy-now, .buy-now-2 {background: #F58500; color: #fff;} 
/***Buy Buttons Hover***/ .product-buy-now:hover, .buy-now:hover, .buy-now-2:hover {background: #d47505; color: #fff;}

Copy and paste it in the box and then change the values in order to match with your colours.

 Advice: We recommend that you always add the new code at the bottom of the native code to avoid any issues and so it is easy to find it in case of modifications.

Native Widget in your booking software will be shown like the below image:

If you don't like the default colours, or the widget doesn't complement with the colours of your web page, there are infinite possibilities of modifying it.

In the following example, you have the code we used to change it into orange tones.

 Keep in mind: you must copy and paste this code and change the values of background and colour (font colour) by the ones you like the most.

In the above image, I have only changed the colours, but in the below image as you can see, the style of the calendar is different as well as the colours.

/*** Background ***/
html, body, div.booking-box {background:#ffffff; }

/***Service Title***/
div.booking-box-header h1 {color: #4F5155;}

/***Calendar***/

/***Month Title***/
.eventsCalendar-currentTitle .monthTitle {background-color:#F58500; color: #FFF; }

/****Days***/

   /***Current Day***/
.eventsCalendar-daysList li.current a {background-color: #fff; color: #666; }

   /***Open Days**/
.eventsCalendar-daysList li.dayWithEvents a {background-color: #5cb85c; color: #FFF;}

   /***Closed Days***/
.eventsCalendar-day a {background-color: #CC7070; color: #424242;}

   /***Selected Day***/
.eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a, .eventsCalendar-daysList li.dayWithEvents.calendar-day-selected a:hover {background-color: #F58500; color: #FFF;}

/**** Hours ***/

   /**** Hours available  ***/
.event-label , label.event-label:hover {background: #5cb85c; color: #FFF;}

   /**** Closed hours***/
.event-label-closed {background: #fbc6bf; color: #ee1c00; }

   /**** Selected hour ***/
.event-label-selected, .event-label-selected:hover { background: #F58500; color: #fff;}

   /**** Hours available but closed by released ***/
.too-late, .too-late a, .too-late .event
{ background: #DDBBE5 !important; color: #7F059D !important; }

   /**** Hours not available (Event started) ***/
label.event-label-closed.event_started {
    background: lightgray !important;
    color: gray !important;
    text-decoration: line-through
}

/***Buttons***/

/***Buy Buttons***/
.product-buy-now, .buy-now, .buy-now-2 {background: #F58500; color: #fff;}

/***Buy Buttons Hover***/
.product-buy-now:hover, .buy-now:hover, .buy-now-2:hover {background: #d47505; color: #fff;}

Most probably, your design needs were fulfilled during your demo or onboarding sessions. However, if you need help, you can also reach us here.

 Are you looking for information on the "Call to consult availability" feature? Click here.

Widget with more spacing and no background

If you're looking for some minimalistic widget, paste the following CSS code on your Design section:

:root{
--turitop-available-color:transparent;
}

/*Border color days*/
.eventsCalendar-daysList li.dayWithEvents a,.event-label{
 border: 1px solid var(--turitop-color);
 border-radius: 5px;
 color: var(--turitop-color);

}
.eventsCalendar-daysList li {
 padding: 5px!important;
}
.eventsCalendar-daysList li.dayWithEvents a:hover,.event-label:hover,.eventsCalendar-day a,li.current.disabled a,.event-label-closed{
 background:transparent!important;
}
.event-label.event-label-selected,.event-label-selected:hover,.eventsCalendar-daysList li.dayWithEvents a:hover{
 color:#fff;
 border: 1px solid var(--turitop-color);
 background-color:var(--turitop-selectedday-background)!important;
}
.eventsCalendar-daysList li.dayClosed a,li.current.disabled a,.event-label-closed{
 color: #aaa!important;
}
li.current.disabled{
 border: unset;
}
/*Border space days*/
.eventsCalendar-daysList li a{
 width:35px;
 display: inline-block;
}
.event-label,.event-label-closed{
 height: 40px;
 line-height: 2em;
}

It will look like this: