The “Accent Color” feature in Advanced Grid Builder (AGB) enhances the visual coherence between your grid and the overall aesthetics of your website. By altering the colour of specific components in your grid output, such as ‘More’ buttons, sort and filter widgets, and WooCommerce icons, you can achieve a harmonious blend with your existing theme colours.
How it Works
If you do not specify an accent colour, AGB attempts to fetch the accent colour of your currently installed theme. However, not all themes consistently use the same method for storing theme colours, so this feature may not work for all themes. If this is the case, AGB will use a default colour instead.
How to Override the Default Colour
To override the default colour for any grid, you can enter a colour value in the Accent Colour input field. This field accepts any CSS colour property value. Here are some examples:
- Hexadecimal: #FF5733
- RGB: rgb(255, 87, 51)
- Named Colour: Red
Note: Colour values should be in the exact format they would be added as a css property, so for example ‘rgb(0,0,0)’ not ‘0,0,0’.
For example, in the following demo the accent color has been set to red.
Why Use the Accent Colour Feature?
By using the Accent Colour feature, you can ensure that the colours used in your grid align well with the rest of your website, including brand colours. This contributes to a more seamless and professional appearance, and can also improve user experience by providing visual consistency.