Beginner's Guide

Font Size

Search in? All CB2 Buttons Forum Buttons Database Wiki (all)

On the main buttons forum there is a subforum (in smaller print on the Forum front page - see the mouse pointer) called the Buttons Database

The forum lists buttons alphabetically to help you to browse the list. You can change your view of the listing by clicking on the title at the top of each column.

A much more varied selection of the way the buttons are listed is available from the main Buttons menu at the top of every page.

Click on the link in the list to go to the button's home page and see more information on the button and, if you wish, to download it.

You can also use the search facility to find buttons by name.

If you ONLY want to search the button database rather than the whole site you'd be best advised to click on the "advanced search" link below the search input box. Type in your search word(s), click on "Buttons database" in the list and then click on search.

[Top]

On the button's home page you'll see some, even lots of, information about the button. Below the description is a box with the link to the button (or even several related buttons). Just click on the link:-

See the following section for how to get the button onto your toolbar.

[Top]

Easy peasy - just ask for one in the Button Requests Forum

Just let us know what you need and we'll see what we can do.

Do please remember that we are all volunteers and fit in helping out with buttons in our spare time.

[Top]

The button does not get automatically placed on any other open windows and will simply disappear when you go back to the first window that you opened.

Your new button has been placed in the "Customise Toolbars" pop-up window. To open this you can either:-

Use the standard menu from "View -> Toolbars -> Customize..."

..or RIGHT-click on any open area of a toolbar and choose "Customise..." from the drop down menu

It can take a few seconds, but you will then see the pop-up "Customise Toolbars" window with a number of icons in it. Since yours is a new button it is most likely to be at the bottom of the collection there...

Hold down the LEFT mouse button and drag it to the place where you want it on your toolbar

Then let go of the mouse button

[Top]

There's no need to download and install any further copies of the button. You can use the "Clone" option of the button's context menu. A copy of the button will appear immediately to the right of the original and you can move it (when you have the "Customise window" open) onto any other open toolbar that you like.

[Top]

Sure. Go right ahead. All the buttons are open source and written in javascript. Open the button context menu and choose "Edit". The button edit window has input boxes for the button name and another for the image, plus three tabs "Code", "Initialisation", and "Help" in the main text area.

See below for more details on editing your button.

[Top]

The context menu is the drop down menu that will always be available via a "Shift+Right-Click" on the button.

this.srightclick = function(evt)
{
  custombuttons.gQuot.gShowPopup(this);  // ---- THIS LINE ----
};

That reads as shift-right-click.

If you still can't get the menu to open, there may be a problem with the button itself. Rarely an author error by the time the button reaches the database, but possible; and also possible is a clash with another extension. There are ways round this, but you'll need to read the more technical parts of this wiki which deal with Troubleshooting buttons.

That may be more than you ever wanted to know - but one way or another we'll get your menu open.

[Top]

This is going to depend on whether or not the button author used the standard means of applying the button image or, for reasons of button operation, has changed the button image on the run in the button code.

3bi. Standard image changing:

Shift+Right-Click on the button to get the Context Menu and choose "Edit".

If your desired image is not on your computer you need to grab a copy of it from whichever on-line source that you are using and save it into a folder of your choice. If you know the url of the image, the image field also accepts urls.

To the right hand side of the "Image" input box click on the browse button as shown...

Go to your folder and select your image:

You'll see your filename entered into the box. It's good practice to click on the "=>Base64" button to change your local file into a data file so that it can be used by everybody should you wish to post your button in our database.

Click on "OK" because you're done.

[Top]

3bii. Coded image changes:

It may be that the standard method of creating/changing a button image does not work. In that case it means that the author is changing buttons on the run in the code for the button. (As is the case in the example I've chosen here. The toggle button uses a down arrow to switch from the nav-bar to the bookmarks-bar, and an up arrow to switch back again.)

The button code may be in the "Code" tab, or it may be in the "Initialise" tab. In either case you need to look for lines in the code that will look something like this:

It is most likely that the line will actually start as this.image = etc. and will then be followed by the data code. Using the same steps as outlined above it is the data in this line (and any others) that you will need to change for that of your chosen image. The easiest way to do that is to choose your image and change it to =>Base64 as above and then triple click on the data in the image box, right click on it and choose "Copy". It is a good idea to comment out the original line (just in case) and start your own line below it. You comment out the line by placing two slashes // in front of it. So you now have...

Don't forget that the data should be enclosed in quote marks and that the whole line should end with a semi-colon...

// Double slash at the start of these lines makes them comments and not code
// So the image code in the line below is NOT used by the button
//
// this.image = "data:image/gif;base64,R0lGODl...etc...cdgt456r"; 
 
this.image = "data:image/gif;base64,R0lGODl...etc...cdgt456r";

[Top]

3biii. Referencing the same image multiple times

If you are going to be referring to the same image more than once it's a good idea to help you keep track (and keep the code size down) by using your own names for the image data. Then you can simply refer to each image by name in the code. So write something like...

var myimageUP = "data:image/gif;base64,R0lGODl...etc...cdgt456r";
var myimageDOWN = "data:image/gif;base64,R0lGODl...etc...cdgt456r";
 
[some code]
 
this.image = myimageUP;
 
[more code]
 
this.image = myimageDOWN;
 
[yet more code]
 
this.image = myimageUP;

Note the use of "myimage" instead of "image" and the fact that I've then added the "real image name" in upper case. It's a hairy old programmer's trick to make sure that no term that you define yourself can be possibly confused with the ones built into the software.

And yes... <CHORUS> I AM a very hairy and very old programmer! </CHORUS>

[Top]

When editing a button a simple error, such as a missing ">" or the closing of a block comment "*/" can mean that your button stops working. Usually that won't be too bad - you just click on the button to get the context menu and click on "Edit" again.

Sometimes, however, the error might lock you out of the button altogether. (If it does, see the brief explanation of how to open a "dead" button here along with its following entries:- Get button ID and the EditButton button )

When testing your code changes don't click on the "OK" button down at the bottom right hand side, instead use the "APPLY" button which is over on the bottom left hand side.

This button "Applies" your code changes to the button immediately, even though your edit window is still open. You can now test that your changes do what you intended.

If not, you can carry on editing. Only when you are sure that everything is alright should you click the "OK" button.

//
// So if you have a line of code...
//
this.setAttribute("style", "-moz-appearance: none; background-color: red; border-width: 0px; -moz-border-radius: 4px; ");
 
//
// comment it out...
//
 
// this.setAttribute("style", "-moz-appearance: none; background-color: red; border-width: 0px; -moz-border-radius: 4px; ");
 
//
// and edit a "copy" of it...
//
 
this.setAttribute("style", "-moz-appearance: none; background-color: blue; border-width: 15px; -moz-border-radius: 8px; ");

[Top]

The most common request after button image changes:-

Open target url in a new window:

window.open("http://www.google.co.uk");

Open target url in the current tab:

gBrowser.loadURI("http://www.google.co.uk");

Open target url in a background tab (no focus):

gBrowser.addTab("http://www.google.co.uk");

Open target url in a new tab with focus:

gBrowser.selectedTab = gBrowser.addTab("http://www.google.co.uk");

Why not add all four into your buttons...?

I've set these up all commented out. Just uncomment the particular option that you'd like your button to do. The rest serve as a handy reminder.

//
// Target opening for url's / links
//
// UN-comment the start of the option you want
//
 
// window.open("http://www.google.co.uk"); // New window
 
// gBrowser.loadURI("http://www.google.co.uk"); // Current tab
 
// gBrowser.addTab("http://www.google.co.uk"); // Background tab
 
// gBrowser.selectedTab = gBrowser.addTab("http://www.google.co.uk"); // New tab with focus

[Top]

Some of the problems you may see with buttons will be covered here. We won't be talking about writing them, or codes, just about how to get back lost buttons, or missing buttons; and subjects such as how to edit a "dead" button and finding out a button's ID number etc.

[Top]

There's no single answer to this one because it depends on root causes, but if all your other extensions are fine then it sounds as though somehow you've lost your CB2 extension, or it's wounded and hiding in a corner somewhere.

I'll try and do this in order from easiest first. (Ish).

1. Go to Tools >> Add-ons

   
   and then click on the CB2 entry to check that it is still installed and is also enabled.

2. I must ask you at this point too - have you very recently added a new extension or button? OR has one been updated recently? If so it might be a clash; so while you're here, disable that(those) extension(s) and reboot Firefox and see what you get.

3. It is possible also that a clash with another extension (or button) has simply dumped all your buttons into the "Customise Toolbars" window. So take a look there. You'll be able to put them all back if they are, but it will still be worth trying to track down why they went missing.

4. Before going any further It will be worth saving your buttons .xul before doing this. Go to Tools >> Edit config and choose the "Go to profile folder" option.

   
   If you think you might be doing this fairly often you can use this Open Profile button to get you directly there. Your .xul file is in the "Custom Buttons folder".
   Hold down the Right mouse button and drag it to your desktop (for the moment) and then choose "copy" from the menu.

5. If you are still getting no joy - try uninstalling CB2. Reboot FF and then go grab the extension again from CB2 at Mozilla add ons and install it again.

6. Hmm... if you've got this far and no joy, try grabbing a new copy of FF Firefox at Mozilla (if you haven't already got your FF download file saved somewhere safe) and re-installing straight over the top of your current version.

If none of that little lot helps we're going to have to call in the big guns :) You'll have to ask in the forum Extension Issues

[Top]

You had more than one window open.

When installing a new button, or when moving buttons (such as cloned extras) from one toolbar to another, you must have only one window open. Otherwise you will find that when you close the current window, or return to a previous one, the button will have disappeared because it hasn't been registered properly.

You would then need to download and re-install the button.

[Top]

OO-er!

There are two primary cause for this, presuming that you haven't "lost" which key the context menu is on and have checked through 3a. What/where is the context menu for edit?

One is that something has clashed with CB2, (either a recently installed (or updated) extension, or even one of your other buttons) and the other is an error made while editing (or twiddling and fine tuning as I call it). We'll deal with the second one first.

4ci. Button goes "dead" after editing

1. If you haven't already got it - download and install the Edit Button button.
   

2. You will need to know the faulty button's ID number and there are a few different ways to find this. See How to find a button's ID number

3. Armed with the ID number of the button you can now click on the "EditButton" button and enter this into the prompt box:-

   
   

There you go - your errant button's edit window should now be open. BEFORE you start editing again see:- Edit safely using the "Apply" button.

[Top]

4cii. Button is "dead" - possible extension clash

If you started up your Firefox only to find that one of your buttons has gone "dead" and you haven't been doing any editing on it - then we are almost certainly looking at a possible clash with another extension or button; or even an update of Firefox.

If you are using any form of backup for your Firefox then it will be worth your while to try the quick fix check at the start of this section.

Otherwise - how's your memory? When you started did you notice any extensions updating? If so which ones?

• If you can remember go to "Tools >> Add-ons" and click on (each of) the extension(s) in turn and click on the "Disable" button for that extension.

• Restart Firefox and see what you get.

If you get your button back then re-enable them ONE at a time until your button goes dead again. Once you know which one is causing the problem you can ask for help on the forums.

[ more to write ] - Doing it the hard way

[Top]

1. On newer buttons, if the tooltip has not been edited to add instructions by the author you'll find the ID number at the start of the tip:-

   
   

2. Although it's probably of no use to you at this stage of things; for information - if you shift-right-click on the button and are able to see the context drop down menu - choose the "help" option:-

   
   In the title bar of the alert which now shows, you should see the ID number:-
   

3. If none of the above show the ID number then you can download and install the Button Names List button.
   Once on your toolbar, wait until the red LED in the lower left corner turns green and then click on the button. You'll see all your active buttons listed and, if you hover the mouse pointer over any given entry you'll see its name and ID number:-

   
   If you have more than one copy of a button on different toolbars you'll need to pick the right one because each (copy of a) button has a unique number. If you click on the entry an alert window will show you more details about the button and this includes which toolbar this button is on:-
   
   

[Top]

[Top]

'Cause we need help from you!

That's the simple answer. If you came across a simple problem that isn't answered in the guide and you've managed to solve it - why not add your question and solution here to help others avoid all the headbanging that you've undoubtedly just done?

If you don't want to get tied up in the mad mixup of html, markdown and javascript that is a wiki entry you could write up your solution in "English" in the FAQ's - Extension faq Comments, suggestions and issues thread and I'll see what I can do to "translate" it.

[Top]

If you know the answer to what you think is a beginner's sort of question, then simply edit this wiki to add it. There's a link for editing right at the top of this page. Use our wiki syntax (Markdown) for formatting.

There are several other wiki files covering a fair few subjects to do with the forum, the extension, and buttons; so it might be worth a look to see if your intended wiki might best be placed elsewhere.

[Top]

General Extension Questions

Where can I get the latest Addons release (official & certified by Mozilla)?

Mozilla Addons

Where can I try out some of the latest "Beta Builds?"

Beta Builds are normally available on our home page.

What exactly does this extension do?

Once you have the extension installed, you can visit our forum's Button Database and click on buttons to install them. Once a button is installed it should be available from your Customize toolbar palette (View -> Toolbars -> Customize...), where you may add it to any toolbar you like.

The buttons you install can perform various tasks from simple to complex. The only real limitations are the coding skills of the author.

What mark-up language is used for the buttons?

Javascript

Is there any Documentation?

Indeed there is Custom Buttons² Documentation

How can I determine a Button's ID?

Methods to determine a button's ID: 1. Select "Button Help" from the context menu & look at the Title bar of the alert. 2. Insure "Include Button ID Number" is checked & observe the button's tooltip. 3. Use the Button Names List button.

How can I delete a button?

Shift+Right-click the button and click delete. If this doesn't work, the author may have done something he shouldn't have, do the following:
Install or use the Edit Button button. You must be aware of the button ID. Assuming you can not access the context menu:

1. Insure "Include Button ID Number" is checked & observe the button's tooltip.
2. Use the Button Names List button.

Getting & Posting Buttons

Where do I get buttons?

All buttons are in the Buttons Database. Click on any button to install it.

Where can I post buttons?

Buttons may only be posted in the Buttons Database or the Graveyard. Do not post buttons anywhere else! Even if for support, link to the button in question.

How can I post buttons?

Post in the Buttons Database.
Shift+Right-click your button and choose, "Copy as BBCodeLink" then you can paste the button in the forum.
For a good template, you could use the Button Post² Custom Buttons² Button.

How do I make a Backup/Save a Button?

There are a few different ways to achieve this: * Right-click your button and choose, "Save this Button." This will prompt you to save an HTML file with your button on the page. Later you can open the html file in your browser to re-install your button. * Right-click your button and choose, "Bookmark Button." This will prompt you to save it to your bookmarks. Later you can open your bookmarks and click on the button to re-install it. * To backup all your buttons at once. Install the Batch Backup Button. This will prompt to save all your installed buttons as an html file.

How do I install a button in Thunderbird?

Method 1: * You should have an "Import a Button" button in Thunderbird. * Right-click on the button link in the forum, select "Copy link location". * Left-click on the "Import a Button". * The new button should appear to the right of the import button.

Method 2: * Right-click on Thunderbird toolbar and select "Add New Button". * Click "Ok" when the dialog pops up. Move the new button to the position you want. * Right-click on the button link in the forum, select "Copy link location". * Right-click on the new button in Thunderbird, select "Update Button".