Text Formatting Toolbar Custom Buttons

Custom Tags

The text Formatting Toolbar contains a feature that allows you to create your own buttons should the extension not have one you need. This allows the extension to remain small and not become bloated with buttons that only a few people need.

Button Image

The first step needed is to add the custom tag button on to the toolbar. To do this go to the View menu, then the Toolbar, then Customize. You will find a button much like the image on the right in this window. Drag it to wherever you want on your menu bar or toolbar.

Once this is button installed on your toolbar, pressing it will show a menu. In this there will be two items: Create or Edit Custom Tags and Reload Custom Tags. The second one is needed after you have created or added new custom tags to update the buttons shown on the toolbar. Presuming you don't have any yet, it is the first item that you should be interested in, so click it.

The Custom Tag Window

The window on the left is something like the window you will see when you open the Custom Tags window. There are three buttons on interest along the top left. The first is a new tab button for creating an extra tab for a new custom tag. The second is for opening a file that contains the definitions for a custom tag(s) that someone else has made. It is probably the best way of adding a new button if possible. The next button is for saving any changes you have made. If you don't use it, you will be prompted when closing the window if you want to keep any changes. You can then see two tabs, one is empty and in the default state, and the other is a custom tag that has already been made.

Making a New Custom Tag

The first part of making a new tag is very simple. Just fill in the Title, Tag and Description fields. In the example that follows, we will make a link tag as an example. So Link, url and Create a new link would be put in the corresponding text boxes.

The next step in this case would be to tick the Use option attribute checkbox. It might be worth explaining that there is a difference between {option} and {content} that you will see used. Option is used for text that can now contain extra formatting. For example, the link (http://codefisher.org) {content} is used for text that can contain extra format {option}, like the link text. The person may want to make it bold and red for example. You can also see the differences in the popup windows asking what text should be used.

Button Image

After ticking the Use option attribute checkbox, the Custom Tags function will have made a good guess at what the BBcode should be. The HTML, however, will be incorrect and looks like what is shown in the image on the right. The corrected example is below it.

The wiki code is equally incorrect and needs to be changed to [{option} {content}]. You don't need to fill in every code type, only the ones you plan to use.

When using the buttons you might want to be asked for certain bits of text, in this case the URL and link text. If you do, fill in the two text boxes that appear below the code boxes. It is worth noting that this is another difference between the {content} and {option}. If the user has selected text, it will be used in the {content}.

The last thing to do is select the icons you want the button to use. I am going to pick and which I both come from my Pastel SVG icon set

Sharing your new button

After making your new button, you may want to show it off to all your friends so they can use it too. The first step is to change the image from a file to a string. There is a button called Convert to String just next to the image, so it is as simple as pressing it. There is also a save icon up at the top right, and from here you can save to a convenient location. It is a good idea make the file extension .xml. I have done so, and you can download the example I made while writing this. If you wanted, you could also copy the format_buttons.xml from your profile and share that. You will notice that when you open these files in Firefox, it shows a bit of basic information about it, and up the top left; a button to install them. They will show instantly on the toolbar.