Customise the booking site with CSS

While the booking site is based on a standard design template and booking flow, it is possible to do some customisation. You can upload your own logo, adjust texts and form. Also for the more technically inclined it is possible to customise the design with CSS. If you do not know what CSS then you can contact your web-developer to assist you.

Requirements: You must host the CSS file yourself. The URL must be a publicly available and served over HTTPS. Add the URL to the CSS setting under Booking Site.

As the options with CSS are very broad we think it's best to view the HTML source of the booking site to get an understanding of how you can utilise your custom CSS. There are many classes and elements you can override on each page in the booking site. There are also common elements on each page.

Common elements

<header> and <footer> is included on each page. Please note that you cannot hide links to the privacy policy or support.

The content of each page is in the <main> element.

Page elements

Some pages have unique elements you can override. For example list of services: section#services. You can also rely on the body class for referencing elements on a specific page. For example list of available slots: body.c_services.a_slots

Examples

Set background colour of available slots: body.c_services.a_slots .intervals li .interval { background-color: green; }

Increase font in footer for all pages: footer { font-size: 1.4em; }