The icon in the brown box above is the Filters Toggle. It allows viewers to toggle between any filters you have chosen (toggled on) in the Design: Headers and links --> Filters section.

The Filter Toggle allows your ministry members to do their own filtering. Using the options you give them, your ministry members can mix and match filters. As a result, they will only see the events which are relevant to them.

For more information, this article may be useful.

If you click on the Filters Toggle, will see the filters you have toggled on in Headers and links. Find your integration's example below. The examples show all the filters your integration has:

Each of the displayed options is a separate dropdown menu, allowing viewers to mix and match filters. Here is an example from one of our integrations:

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

We also need to make sure that you are familiar with using our Custom Color Picker. If you are not, click here for more information before you continue.

OK...on to the colors...

Step 5: Scroll down until you find the Filters sub-section. This article explains the following seven items: Toggle background, Toggle hovered background, Toggle active background, Toggle color, Toggle hover color, Toggle active color, Background.

The image below is your base.

I. Toggle background (brown arrow above): This color is used when someone views the calendar but is NOT hovering over the Filters Toggle with the mouse (mouseover).

As you can see in the image above, the Toggle background is now brown.

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

In the image above, I am hovering over the Filters Toggle (see the hand?). As a result, the Toggle hovered background is now cyan (turquoise).

III. Toggle active background (brown arrow in base image above): This color is used when the Filters Toggle has been clicked.

In this example, it turns purple AND the four, clickable, mix and match dropdown menu filter options which I have chosen in the Headers and links section appear (Groups, Campuses, Departments, Locations).

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

IV. Toggle color (blue arrow in base image above): This color is used when someone views the calendar or but is NOT hovering over the Filters Toggle with the mouse (mouseover).

As you can see in the image above, the Toggle color is now green.

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

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

VI. Toggle active color (blue arrow in base image above): This color is used when the Filters Toggle has been clicked.

In this example, they turn black AND the four, clickable, mix and match dropdown menu filter options which I have chosen in the Headers and links section appear (Groups, Campuses, Departments, Locations).

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

VII. Background: Remember that when the Filters Toggle is turned on, we see the four, clickable, mix and match dropdown menu filter options: Groups, Campuses, Departments, Locations. These options are on a background. In the image below, the background is the default color: grey (gold arrow in image below).

Now, the background has been given a makeover to a purple color (gold arrow in image below).

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

If you don't choose a color...

These design options will be combinations of greys and white.

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

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