Issue with Elementor CSS and Microthemer

Hey Jonathan,

I’m not aware of any conflict that would cause what you describe, but I’m happy to investigate this for you. When you add styles with Microthemer, it’s possible for them to apply in more places than you intend (see troubleshooting video). And the default preference of applying !important to Microthemer styles helps ensure they override other styles, so you may want to turn that off via Settings > General > Preferences > Always add !important to CSS styles > No.

However, I’ve checked your Microthemer stylesheets and could only see a handful of styles for buttons:

1. draft-styles.css – this contains your most recent (potentially unpublished) styles
2. active-styles.css – this contains the styles regular site visitors see (anyone who isn’t a logged in admin)

I couldn’t see any styles for the red text shown in your screenshot.

If you’re referring to the color of the buttons, turning off !important may help you make color changes in Elementor. But you might also need to change the selector Microthemer uses for targeting the buttons. For example, you currently have this selector:

.mtp-3368 #simpay-4800-payment-button {
    color: rgb(244, 145, 30) !important
}

Once you’ve turned off global !important it would look like this:

.mtp-3368 #simpay-4800-payment-button {
    color: rgb(244, 145, 30);
}

But you could also use a class reference (with a dot) rather than an id reference (with a hash) to give the selector a lower specificity score, making it easier to override in Elementor:

.mtp-5088 .simpay-btn {
    color: rgb(244, 145, 30);
}

And if you wanted your styling to affect all pages on the site, you could remove the page-id modifier so your selector was simply:

.simpay-btn {
    color: rgb(244, 145, 30);
}

See the Selecting elements video for adjusting the default selector suggestion.

Of course the issues you’re having might not relate to your own CSS, I just thought it worth flagging.

Could you temporarily disable Microthemer to confirm that it is the reason you are having the issue you noticed. If it is, and it’s not due to your own CSS, would you mind providing temporary access details for the site via our secure contact form so I can troubleshoot this for you? You can use this handy plugin to provide temporary access easily. If you could provide some additional instructions on how to replicate the issue that would help too.

Many thanks,
Sebastian

You’re welcome.

If the red text displays in Elementor, but not when you view the site normally, could it be a caching issue? If you have any caching plugins enabled, try clearing the cache from your WP admin area. If you have caching enabled by your web host, try clearing it on that side.

I don’t think MT is overriding the red text. So the last option I can think of would be an internal issue with Elementor.

Cheers,
Sebastian

Oh great, I’m glad you made some progress on this. And thanks a lot for sharing your troubleshooting process for others that may run into a similar issue with Elementor.