I’ve searched the forums and the web for hours on end to find an answer to this seemingly simple question. I’ve also been on IRC (what a waste of time) and searched the codex and the files in WordPress. But I’m either not capable of understanding, or don’t care to learn what I need to know in order to effect the change I desire.
It’s hard to believe that I’m the only one who needs a larger font in the editor that does not change the font when displayed – published; just so that I can more easily see what I’m doing when composing.
Somewhere there is code which sets the size of the font in the visual/html editor. Surely someone knows where this is and can tell me.
If there are any of the fine developers of this Wonderful product which I have used for years who read these forums, then I would like to request that the ability to change the editor font/font-size independent of the published font/font-size be built into the admin interface.
Any help on this will be greatly appreciated.
Plonk this is your theme’s functions.php
After the very top <?php, create a new line and paste the following code in, then save.
add_action( 'admin_print_styles-post.php', 'my_admin_css' );
add_action( 'admin_print_styles-post-new.php', 'my_admin_css' );
function my_admin_css() {
?>
<style type="text/css">
#editorcontainer textarea#content { font-size:130%!important }
</style>
<?php
}
The function will print out the additional CSS on the pages where you write posts only (so it’s not loading on every admin page), and applies a font size increase … adjust as required..
Hope that helps..
Mark, I did as you instructed:
<?php
add_action( 'admin_print_styles-post.php', 'my_admin_css' );
add_action( 'admin_print_styles-post-new.php', 'my_admin_css' );
function my_admin_css() {
?>
<style type="text/css">
#editorcontainer textarea#content { font-size:130%!important }
</style>
<?php
}
/**
* TwentyTen functions and definitions
*
* Sets up the theme and provides some helper functions. Some helper functions
* are used in the theme as custom template tags. Others are attached to action and
* filter hooks in WordPress to change core functionality.
*
* The first function, twentyten_setup(), sets up the theme by registering support
* for various features in WordPress, such as post thumbnails, navigation menus, and the like.
*
FWIW, I’m using the TwentyTen theme and no plugins affecting the editor. I have TinyMCE Advanced and Dean’s FCKEditor plugin installed and deactivated (the factory default editor is sufficient for me). I activated each plugin separately and saw no change using TinyMCE Advanced, but do see a change with Dean’s FDKEditor.
Frankly, I prefer the default, out of the box editor. I’ve used these plugins solely for the purpose of increasing the font size in the editor, which neither of them does without also affecting the published post.
Unless you have further advice which would spare me having to use the plugin solely to achieve the desired effect, I suppose I’ll use Dean’s FCKEditor since your recommendation appears to work (although it does not appear to be 130% the default size).
At any rate, thank you for your response.
Addendum to previous post: the recommended hack had no affect using Dean’s FCKEditor as I originally said. For test purposes I run two instances of WordPress on my local machine – Linux/Ubuntu 10.04. I compared the two instances, one using the hack to the TwentyTen/functions.php file, the other not. I haven’t used Dean’s FCKEditor plugin enough to tell, so I thought it made a difference, but it doesn’t. Whether the default font is larger by default I don’t know, but it’s easier for me to read. Anyway, back to the drawing board. Thanks again.
I’m not using any additional editor plugins myself, the code i posted works using the Twenty Theme (it’s what i’m using) with the regular post editor (works fine for me).
If font size using a percentage doesn’t work great you could switch to using em, pt, or px (or just try taking the value up a bit more).
http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Hope that helps..
Well, I’ve checked and double checked everything I can find, and tried em, pt, px and increasing the percentage… no change. Story of my life! If this looks correct to you:
add_action( 'admin_print_styles-post.php', 'my_admin_css' );
add_action( 'admin_print_styles-post-new.php', 'my_admin_css' );
function my_admin_css() {
?>
<style type="text/css">
#editorcontainer textarea#content { font-size: 2em !important }
</style>
<?php
…”plonked” in TwentyTen/functions.php, saved, permissions ok… I’m at a loss to figure out why it works for you and not me.
I hate it doesn’t work, but thanks for taking the time!
Mark, I just noticed that it’s working in html view. Which is no problem, I can mark up as I go. Any idea how to make it work in visual?
If not, thanks any way and thanks again for your help.
The above code will work for HTML mode, for Visual mode, edit the editor-style.css, it’s included with the theme .. (it’s used to make the Visual editor render text the same as it’s shown on front side of your side of your site – you’re of course welcome to make changes to that file).
Very good then, you’ve told me all I need to know – about this anyway :). Thanks and best wishes.
I didn’t actually realise the theme came with one until i went to write some additional CSS to handle the visual editor, then i realised some other stylesheet was overriding my styling, and low and behold there’s a stylesheet in place just for this very thing (shows how much time i spend doing the visual/design stuff – *hint* not much).
Happy i could help … 🙂
Hi
I’m changing the editor-style.css in a copy of 2011 but its having no effect on the visual editor at all.
Am I missing something?
