Easy to fix so this will be a short post except for text added for search engines…
Sometimes your content management system’s (CMS) theme and your TinyMCE editor’s editor field’s theme will clash their styles. For example, when your theme has a dark background color your TinyMCE editor will show a dark background in its text editor area which, if you use a dark text color, will make it difficult for you to discern your text from the editor’s background color (i.e black on black is black just as white on white is white).
The reason for this clash is that TinyMCE derives its styling information (the style.css details) from your theme’s style details; namely, the theme’s body tag’s styling data. To fix this, whether your using WordPress, Joomla!, Mambo or any other CMS, all you need to do is add a few lines of code to the very bottom of your theme’s css file.
The code to add should be similar to
body.mceContentBody {
background-color:#FFFFFF !important;
background-image: none;
text-align: left;
}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)
Copyright secured by Digiprove © 2010
Related posts:
not working
Ron, which CMS are you using and which part of the code is not working? Give me a few more details to work with and I’ll do what I can for you. I use the recommended CSS code in both WordPress and Joomla!, it works for both.