If you have coding knowledge and want to customize your booking widget beyond the adjustments you can make to colors and styles, you can add CSS rules to further customize the booking interface. Click here to see examples of Bookeo widget customization.
Coding knowledge required
If you want to customize the booking widget using CSS rules, please make sure to have the necessary programming skills. CSS customization is meant only for advanced users.
If you have limited experience or knowledge about scripting and troubleshooting custom code, we strongly recommend that you look into hiring a web developer to assist you.
In this article:
Add CSS custom rules
To add CSS rules:
1. Go to Settings>Colors and Style
2. In the Custom CSS Section (advanced) [1], input your Custom CSS.
3. In the Mobile section, from the drop-down Mobile [2] menu, select if
- you want to use these CCS rules also for mobile devices
- you want to use default colors and rules for mobile devices
4. Save
Check your booking page’s desktop and mobile functionality
If you add custom CSS, make sure to check your booking page’s desktop and mobile functionality. Custom CSS may interfere with your booking page functionality, and all custom code falls outside of the scope of Bookeo support.Special CSS selectors
Bookeo adds special CSS attributes to the body element of each page, to help designers add rules specific to mobile or desktop devices, specific to widget integration or Bookeo hosted booking page, and so on.
- Rules that always apply: add .bookeocss as the first selector of your rule
- Rules that only apply to mobile devices: add .mobicss as the first selector of your rule
- Rules that only apply to desktop browsers: add .desktopcss as the first selector of your rule
- Rules that only apply to pages displayed inside the Bookeo widget: add .widgetcss as the first selector of your rule
- Rules that only apply to pages displayed outside the Bookeo widget: add .nowidgetcss as the first selector of your rule
- Combined selectors: CSS allows you to combine selectors, for example, .mobicss.widgetcss can be used for a rule that is only applicable when the page is inside the widget and the device is a mobile device.
Example:
.mobicss a {
color: red;
}
The above rule will change the color of text inside A tags to red, but only on mobile devices.
How to find the CSS id/class of the booking interface elements
If you are familiar with web development, the best way to find out what CSS rule selector you need, is to use a browser such as Google Chrome, which lets you find exactly the CSS id/class of every element just by clicking on it:
-
enable the browser's element inspector (Ctrl-Shift-I), section Elements, click on the magnifying glass at the bottom
-
click on the element you want to change
-
find its CSS id/class
-
add a CSS rule for that element