This widget allows you to display some of your groups (more details below) in a Displaychurch.events view.
Which groups do we display?
Church Community Builder (CCB)
We list ONLY groups that are active AND publicly listed. As CCB users know, there is an "inactive flag" in CCB and a Public Search checkbox. If the CCB group does not have an inactive flag and is included in the public search group, we would display it.
Image below shows Inactive Flag.
Image below shows Public Search flag.
Planning Center Online (PCO)
We list ONLY groups that are marked as visible (published) on Church Center.
The image below shows the Published/Hidden radio buttons.
***DESIGN ITEMS***
Just like in DCE Calendars, some Group Widget design items are in every view and some are specific to the view you are working with. That means, the view is what decides how your groups will look, NOT the integration you are using.
Hopefully, we are organized things so the information you need is easy to find. [If not, pop us a comment in our website chat. Help us by being specific. We want to know about it!]
Step 1: Scroll down to find the Design category you are in.
Step 2: Click on the subcategory of the design item you are working with.
Step 3: Find your view in the table and click on the link of the design item you are working with.
Design category = Frame
Design category = Group details
Design category = Styles
Design category = Fonts
Design category = Frame
Design subcategory = Frame
View | Relevant items |
Two Columns Cards Outlined Mosaic |
Design subcategory = Cards
View | Relevant items |
Cards | |
Outlined |
Design category = Group details
Design subcategory = Information
View | Relevant items |
Two columns | |
Cards | |
Outlined | |
Mosaic |
Design category = Styles
Design subcategory = Main Information
View | Relevant items |
Two columns Cards | |
Outlined | |
Mosaic |
Design subcategory = Controls
View | Relevant items |
Two columns |
Design subcategory = Images
View | Relevant items |
Two columns Cards Mosaic | |
Outlined |
Design category = Fonts
Design subcategory = Font family
View | Relevant items |
Two Columns Cards Outlined | |
Mosaic |
Frame
SUBCATEGORY: FRAME
Frame Color
 | DefaultIf you choose this option, the space around and between the cards will be white. Note the color where the squiggly lines are and between the two cards.  |
 | Inherit from websiteIn this option, the frame color is inherited from your website or other embeddable component. In this case, the inherited background is light grey.  |
 | Custom color pickerUse this option to choose your preferred frame color. If you are not yet familiar with how this works, here is the walkthrough.  |
 | TransparentIn this option, the frame color is a non-color (greyed out).  |
 | Custom color valueWhy this and not Custom color picker? Use Custom color value when you have a specific 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.  Select your color by typing in the hex value. Each color has a unique hex value. If you are using this option, most likely you will already have the number you need. If not, for any reason, you can find hex values here. Here is the result of our choice:  |
Click Save at the bottom of the column to keep your changes.
Frame width
To change the frame width, type in a number before the "px" (brown arrow in image below).
Enough space? Great.
Too much? Type in a lower number.
Too little? Type in a higher one.
Let's look at some examples.
We've put a gold box around each image to help define the frame width.
 | This frame width is smaller than the default below.  |
 | This frame width is the default.  |
 | This frame width is larger than the default above.  |
Note that the frame width changes the space AROUND the cards but not between them.
Click Save at the bottom of the column to keep your changes.
SUBCATEGORY: CARD
Cards per row
Notice that when you hover near the number box, up and down arrows appear (brown box in image below). Use them to change the number of cards which should show in each row. At the moment, 3 cards appear in each row.
You can increase the number of cards per row:
 |
You can decrease the number of cards per row:
 |  |
Click Save at the bottom of the column to keep your changes.
Card left and right margin
This design element controls how much space is to the left and right of the cards themselves. Depending on what value you choose, the frame width may be affected since there is a finite amount of space on a device screen.
Compare a 2% margin (gold arrows in the image above) with a 5% margin (gold arrows in the image below). As you can see, the width and length of the cards change to accommodate the new margin.
Here is an even bigger margin:
To change the percent of space, simply type a number on the relevant line.
Click Save at the bottom to keep your changes.
Card corner rounding
 | This rounding is less than the default below. The corners are almost square.  |
 | This rounding is the default. There is a small corner rounding.  |
 | This rounding is more than the default above. The corners are well rounded.  |
Compare 20 px rounding (brown box and gold line in the image above) with 40 px rounding (brown box and gold line in the image below). Note that this design element applies to all four corners of the card.
To change the corner rounding, simply type a number on the relevant line.
Click Save at the bottom to save your changes.
Card hover effect
If you click on the downward arrow, you see the dropdown menu. Note that there are 4 choices: None, Zoom in, Simple accent, Expandable accent.
This is best explained in a video:
Where do you choose the color? Accent color.
Group Details
SUBCATEGORY: INFORMATION
Group name horizontal position & Group name vertical position
Click to open up the dropdown menu. Mix and match to put the group name in the position of your choice.
 |  |
Here are some examples:
 | Group name horizontal position = Left Group name vertical position = Bottom |
 | Group name horizontal position = Center Group name vertical position = Middle |
 | Group name horizontal position = Right Group name vertical position = Top |
Click Save at the bottom of the column to keep your changes.
Show Group Image if available
Toggled off  | Toggled on  |
This group has an image but it is not shown.  | Now the group image is shown.  |
Click Save at the bottom of the column to keep your changes.
Show Group description
Toggled off  | Toggled on  |
This group has a description but it is not shown.  | Now the group description is shown.  |
Click Save at the bottom of the column to keep your changes.
Show Contact Leader/Contact Us Button
Toggled off  | Toggled on  |
This group has such a button but it is not shown.  | Now the group's contact leader button is shown.  |
Click Save at the bottom of the column to keep your changes.
Styles
SUBCATEGORY: MAIN INFORMATION
Accent color
Did you choose 'Simple accent' or 'Expandable accent' in Card hover effect? Here is where you choose the color.
 | If you don't choose a color, the Default color is turquoise. Use the Custom color picker to choose your accent color. If you are not yet familiar with how this works, here is the walkthrough. |
Click Save at the bottom of the column to keep your changes.
Group name color
 | If you don't choose a color, the Default color is black. You can also click on Inherit from website. In this option, the color is inherited from your website or other embeddable component. Use the Custom color picker to choose your group name color. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of a Group name Custom color:  |  |
Click Save at the bottom of the column to keep your changes.
Group name color on hover
 | 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. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of a Group name color on hover Custom color:  |  |
Click Save at the bottom of the column to keep your changes.
Group description color
 | If you don't choose a color, the Default color is black. You can also click on Inherit from website. In this option, the color is inherited from your website or other embeddable component. Use the Custom color picker to choose your group description color. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of a Group description Custom color:  |  |
SUBCATEGORY: CONTROLS
Contact button text color
 | If you don't choose a color, the Default color is white.  Use the Custom color picker to choose your contact button text color. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of a Contact button text Custom color:  |  |
Click Save at the bottom of the column to keep your changes.
Contact button text color on hover
 | If you don't choose a color, the Default color is white.  Use the Custom color picker to choose your contact button text color on hover color. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of a Contact button text color on hover Custom color:  |  |
Click Save at the bottom of the column to keep your changes.
Contact button background
 | If you don't choose a color, the Default color is black.  Use the Custom color picker to choose your contact button background color. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of a Contact button background Custom color:  |  |
Click Save at the bottom of the column to keep your changes.
Contact button background on hover
 | If you don't choose a color, the Default color is black. Use the Custom color picker to choose your contact button background on hover color. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of a Contact button background on hover Custom color:  |  |
Click Save at the bottom of the column to keep your changes.
Image placeholder background
 | If you do not have a group image or you have chosen to toggle off Show group image if available, Displaychurch.events will display a colored rectangle. 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. If you are not yet familiar with how this works, here is the walkthrough. 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.
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. If you are not yet familiar with how this works, here is the walkthrough. |
Here is an example of an Image blend Custom color:  |  |
Click Save at the bottom of the column to keep your changes.
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. If you are not yet familiar with how this works, here is the walkthrough. |
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 category = Fonts
Design subcategory = Font family
General
This sets the font type of text OTHER THAN the group name.
 | Default: The default font is Roboto or Cabin depending on the integration and the group view. Inherit: In this option, the font is inherited from your website or other embeddable component. |
 | Inherit: In this option, the font is inherited from your website or other embeddable component. |
 | Custom: Click on the 'X' to clear the input line. Then start typing. I usually just type any letter. The dropdown menu will populate with the available fonts. Choose the one you prefer. |
Group name
This sets the font type of the group name.
 | Default: The default font is Roboto or Cabin depending on the integration and the group view. |
 | Inherit: In this option, the font is inherited from your website or other embeddable component. |
 | Custom: Click on the 'X' to clear the input line. Then start typing. I usually just type any letter. The dropdown menu will populate with the available fonts. Choose the one you prefer. |