To find these design items...

Step 1: After you log in, click on Calendars (brown box below).

The Your Calendars page will open.

Step 2: Choose the calendar you wish to modify (brown box below).

Step 3: Click on Design (brown box below).

Step 4: Click on Events Listing/Details Colors (turquoise box in image below).

Step 5: 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...

Background

Link

Link hover

Share link

Share link hover

Share link background hover


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).

- - - - - - - - - - -

SHARE LINK

Default

This is the color of the share link. At the moment, it is grey (see image below).

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 share link color changes from the default to the color you chose --- in this case bright pink (see image below).

- - - - - - - - - - -

SHARE LINK HOVER

Default

The share link hover is the color of the share link when you mouse over it. At the moment, it is white.

Action: Choose another custom 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 share link hover color changes from the default to the color you chose --- in this case sea green (see image below).

- - - - - - - - - - -

SHARE LINK BACKGROUND HOVER

Default

The share link background hover is that circle around the share link when you mouse over it. At the moment, it is grey (see image below).

Action: Choose a custom color.

Result: The share link background hover color changes from the default to the color you chose --- in this case brown (see image below).

Did this answer your question?