Firefox comes with a neat interface. But as you came here, I suppose you expect from your browser more than an average user.
Implicitly, you get long, unnecessary menus and redundant buttons. They just take space you could use to see web pages. So, why don’t you spend a few minutes cleaning it up so that you can get the most of it?
Table of contents
Customize toolbars:
- Stop-or-Reload Button extension
- Advanced modification of the toolbars - userChrome.css
- Remove the Edit and Help menus
- TinyMenu extension
- Menu Editor extension
- Remove disabled Back, Forward and Stop buttons
- Remove padding from the navigation buttons
- Remove the Go button in the location box and the magnifying glass in the Search box
Bookmarks Toolbar
Tabs
- Customize the display and location of the close tab button on the tab bar
- Don’t use bold text on the active tab
- Reduce tab width
- Make the active tab wider
- FaviconizeTab extension
- ColorfulTabs extension
- Vertical tab bar - Vertigo extenion
More
Customize toolbars
Let’s have a look at the standard interface. From the top, we have: menu bar, navigation bar, bookmarks bar and tab bar:
First of all, let’s consolidate them into one or two bars (depending on the resolution and the size of your screen).
Open View » Toolbars » Customize... window.
Tick the Use Small Icons box. Now the fun begins. You can drag and drop all the icons and boxes from the window to the toolbars and remove whatever you want from the toolbars. It is not possible to remove the menu here, so let’s use the menu bar first. I suggest moving the menu items to the right as you probably do not use them very often.
So, drag the navigation buttons to the menu bar. If you are accustomed to the Alt-Home shortcut, you can safely remove the Home page button. Location box suits in the space between navigation buttons and menu items. I use Smart Keywords instead of Search box so I removed it.
Activity Indicator (spinning circle in the upper right hand corner) is unnecessary as well as status bar includes a page loading progress meter. You can also remove it using userChrome.css, I’ll describe how to do it later on.
Finally, you can add some Spaces to the bars to make it look clearer.
I managed to put everything in the menu bar so I unticked View » Toolbars » Navigation Toolbar Here’s the result:
Stop-or-Reload Button extension
Download Stop-or-Reload Button extension
You probably do use stop and reload buttons. But as they are never necessary together, why don’t you merge them into one? Once you install the extension, you will only see just one of the buttons at a time.
Advanced modification of the toolbars - userChrome.css
If you don’t know, check what userChrome.css is.
By adding a few lines you can get rid of anything you don’t need in the menu bar so that you can see as much of the current web page address as possible. So, let’s edit userChrome.css.
Remove the Edit and Help menus
If you want to remove the Edit menu, you need to memorize some keyboard shortcuts:
Copy Ctrl-C; Paste Ctrl-V; Find Ctrl-F; Find next Ctrl-G; Select All Ctrl-A.
Probably you do not use Help menu as well. However, you can always access Help with F1 key.
I use Ctrl-H to access History so I removed this menu as well.
To remove the menus that you do not need, add the following lines to your userChrome.css:
/* Remove the Edit and Help menus */
#helpMenu,
#edit-menu
{ display: none !important }
Id’s for all the menus are:
file-menu, edit-menu, view-menu, go-menu, bookmarks-menu, tools-menu, helpMenu
If you want to remove more menus, just add the #’s with their names after commas, e.g.:
/* Remove Edit, History and Help menus */
#helpMenu,
#edit-menu,
#go-menu
{ display: none !important }
TinyMenu extension
Download TinyMenu extension
HomePage
If you don’t like the idea of removing menus or need to compress it even more, consider using the TinyMenu extension, which replaces all the menus with a merge one and leaves just one dropdown menu in the bar.
Menu Editor extension
Download Menu Editor extension
This small extension is probably one of my favorite. It allows you to remove any entries from the menus in the menu bar and from the context menu (right-click menu) as well.
Install it and open its options:
Tools » Add-ons » Menu Editor Options
A simple menu lets you untick all the entries which you do not want to see.
It lets you make your menu look really transparently, no matter how many extensions you’ve installed. To get the idea, have a look at my context menu:
Remove disabled Back, Forward and Stop buttons
The following tweaks remove the buttons when they are not necessary: Back button when there’s no page to go back to, Forward button when there’s no page to go forward to and Stop button when there is no page loading. Otherwise, they dynamically appear.
Open userChrome.css and add the following lines:
/* Remove Back button when there's nothing to go back to */
#back-button[disabled="true"] { display: none }
/* Remove Forward button when there's nothing to go forward to */
#forward-button[disabled="true"] { display: none }
/* Remove Stop button when there's no page loading */
#stop-button[disabled="true"] { display: none }
If you add the code below instead, you won’t see the Back/Forward if there’s nothing in browser history, the View Background Image if there’s no background image, the Cut/Copy/Delete if there’s no text selected, Paste menu item if there’s nothing in clipboard, the Reload All Tabs/Close Other Tabs/Close Tab on tab bar context menu if there’s only one tab opened.
/* Remove all disabled menu items */
menuitem[disabled="true"] { display: none }
As I mentioned before, I use Alt-Home shortcut instead of Home button. I removed it using View » Toolbars » Customize... window but you can also remove it via userChrome.css:
/* Remove Home button */
#home-button { display: none }
The Activity Indicator (circle in the upper right hand corner) can be removed via userChrome.css as well:
/* Remove Activity Indicator */
#throbber-box { display: none !important }
Remove padding from the navigation buttons
This userChrome.css tweak makes toolbars use less space around buttons, leaving more space for actual web pages. It alo affects additional toolbars (e.g Googlebar).
/* Remove extra padding of the navigation buttons */
.toolbarbutton-1, .toolbarbutton-menubutton-button
{ padding: 2px 3px !important }
.toolbarbutton-1[checked="true"],
.toolbarbutton-1[open="true"],
.toolbarbutton-menubutton-button[checked="true"],
.toolbarbutton-menubutton-button[open="true"]
{ padding: 4px 1px 1px 4px !important }
Remove the Go button in the location box and the magnifying glass in the Search box
I always hit enter after typing the address or the search query. Probably so do you. So you don’t need these buttons:
/* Remove Go button */
#go-button-stack, .search-go-button-stack
{ display: none !important }
/* Remove the magnifying glass in the Search box */
.search-go-button-stack { display: none !important }
What I achieved until now:
Bookmarks Toolbar
Organize your bookmarks in folders
I consolidated the Menu and Navigation bars. Nevertheless, I like to have a good access to my Bookmarks toolbar so I’m leaving it. But it can still be optimized.
Start with organizing your bookmarks in folders if you have a lot of them. (right click on Bookmarks bar » New Folder…). Give short, relevant names to the folders and single bookmarks. The easiest way to do it is via the sidebar. Press Ctrl-B. You can drag and drop separators and bookmarks in it. Right click allows you to add separators and folders. Just play around with it for a while.
I’ll describe how to edit the Bookmarks Toolbar. Bookmarks visible on it are placed in the “Bookmarks Toolbar Folder”.
If you can’t see the bookmarks toolbar, click
View » Toolbars » Bookmarks Toolbar It is really useful.
Smart Bookmarks Bar extension
Download Smart Bookmarks Bar extension
This extension hides bookmarks names an only shows them on mouse over.
You can modify its actions via
Tools » Add-ons » Smart Bookmarks Bar Options
Hide bookmarks names with no favicon option is responsible for hiding names of bookmarks of pages which do not have favicons - these bookmarks have the standard favicon assigned. I advise leaving it ticked. You can always use the next extension - Favicon Picker 2 - to solve this problem.
You can also make spaces between favicons smaller and auto-hide Bookmarks Toolbar (I personally find it irritating).
Favicon Picker 2 extension
Download Favicon Picker 2 extension
It is very useful combined with Smart Bookmarks Bar extension.
After installing it, you can change favicons assigned to your bookmarks.
One way to do it is via options window
Tools » Add-ons » Favicon Picker 2 Options
However, it is simplier to do it with a right click on a bookmark and then a click on Properties.
Click Browse and find the favicon of your choice. Click OK. You should see the change now.
Some favicons collections:
Delta Tango Bravo
MpP Favicon Gallery
You can always google for more.
Tabs
Customize the display and location of the close tab button on the tab bar
You can edit this preference using about:config page. I will write about it in the future. If you do not now what it is, do not worry. Just enter about:config in the address box. You will see a page with hundreds of preferences. Find browser.tabs.closeButtons and double click it.
You can enter following values in the window which appears:
0 - display a close button on the active tab only
1 (default) - display close buttons on all tabs
2 - don’t display any close buttons
3 - display a single close button at the end of the tab bar (Firefox 1.x behavior)
Choose which suits you the best, type it and click OK.
Don’t use bold text on the active tab
If you do not want the title of the active tab to be bold, add the following code to your userChrome.css file:
/* Make the active tab not bold */
tab[selected="true"] { font-weight: normal !important }
Reduce tab width
If you do not have a widescreen and tend to open a lot of tabs simultaneously you may irritate because of the scroll which appears on the tab bar.
The scroll appears when the tabs are at the minimum width and still cannot fit in the Firefox window. The solution is to change the minimum width of the tabs. The default value is 100 pixels. Change it to around 75 pixels. The titles are still readable and more tabs fit in the screen.
Press Ctrl-L (move the cursor to the location bar) and type about:config. In the Filter box type browser.tabs.tabMinWidthDouble click on the preference name and change the default value in the new window to 75. Click OK.
Alternatively, you can type value 0 which, when necessary, makes titles disappear and leaves favicons only.
Make the active tab wider
Whilst 75 pixels should be enough for background tabs, the active one can be wider so that you can easily read its title. You just have to add the following lines to your userChrome.css: /* Make the active tab wider */
tab[selected="true"] { min-width: 200px !important }
I chose 200 pixels, probably 150 pixels should be enough for you.
FaviconizeTab extension
Download FaviconizeTab extension
You will find this extension useful if you tend to keep some tabs opened all the time, e.g. Gmail or Google Reader.
You can place them in the beginning and minimize these tabs to the size of a favicon.
You can either faviconize tabs by clicking on them or make faviconizing automatic by adding addresses of the websites which you want to always open in faviconized tabs.
ColorfulTabs extension
Download ColorfulTabs extension
ColorfulTabs extensions simply assigns colors to your tabs so that you can simply distinguish them.
The extension lets you choose the fading level of the tabs colors.
Vertical tab bar - Vertigo extension
Maybe you would like to have a vertical tab bar instead of the default one. You can simply achieve it with Vertigo extension.
It allows you to change the width of the bar.
More
Description of Firefox configuration files, including userChrome.css
Chrome element names and IDs
userChrome.css tweaks
