Changing Admin Font Colour And Size for Increased Readability

  • Hello!
    The Visual Editor while writing a Post is set by default to a minuscule print, in a soft grey colour. I have a print disability, and the person who’s site I’m building also struggles to read this pale script. I am wondering if there is a way to change the default colour and size of the back of house text editor only, and not have the larger font and darker colour affect the website itself.

    i.e.:
    I would have the Visual Editor font set to size 28 in color #00000. Only I would see this, and the font on my site would continue to be size 12 in some shade of lilac or what not.

    I’ve seen many plugins and posts about changing the site’s font and colour, but haven’t yet been able to find something about changing the default Visual Editor. Am I missing something incredibly obvious?!? Is there a simple place to change this in the code? I experimented with the plugin ‘Admin Custom Text’ but that seems to change the font size everywhere BUT the visual editor.

    Many thanks for your help!

    ps: (This is my first time in the WP forums, so I hope I’ve done this right! I poured through forums trying to find a solution/work around, and my apologizes if this question is a duplicate or the answer painfully obvious ?? !)

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    You’ve done well with your preliminary investigation. Thank you for making the effort.

    Some themes already style the editor area. This is done by calling add_editor_style(). If your theme does this, you could just edit the existing stylesheet, but your changes will be lost when the theme updates. The default name is ‘editor-style.css’. Any other names used are passed in the function call. It could take some searching to find this if it even exists. The Linux grep command is good for searching, there’s equivalent commands available for other O/S I’m told. Unless you have terminal access (rare), you’d need to download your theme files to your local computer to effect a search.

    To protect your changes, or to add a stylesheet if your theme currently has no editor style, create a child theme. Add code similar to the basic example in the function reference to the child theme’s functions.php file. As starting point for your stylesheet, try this for the content of editor-style.css:

    body#tinymce.wp-editor,
.wp-editor-container textarea.wp-editor-area { 
    font-size: 28px; 
    color: #000; 
}

    The first selector is for the visual tab, the second for the text tab. You could separate them out if desired. Maybe you’d like each to be a different font.

Viewing 1 replies (of 1 total)
  • The topic ‘Changing Admin Font Colour And Size for Increased Readability’ is closed to new replies.