Ishmael’s Blog

A recent Drupal setup required a WYSIWYG editor, and so the TinyMCE module was called upon yet again. After everything was set up, I was reminded how ugly the TinyMCE toolbar is. It added functionality, but made things look unfinished. Something needed to be done, and I was glad to find, that someone else had already done it.

A fellow designer did some work re-styling the buttons and toolbar to resemble the WordPress editor. You can check out his article here. I found that his stylesheets didn’t work for me (he probably used a different Drupal/TinyMCE version), but a little bit of tweaking led to some fixes, as well as some improvements. The final product should look like this:

The instructions for doing this are pretty simple, and don’t require any changes to core or the module files. You should, however, set up the module before attempting these steps.

1. Append the contents of the style.css file to the end of your active theme’s stylesheet (copy/paste).
2. Place the tinymcebutton.png file in your active theme’s directory.
3. Place the tinymce.css file in your active theme directory.
4. In Drupal, navigate to Administer > Site Configuration > TinyMCE
5. Click “edit” next to your profile.
6. In the CSS section, set “Editor CSS” to “define css”, and “CSS path” to “%ttinymce.css”.

I am using Drupal 5.7, TinyMCE module 5.x-1.9, and TinyMCE 3.1.0.1.

The stylesheets aren’t very large, so with a little bit of CSS knowledge, it should be easy to modify how the buttons look. If you make changes or have suggestions about this, let me know by leaving a comment.

Attachments: