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 or adding it via our mini-plugin

Video Walkthrough

YouTube video

Style Settings

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

Style setting card depicted in the Settings of the Appointments admin area plugin.
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.

Accent Color modified and displaying in the appointment type selection to create a custom style.

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.

Background color modified to display in the background of the booking calendar.

Contrast Ratio

The Style settings will also display the contrast ratio for the color combination you selected for your accent and background colors. This will help you meet the accessibility guidelines and ensure readability for most users.

Contrast Ratio for a Green and Black accent and background color combination.

Font family

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

Roboto Font selected by default in the Style Settings custom styles.

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.

Padding applied to the booking calendar, creating space around the container it's located in.

Contrast mode

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

Enabling Contrast Mode for the appointment type.

This will only appear if you change the background color opacity slider to completely transparent.

Showing that the option only appears if you drag the opacity slider to 0.

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.

Custom CSS box that allows you to add your own custom styles to the booking calendar.

Code Wizards: Add Your Own Stylesheet

Finally, if you want to have control over every last detail, you can do that in a couple of ways.

  • Drop a CSS file into your theme or child theme. We possess all the details for adding your custom styles in our developer documentation.
  • Install and activate our mini-plugin to add custom CSS for styling the Admin and Booking App.

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