Tutorial: How to customize the look&feel of the booking process (3 / 4)

Tutorial Table of Contents

part 1: Schemes in advanced integration
part 2: Customizing the content with templates
part 3: Customizing the stylesheets
part 4: Customizing the reservation form design
Part 3 of 4: Customizing the stylesheets
Even though the templates can be styled with inline styles, usually you will want to customize the styling only using a dedicated CSS code section. In Settings / CSS style editor you can use a dedicated CSS editor with a convenient preview window which lets you preview the changes with any template. You'll see 3 editors here: one for the CSS styles used in all the templates, one for the calendar previews when viewed on a desktop / tablet (Calendar preview / Desktop) and one for the calendar previews when used with a mobile device (Calendar preview / Mobile). Even though the scheme is responsive, the calendar preview is not and there is a dedicated mobile version. It's worth to mention that only some calendar previews are supported on mobile devices, all the wide designs will automatically switch to one of the narrow (supported) ones.

Of course when embedding planyo into your website, your website stylesheets will be also active and can influence the planyo content as well (this won't happen with the calendar previews because they're embedded into iframes). It's good to keep this in mind in case unexpected results happen (you can always fix such problems by defining a more specific style for the planyo content with the corrected value). We try to make our default Planyo scheme independent of the environment but of course this is never certain to work in 100% of cases. On the other hand, if using the Bootstrap scheme, the templates and styles are a bare minimum, so this "side effect" is actually the desired behavior. Whatever bootstrap-based theme you may be using, the planyo content will have the same design as the rest of your website.

Non-technical users

Non-technical users can also change the styling by switching to the simple visual style selector. In this case you don't edit the CSS source code but you visually choose colors, fonts and font sizes of different items. Note that at any time you can switch between the CSS source mode and the visual style selector. The visual style selector locates specific styles in the CSS source code with the help of specific IDs in the comments so as long as these comments are not removed, the visual style selector and the CSS source editor can be used interchangeably.
Continue to part 4 (Customizing the reservation form design) >>