Tag Archive for 'toolbar'

Improving Tinymce interface for Drupal

Published
by
Ish
on August 5, 2008
in Drupal, How to and Web Development
. 4 Comments

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:

style.css 1.81 KB
tinymce.css 699 bytes
tinymcebutton.png 545 bytes

Web Development in Firefox

Published
by
Ish
on October 22, 2007
in Firefox and Web Development
. 0 Comments

FirebugAt work, I do a lot of website tweaking, and I used to update stylesheets on my desktop, and upload them via ftp to see the changes. This was tedious, typically because many times, I did not write the stylesheet, and was only making minor changes to it. It was a lot of trial and error, to say the least.

Then I found out about a Firefox extension called “Web Developer Toolbar.” I had previously heard of it, and wanted to stay away from it, just because I thought what I was doing was simple, and that this tool couldn’t possible help me in the way I wanted. This was until I read that it could edit CSS in realtime. It allows you to edit HTML, highlight or label divs or other page elements, and more. It has become an indispensable tool for me.

At the same time, I had heard of Firebug (a similar extension), but never tried it because the other tool had worked so well, and I didn’t need two of them. Boy, was I missing out. I just installed Firebug, and with only a few clicks, it amazed me. Content was highlighted when I moused over a section of editable HTML, which was very well structured, properly displaying the tabs. I only used it for a few minutes, but it looks incredibly promising.

I will post back in a few days, after I try it out some more. I’m extremely excited to play with it.