Docs

[ehsd]

Is there a simple way to change the icon color when added to a button element in Cornerstone? I am able to change the color by copying the selector in devtools, but that leaves me with a very unmemorable selector. If I try adding a custom class Its not specific enough. If I add the button classes to a HTML5 button I can control the color, etc.

I would think there should be a color control exposed in the element settings.

[Friech]

Hi There,

Thank you for writing in! Button color can be set globally on Customizer > Buttons.

However if you need a certain button to have a different color, please declare the a new class (e.g. my-btn) by adding this on your Custom CSS on Customizer.

/*normal state*/
.x-btn.my-btn {
  color: #000000;
  border-color: #ac1100;
  background-color: #ff2a13;
}

/*hover state*/
.x-btn.my-btn:hover {
  color: #ffffff;
  border-color: #ac1100;
  background-color: #ff2a13;
}

Change those color values to your desired color combinations.

And then apply the my-btn to your button element.

Hope it helps, Cheers!

[ehsd]

Thanks, I stuck with adding the button using the HTML5 tag with the appropriate x-btn classes to match the CS element. That was easier than using the element as the button shortcode and CS element use styled anchor tags vs actual button tags.

For the CS button element, if not already planned, there should be icon color controls in Cornerstone when adding an icon to the button.

[Rupok]

Hi there,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[Author]

Posts