Dynamically change element colour using "Color Manager" colours

[Launch48]

Hi there!

Is there a way to dynamically control the colours / background colours of any Cornerstone element using colours chosen in Color Manager? I.e. I want to be able to choose a different colour in the Color Manager and the colour of everything just update to match automatically, similar to how changing link colour also changes the hover colour on recent blog posts.

I already know that you can set the link colour in Customizer, which will change all the links to that colour, along with the hover on the recent posts element, the box shadow on the tabs and on nav items (in Integrity at least), etc., and I know you can set the button and link colours to pull from the colour set in Color Manager, but I want to be able to change any OTHER elements using that same process.

The primary reason is that I don’t use the default inset box shadows on the Integrity navbar and instead swap them out for box-shadows on the span of the navbar li elements, but now I have to set that box-shadow colour manually with CSS. In a perfect world, I’d be able to add .desktop .x-nav li a > span to the list of elements controlled by the colour pickers, but I can’t find a way to do that, or a support forum topic indicating this is possible. I’m comfortable with customizing template files in a child theme but don’t know which file to edit. Any help or guidance would be appreciated!

Thanks in advance for any help!

[Prasant]

Hello @Launch48,

Thanks for asking.

Well, you have the option to automatically change color from color manager but for that you need to set the element color first. Here’s how you can do the same:

1. First under Color Manager, select the color.
2. Next, under Cornerstone page builder add the necessary element.
3. To change the color let’s say background color, open the element’s color palette and select the color you selected in color manager.
4. In future, if you want to change the color all that needs to be done is make the changes in color manager and same will get trickled down to all the elements wherein you have that color template.

I help you get started I have recorded a screencast, please take a look.

Thanks.