Force a Background Color in TinyMCE

December 18, 2008 at 12:39 pm | CSS | 1 comment

So you’ve put together a CSS template with a body background color. We’ll use #4C4C4C. Your CSS template contains a content area that is a different color. We’ll use #000000. In simple form that looks like this:

body {
    background-color: #4C4C4C;
}
#content {
    width: 700px;
    margin: 0 auto;
    background-color:#000000;
    color: #FFFFFF;
}

Now if your content area is black, wouldn’t it be nice to edit your content in TinyMCE on a black background? Assuming you have TinyMCE importing your sites stylesheet, here is the trick:

* .mceContentBody {
    background: #000000;
}

That’s it!  Super easy.  If you have a better way of doing this feel free to comment.