Easy to fix so this will be a short post except for text added for search engines…
Sometimes the theme used for the frontend of a CMS such as WordPress interferes with the display of the TinyMCE post editor. This clash can cause the text in the editor to be white which makes it invisible on the editor’s white page background. This editor theme/frontend theme styles clashing can be stopped by putting the following CSS snippet into the bottom of your theme’s style.css file.
body.mceContentBody {
background-color:#FFFFFF !important;
background-image: none;
text-align: left;
}The reason for this clash is that TinyMCE derives some of its style from your theme’s style.css file and other parts of its style from a special CSS file called editor-style.css which should be located in your theme’s directory.
Here’s what that code does:
body.mceContentBody is the name of the element being styled. In this case, it is the class .mceContentBody
background-color: #FFFFFF sets the background color to white (#FFFFFF). It could easily be black (#000000) or yellow (#ffff00) etc…
background-image: none instructs browsers not to use any background images. Without this, were an image specified for the body tag then that image would still be displayed by TinyMCE. An image could also be specified with background-image: url(path-to-image/image.png)
text-align: left ensures that TinyMCE defaults the text alignment to the editor’s left-hand-side. You could set this to middle, right or justify.
That bit of code should be appended to the end of your theme’s main style sheet. For WordPress, that stylesheet can be edited from the Dashboard via Appearance > Editor. The style sheets will be listed at the bottom-right-hand-side of the Editor screen. Joomla users should edit their css file via Extensions > Template Manager then choose their template and select Edit css. Most other content management systems have a means through which you can edit your css without requiring their users to directly access their server. Remember that all style sheets (css files) end with the file extension .css .
It’s important that the code is added to the very bottom of your style sheet so that it overrides the body’s default style data. The code will only affect TinyMCE’s content body (or any element of the class .mceContentBody)
wpDiscuz