Back to Plugin Settings Guides

Styling the Booking Calendar

This guide applies to:

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

Introduction

You have three different options if you’d like to add some custom styles to the appointment booking form.

  • 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.

Screenshot depicting the location of the Styles setting.
The Styles Settings in the Settings Tab

Accent color

This accent color appears on links, buttons, and form fields in your Booking Calendar. The default accent color is set to spring green.

Changing the Accent color in the Booking Calendar

Background color

This setting changes the background of the entire Booking Calendar. The default background color is 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 is 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 is set to 1rem.

If you’re using a Page Builder like Elementor, Divi, or Beaver Builder, this padding setting may not work because it’s overridden in the page builder.

Changing the padding in the Booking Calendar

Contrast mode

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

Changing the contrast in the 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. You’ll find the area for entering custom CSS tucked away at the bottom of the Style Settings.

We’ve started a collection of CSS snippets to help with customizations, so you can just copy/paste!

Since Simply Schedule Appointments displays via an iframe, you must add your CSS directly to our plugin to see changes. Adding it to a CSS plugin or the theme will not affect SSA.

Use the CSS snippets to list the appointment types list in two columns

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 possess 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