WordPress.org

Ready to get started?Download WordPress

Forums

Add custom styles to the visual editor (8 posts)

  1. elbalazo
    Member
    Posted 4 years ago #

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

  2. danwarne
    Member
    Posted 4 years ago #

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

  3. brentontherefore
    Member
    Posted 4 years ago #

    I too want to know the answer to this.

  4. tommykaneko
    Member
    Posted 4 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 4 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 4 years ago #

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

  7. Matt Hill
    Member
    Posted 4 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 4 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic