To find these design items...
| Step 1: When logged in to Display.Church, open the Widgets section (if needed). |
| Step 2: Choose Calendars. Your Calendar page will open. |
| Step 3: Choose the calendar with which you wish to work. |
Step 4: Click on Design (brown box below).
Step 5: Click on Events Listing/Details Colors (turquoise box in image below).
Step 6: Scroll down until you find Details (turquoise box in image below).
Then continue scrolling to find: Background, Link, Link hover, Share link, Share link hover, and Share link background hover.
Let's look at how you can choose your own colors for these design items. If you are not familiar with the DCE custom color picker, check out this article first.
To modify these design items...
Here is how our event's details look when everything is in the default position:
- - - - - - - - - - -
BACKGROUND
Default
In the image above the background is white.
Action: Choose a custom color.
Result: The event details background color changes from white (default) to the color you chose --- in this case light green (see image below).
- - - - - - - - - - -
LINK
Default
The sentence in the while box (image below) is actually a link, but you wouldn't know it, right? Let's fix that.
Action: Choose another color.
In the image below, we see that there are two options.
Option #1: Inherit from website
In this option, the color is inherited from your website or other embeddable component. Usually, this will not be the recommended option because the inherited color may not give sufficient contrast depending on what other colors you chose.
Option #2: Custom color picker
Result: The link color changes from the default to the color you chose --- in this case orange (see image below).
- - - - - - - - - - -
LINK HOVER
Default
The link hover is the color of the link when you mouse over it. At the moment, it is light grey.
Action: Choose another color.
In the image below, we see that there are two options.
Option #1: Inherit from website
In this option, the color is inherited from your website or other embeddable component. Usually, this will not be the recommended option because the inherited color may not give sufficient contrast depending on what other colors you chose.
Option #2: Custom color picker
Result: The link hover color changes from the default to the color you chose --- in this case, bright blue (see image below).
