This article describes with examples, the changes seen when the primary and secondary colours are changed for sites with the Torquay 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 

The effect of changing the first primary color to red are listed below.

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

2. Change in the color of buttons, as shown for the card on the right in the above example.
3. Change in title font color of the widget cards on the homepage and project pages

4. Change in color of hyperlinks on mouse over, as seen for the first link in the widget card shown below.

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

6. Change in the 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.

3. Change in color of the header navigation bar

4. Change in color of the slider overlay, as shown below.

Primary Colour 3

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

1. Change in the widget card border colors as shown in the example below.

2. Change in footer navigation background color.

3. Change in the hyperlink 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 the header navigation bar items and menu items.

2. Change in the slider background color.

Secondary Colour 2

Effect of changing secondary color 2 to red.

1. Change in footer text color.

2. Change in button font text color on project pages.

Secondary Colour 3

Effect of changing secondary color 3 to red.

1. Change in background color the full site

2. Change in the background color of the widget titles.

3. Change in the font color of buttons on the homepage.

Secondary Colour 4

Effect of changing secondary color 4 to red.

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

2. Change in the meta text font color on cards with overlay as shown below.

Secondary Colour 5

Effect of changing secondary color 5 to red.

1. Change in color of the font of the header navigation bar menu items and dropdown list.

2. Change in the font color of the text on the slider card.

3. Change in color of the title fonts of cards with overlay.

4. Change in the background color of cards without overlay.

5. Change in the border color of the cards without overlay as seen in the example card above.

Secondary Colour 6

Effect of changing secondary color 6 to red.

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

2. Change in the widget card font color (not title)

3. Change in text color of project pages

  - 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?