The Scheduling button and wizard are the two main elements that can be styled when setting up Scheduling on your website. Naturally, both elements inherit styling from Global Design in order to make the setup process consistent and easy. However, you are able to change the styling of both elements if you prefer. This article focuses on styling the Scheduling wizard - if you want more information on styling the Scheduling button, click here.
Styling the wizard
To style the Scheduling wizard, navigate to Global Design > Scheduling > Scheduling wizard. Similarly to all modules, the Scheduling wizard can be styled on desktop, tablet and mobile views by choosing the relevant viewport on the top navigation bar before clicking on the Global Design menu.
Below you'll see two examples on different stylings of a Scheduling wizard.
General
The first options available are General design elements of the wizard including Background, Border, and Spacing. These options affect the main element that all of the Scheduling items are contained within. Read more about background, border and spacing here.
Close icon, 'Go back' text and divider
Close icon: in this section, the close icon color and size can be styled, both for the normal and hover state.
'Go back' text: the 'Go back' text inherits all settings from the text style 'Dark Body text'. However, in this section, you are able to style this element differently if you prefer. Expand the Customize 'Dark Body text' style section for access to all styling options.
Divider: the divider inherits from Global Design, but here you are able to style it specifically to suit your scheduling flow by expanding the Customize 'Divider' style section.
Headlines and text
There are many contextual elements in the Scheduling wizard, and once again, all of these items inherit styling from Global Design. However, you are able to customize the styling for each element by expanding its respective section to access all styling options. These sections include:
- Headline
- Information text
- Service and staff title
- Service and staff description
- Service summary text
Buttons
In the button section, you are able to customize the style on all the buttons that appear throughout the wizard, including text color and background color when nothing is selected (i.e. when the button cannot be clicked as the visitor didn't fill in all the required fields).
Calendar
The calendar section provides many options that allow you to style the calendar look and feel to your specific needs. You are able to customize the styling for each element by expanding its respective section to access all styling options.
- Date indicator
- Month indicator
- Month navigation arrow icons
- Weekday indicator
- Available date
- Non-available date
- Selected date
Many of these options include the ability to style the color, background color and spacing in normal, hover and active states.
Time slot selector
The time slot selector styling options provide the ability to style the padding as well as the color, background color, border color and border thickness in normal, hover and selected states.
Form
Here you can style the input fields and links that appear at the last step on the wizard where visitors are required to fill in their contact details.
In the form section, you are able to style the following:
- Labels
- Inputs and text areas
- Consent link
Labels: the labels inherit from the 'Body text' style, but can be customized by expanding the Customize 'Body text' style section. The alignment and spacing are further options available to style the labels to suit your needs.
Inputs and text areas: the inputs and text areas inherit their styling from the 'Inputs' style set in the Form module in Global Design. You are however able to expand the Customize 'Inputs' style section to access many styling options if you wish.
Consent link: the consent links inherit from the 'Body text' style, but the font weight, color and text decoration can be styled here on the normal and hover states.