In this section, you tell Displaychurch.events about the colors you wish to use for the pop up (not the main view) of your Groups Widget.

The options are the same for CCB and PCO within a groups widget. In other words, if you are using Simple List, the options are the same whether you are using the CCB or PCO integration.

TWO NOTES ABOUT COLORS

(1) Choosing Inherit from website: In this option, the color is inherited from your website or other embeddable component.

(2) Choosing Custom (or) Custom color picker: For those of you not yet familiar with our custom color picker, this article is for you.

(3) Choosing Custom color value: You would use Custom color value when you have a specific effect and/or color that you want to use. For example, you might want to match the color scheme of your website or printed material. So, you don't want "about" the same color, you want exactly the same color.


HOW TO USE THIS ARTICLE

Step 1: Click on the View you are working with. (see list below).

Step 2: Within that view, scroll down to find the Design sub-category you are in.

Step 3: Click on the link.

Simple List

Cards (Grid)

Outlined

Mosaic


Simple List / Outlined / Mosaic

Design subcategory = Header section

  • Background

  • Group name

  • Meeting time and location color

  • Meeting time and location icon color

Design subcategory = Sections

  • Section color

  • Section header color

  • Section text

  • Section link

  • Section link hover

Cards (Grid)

Design subcategory = Header section

  • Background

  • Group name

  • Meeting time and location color

  • Meeting time and location icon color

Design subcategory = Sections

  • Section color

  • Section header color

  • Section text

  • Section link

  • Section link hover

Design subcategory = Primary call-to-action & Secondary call-to-action


Design subcategory = Header section

Here is how this part looks with default values:

The default color selections are below:

Let's brighten it up:

NOTE: The icons are the clock and location pin. Here's a closeup:

Our custom color selections are below:

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

Design subcategory = Sections

Here is how this part looks when we use the default values.

Section color = the background

Section header color = the word 'Description'

Section text = the description itself

Here are the same three items with custom colors.

These design items also color the remainder of the sections on your popup:

This is how the default looks. Regular:

On hover:

Not much of a difference, right?

Choose custom colors to call more attention to your link.

Regular:

And more of a contrast on hover so your people know the link is working:

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

Design subcategory = Primary call-to-action & Secondary call-to-action

Button color default:

Button color on hover default:

A slightly darker pink or lighter grey, but not much difference.

Text color:

Text color on hover:

Stays the same as the non-hover version.

Button color custom:

Button color on hover custom:

More noticeable now, right?

Text color custom:

Text color on hover custom:

Change it to let people know the button is working.

Create the combinations you want with your choices from the items below.

Both Primary and Secondary calls-to-action buttons work in the same way.

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

Did this answer your question?