Editor width

Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

It does actually read “in a child theme”

“A child css”

You would need to try setting up an editor-style.css in your child theme.

Yes, Thank you. I’d followed the instuctions for getting a css to act on the editor, the problem was knowing what needed to go in it.

My (child) functions file included:

//============
add_action( ‘after_setup_theme’, ‘gmtheme_setup’, 11 );
// Needed to make the editor work like the resulting page
function gm_styles() {
add_editor_style( ‘gmeditor.css’ );
}
add_action( ‘init’, ‘gm_styles’ );
//============

and the gmeditor.css influenced things in the editor like link colours as I expected.

What I needed to do was to add the appropriate style rule, here or elsewhere, that would influence the width of the content of the editor. Typically the way to do this is to look in the standard CSS files to find the starting rule so that you know what to adapt via the css that is loaded through add_editor_style.

That was what I was hoping to find out. I couldn’t find anything that looked like an appropriate class or id in the existing CSS files, although the Chrome Developer tools suggested that I ought to be able to find #tinymce. Using a rule like #tinymce{width:800px} doesn’t work but #tinymce p{width:800px} does.

This doesn’t make much sense so I’m sure I haven’t got the full story, hence my question.

Have you tried using Firefox with the Firebug add-on for this kind of CSS troubleshooting? I find that it’s far better than Chrome’s built-in tool.

Thank you – cracked it.

For anybody else with this problem, the selector is
html .mceContentBody

(in this instance, the ‘html’ is within TinyMce’s inline frame)