This article describes with examples the changes seen when the primary and secondary colours are changed for sites with the coral bay theme. 

You have to visit the Site > Theme page to make changes to your site colors.

Primary Colours

To understand what exactly happens when you change the three primary colors, let’s label the colors as colour 1, colour 2 and colour 3 as shown in the figure below.

Primary Colour 1 

Effect of changing the primary color 1 to red are listed below

1. Change in the color of the card titles that do not have an overlay. In the example below it changes the card color on the right but not the one on the left which has an overlay.

2. Change in the button color on the cards on the homepage as seen in the example above. Also all the buttons in the project pages.

3. Change in the hover color of the header navigation bar links as shown below.

4. Change in the hover color of the header drop down menu options.

5. Change in the title color of the widgets on the homepage and project pages.

6. Change in color of hyperlinks in widgets on mouse hover as shown in example below. 

7. Color of the timeline on the homepage

8. Change in tool tab color on the project pages

Primary Colour 2

Effect of changing primary color 2 to red are listed below

1. Change in the overlay color of cards. In the example below it changes the overlay color of the card on the left but no change to the card on the right.

2. Change in color when there is a mouse hover over the cards. In the example below there is a change in card color on the left where the mouse is hovering. 

Primary Colour 3

Effect of changing primary color 3 to red are listed below.

1. Change in color of titles in the project pages. In the example below the title of the forum topic has changed to red.

2. Change in color of the hyperlinks in project pages

Secondary Colours

This section describes with examples the changes seen when the secondary colours are changed. Only the Client Experience Team can change the secondary colors.
To understand what exactly happens when the six secondary colors are modified, let’s label the colors as colour 1, colour 2, colour 3, colour 4, colour 5 and colour 6 as shown in the figure below.

Secondary Colour 1 

Effect of changing the first secondary color to red.

1. Change in the hover color of buttons on the project page.

Secondary Colour 2

Effect of changing the secondary color 2 to red.

1. Change in the background color of tags, for example, the tag 'Survey' has a red background color.

Secondary Colour 3

1. Change in the font color of cards with overlay. As shown in example below, the title of the card on the left with overlay has changed to red, but there is no change in the title color of the card on the right, without overlay.

2. Change in font color of buttons as seen in right card above.
3. Change in the title background color of the widget cards.

4. Change in the font color on the lifestyle card on the homepage.

5. Change in background color of the project pages not homepage.

Secondary Colour 4

Effect of changing secondary color 4 to red.

1. Background color of the header naivgation bar.

2. Change in the background color of the widgets box (excluding the title bar) as shown below.

3. Change in the entire background color of the lifecycle widget on the homepage

4. Change in background color of cards without overlay, as shown in example below, the background color of the card on the right has changed to red, but there is no change to the card on the left.

Secondary Colour 5

Effect of changing secondary color 5 to red.

1. Change in the border color of cards without overlay as shown below.

Secondary Colour 6

Effect of changing secondary color 6 to red.

1. Change in text color of the site.

   - Change in the font color of the header navigation bar and menu items 

   - Change in the font color of the title and text of the freestyle card at the top of the site

  - Change in the font color of the text descriptions for the cards without overlay

2. Change in the color of the title of the timeline(lifecycle) on the homepage.

3. Change in the text color of the footer navigation bar menu items.

4. Change in font color of the project pages as shown in the example below

  - Change in the color of the widget card font color (not title)
  - Change in the color of the project title and description
  - Change in the color of the tool description

To make any changes to the secondary colors you have to contact our support team (support@engagementhq.com).

What's Next? Customise your site background image, banner image and favicon as described in the article on Customise your site logos and fonts.

Did this answer your question?