Issue with Elementor CSS and Microthemer

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 6 months, 2 weeks ago.

Author Posts

Jonathan

After installing and using microthemer I am having trouble with Elementor pages not showing up properly and appear to be inheriting CSS from strange places or ignoring what I am inputting in Elementor all together.

Basic stuff like text styling, backgrounds, colors etc.

https://firstinnutrition.com/tyfsad/ is the test page.

https://imgur.com/a/DlsaQWr Image from elementor showing different stylings

Elementor is attempting to escalate it to the next tier of support as they could not figure it out, was hoping you might know if there’s a known conflict or issue with microthemer that could be contributing?

thanks for your time and help!


Sebastian

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


Jonathan

Sebastian, thanks so much for the detailed and thorough reply.

The styling you’re seeing from Microthemer with the buttons is working PERFECTLY as it is only supposed to style the buttons on a few select pages and not the main join page…

The red text was styled in elementor and is not showing on the main page.

I thought this might be due to microthemer overriding the elementor style sheets, but this might not be the issue..

I am still waiting to hear back from elementor support which is frustrating to say the least. :/


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


Jonathan

What I think has occurred is some pages in Elementor may have been corrupted. By that I mean were accidently switched to Classic editor from Block editor and back.

Some random google searching lead me to think that could be a cause..

Switching elementor to inline CSS and not external files fixed the issues even on the broken pages.

I went back to a very old page on the site that had not been update, made a copy, and rebuilt the page from there and the styles were editable as usual.

Copying and pasting in blocks however seems to break the styles for some reason, but I am able to piece together the pages I need and am confident this is some sort of issue with this particular site.

https://firstinnutrition.com/tyfsad/ This is how it should process the styles.

So 99.9% chance it has ZERO to do with Microthemer. Unfortunately getting Elementor to respond and investigate is taking a while now and since I need to redo this entire website anyway I’m just happy I found a work around in the mean time!

Thank you so much for your help with this!


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.

You must login or register to reply to this topic.