Change the active icon color in Appointments Pro.

13 May 7, 2023

In Appointments Pro, how do I change the color of the active icon in the booking process?

To change the “active” icon that appears as someone is booking an appointment in the Appointments Pro feature, follow the steps below:

1) Log into your Control Panel and select Colors from the left-hand-side of the screen (or the middle of the screen).

2) Scroll down to the Advanced SCSS. If there is already code in the box do not delete it! Simply add this code “below” the last character of code in the box.

/*** BEGIN: APPOINTMENT PRO: EDIT ICONS COLOR ***/
.tab-item-active > .icon,
.tab-item-active > span.tab-title {
color: #ff0000 !important;
}
/*** END: APPOINTMENT PRO: EDIT ICONS COLOR ***/

3) Change the hex color ff0000 to the hex color that you would like to use.

4) Click Save.