Home Blog Portfolio Development Contact Us Recommends
Building One Application at a Time

WordPress TinyMCE Editor Black Background Fix

For about 2-3 hours I was sifting through the support forums and blogs throughout the web and was not able to find a fix for this weird bug/feature in the WordPress (there were a few fixes but none of them worked for this instance). The content area of the TinyMCE editor (built into WordPress) was black and wider than normal overlapping the right control panel. Yes, the theme has a black background, but the option in the TinyMCE Advanced manager was not following the rules when checking/unchecking “Import the current theme CSS classes”. The content area remained black.  On to the solution…

Taking it apon myself to figure out why this was happening I busted out the trusty FireBug to do some “after page load” DOM digging.  There was a CSS file that was being loading after (or before) the page loaded.  Must be a script that was adding it after the page loads.  Any who, the file is called content.css located here:

/blog_root/wp-includes/js/tinymce/themes/advanced/skins/wp_theme

Found the body, td style and changed the background to #000000; and vwalla, it worked.  There may be another reason why changing this line works besides Voodoo, but its good enough for this task.  :)

3 Responses to “WordPress TinyMCE Editor Black Background Fix”

  1. luke Says:

    in the same css file (content.css) in the latest WP, you need to add ‘background-image:none;’ to the following class:

    body.mceContentBody {
    background-image:none;
    }

  2. Jesse Vista Says:

    Luke,

    Although I did not test this method for the latest WP, it looks promising.

    Thank you for the feedback!

  3. Marc K Says:

    I made the suggested changes, it fixed itself for the first time, but the next time I logged in, it reverted back to black background.

    ~/wp-includes/js/tinymce/themes/advanced/skins/wp_theme>

    2 body {background:#000000;}

    67 body.mceContentBody {
    68 background-color:#000000 !important;
    69 background-image: none;
    70 font: 13px/19px Georgia, “Times New Roman”, “Bitstream Charter”, Tim es, serif;
    71 padding: 0.6em;
    72 margin: 0;
    73 }

Leave a Reply