You can customize all aspects of the design as well as hide elements from the booking engine. You will need some basic knowledge of CSS in order to use this feature.

1. Go to Settings -> Booking engine -> Manage booking engines, and click “Edit” on the booking engine you want to customize.
2. Select the “Custom CSS” tab.
3. After adding your custom CSS, click “Save CSS”.

Best Practices for Customizing CSS

Overview

To make it easier for you to customize your CSS we have provided specific classes for the general structure and hierarchy of the markup, mainly on generic elements such as `div` or `span` to give additional context. We use the BEM (Block, Element, Modifier) naming convention as a base.

Basic BEM structure

Name Description Example
.block { } .block represents the higher level of an abstraction or component. .page-results
.block__element { } .block__element represents a descendant of .block that helps form .block as a whole. .page-results__card-items
.block–modifier { } .block–modifier represents a different state or version of .block. .page-results__card-items–unit

In most cases, this should suffice for you to apply your custom CSS. We do not recommend that you use ID selectors or other class selectors (for example, those starting with js- or sirvoy-), as these are not intended for styling purposes and might change.