background color problem in TinyMCE editor

  • Hi there,

    I’m hoping someone has come across this and found a fix for it.

    My actual page background color is dark as is my text color. On the site because of the white background coded into the css for various DIV tags, the site shows a white background in the text area. However, the TinyMCE editor picks up the dark color coded into the Body tag. The dark text on the dark background makes it so that I cannot view my text in VISUAL mode because they are so close in color.

    The workaround I’ve come up with is to change the body tag background color in the CSS file to white. Then I can see to edit in VISUAL mode. However, this means each and every time I want to work on my site, I have to change it and then change it back when I’m done. Granted not a huge task but annoying.

    In a way it’s a CSS issue, but the only place it’s affecting anything is in the TinyMCE editor or an issue with WP and I don’t know which.

    If anyone has come across this and has a permanent fix, I’d sure appreciate hearing it, thanks.

    MC

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,
    You may add this line to worpress.css (in ../wp-includes/js/tinymce/wordpress.css)
    at line 53 (body.mceContentBody)

    body.mceContentBody {
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	padding: 0.6em;
	margin: 0;
}

    and replace it with

    body.mceContentBody {
	background-color:#FFF !important;
	font: 13px/19px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
	padding: 0.6em;
	margin: 0;
}

    see this: “background-color:#FFF !important;” !important is for this line to take precedence on the body color of your theme.

    Thread Starter MouseClicks

    (@mouseclicks)

    Oh way cool! Seems to be working fine, thanks so very much!

    Thread Starter MouseClicks

    (@mouseclicks)

    Interesting, it worked on the one site, but not working on another. I would think this would work for any site.

    Adding the required coding to your themes style.css also works as this is called after the tinymce css files. It also avoids altering tinymce files that may be changed back again on upgrade.

    Add any changes you need below the body tag in your style.css file. For example, these are the changes I needed:

    body.mceContentBody {
  background-color:#FFF !important;
  background-image: none;
  text-align: left;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘background color problem in TinyMCE editor’ is closed to new replies.