Color Scheme & Styling
- Elvis Merino (Unlicensed)
Owned by Elvis Merino (Unlicensed)
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. |
| Waning Chip - Invoice Status Void Chip - Background Color | Changes the background color of the chip that displays the status of an invoice if the status is set to Void. |
| Warning Chip - Waitlist Seats Chip - Font Color | Changes the color of the text in the chip that displays when clients select a class session that has no remaining seats and asks them to join the waitlist. |
| Warning Chip - Waitlist Seats Chip - Background Color | Changes the background color of the chip that displays when clients select a class session that has no remaining seats and asks them to join the waitlist. |
| Error Chip - Font Color | Changes the color of the text in all chips under the Error Chip category. |
| Error Chip - Background Color | Changes the background color of all chips under the Error Chip category. |
| Error Chip - Appointment Status Cancelled 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 Cancelled. |
| Error Chip - Appointment Status Cancelled Chip - Background Color | Changes the background color of the chip that displays the status of an appointment, if the status is set to Cancelled. |