How to Customize Your Scheduler Colors in Zibster
Overview
You can customize your Zibster Scheduler colors to create a booking experience that matches your website and brand. Most Scheduler layouts use the global colors in your Website Design Settings. Single Item Layouts have their own color settings within the Scheduler Block. This guide explains which settings control your Scheduler colors and how to update them for each layout type.
Scheduler Color Reference
For layouts that use your global website colors, use the following reference to identify the setting you want to change.
Important: These settings also control colors elsewhere on your website. Changing a setting for your Scheduler may affect other website elements that use the same setting.
| Scheduler Element | Website Color Setting |
|---|---|
| Available dates | ACCENT 2 |
| Selected time slot | ACCENT 2 |
| Calendar date numbers | CONTRAST TEXT |
| Time slots | SITE TEXT |
| Client information section | FORM BACKGROUND |
| Book Now button background | BUTTON BACKGROUND |
| Book Now button text | BUTTON TEXT |
Available dates and the selected time slot both use ACCENT 2. Changing this setting updates both elements.
If you use a Single Item Layout, go to Customizing Colors for Single Item Layouts below for instructions on editing colors within the Scheduler Block.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
STEP TWO
Click DESIGN at the top of your Website Builder control panel to open your website’s Design Settings.
STEP THREE
Click EDIT DESIGN SETTINGS in the upper-right corner.
STEP FOUR
Click COLORS in the right-side menu.
Use the Scheduler Color Reference above to find the settings for the elements you want to update.
FINAL STEP
Adjust your colors, then scroll to the bottom of the right-side menu and click SAVE CHANGES.
Your saved changes take effect on your website. Open your Scheduler and review the available dates, time slots, client information form, and BOOK NOW button. Check other areas of your website that use the same global colors.
Customizing Colors for Single Item Layouts
Single Item Layouts have their own color controls within the Scheduler Block. Use these settings to customize the individual block.
Open the Scheduler Block
In your Website Builder, click the page containing your Scheduler Block. Click the Scheduler Block to open its settings, then click COLORS in the right-side menu.
Adjust Your Colors
The COLORS tab includes these settings:
- TITLE COLOR
- TEXT COLOR
- BUTTON TEXT COLOR
- BUTTON BORDER COLOR
- BUTTON CONTRAST COLOR
- AVAILABLE TEXT COLOR
- AVAILABLE BACKGROUND COLOR
- BACKGROUND COLOR
Adjust the settings you want to change. You can enter your brand’s hex color codes in the corresponding fields.
Save and Review
Click SAVE CHANGES to apply your updates. Open the Scheduler on your website and review its appearance, then continue through the date and time selection process to check the booking experience.
What Your Clients See
Visitors see your saved colors when they view and use your Scheduler. For layouts that use global website colors, the settings in the reference table control the available dates, selected time slot, calendar date numbers, time slots, client information section, and BOOK NOW button.
For Single Item Layouts, use the Scheduler Block’s COLORS tab to customize its appearance.
Helpful Notes
- Keep text easy to read. Choose text and background colors with enough contrast so visitors can clearly see dates, times, and buttons.
- Review the complete booking experience. Check your service display, calendar, time slots, and client information form after saving.
- Check on mobile. Open your booking page on a phone to confirm that text and booking controls remain easy to see.
- Record your existing colors before changing them. Copy the current hex color codes if you may want to restore them later.
Troubleshooting & FAQs
Why aren’t my Scheduler colors changing?
Make sure you clicked SAVE CHANGES after updating your colors.
If global color changes are not affecting your Scheduler, check whether it uses a Single Item Layout. For these layouts, open the Scheduler Block and click COLORS to update its individual settings.
Why did another part of my website change color?
Global website colors are shared across website elements. For example, changing BUTTON BACKGROUND can affect other buttons that use that setting.
Review other pages after making global color changes to make sure your website still looks the way you want.
Can I use different colors for available dates and the selected time slot?
For layouts that use global website colors, both elements use ACCENT 2. Changing that setting updates both elements together.
Need Help?
Our Support Team is here to help you customize your Scheduler colors.
Support Hours: Monday to Friday, 9am to 6pm EST
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
