All Collections
Your Public Scheduler
Setting Your Scheduler
How can my scheduler automatically match the font and colors of my website?
How can my scheduler automatically match the font and colors of my website?

Using design inheritance for your scheduler widget

Matt Tucker avatar
Written by Matt Tucker
Updated over a week ago

The scheduler widget is a component that can be embedded directly on a page of a website. It is designed to automatically inherit the font and colors of your website.

Contents of this article:

  • Design inheritance by default

  • Choosing design inheritance

Design inheritance by default

Design inheritance allows your scheduler widget to automatically match the design of your website when you embed the widget. Inheritance is the default for the widget.

Schedulista will choose from over 15,000 available fonts to match the main font (or any defined alternatives) used by your website. It will also inherit the colors used for text and links on your website.

Choosing design inheritance

If you've manually adjusted the colors and font of your scheduler and would like to reset it to inherit these from your website, you can edit your design settings.

(1) Go to Settings > Scheduler

Note: This is the Scheduler (design) page on the Settings page and not the Scheduler option (to preview the scheduler) in the menu at the top of your dashboard.

(2) Select the Widget tab

(3) Click on the color tiles to adjust the colors

(a) accent color - The color of any links appearing in the widget

  • Select Inherit Color to have the widget use your website's default color for links

(b) text color - The color of any non-linked text in the widget

  • Select Inherit Color to have the widget use your website's default color for links

(c) background color - The color of the background of the widget

  • Select Choose Color to pick a color using the wheel and shade of that color using the square tool; or you can enter the 6-digit/character color hex code

  • Select Transparent to have a clear background that allows the color of the page on your website or any image on the page of your website to serves as a background

(4) Click Advanced Customization

(5) Scroll down to the Font section and select Inherit Font

(6) When done, click the Back button at the bottom of the page

keywords: scheduler, widget, settings, color, colors, font, fonts, accent, text, background, look, design, feel, website, embed, embedded, custom, customize, design, inheritance

Did this answer your question?