All Collections
Calendar: (2) Design
Navigation
Design: Navigation - Selected Option x 6
Design: Navigation - Selected Option x 6
Jason Alexis avatar
Written by Jason Alexis
Updated over a week ago

6 design items color the selected option filters and their backgrounds and filters background for event lists and all calendar views.

It's simple once you get the hang of it.

Let's begin with #2, This refers to the background (the space around) the letters. Even though there are three separate backgrounds, whatever you do to one you do to all. If a design item name includes a "bg", it refers to the background.

#1 refers to the letters. Again, there are three different words but whatever you do to one you do to all. The design item names do not include a "bg".

A more in depth look

Here is what happens in the default and custom options of each of the 6 design items.

Selected Option bg

Due to the "bg", this option relates to the background.

The background of what? The filter options you have chosen during setup.

Selected Option Hover bg

images to be done

Due to the "bg", this option relates to the background.

The background of what? The filter options you have chosen during setup.

Selected Option Active bg

Above, our three filter options are waiting for a viewer to make a choice by clicking on one or more. When the filter option has been clicked, the background will turn a different color to show that it has been chosen.

Above is the default background color. Below shows that you can change to a color of your choice.

NOTE: When a filter option is clicked, a dropdown menu opens up, so that the viewer can make further filtering choices.

Selected Option Color

images to be done

Selected Option Hover Color

images to be done

Selected Option Active Color

Since this design name does not have a "bg", it refers to the letters.

The letters of what? Any filter that has been chosen.

Above is the default color. Below shows that you can change to a color of your choice.

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 Selected Option header you wish to modify:

Selected Option bg, Selected Option Hover bg, Selected Option Active bg, Selected Option Color, Selected Option Hover Color, Selected Option Active Color.

To modify these design items...

All of these 6 design options have the two color options Default and Custom.

Option #1: Default

If you don't choose a color...

These design options will be combinations of greys and white.

Option #2: 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?