Editing CSS of the TinyMCE editor.

  • Hi Robin, thanks for your work. I have a pretty specific question.

    Note, I made the link to the forum unmoderated for testing to help sort this out.

    I discovered editing an image in the Visual Editor hasn’t played nice with my dark theme.
    Everything was white. white on white.

    I was able to handle most of the issues by adding
    .mce-label {color: #000 !important;}
    .mce-textbox {background: #222 !important;}
    .mce-text {color: #000 !important;

    That fixed most problems.

    But there are still a couple buttons that are white when I should be able to see the button art. The OK button while inserting an image and the current active alignment button.

    The problem elements are mce-widget mce-btn mce-active, but I wasn’t able to pinpont the problem doing my usual method of disabling and re-enabling the styless, probably because they are hover (but the problem dsappears when I hover) And I used the method of forcing hover to discover mce-tooltip and mce-tooltip-n and the mouseover properties (but those work)

    Long story short, is there an easy way to edit the CSS of these without handcoding the LightGray skin in the js/tinymce/skins folder?

    I use Gutenberg so TinyMCE is kind of alien to me. I did get some MCE plugins (the classsic editor and the autommatic one) to no avail. I know there are a couple addons that deal with themes but a quick look tells me it’s gonna be difficult for me (but eventally doable) but at the same time I don’t even know if those will help my specific problem of the BBpress editor.

    Maybe if I get some new BB theme packages, that might help?

    Any guidance here is appreciated. Thanks!

    The page I need help with: [log in to see the link]

  • The topic ‘Editing CSS of the TinyMCE editor.’ is closed to new replies.