Kadence overwrites Elementor TinyMCE styles

  • Hi,
    it seems that Kadence theme overwrites the CSS styles of TinyMCE, used in Elementor to edit a text section. But I’m not really sure about this, or is Elementor doing this?
    Clearly I can say that with Kadence Theme active and while editing in Elementor you can find a new style “body.mce-content-body” with “color: var(–global-palette4);” and “font-family: var(–global-body-font-family);” for example. These are referring to Kadence settings. You can find this in the sourcecode, part of a javascript called “tinyMCEPreInit” at the end of a parameterlist.
    So if you have H2 at 40px you will see a very big H2 in the Text Editor.
    This is getting even worse if you want white font color on black background on the website – now you have white text on white background in the text editor of elementor.
    So is Kadence responsible for this, or Elementor?
    If I switch to OceanWP the problem is gone, because there is no “body.mce-content-body” in the styles, the function “tinyMCEPreInit”s parameter list is shorter.
    `

    • This topic was modified 3 years, 6 months ago by virtualant.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Hey,
    Kadence does add styling to mimic what you get on the front end, lot of themes do this. I do see your point about the background though. Kadence either needs to set the background of tinymce or not define a color of the text. I’ll probably update it to not define color for the text.

    Ben

    Thread Starter virtualant

    (@virtualant)

    thanks for your reply. yes, you’re right, these are the two options.
    I also tested this with the standard theme Twenty Twenty-One, in this case you get a copy of the Website in TinyMCE (in Elementor): same textcolor, same fontsize and same background color.
    In my opinion I like the standard TinyMCE styling, so no overwriting ?? But this is subjective.

    I have also encountered this problem and would be very happy if the editor could get back its default styling as described by @virtualant. Can’t really understand why more and more themes have made this change. For users who work with WordPress for the first time, it is not really easy to understand. It would be a shame to abandon Kadence just because of this “bug”.

    hannah

    (@hannahritner)

    Thanks for your input and feedback, guys! I’ll make sure the developer looks into this.
    Thanks for your patience! Hope you both enjoyed your weekends.

    Best,
    Hannah

    Hi, The next version of the theme will remove the color from the tinymce editor.

    Ben

    Thread Starter virtualant

    (@virtualant)

    thank you very much, that is great.

    Great news! Thank you very much.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Kadence overwrites Elementor TinyMCE styles’ is closed to new replies.