How to change background of TinyMCE?

Question

I have just install TinyMCE editor for my website. But the default background is black and text colour is gray. Anybody can tell me how to change background to white and tex

Answer 1

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/editor_css

Without knowing the specifics of your site configuration, I am going to guess that it is trying to load up some css files. Look through the configuration docs. You might need to add or modify some CSS (if it is already loading some).

Answer 2

Adding the following code to the theme stylesheet worked perfectly!

body.mceContentBody { 
   background: #fff; 
   color:#000;
}

I was pulling my hair out on this one -- and believe me, I don't have any hair to spare. :-) Thank you!

Answer 3

Add BODY_CLASS To init like this:

<script type="text/javascript">
tinyMCE.init({
    mode: "textareas",
    theme: "advanced",
    theme_advanced_buttons1: "bold,italic,underline",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_default_foreground_color: "#FFFFFF",
    body_class: "mceBlackBody"
});
</script>

Within content.css of correct theme, simply add the following entry:

body.mceBlackBody {background:#000; color:#fff;}

This will make the body black and the text white within the editor

Answer 4

I strongly advise you to use the tinymce configuration to influence styles in tinymce, instead of fiddling with core css files.

There is the content_css setting which allows you to specify a ccs file which will overwrite the default behaviour (css). That's the way to go. You may use the css from the other answers provided.

Answer 5

TinyMCE is probably using the main stylesheet of your website. And in this case it's with grey text on a black background.

All you need to do is add this style to your main stylesheet:

body.mceContentBody { 
   background: #fff; 
   color:#000;
}

And then hard clear your cache or restart the session so that TinyMCE will load up the CSS fresh. And then your edit area will now show black text (#000) on white backing (#fff).

Answer 6

Ran into the same issue a moment ago and found that my issue was caused because the skin (cirkuit) has !important; hack over writing this.

html, body {
    background: #FFFFFF !important;
    margin: 0;
    padding: 0;
}