In this document:
If you’d like to add some custom styles to the appointment booking form, you have three different options.
- Easily change colors, font, and padding from the Styles settings
- Tweak the buttons, time slot formatting and icons using CSS directly in the Styles settings
- Or, control every detail by creating your own CSS file in your theme
Easily change colors, font, and padding directly from the plugin Style Settings.
This accent color shows up on links, buttons, and form fields in your Booking Calendar. The default accent color sets to spring green.
This setting changes the background of the entire Booking Calendar. The default background color sets to transparent so that it can blend in with your theme.
You can choose between Google Fonts or System Fonts. The default font family sets to Google’s Roboto typeface.
This is the space around the Booking Calendar. You can use any valid CSS measurement: %, em, px, vw, rem, etc. The default padding sets to 1rem.
This changes the default font color from black to white. Use this if you have a dark background.
CSS Snippets in the Style Settings
Tweak buttons, headers, and time slot formatting using a bit of custom CSS within the Style Settings.
We’ve started a collection of CSS snippets to help with customizations so you can just copy/paste!
You’ll find the area for entering custom CSS tucked away at the bottom of the Style Settings:
Code Wizards: Add Your Own Stylesheet
Finally, if you want to have control over every last detail, you can drop a CSS file into your theme or child theme. We’ve got all the details for adding your custom styles in our developer documentation.
File a support ticket with our five-star support team to get more help.
File a ticket
Helpful CSS Snippets Guides
Change Booking Calendar Text
Change Text Colors
Hiding Headers, Text, and Icons