Tiny MCE doesn't look anything like my blog

Question

I'd like my blog to actually look like what I type in WYSIWYG mode but it's not even close. How do I fix it? www.halseyschools.com

Answer 1

You can add an editor-style.css stylesheet in your theme which mimics the look-and-feel of your blog. Here are some tips on how to do that (you'll need to touch functions.php too):

http://www.deluxeblogtips.com/2010/05/editor-style-wordpress-30.html

The first two styles in that example are the important ones; usually what I do is just copy over and rename my style.css to editor-style.css, then add these at top:

html .mceContentBody {
    max-width:640px;
}
* {
    font-family: Georgia, "Bitstream Charter", serif; 
    color: #444;
    line-height: 1.5;
}

Edit for the correct font-family and text color / line-height, of course. This will get you most of the way there.

Here's another way to go about it, that might get you even closer: http://digwp.com/2010/11/actual-wysiwyg/

Best of luck!