This article describes with examples, the changes seen when the primary and secondary colours are changed for sites with the Bondi 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 to the background color of the header navigation bar.

2. Background color of the header dropdown menu options.

3. Change in the text color of the footer navigation bar hyperlinks.

Primary Colour 2

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

1. Change in font colour of the navigation bar menu items 

and drop down menu items and background color on hover.

2. Change in the footer background colour.

3. Change in the tool tab main color on the project page.

4. Change in button color and hyperlinks on the project pages.

5. Change in the widget title and font color on the project pages.

Primary Colour 3

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

1. Change in the hover color for the header navigation bar.

2. Change to the colors of the introduction title and description fonts. This will be the contents of the freestyle card at the top of the theme.

3. Change in the card list title font color. In the example below "Browse the open projects" is the collection title for the card list.

4. Change in the card title, description and meta text font colors as seen in the example cards above and below.

5. Change in color on mouse hover text on the card.

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 text color of buttons on the homepage.

Secondary Colour 2 

Effect of changing the secondary color 2 to red.

1. Change in the button color on the homepage. 

Secondary Colour 3 

Effect of changing the secondary color 3 to red.

1. Change in the button color on mouse hover on the homepage. 

Secondary Colour 4 

Effect of changing the secondary color 4 to red.

1. Change in the image overlay color gradient as seen for the card on the right.

Secondary Colour 5 

Effect of changing the secondary color 5 to red.

1. Change in the background color of cards.

2. Change in the background color of the widget cards on the homepage

Secondary Colour 6 

Effect of changing the secondary color 6 to red.

1. Change in the background color of the site, both homepage and project pages


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?