Skip to main content
All CollectionsCalendar: (2) DesignNavigation
Design: Navigation - Month selector x 5
Design: Navigation - Month selector x 5

5 design items which color the month

Jason Alexis avatar
Written by Jason Alexis
Updated over 11 months ago

5 design items which color the navigation (scrolling) arrows.

To find these design items...

Step 1: After you log in, click on Calendars (brown box below).

The Your Calendars page will open.

Step 2: Choose the calendar you wish to modify (brown box below).

Step 3: Click on Design (brown box below).

Step 4: Scroll down and click on Navigation (brown box below).

Step 5: Scroll down until you find the Month selector header you wish to modify:

Month selector border, Month selector background, Month selector hovered bg, Month selector control, Month selector control hovered.

To modify these design items...

Let's first clarify what name belongs to what thing and when it applies.

I. Month selector border (brown arrow above): This applies to the rings themselves - both left and right sides. This color is used when someone views the calendar or events list but is NOT hovering over it with the mouse (mouseover).

As you can see in the image below, the Month selector border is now blue.

II. Month selector background (yellow/gold arrow above): This applies to the space inside the rings - both left and right sides. This color is used when someone views the calendar or events list but is NOT hovering over it with the mouse (mouseover).

As you can see in the image below, the Month selector background is now yellow.

III. Month selector hovered bg (yellow/gold arrow above): This applies to the space inside the rings - both left and right sides. This color is used when someone IS hovering over this area with the mouse (mouseover).

In the image below, I am hovering over the right-hand month selector. As a result, the Month selector hovered bg is now cyan/turquoise. I am not hovering over the left-hand month selector, so it remains yellow.

IV. Month selector control (blue circle above): This applies to the left and right arrows inside the rings. This color is used when someone views the calendar or events list but is NOT hovering over it with the mouse (mouseover).

As you can see in the image below, the Month selector controls are now brown.

V. Month selector control hovered (blue circle above): This applies to the left and right arrows inside the rings. This color is used when someone IS hovering over this area with the mouse (mouseover).

In the image below, I am hovering over the right-hand month selector. As a result, the Month selector control hovered is now pink. I am not hovering over the left-hand month selector, so it remains brown.

Color modification process

All of these 5 design options have the two color options Default and Custom. Some also have the option Inherit from website.

Option #1: Default

If you don't choose a color...

Month selector border and Month selector control will be grey with a white Month selector background.

Month selector hovered bg will be grey with a white Month selector control hovered.

Option #2: Inherit from website

Click on Inherit from website. In this option, the color is inherited from your website or other embeddable component.

Option #3: Custom color picker

Click on Custom and then click on the circle to choose your color.

Click Save at the bottom of the column to save your changes.

Did this answer your question?