In this section, you tell Display.Church (D.C) 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: Scroll down to find the Popup Styles subcategory you are in.
Step 2: Click on the link.
Popup Styles subcategory = Overlay
Background
Popup Styles subcategory = Header section
Background
Group name color
Meeting time and location color
Meeting time and location icons color
Popup Styles 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 = Overlay
| The overlay is the colored background behind the event display.
The image to the left shows the overlay default color: a light grey. |
| We have chosen a custom color--blue:
The image to the left shows how the overlay looks now. |
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.