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 (toggled on) in the Design: Headers and links -- Show filter names & Filters section.

The Filter Toggle Switch 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.


CLICKING ON THE FILTERS TOGGLE SWITCH

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

Breeze Filter Toggle Switch toggled off

Breeze Filter Toggle Switch toggled on

CCB Filter Toggle Switch toggled off

CCB Filter Toggle Switch toggled on

GCal Filter Toggle Switch toggled off

GCal Filter Toggle Switch toggled on

PCO Filter Toggle Switch toggled off

PCO Filter Toggle Switch toggled on

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:

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).

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...

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 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.

To modify these design items...

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 Switch 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 Switch with the mouse (mouseover).

In the image above, I am hovering over the Filters Toggle Switch (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 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 cyan. When I click on it, 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 Switch 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 Switch with the mouse (mouseover).

In the image above, I am hovering over the Filters Toggle Switch (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 Switch has been turned on. Watch the video below.

The lines on the filters toggle switch start out as green. When I hover over them, they are red. When I click on the switch, they turn orange 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 switch 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).


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

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.

Did this answer your question?