Back to Booking Calendar Guides

This guide applies to:

  • Basic Edition
  • Plus Edition
  • Pro Edition
  • Business Edition

Introduction

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

Style Settings

Easily change colors, font, and padding directly from the plugin Style Settings.

The Styles Settings in the Settings Tab

Accent color

This accent color shows up on links, buttons, and form fields in your Booking Calendar. The default accent color sets to spring green.

Changing the Accent color in my Booking Calendar

Background color

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.

Changing the Background color in my Booking Calendar

Font family

You can choose between Google Fonts or System Fonts. The default font family sets to Google’s Roboto typeface.

Changing the Font family in my Booking Calendar

Padding

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.

Changing the padding in my Booking Calendar

Contrast mode

This changes the default font color from black to white. Use this if you have a dark background.

Changing the padding in my Booking Calendar

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:

Use the CSS snippets to remove the appointment duration

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.


Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides