Color Scheme & Styling

Color Scheme & Styling

Below is list customizable elements in your mini-website: 

Page 

Background Color

Changes the background color on the scheduler (everything around Welcome panel).

Favicon

Icon that appears in the browser's tab when client visit your mini-website.

Loading Spinner

Changes the color of the spinner that appears momentarily while panels load. 

Navigation

Top Navigation (Background Color)

Changes color of top header (area where logo, Login, and Register buttons are located.

Side Nav On Mobile (Background Color)

Changes the color of the side menu that expands when clients tap the 3 line icon, this menu only displays when clients visit your mini-website via mobile browser.

Cards

Style Properties - Background Color

Changes background color of all panels in the scheduler. 

Style Properties - Divider Color

Changes the color of the divider line that appears between text as well as each selectable option in scheduler.

Style Properties - Divider Width

Changes the width of the divider line that appears between text as well as each selectable option in scheduler.

Inheriting Elements - Scheduler Card - Background Color

Changes the background color of every panel within the scheduler.

Inheriting Elements - Scheduler Card - Divider Color

Changes the color of the divider between selections within the scheduler. 

Inheriting Elements - Scheduler Card - Divider Width

Changes the width of the divider between selections within the scheduler. 

Inheriting Elements - My Account Screens - Background Color

Changes the background color of the panels the clients see when they login to the scheduler, these are the panels where they can view appointments, edit their information, etc.

Inheriting Elements - My Account Screens - Divider Color

Changes the color of the divider between selections of the panels the clients see when they login to the scheduler, these are the panels where they can view appointments, edit their information, etc.

Inheriting Elements - My Account Screens - Divider Width

Changes the width of the divider between selections of the panels the clients see when they login to the scheduler, these are the panels where they can view appointments, edit their information, etc.

Inheriting Elements - Business Info Section - Background Color

Changes the background color of the business information section that appears to the left of the scheduler when viewed in full screen mode.

Inheriting Elements - Policy Section - Policy Section

Changes the background color of the Policy (Bottom Section) that appears below the scheduler.

Scheduler List Items

List Item Inactive - Font Color

Changes the font color when the panel loads, and no option is selected.

List Item Inactive - Background Color

Changes the background color when the panel loads, and no option is selected.

List Item on Hover/Selected - Font Color

Changes the font color when the client hovers over or selects an option from the list.

List Item on Hover/Selected - Background Color

Changes the background color when the client hovers over or selects an option from the list.

Store

Style Properties - Enable

Enables "store" component in mini-website.

Inheriting Elements - Packages - Enable

Allows clients to purchase packages in your mini-website. 

Text

Style Properties - Font Color

Changes the font color of all elements on all pages of the scheduler (Inheriting Elements will automatically be changed to the color chosen for this property).

Inheriting Elements - H1 Elements - Font Color

 

Inheriting Elements - H1 Elements - Font Size

 

Inheriting Elements - H1 Elements - Header Text - Font Color

Changes the font color of the font above the scheduler (most commonly the business name). 

Inheriting Elements - H1 Elements - Header Text - Font Size

 

Inheriting Elements - H2 Elements - Font Color

 

Inheriting Elements - H2 Elements - Font Size

 

Inheriting Elements - H2 Elements - Scheduling Panel Titles - Font Color

 

Inheriting Elements - H2 Elements - Scheduling Panel Titles - Font Size

 

Inheriting Elements - H2 Elements - My Account Screen Title - Font Color

 

Inheriting Elements - H2 Elements - My Account Screen Title - Font Size

 

Inheriting Elements - H3 Elements - Font Color 

 

Inheriting Elements - H4 Elements - Font Color 

 

Inheriting Elements - H5 Elements - Font Color 

 

Inheriting Elements - Links (<a> tags) - Font Color

 

Inheriting Elements - Links (<a> tags) - Font Color - Navigation Links

 

Inheriting Elements - Links (<a> tags) - Font Color - Change Timezone Link

 

Inheriting Elements - Links (<a> tags) - Font Color - Toggle to Waitlist View Link

 

Inheriting Elements - Links (<a> tags) - Font Color - Footer Link

 

Inheriting Elements - Links (<a> tags) - Font Color - Forgot Password Link Color

 

Inheriting Elements - Links (<a> tags) - Font Color - Register Link on Login Popup

 

Inheriting Elements - Label Elements - Font Color 

 

Inheriting Elements - Div Elements - Font Color

 

Inheriting Elements - Div Elements - Font Color - Footer Text

 

Inheriting Elements - Span Elements - Font Color

 

Inheriting Elements - Paragraph Elements - Font Color

 

Buttons

Basic Button - Color

Changes the color of all buttons under the Basic Button category. 

Basic Button - Back Button - Color 

Changes the color of the Back button in the navigation section.

Basic Button - Login Button In Navigation - Color

Changes the color of the Client Login button in the navigation section.

Basic Button - Logout Button - Color

Changes the color of the Client Logout button in the navigation section.

Basic Button - Register Button in Navigation - Color

Changes the color of the Register button in the navigation section. 

Basic Button - Filter Search Button - Color

Changes the color of the Zip Code Filter Search button in the scheduler.

Basic Button - Coupon Search Button  - Color

Changes the color of the Coupon Search button in the scheduler.

Basic Button - Location Map Select Button - Color

Changes the color of the Select button when viewing locations in map within location panel.

Basic Button - Download Button - Color

Changes the color of the Download button when clients view invoices.

Basic Button - Cancel Edit Client Details Button - Color

Changes the Cancel Edits button when client choose to edit their information.

Basic Button - Screening Question Fail Button - Color

Changes the color of the "Fail" button in a screening question.

Basic Button - Close Button on Pop Ups - Color

Changes the color of the Close button that appears in various pop ups.

Basic Button - My Account Book Now Appointment Button - Color

Changes the color of the "Book a New Appointment" button that appears when clients login to the scheduler.

Basic Button - My Account View Appointments Button - Color

Changes the color of the "View Appointments" button that appears when clients login to the scheduler.

Basic Button - My Account View Invoices Button - Color

Changes the color of the "View Invoices" button that appears when clients login to the scheduler.

Basic Button - My Account My Profile Button - Color

Changes the color of the "My Profile" button that appears when clients login to the scheduler.

Basic Button - Appointment Status Buttons - Color

Changes the color of the Status buttons (columns) when clients choose to view their appointments after they login to the scheduler. 

Basic Button - View Detail Button - Color

Changes the color of the View button that appears when clients choose to view appointments after they login to the scheduler.

Basic Button - Upload File Button - Color

Changes the color of the "Upload" (Choose File) button when using a file upload field.

Primary Button - Color

Changes the color of all buttons under the Primary Button category. 

Primary Button - Login Button On Login Form - Color

Changes the color of the Login button in the pop up that appears when clients login to the scheduler.

Primary Button - Register Button On Register Form - Color

Changes the color of the Register button in the pop up that appears when clients choose to register in the scheduler. 

Primary Button - Next Button - Color

Changes the color of the Next button that progresses clients through the scheduler when scheduling an appointment.

Primary Button - Book Another Appointment Button - Color

Changes the color of the "Book Another Appointment" button that appears in the Final Confirmation panel after clients have booked an appointment.

Primary Button - Reschedule Button - Color

Changes the color of the Reschedule button that appears when clients choose to view their appointment details.

Primary Button - My Profile Edit Button  - Color

Changes the color of the Edit button that appears at the bottom of the My Profile view to prompt clients to edit their profile details.

Primary Button - Variable Address Validate Button - Color

Changes the color of the "Validate Address" button that appears when a client selects a variable location and is prompted to provide an address.

Primary Button - Screening Question Pass Button - Color

Changes the color of the "Pass" button in a screening question.

Primary Button - Pay Now/Authorize Now Button - Color

Changes the color of the "Pay Now" and/or "Authorize Now" that appear when clients view their invoices and in the Final Confirmation panel.

Accent Button - Color

Changes the color of all buttons under the Accent Button category.

Accent Button - Times Selected Button - Color

Changes the color of the "Times Selected" button that appears in the Time panel when clients have the option to select multiple appointment times and dates.

Accent Button - Waitlist First Available Button - Color

Changes the color of the "Waitlist First Available" that appears when clients have the option to join the waitlist for the first available time slot.

Success Button - Color

Changes the color of all buttons under the Success Button category.

Success Button - Save Appointment Button - Color

Changes the color of the Save Appointment button that clients click to schedule their appointment. 

Success Button - Pay Button on Credit Card Form - Color

Changes the color of the "Pay" button in the window where clients enter their credit card information.

Success Button - Save Client Details Button - Color

Changes the color of the "Save Client Details" that appears when clients are editing their own information. 

Success Button - Variable Address Confirm Button - Color

Changes the color of the Variable Address Confirm button that appears in the window where the client's address is verified when scheduling an appointment at a variable location.

Success Button - Client Appointment From Waitlist Button - Color

Changes the color of the Claim Appointment button that appears in the waitlist landing page that clients where clients are directed to claim a newly available time slot.

Error Button - Color

Changes the color of all buttons under the Error Button category.

Error Button - Cancel Appointment Button - Color

Changes the color of the Cancel Appointment button that clients must click to cancel their appointments.

Error Button - Remove Time from Selected Times Button - Color

Changes the color of the Remove button that appears in the window where clients can view the list of times and dates they selected if they have the option to schedule multiple appointments.

Error Button - Remove From Waitlist Button - Color

Changes the color of the Remove From Waitlist button that appears in the waitlist landing page where clients are directed if they clicked the link on a waitlist notification. This button removes the client from the waitlist.

Calendar

Calendar Date Without Availability - Font Color

Changes the color of the font of the date box when staff doesn't have availability.

Calendar Date Without Availability - Background Color

Changes the color of the date box when staff doesn't have availability. 

Days with Availability - Font Color 

Changes the color of the font in the date box when staff has availability. 

Days with Availability - Background Color

Changes the color of the date box when staff has availability. 

Selected Day on Calendar - Font Color

Changes the color of the font of the date box the client selects in the Time panel.

Selected Day on Calendar - Background Color

Changes the color of the date box that the client selects in the Time panel. 

Footer

Style Properties - Background Color

Changes the color of the footer that appears below the scheduler and bottom section.

Form Elements

Form Field Color - Color

Changes the color of labels and underlines for any of the fields (i.e. login pop up, register pop up, your information fields, coupon, multiple selection dropdown for service, etc) that require the client's input.

Active Form Field Color - Color

Changes the color of labels and underlines of any of the fields (i.e. login pop up, register pop up, your information fields, etc) that require the client's input after the client has clicked on them.

Invalid Form Field Color - Color

Changes the color of labels and underlines of any of the fields (i.e. login pop up, register pop up, your information fields, etc) that require the client's input if the input provided is invalid. 

 Radio Dial Selection - Color

Changes the color of radio dial selection buttons (i.e. times available on time panel).

Checkbox Selection - Color

Changes the color of check box fields (i.e. times on time panel when clients book multiple appointments).

Alerts

Info Alert - Font Color

Changes the font color of the alert shown when clients log in to scheduler, and clicks View Appointments or View Invoices. 

Info Alert - Background Color

Changes the background color of the alert shown when clients log in to scheduler, and clicks View Appointments or View Invoices. 

Info Alert - Border Color

Changes the border color of the alert shown when clients log in to scheduler, and clicks View Appointments or View Invoices. 

Success Alert - Font Color

Changes the font color of the alert shown on the invoice detail when clients successfully pay for a service or class.

Success Alert - Background Color 

Changes the background color of the alert shown on the invoice detail when clients successfully pay for a service or class.

Success Alert - Border Color

Changes the border color of the alert shown on the invoice detail when clients successfully pay for a service or class.

Error Alert - Font Color

Changes the font color of the alert shown if a client tries to cancel or reschedule after the allowed timeline.

Error Alert - Background Color

Changes the background color of the alert shown if a client tries to cancel or reschedule after the allowed timeline.

Error Alert - Border Color

Changes the border color of the alert shown if a client tries to cancel or reschedule after the allowed timeline.

Chips

Basic Chip - Font Color

Changes the color of the text in all chips under the Basic Chip category.

Basic Chip - Background Color 

Changes the background color of all chips under the Basic Chip category.

Basic Chip - Reason Duration Chip - Font Color

Changes the color of the text in the chip that displays the service/class session duration. 

Basic Chip - Reason Duration - Background Color

Changes the background color of the chip that displays the services/class session duration

Basic Chip - Reason Price Chip - Font Color

Changes the color of the text in the chip that displays the price of the service/class/course.

Basic Chip - Reason Price Chip - Background Color

Changes the background color of the chip that displays the price of the services/class/course.

Basic Chip - Open Seats Chip - Font Color

Changes the color of the text in the chip that displays the total number of open seats in a class session. 

Basic Chip - Open Seats Chip - Background Color

Changes the background color of the chip that displays the total number of open seats in a class session. 

Basic Chip - Course Session Chip - Font Color

Changes the color of the text in the chip that displays the number of sessions in a course (Course profile > Time > Number of session to complete course).

Basic Chip - Course Session Chip - Background Color

Changes the background color of the chip that displays the number of sessions in a course (Course profile > Time > Number of session to complete course.

Primary Chip - Font Color

Changes the color of the text in all chips under the Primary Chip category.

Primary Chip - Background Color

Changes the background color of all chips under the Primary Chip category.

Primary Chip - Appointment Status Open Chip - Font Color

Changes the color of the text in the chip that displays the status of an appointment, if the status is set to Open. 

Primary Chip - Appointment Status Open Chip - Background Color

Changes the background color of the chip that displays the status of an appointment, if the status is set to Open.

Primary  Chip- Invoice Status Open Chip - Font Color

Changes the color of the text in the chip that displays the status of an invoice if the status is set to Open (Open - No Payment).

Primary Chip - Invoice Status Open Chip - Background Color

Changes the background color of the chip that displays the status of an invoice if the status is set to Open (Open - No Payment).

Success Chip - Font Color

Changes the color of the text in all chips under the Success Chip category.

Success Chip - Background Color 

Changes the background color of all chips under the Success Chip category.

Success Chip - Appointment Status Completed Chip - Font Color

Changes the color of the text in the chip that displays the status of an appointment, if the status is set to Completed.

Success Chip - Appointment Status Completed Chip - Background Color

Changes the background color of the chip that displays the status of an appointment, if the status is set to Completed.

Success Chip - Invoice Status Closed Chip - Font Color

Changes the color of the text in the chip that displays the status of an invoice if the status is set to Closed (Closed - Paid).

Success Chip - Invoice Status Closed Chip - Background Color

Changes the background color of the chip that displays the status of an invoice if the status is set to Closed (Closed -Paid).

Warning Chip - Font Color

Changes the color of the text in all chips under the Warning Chip category.

Warning Chip - Background Color

Changes the background color of all chips under the Warning Chip category.

Warning Chip - Appointment Status No Show Chip - Font Color

Changes the color of the text in the chip that displays the status of an appointment, if the status is set to No Show.

Warning Chip - Appointment Status No Show Chip - Background Color

Changes the background color of the chip that displays the status of an appointment, if the status is set to No Show.

Waning Chip - Invoice Status Void Chip - Font Color

Changes the color of the text in the chip that displays the status of an invoice if the status is set to Void.