This article describes with examples the changes seen when the primary and secondary colours are changed for sites with the whitehaven 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 title, only for cards without overlay as shown on the left card in the example below. There is no change to the card with overlay on the right.

2. Change in the color of Buttons, as shown in the above example.
3. Change in hover colour of header navigation bar dropdown menu items

4. Change in the timeline color displayed on the homepage card

5. Change in the color of text for the widget title and text on the project page

6. Change in Tool tab main color on project pages

Primary Colour 2 

Effect of changing the primary color 2 to red are listed below.

1. Change in the color of the card overlay, as shown on the left card in the example below. There is no change to the card without overlay on the right.

2. Change in hover colour on the card as shown for the card on the right in the example below.

Primary Colour 3

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

1. Change in footer hyperlinks text color

Secondary Colours

This section describes with examples the changes seen when the secondary colours are modified. 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 

Effect of changing the secondary color 3 to red.

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. Background color of header navigation bar menu items.

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

Secondary Colour 4 

Effect of changing the secondary color 4 to red.

1. Change in background color of the header naivgation bar.

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

3. Change in background color of the footer naivgation bar.

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 the font color of text on cards without overlay, as shown below.

2. Change in the text color on project pages as shown below

  - Change in font of the header navigation bar menu items
  - Change in the color of the project title and description
  - Change in the color of the tool title and description
  - Change in the font color of the meta text on widget cards 


To make any changes to the secondary colors or to have a dark themed site (header and footer - dark 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?