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

Tiny graphic designer drawing with big pen on computer screen.jpg

Where can I find it? Dashboard>>> Design

Within the Design tab, you can customize the style of your booking widget to perfectly match your brand's visual identity and convey a consistent image.

You will find both ready-to-use predesigned templates and the option to add custom CSS code if you are looking for a tailored finish:

Real-time preview: Click "Resfresh preview" to check how the code changes look before applying them.
Save and apply: Once you are happy with the result, click "Publish" to save the changes permanently.
Version history: You also have a section where you can view and restore any previously saved versions.

Available Designs

The first step is to select the base template that best suits your needs:

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 !important;
    --turitop-fontfamily: "Helvetica" ,sans-serif !important;
    --turitop-background-color: #000000 !important;
    --turitop-font-color-v3: #4d4d4d !important;
    --turitop-selectedday-background: #02703c !important;
    --turitop-available-color: #5fbe7d !important;
    --turitop-NotAvailable-color:#6c6c6c !important;
    --turitop-TooLate-event-color: #7F059D !important;
    --turitop-TooLate-background: #DDBBE5 !important;
    --turitop-CurrentDay-background: #DDBBE5 !important;
    --turitop-CurrentDayBorder-color-style: 1px dashed grey !important;

}

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 (Deprecated)

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:

/***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;}