The Mozilla folks are wrapping up discussion on how Firefox 2 user interface will change. Some of the things I like, but I still don't see my biggest pet peeve about the Firefox User Interface (UI) addressed: I absolutely hate the way that Firefox 1.5 squeezes the Search Bar next to the Address Bar like some inconsequential widget. For me, it's one of most heavily-used things in the user interface. This entry will show you how to tweak the user interface (sometimes called "chrome"). You don't need any heavy programming skills for this. Basically you need to be comfortable renaming files, unzipping and zipping up directories and editing text files.

First, here's the default Firefox 1.5 user interface (or "chrome"). Yours may vary depending upon colour settings and operating system:

My Firefox 1.5 UI Pet Peeve

Now let's see how to tweak the user interface (UI) of Firefox 1.5 to your liking.

Customizing Firefox From Within

There are a couple things you can do from within Firefox itself to customize how where you want the menus/toolbars/buttons to be. This is, by far, the easiest way for a novice user to customize things. You just need to know how to point, click and drag.

Open Firefox and go to View > Toolbars > Customize. This puts Firefox into something I'll call Toolbar Customization mode. To end Toolbar Customization mode, close the "Customize Toolbar" window. In this mode you can actually drag around the items on your toolbars to suit your liking. You can add new buttons and remove ones you don't like. I'll explain how to do each:

Removing Toolbar Buttons

The window that pops up shows you any buttons/widgets that Firefox does not currently have in its chrome. Think of it as a "bucket". You can take things out and put things into this "bucket". When you're done, simply close the window.

The first thing I do is to get rid of the "Go" button next to the address bar (which I find useless, since pressing "Enter" in the Address Bar will have the same effect). Put your mouse over the "Go" (the one with the little green arrow), hold down the left-mouse button and drag the "Go" into the bucket. Bye-bye "Go" button.

Adding Toolbar Buttons

The next thing I like to do is to include the "New Tab" button, which is in the bucket by default. This buttons creates a new blank tab for browsing. For those who care, the same effect can be accomplished by pressing CTRL+T. As to why I like the "New Tab" button but hate the "Go" button, when shortcut keys exist for both: I have no idea. Maybe because "Enter" is easier than CTRL+T? I don't know. The point is that with a customizable browser like Firefox, you can tailor it to suit your own idiosynchrocies.

Anyway, the New Tab button has a picture of a folder tab and a little green "plus" symbol. Find this button and drag it onto the toolbar where you want it to be. If you drag it to "Bookmarks Toolbar Items" and drop it, it will actually drop as a small little button. Another logical location is somewhere near the address bar (in which case you get a bigger button).

Moving Toolbar Buttons

Now finally to start addressing my pet peeve. Let's take the search bar (usually this has a "G" for Google in it and drag it away from that address bar. I found an unorthodox place for the search bar in the actual menu bar between the throbber (the thing that looks wheel) and the Help menu. People may frown upon this, but I actually am quite comfortable with its location, since in wider windows the menu bar has a lot of unused real estate.

Adding a New Toolbar

If you don't like this idea, you can add a new toolbar by clicking the "Add New Toolbar" button in the Customize Toolbars window. Name it something like "Search". Once you do this, a blank bar is added to the chrome. Now you can throw buttons on to this new toolbar by dragging buttons from the bucket or from the existing toolbars.

In the next page, we'll talk about how to further customize your Firefox UI by hacking the chrome.

Pages: 1 2

§248 · April 10, 2006 · Firefox, Software, Technology, Web · · [Print]

3 Comments to “Polishing Firefox Chrome”

  1. Mauriat says:

    Since we’re talking about the Google search bar. I just noticed on your shortcut bar you had Wikipedia (which looks like its taking up a lot of space). You do know that it can be added to the drop down search using

    ps. Mr Ed looks like spam to me 😉

  2. Funny, I was just getting around to deleting “Mr. Ed” when I saw your comment. As for the Wikipedia thing, I use it to quickly check my Watch List, not do searches (though your comment in this direction isn’t a bad idea). Anyway, anything after the “Accounts” folder in my Personal Bookmarks Toolbar is just “extra”… if it shows up, i’m fine, otherwise it ends up in the “>>” pull-down menu. Either way, i’m not going to sweat it…

    Damn, I should have taken Rob’s advice and only shown the chrome 😉

  3. Celti says:

    Well, I don’t know how to do it with user.js, but you can add this to your userChrome.css:

    #search-container, #searchbar {
    -moz-box-flex: 1000 !important;