Back to Developer Guides

This guide applies to:

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

Introduction

The usual methods of enqueuing custom CSS stylesheets won’t affect the styling of Simply Schedule Appointments.

Why? Because SSA is written as two single page apps (one for booking and one for admin) using Vue.js and the WordPress REST API.

You can, however, still change the appearance of both apps.

Notes

This is mostly directed toward developers comfortable with accessing their theme files and writing CSS.

Please see the section below on using the WP File Manager plugin if you’re not too familiar.

We also offer some more beginner-friendly ways to style the booking app. And, we’ve written out helpful CSS snippets to help you target specific styles.


Admin App Custom CSS

The Admin App includes everything that you see in the SSA Admin Appointments page.

To style the admin app, add a file at this location:

wp-content/themes/your-theme/ssa/admin-app/custom.css

where your-theme is the name of your theme folder.


Booking App Custom CSS

Just like the admin app, you can style the booking form by adding your own CSS files in your theme.

This includes the Booking Calendar and the Upcoming Appointments modules.

To style the booking app, add a file at this location:

wp-content/themes/your-theme/ssa/booking-app/custom.css

where your-theme is the name of your theme folder.


Using WP File Manager

If you need to add a custom.css file to the booking or admin app, but not sure how to do that. It should be easy when you use the free WP File Manager plugin.

WP File Manger plugin

This plugin will let you add and edit a custom.css file directly in your theme.

Navigating To The Theme’s SSA Folder

After activating, go to the new WP File Manager section on the left-panel of the WordPress Dashboard.

You should see a screen like this.

WP File Manager first landing screen

To edit either the booking app or the admin app, you’ll need to navigate to the SSA folder within your active theme.

wp-content/themes/your-theme/ssa/

Navigating to the SSA folder in my active theme

Now, depending on whether you want to edit the Booking or Admin App, you’ll choose one of the folders within the SSA folder.

  • booking-app
  • admin-app

Adding and Editing a Custom.css File

For this example, we want to add the custom.css file to White Label the Admin App.

So, we’ll need to go to the admin-app folder. Once inside, right-click on the File Manager interface and click on New File > CSS: Cascading Style Sheets.

After adding the file, you can name it anything, but we’ll just go ahead and call it custom.css.

Now, you can right-click on your new custom.css file, and click on the Code Editor option.

This should open a popup where you’ll be able to add your CSS and Save. You should see changes to the booking or admin app immediately after saving.

Adding and Editing a Custom.css file to affect the Admin 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