In this section, you tell Display.Church (D.C) about the colors you wish to use for the main view (not the pop up) 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
Design sub-category = Layout: Background color
Design sub-category = Main information
Group name color
Location color
Meeting time color
Group description color
Link color
Link color on hover
Design sub-category = Images: Image placeholder background
Design sub-category = Primary call-to-action & Secondary call-to-action
Button color
Button color on hover
Text color
Text color on hover
Cards (Grid)
Design sub-category = Main information
Accent color
Group name color
Location color
Meeting time color
Group description color
Design sub-category = Controls: Image placeholder background
Design sub-category = Basic information
Label color
Value color
Design sub-category = Primary call-to-action & Secondary call-to-action
Button color
Button color on hover
Text color
Text color on hover
Outlined
Design sub-category = Main information
Group name color
Group name color on hover
Group description color
Read more link color
Design sub-category = Images
Image blend
Image blend on hover
Mosaic
Design sub-category = Main information
Group name color
Group description color
Design sub-category = Controls: Image placeholder background
Design sub-category = Primary call-to-action & Secondary call-to-action
Button color
Button color on hover
Text color
Text color on hover
Design subcategory = Layout: Background color
Choose the default.
  | Choose a custom color.
  |
Click Save at the bottom of the column to keep your changes.
Design subcategory = Main information (Simple List)
  | Click on the options of your choice.
Here is an example of a Group name Custom color:   Here is an example of a Group description Custom color:
 
|
Click Save at the bottom of the column to keep your changes.
Design subcategory = Images/Controls: Image placeholder background
| If you do not have a group image or you have chosen to toggle off Show group image if available, Display.Church will display a colored rectangle so the space does not look empty.
If you don't choose a color, the Default color is a turquoise gradient.  |
| Use the Custom color picker to choose your image placeholder background color.
Here is an example of an Image placeholder background using the Custom color picker:
 |
Custom Color value examples:(1) Changing the first number: linear-gradient(to right, #080db6, #2193b0)
 (2) The default is 'linear gradient(to right...) and that is what we see above. We can change the gradient direction. Here, we change it to 'linear gradient(to top right'.
 (3) Let's make it even more dramatic by changing the second color value.
 4) Another option is a radial (instead of a linear) gradient: radial-gradient(#080db6, #b408b6)
 (5) You can also use an effect word such as 'transparent'.
 There are many more combinations. Enjoying playing around! | Use Custom color value to choose a specific color or color effect based on CSS [Cascading Style Sheets] values.
 If you click on this item, the default CSS value is 'linear-gradient(to right, #6dd5ed, #2193b0)'. This specifies a turquoise gradient (same as the Default above). You can change the numbers to create other gradients. You can also erase what is there and type in 1 number or a color effect word. See the examples to the left. |
Click Save at the bottom of the column to keep your changes.
Design subcategory = Primary call-to-action & Secondary call-to-action
Button color default:  Button color on hover default: Note the shadow, but otherwise, not much different.   Text color: Text color on hover: Stays the same as the non-hover version. | Button color custom: 
Button color on hover custom: Popping 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.
Design subcategory = Main information (Cards Grid)
 | Accent colorDid you choose 'Simple accent' or 'Expandable accent' in Card hover effect? Here is where you choose the color. |
  | Click on the options of your choice.
Here is an example of a Group name Custom color: Here is an example of a Group description Custom color:
|
Click Save at the bottom of the column to keep your changes.
Design subcategory = Basic information
LABEL COLOR
|
When you choose the default, your label text color will be grey (hot pink boxes in image below).
Change via our custom color picker.
 Choose a custom color value by typing in the value you want.
 |
VALUE COLOR
|
When you choose the default, your information text color will be grey (gold arrows in image below).
Change via our custom color picker.
 Choose a custom color value by typing in the value you want.
 |
Click Save at the bottom of the column to keep your changes.
Design subcategory = Main information (Outlined)
 | If you don't choose a color, the Default is white:  However, you can choose a custom color.
 |
 | If you don't choose a color, the Default color is orange.
 Use the Custom color picker to choose your group name on hover color. |
Here is an example of a Group name color on hover Custom color:
|
 |
What you see above will change if you choose to flip your group item on hover. [Design - Outline - Effects - Hover effect].
| You will see an additional two design items. Here is how the default looks:
|
| Here it is with some custom colors:
 |
Click Save at the bottom of the column to keep your changes.
Design subcategory = Images
IMAGE BLEND
| NOTE: Depending on your color choices, there may be some interaction (color mixing) between this design item and Frame color. It could be interesting!
This design feature offers a colored overlay on your group image.
If you don't choose a color, the Default overlay color is black.
 Use the Custom color picker to choose your image blend color. |
Here is an example of an Image blend Custom color:
|  |
IMAGE BLEND ON HOVER
| NOTE: Depending on your color choices, there may be some interaction (color mixing) between this design item and Frame color. It could be interesting!
This design feature offers a colored overlay on your group image on hover.
If you don't choose a color, the Default overlay color is black.
 Use the Custom color picker to choose your image blend on hover color. |
Here is an example of an Image blend on hover Custom color:
|  |
Click Save at the bottom of the column to keep your changes.
Design sub-category = Main information (Mosaic)
| Click on the options of your choice.
Here is an example of a Group name Custom color: Here is an example of a Group description Custom color:
|