Toolbar enhancements

This is an image of the new toolbar that I have developped. Various invisible options and new bbcodes are discussed below.
The popup menu's are shown open just for this illustration, normally they are closed of course.

Hotkeys
The hotkeys or 'access keys' that are assigned to the buttons are changed. The more usual Control-key plus B, I and U are assigned to the bold, italic and underline buttons, instead of the Alt-key plus B, I or U that are standard phpBB. The other buttons keep most of their assignments. Special care is taken to assign hotkeys that do not have a function in Internet Explorer yet. On Firefox, hotkeys are correctly recognised as 'used' and will not invoke Firefox's own menu's or hotkeys.

Help
The hotkeys as well as the use of the BBCode code, is shown if you hover over a button, in a so-called tooltip. More help on BBCodes is found in the phpBB BBcode FAQ file, the " ? " button directly links to that FAQ file.

Bold, italic, underline and strike out
Stike out or strike through is a new BBCode that is used to show removed deleted text. This is very handy if you work on a document, you can use the strike out feature, instead of completely deleting text, so you can always see what the original text was. BBCode: [del]Deleted text[/del].

Image and URL popup windows
The Image and URL buttons will start a popup window to gather the necessary details, such as URL or other information. On IE7, Microsoft has deemed it necessary to give users a security warning if such a popup script window is used, so on that browser this feature is disabled.

Enhanced Image BBCode
The image BBCode is enhanced with the left, right and border keywords, so you can align images to the left or the right of the text, and give them a 3D inset border.
BBCode example: [img left border]http://image.url.gif[/img].

Column BBCode
When used in consequtive lines, the message will be neatly outlined so the columns will line up.
BBCode example:
Column 1 [col]Column 2
Value 1[col]Value 2
Value 3 with extra text[col]Value 4

will result in:

Insert a blank line to start a new set of columns. Or use the [col] code to create a blank row.

Indent BBCode
The indent code allow you to indent text. This is handy for quotes that you do not want to be preceded by the quote marker, or for poetry or many other occasions.
BBCode example: [indent]Indented paragraphs[/indent].

Line BBCode
The line code [hr] inserts a horizontal line into the text.

Moderator BBCode
The Mod BBCode [mod]Moderator comment[/mod] will insert a moderator comment, that is marked with a special icon, as shown here. Regular users can quote the moderator comment, but the icon will only show if the moderator made, or edited, the message. Otherwise it will be shown as a regular quote starting with
"The moderator wrote:"

eXtreme Hide BBCode and Spoilers
This code allows you to hide parts of your message from other people. The code is quite extensive and is discussed here. You can hide text from users, user groups, based on post count and many other options. You can also create spoiler hiding, so that the reader must click a link in order to see the ending of a film for example.
BBCode example to hide something from users with less than 15 posts: [xhide posts<15]Hidden content[/xhide].

Styles picker
Styles are a simple way to style your messages with headers, body, notes and so on. The beauty is that styles are theme-dependent, so a header in bold white text that may show up on one theme. can become bold blue text on another theme. The styles button has a popup styles picker attached to it, that shows you the styles as they will appear on this theme.
The BBCode is very simple, for example [h1]This is a header[/h1].

Font size picker
The font size is not a new BBCode, but the font size picker is. Just click the required size and the current block will be changed to that size, or you can start typing between the inserted opening and closing size BBCodes.
BBCode example: [size=8]Small text[/size].

Font colour picker
The font colour picker offers you 40 named colours, such as fuchsia, mistyrose, peru, navy and so on. No need to remember the names, just click the colour to insert the BBCode. Of course you can still use hex colours too if you like. This BBCode enhancement comes complete with an extensive colour table that shows you over 140 named colours you can use.
BBCode example: [color=red]Red text[/color].

Special character picker
This picker allows you to insert accented letters with a single click. You can extend the control yourself by adding more letters that you find you need often, depending on your language requirements. The characters are added in your main language file and that means that you can design different sets for French, German, Hungarian, Greek etc.

Text blocks selector
This control allows you to insert predefined text blocks. It is a scrollable list. The text blocks themselves come from the Draft and Standard Replies MOD that you must have installed, for this control to be visible.

Van Dale lookup
This button allows you to look up words in the Van Dale Dutch dictionary. It is easy to replace it with another dictionary for another language, as long as there is a URL interface to look up words.

Google lookup
This button allows you to look up words with Google.

Buttons html (tech talk)
The buttons are properly styled <input> and <button> elements that have a background gradient, or can use other background images. As can be seen in the bottom row, the buttons depress or "work" properly, something that many image "button lookalikes" on many web pages do not do. The buttons need javascript enabled (that is a default for phpBB anyway), and use CSS for their styling including the 'depressed' behaviour. All buttons support hover effects, i.e. the button changes a bit or lights up when the mouse passes over it. The advantage of this is that in their rest state, the buttons are fairly unobtrusive.

BBCode insertion (tech talk)
The buttons insert both opening and closing BBCode at once, just like phpBB 3. The old phpBB 2 used a kludge of inserting opening or closing codes, keeping tabs on which codes were unclosed via asterixes on buttons and an internal stack, and inserting closing code when you did not want that and had already typed it yourself, messing up your layout when you saved your post.

The new system is far cleaner. Both codes are inserted at the same time. Either around a current selection, or at the current cursor location. The cursor is placed between the codes so you can continue typing immediately. The current selection stays active so you can insert more codes one after the other.

If you have more input fields (the subject line, or other fields, or if you use input form templates) you can insert BBCode into any text field, not just into the message field.

Further options
It is possible to style all your forum buttons in the same way. A larger button would be used for submit buttons etc. Also, at least in Firefox, it is possible to somewhat style the drop down list boxes, for example the jumpbox list that allows you to select another forum to go to, with thin outlines and a background colour. This would bring them in line with the buttons.

For the button styling, Firefox uses native events like :hover and :active. For IE, these are simulated via OnEvent javascript routines in combination with CSS styles.

Unfortunately, the drop down list boxes will accept almost no styling in IE. An alternative would be to use the same code that is used for the text block scrollable menu. However, drop down list boxes have their own window (rectangle) that can extend beyond the edges of the browser. This is not possible for these custom scrollable menu's. This would mean that an opened list box could be partially invisible behind the browser bottom edge.

All code has been tested on Firefox 2 and Internet Explorer 7