WordPress.org

1. elbalazo
   Member
   Posted 2 years ago #

   Hi, how do I customize styles in the visual editor dropdown menu?
   Thanks.

2. danwarne
   Member
   Posted 2 years ago #

   I'm interested in knowing the answer to this too.

3. brentontherefore
   Member
   Posted 2 years ago #

   I too want to know the answer to this.

4. tommykaneko
   Member
   Posted 2 years ago #

   Before WordPress 2.7, it seemed that the answer to this question was quite easy, as in this post:
   http://www.lucidgreen.net/webbybooth/?p=11

   However, this no longer works in 2.7+ . One hack (and remember it is a hack) is to do the following:

   • Navigate to wp-includes->js->tinymce->themes->advanced->skins->wp_theme
   • You will find three.css files:
     • content.css - contains the css of the content, so editing the styles in this file will directly affect the styles in the content box of the visual editor.
     • ui.css - contains the css for the user interface: that is to say the buttons bar, including the dropdown formatting menu.
     • dialog.css - I'm not sure where this file is used, but with a little tinkering, I'm sure you can find out.

   Those 3 files will allow you to style the visual editor content as much as you need. I understand that some classes and ids do get stripped out by wordpress, so bear that in mind.

   I haven't found a way of creating your own skin without having to hack. I hope someone can write a plugin soon.

   I hope that helps.

5. tommykaneko
   Member
   Posted 2 years ago #

   Just found an even better way to customize everything about the Visual Editor. There's a plugin that does most things you might need:
   http://wordpress.org/extend/plugins/custom-field-template/

   Although it doesn't allow you to change the dropdown menu, it does allow you to change font and sizes.

6. brentontherefore
   Member
   Posted 2 years ago #

   Thanks for the link tommykaneko. I'm a little confused about how it works though.

7. Matt Hill
   Member
   Posted 2 years ago #

   @brentontherefore: The link posted by tommykaneko has nothing to do with the question of this post. The Custom Field Template is a plugin for creating and managing custom meta data (custom fields) attached to a page or post, it's got nothing to to with configuring tinyMCE.

8. mbeneteau
   Member
   Posted 1 year ago #

   Suggest you use TinyMCE Advanced plugin which allows you to apply CSS styles directly to text. See my article:
   http://wordpressacademy.biz/2010/02/using-the-wordpress-advanced-visual-editor-tinymce-advanced-to-apply-css-styles-edit-tables-search-and-replace-spell-check-and-more/
   Marc
   http://wordpressacademy.biz

Topic Closed

This topic has been closed to new replies.