How to Change the Design of your Booking Widget – TuriTop Booking System Help Center

Where can I find it? Dashboard>>> Design

In the Design tab, you can easily adjust the style and personalize your booking widget. Customize your calendar’s look to match your brand and maintain a consistent corporate identity.

Here you can choose from multiple predefined designs, and you can also add CSS code to modify it:

You can click on the “Refresh preview” button to preview the effect of the code you have entered. Remember to click on “Publish” to save your changes.

Finally, you will have a section where you can view and retrieve all versions you have saved:

Available Designs

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

Pre-set Designs

TuriTop offers you a series of pre-designed templates to help you quickly implement your booking calendar with a modern and attractive design.

It is possible to modify the style of these design templates, but you will need to write CSS code to override or modify the current properties.

Aqua

Elegant Dark

Minimal Light

Skyline Light

Green Gradient

Aqua wave

Green Forest

Gold Horizon

Mint Sand

Ocean Spirit

Pink Sunset

Purple Dream

Design bookingbox-v3

The bookingbox-v3 design allows you to display a larger booking calendar with rounded corners. It is available in both light and dark modes.

Bookingbox-v3 (Light Mode)

Bookingbox-v3 (Dark Mode)

Customize the bookingbox-v3

If you want to customize your booking box for the bookingbox-v3 (Light or Dark Mode), you can copy and paste the following code in the Design box 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;

}

We recommend placing any additional or new code at the bottom of the native code. This helps prevent potential issues and makes it easier to locate for future modifications.

Widget with more spacing and no background

If you're looking for a minimalistic widget, paste the following CSS code in your Design tab:

: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:

Do you want to know how to configure the "Call to consult availability" feature? Click here.

Design bookingbox-v2

The bookingbox-v2 design offers a more compact calendar with square corners.

Customizing the bookingbox-v2

If you are using the bookingbox-v2, then you can also use the following code to match the colours of your web page. Copy and paste the code into the box and then change the values needed:

/*** 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;} 
/***Days without events**/.eventsCalendar-daysList li.dayEmpty a {background-color: #CC7070; color: #424242;}
/***Closed Days**/.eventsCalendar-daysList li.dayClosed a {background-color: #CC7070; color: #424242;}
/***Past Days**/.eventsCalendar-daysList li.dayPast.dayEmpty 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;}