How to target the text of this button with css?

[TristanP]

Hi there!

I am trying to change the color of the text in this button with CSS.

I can change the color of the graphic using

.x-anchor.x-anchor-button.has-graphic.moduleBtn.moduleBtnActive i.x-icon.x-graphic-child.x-graphic-icon.x-graphic-primary {
  color: white;
}

But for some reason I am unable to target the text?

What works in the inspector doesn’t lend itself to replicating in CSS:

[marc_a]

Hey @Tristanarkesteijn,

Thanks for reaching out!

To change the color of the text inside your button, you just need to go to the Text section inside your button settings and look for color.

Hope that helps.

[TristanP]

Hi @marc_a, yes i know i can change it within the element, but that won’t work here. The color change isn’t permanent, but depends on the class.

There is a JQuery script active in this footer that adds or removes the moduleBtnActive class to the button.

I can change the icon color by targeting it as .x-anchor.x-anchor-button.has-graphic.moduleBtn.moduleBtnActive i.x-icon.x-graphic-child.x-graphic-icon.x-graphic-primary

and i would like to do something similar (using the moduleBtnActive class) to change the text color.

[tristup]

Hi @Tristanarkesteijn,

For this, you need to add the custom CSS code based on the class for the text element, i.e., x-anchor-text-primary. You can try adding that class with the CSS code working for the icon. Or else, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.
Please remember that the custom coding is beyond the scope of Theme Support.

Thanks

[TristanP]

Ok, I fully understand that you guys need to draw a line somewhere but I don’t think this is customization. Anyway… I don’t like it as a method but i used ! important to make
.x-anchor.x-anchor-button.has-graphic.moduleBtn.moduleBtnActive .x-anchor-text-primary
{ color: white! important;} do the job.

[marc_a]

Hey Tristan,

We’re glad that you’re able to figure it out.

Cheers!