---
updatedAt: 2025-06-09T23:19:07.000Z
agentTools:
  projectIndex: https://developers.acuityscheduling.com/llms.txt
---

# CSS Customization

**Advanced CSS allows you to customize the appearance of your Client Scheduling Page with supported selectors. Use selectors to target individual components on your scheduler, to give you more control over the look and design of those fields using CSS.**

> 📘
>
> Add your CSS styling on the [Advanced CSS](https://secure.acuityscheduling.com/preferences.php?tab=advanced)  page.

***

# Custom CSS on the updated Client Scheduling Page

Acuity is releasing a [new scheduling experience](https://help.acuityscheduling.com/hc/en-us/articles/16676884849293-Using-the-new-scheduler), which provides a refreshed look and faster loading times. As part of this update, we’re overhauling our Advanced CSS feature.

On the previous booking experience, you could use CSS to modify almost all fields on the Client Scheduling Page. Designating supported selectors helps us prioritize consistent behavior and avoid broken customizations during platform updates.

> 📘
>
> To preview how your custom CSS will look on the updated scheduler, click **Preview Changes** in the Advanced CSS page.

***

# Business Information Selectors

You can also use CSS to adjust your business name or logo and your scheduling instructions, if they’re displayed. [Learn when Acuity will display your business name or logo.](https://help.acuityscheduling.com/hc/en-us/articles/31039924251661-Editing-your-scheduling-page-details#h_01JAZEY9QH338V8GNTFNCVXVGC)

<Image align="center" src="https://files.readme.io/3add4a72b1ebdea7d817ec4560387131c110e3542a8001065aea135c909ef8ca-Business_Info_1.png" />

A. `.business-container`: Selects both the business name and logo, if both are displayed.\
B. `.business-description-container`: Selects [scheduling instructions](https://help.acuityscheduling.com/hc/articles/31039924251661-Editing-your-scheduling-page-details#h_01JAZEY9QHFNAEGX6Q2E5NTM4W), if available.

<Image align="center" src="https://files.readme.io/e7eedd1e8805a8e31f274854e92db110040cdb85d360cc0a7788b27d3055355f-Business_Info_2.png" />

A. `.business-logo`: Selects just the business logo.\
B. `.business-name`: Selects just the business name.

# Appointment Type Selectors

<Image align="center" src="https://files.readme.io/b18dd397b3796eacf0335f0e35abc124c244952c0d88e6b9adc2e7e78cc29a68-Select_Appointment_1.png" />

A. `.select-item`: Selects the container surrounding each appointment type, calendar, category, and product.\
B. `.select-item-box`: Selects the container surrounding appointment types, and calendars. It does not apply to categories, and would override `.select-item` if both were active.\
C. `.select-type`: Selects the entire container for all appointment types. If [Collapse Categories](https://help.acuityscheduling.com/hc/articles/16676935806733#h_01HB6XFQPED470AX66DNND365H) is enabled, this includes the category name

<Image align="center" src="https://files.readme.io/8806245afb14534f35675b9b47ef51224bbbf744aeb114723fabb9e981f4a9d3-Select_Appointment_2.png" />

A. `.appointment-type-name`: Selects the appointment type name, category name, or product name. Excludes any buttons or padding.\
B. `.duration-container`: Selects the duration and price, if available. Applies for both appointments and items like packages, gift certificates, and subscriptions.\
C. `.type-description`: Selects only the description for appointments and store items.

<Image align="center" src="https://files.readme.io/3d8e07698bcbfbec899bc99686ed72a65fb13fd6ce1f78c6ce838074e944443d-Select_Appointment_3.png" />

A. `.step-title`: Selects the title of each screen in the scheduler, for example, “Select Appointment”, “Select Calendar”, “Date & Time”, etc.

# Calendar Selectors

<Image align="center" src="https://files.readme.io/fd8d57646a00c8fe06912155db64787de473e68ae3df43aa6c79a4468ad549d3-Select_Calendar.png" />

A. `.select-calendar`: Selects the entire container for all available calendars.\
B. `.select-label`: Selects the labels above any block of selectable items, such as categories, appointment types, calendars, store item categories, etc.

# Date & Time Selectors

<Image align="center" src="https://files.readme.io/3910793230a22a401b3bd62f722a6b71df81b5b7774d2abbb6f855b3c1a7f372-Date__Time_1.png" />

A. `.scheduleday`: Selects all days on the calendar when using the [Monthly Client Scheduling Page template](https://help.acuityscheduling.com/hc/articles/31039700427277-Customizing-your-scheduling-page#h_01JAZHS6H13ZFPN96XZ1Q0YPQD).\
B. `.scheduleday.selectedday`: Selects the day that the client has clicked on.\
C. `.scheduleday.activeday`: Selects days with appointments available when using the [Monthly Client Scheduling Page template](https://help.acuityscheduling.com/hc/articles/31039700427277-Customizing-your-scheduling-page#h_01JAZHS6H13ZFPN96XZ1Q0YPQD).

<Image align="center" src="https://files.readme.io/63b4b8216d05fa543d9a5acd0ee1f9170074efdccdb4afab94d197229f1301d5-Date__Time_2.png" />

A. `.time-selection`: Selects all available time slots.\
B. `.time-selection.selected-time`: Targets the selected time slot only.

# Add-on Selectors

<Image align="center" src="https://files.readme.io/c300fb6252f2bb1eabe3089e35fbf56a784c7a6bf24761e0849b1c335711bc3a-addon-one.png" />

A. `.addons-prompt`: Selects the label above the add-ons container. This says "Add to appointment" for appointments or "Add to class" for classes.\
B. `.addon-option`: Selects the add-on checkboxes\
C. `.addon-name`: Selects the add-on label\
D. `.addon-duration`: Selects the duration piece of the add-on duration and time label\
E. `.addon-price`: Selects the price piece of the add-on duration and time label

<br />

<Image align="center" src="https://files.readme.io/d987a004b4d82f7534bec4c184c2bffea10d7349bb34bc2f91e2ab9a5d44983c-addon-two.png" />

A. `.addons-container`: Selects the entire add-ons container including the prompt at the top\
B. `.addons-list`: Selects only the add-ons container without the prompt\
C. `.addon-attributes`: Selects the entire duration and time label for add-ons (as opposed to only the duration or price like `.addon-duration` and `.addon-price` above).

# Intake Form Selectors

[Intake forms](https://help.acuityscheduling.com/hc/articles/16676931038093) also come with their own selectors. During booking, you can display multiple forms, each made up of multiple fields. You can style individual fields and each form itself. Form and field selectors include a unique ID for the element you’re selecting. You can look up each element’s ID using your browser’s inspector tool. Usually this is done by right-clicking on the form input, and selecting "Inspect Element".

<Image align="center" src="https://files.readme.io/9fe7416bbbc8798a30c89ebb131dff9d340bae7bf69ae6e333ff84c0efe7f569-Intake_Forms.png" />

A. `.custom-form`: Targets all intake forms.\
B. `[data-field-id="123456"]`: Selects a specific intake form field and its label.\
C. `[data-form-id=”123456”]`: Selects an entire intake form.

**Note**: When using `data-field-id` and `data-form-id` selectors, you must replace the example ID "123456" with the unique ID for the element you’re selecting.

# Additional Customizations

* `@font-face`: Loads a font from a remote source, which can then be used in the scheduling page.
* `.btn`: Targets all primary buttons on the scheduler.
* `.is-embedded`: Make customizations that only apply when your scheduler is embedded in a website. A selector named `.is-embedded` is automatically added to the body of your scheduler when it is embedded. For example, combining the `.is-embedded` selector with `.type-description` modifies the descriptions of appointments and store items on your embedded scheduler only.