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.
- Go to Settings -> Booking engines.
- Click the three dots adjacent to the booking engine you want.
- In the drop-down list, click “Edit.”
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.
Note: Any custom CSS will only affect the embedded version of the booking engine and the WordPress plugin. It will not affect the booking engine on the Sirvoy Website Builder or on the standalone page.