BUEditor, sometimes, is criticized to have a too simple interface having ugly buttons. Having no counter-arguments, I can only show how BUEditor can be themed in order to achieve the desired look.

The below is a demonstration of a themed interface of BUEditor's default editor, which has become very hard to be recognized as BUEditor. The buttons and the style is borrowed from the popular WYSIWYG editor: TinyMCE. Hopefully, its interface is not criticized too much.

This interface was created in 2 simple steps

  1. Icons of the default buttons were replaced with the ones in TinyMCE icon set
  2. Some BUEditor CSS was overridden in site theme.
    <style type="text/css" media="all">
    .
    editor-container {
     
    border: 1px solid #ddd;
     
    background-color: #f5f5f5;
    }
    .
    editor-container input {/* buttons */
     
    border-color: #f5f5f5; /* or transparent*/
     
    background-color: #f5f5f5;
    }
    .
    editor-container input:hover, .editor-container input.stay-clicked {
     
    border-color: #06c;
     
    background-color: #ccf;
    }
    </
    style>

Notes:

  • Further CSS theming can be applied to editor dialogs. Check out bueditor.css
  • Internet Explorer 6 does not show button hover effects.
Under supervision of Drupal :)