7 design items color the filters toggle switch and filters background for event lists and all calendar views.

What is that thing in the brown box below?

The icon in the brown box above is the Filters Toggle Switch. It allows viewers to toggle between any filters you have chosen in the Setup tab. If you click on the Filters Toggle Switch, three additional clickable options open up (brown box below).

Each of these options is a separate dropdown menu, allowing viewers to mix and match filters. The events will show up if the viewers select filters which you have chosen in Setup.

How do you change the color of the Filters Toggle Switch?

Before we explain that, we need to understand that the Filters Toggle Switch is actually two parts: the background (brown arrow below) and the three lines in the middle (blue arrow below).

OK...on to the colors...

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

Filters toggle background, Filters toggle hovered bg, Filters toggle active bg, Filters toggle color, Filters toggle hover color, Filters toggle active color, Filters background.

To modify these design items...

The image below is your base.

I. Filters toggle background (brown arrow above): 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 Filters toggle background is now brown.

II. Filters toggle hovered bg (brown arrow in base image above): This color is used when someone IS hovering over this area with the mouse (mouseover).

In the image below, I am hovering over the Filters toggle switch (see the hand?). As a result, the Filters toggle hovered bg is now blue.

III. Filters toggle active bg (brown arrow in base image above): This color is used when the filters toggle switch has been turned on. Watch the video below.

The background on the filters toggle switch starts out as brown. When I hover over it, it is blue. When I click on it, it turns purple AND the three dropdown menu options appear (Location, Campus, Group).

***Now, let's look again at our base image. It's time to choose the colors of those three lines (blue arrow below) ***

IV. Filters toggle color (blue arrow in base image above): 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 Filters toggle color is now cyan/turquoise.

V. Filters toggle hover color (blue arrow in base image above): This color is used when someone IS hovering over this area with the mouse (mouseover).

In the image below, I am hovering over the Filters toggle switch (see the hand?). As a result, the Filters toggle hover color is now red.

VI. Filters toggle active color (blue arrow in base image above): This color is used when the filters toggle switch has been turned on. Watch the video below.

The lines on the filters toggle switch start out as cyan/turquoise. When I hover over them, they are red. When I click on the switch, they turn yellow AND the three dropdown menu options appear (Location, Campus, Group).

***Ready for one more to complete this group?***

VII. Filters background: Remember that when the filters toggle switch is turned on, we see the three clickable mix and match filter options: Location, Campus and Group.

Now, the background has been given a makeover to a purple color.

Color modification process

All of these 7 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.

Here is a walkthrough of this option.

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

Did this answer your question?