Custom CSS is still in the beta stage. This means style names may change as we tweak the final user experience. We will endeavour to keep users of Custom CSS informed about changes to style names or CSS changes as we release changes.
Web pages are styled with a language called CSS. CSS allows you to set custom styles on elements of a web page (such as changing colours, sizes, positions and other cosmetic tweaks).
Custom CSS allows you to apply custom styles to the Booking App when integrated in your web-site. Custom CSS is only available when embedding the Booking App using the injector.
Using Custom CSS you can tweak the Booking App to match the branding and style of your web-site so your customers get a seamless booking experience.
You can see Custom CSS in action in the Booking Demo.
To use Custom CSS, you need to add CSS to the page in which you have embedded the Booking
App. This can be done in several ways, but we recommend you use a stylesheet in the
<head> element of the page.
<link rel="stylesheet" href="{path_to_your_custom_css}">
Style names used by Flowbooking are prefixed with flow-.
To override the default style and use our own style, you should add a style rule to your custom style sheet using the style name you wish to override. For example, if you wish to change the style of the header containing the date in the list of events, you would write a rule:
.flow-dateHeaderPanel {
background: #333;
color: #EEE;
}
To find out the style names and where they apply, we recommend you use the Developer Tools included in any modern browser.
Flowbooking uses media queries to apply specific styles for small-screen devices such as mobile phones and small tablets.
Responsive CSS is applied for viewports less than 480px wide.
We recommend that any custom responsive CSS you use also use the same viewport size by using
the media query @media only screen and (max-width: 479px){ ... }