(1) Your viewer clicks on the search icon (magnifying glass), located above the first event in your calendar view.

(2) Your viewer types in keyword(s) on the search input line (see blue keyword and arrow in image to the left).

(3) Your viewer clicks on Search (yellow arrow in image to the left).

(4) The Display.Church search logic matches those keywords to items in the event title or the event description.

(5) The screen refreshes with the found items.

To clear the search and return the calendar view to the original status, your viewer:

The screen refreshes back to the original view with all the events.

Step 1: Click on Widgets to open your product options (if necessary).

Step 2: Click on Calendars.

Step 3: Choose the calendar you wish to modify.

Step 4: Click on Design (blue box in image to the left).

Step 5: If you are using Featured Highlights, make sure you are in the Main Design section (blue box in image to the left).

Step 6: Scroll down to the Search section (yellow arrow in image to the left) and click on the arrow to open it.

Default: what the color will be if you do not change it
​
​Custom color picker: Not not yet familiar with how to use the Display.Church custom color picker? This article will guide you --> http://help.display.church/en/articles/4314468-using-the-custom-color-picker
​
​Custom color value: the CSS value of your color --> You can use this option to directly match your church website branding/color scheme.

Enable search: Toggle on this button so your viewers will see the search option.

The search icon (magnifying glass) will now appear above your calendar view.

Notice that it is collapsed. Your viewer must click on the search icon to open the search.

If you prefer, you can keep the search open. No need to click the icon. Perhaps clearer as to where the search is. To do this:

Keep search expanded: Toggle on this button.

Notice that the input line says 'Search events'. This is the default.

To customize, locate Placeholder. Type in your preferred label. We have typed in 'Type keywords here.'

Note the change in the text on the input line.

Background color: the color when the search option is closed --> Grey in image below

Background color hover: the search option is closed and you mouse over the icon --> Green in image below

Background color when expanded: Blue in image below

Icon color: the color of the icon (magnifying glass) when the search option is closed --> Red in image below

Icon color hover: the search option is closed and you mouse over the icon --> Purple in image below

Icon color when expanded: Green in image below

Background color: the background color of the input line --> Light blue/green in image below

Text color: the color of the keyword(s) your viewers type on the input line --> Blue in image below

Text color placeholder: the color of the placeholder text on the input line --> Green in image below

Clear button background color: Purple in image below

Clear button background color hover: the background color on mouse over --> Orange in image below

Clear button icon color: the color of the 'x' --> Red in image below

Clear button icon color hover: the color of the 'x' on mouse over --> Orange in image below

Input border: the color of the frame --> Pink in image below

Background color: the background color of the search button --> Green in image below

Background color hover: the background color of the search button on mouse over --> Blue in image below

Text color: the color of the word 'Search' --> Brown in image below

Text color hover: the color of the word 'Search' on mouse over --> Green in image below