- Joined
- 3 Feb 2002
- Messages
- 10,574
Overview
In this guide we'll take a vanilla install of Firefox and:
1. Make navigation smooth and clutter-free
2. Throw in some must have extensions to make your Internet browsing a more pleasant experience (more speed and more convenience).
Before (Firefox 2 Vanilla Install)
After (Firefox 2 with OSNN's Patented Formula™)
You'll notice that:
1. The back/forward, home, stop, refresh, and go buttons are gone. Don't worry! The back/forward/stop buttons will appear dynamically and only in cases where you will have an option to go back, forward, or stop. As for the rest - they were removed because they are redundant if you use keyboard shortcuts.
2. The text menu has been consolidated under "Menu".
3. I have no bookmarks because I use del.icio.us (hence the single "tag" icon). However, you can use the bookmarks toolbar folder there instead if you like.
4. There are a lot of things that can't be shown in the screenshot with regards to tab settings and session manager settings. Read on to find out more!
Preparation
I know after seeing the before and after shots you can't wait to get started
1. First you'll obviously need the latest version of Firefox.
2. The rest of us that have a superior intellect and good looks (thus; we already have Firefox) will want to backup our current settings. Mozilla have a great guide on how to backup and restore your profile.
Now with the preparation out of the way we can actually go ahead and make some changes.
1. Navigation
Toolbar Edits
Combining the Navigation Toolbar with the Menu Toolbar
1. Go to View -> Toolbars -> Customize...
2. Once you get the Customize Toolbar dialog box, drag and drop buttons one by one from your Navigation Toolbar onto your menu toolbar. So gradually you should have the back, forward, stop and home buttons, the address bar, and the search bar on the menu bar.
3. Remove the throbber in the upper right corner.
4. Check "Use Small Icons".
5. Download and install the TinyMenu Extension. This extension will allow you to put the text menu underneath one "Menu" heading
5. Optional: Right click on the Bookmarks Toolbar and click on the "check" besides it to get rid of it. Otherwise you'll be left with a blank bar. (Thanks Android412!)
userChrome.css Edits
Now we're going to be playing around with userChrome.css to change the appearance of the navigation buttons in Firefox. Actually, I've uploaded a userChrome.css that you can throw into you your Firefox installation so you don't have to manually make changes.
DOWNLOAD (OSNN.net Sample userChrome.css)
Copy that file into C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome
However, if you've previously made some changes to userChrome.css and don't want to lose those use the following bits of code:
Removing Disabled Back/Forward Buttons:
Removing Disabled Stop Button:
Removing Home Button:
Removing Go Button:
Removing Magnifying Glass Button from Search Box:
2. Extensions + Settings
Download and install the following extensions:
1. Download Status Bar: View and manage downloads from a tidy statusbar - without the download window getting in the way of your web browsing.
2. Fasterfox: Performance and network tweaks for Firefox.
3. IE Tab: View sites using the Internet Explorer engine inside a Firefox tab.
4. PDF Download: Allows to choose if you want to view a PDF file inside the browser (as PDF or HTML), if you want to view it outside Firefox with your default or custom PDF reader, or if you want to download it. No more browser crashes just because you clicked on a PDF link!
5. Resizeable Form Fields: Resize HTML form fields, including textareas, select boxes, and text fields.
6. Tab Mix Plus: Saved the best for last. Tab Mix Plus enhances Firefox's tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. It also includes a full-featured session manager that is better than the one that comes bundled with Firefox.
Extension Settings (click on thumbnails for full view):
Only extensions that require further setting changes are explained below. Otherwise they work great out of the box.
Download Status Bar:
Fasterfox:
Under extension options, click on "Turbo Charged". It is recommended to turn off "Enhanced Prefetching" while on a work computer.
PDF Download:
Tab Mix Plus:
Problems and Feedback
If you have any problems, please post below. If you've got any suggestions to improve this guide or tips of your own, please post below.
In this guide we'll take a vanilla install of Firefox and:
1. Make navigation smooth and clutter-free
2. Throw in some must have extensions to make your Internet browsing a more pleasant experience (more speed and more convenience).
Before (Firefox 2 Vanilla Install)
After (Firefox 2 with OSNN's Patented Formula™)
You'll notice that:
1. The back/forward, home, stop, refresh, and go buttons are gone. Don't worry! The back/forward/stop buttons will appear dynamically and only in cases where you will have an option to go back, forward, or stop. As for the rest - they were removed because they are redundant if you use keyboard shortcuts.
2. The text menu has been consolidated under "Menu".
3. I have no bookmarks because I use del.icio.us (hence the single "tag" icon). However, you can use the bookmarks toolbar folder there instead if you like.
4. There are a lot of things that can't be shown in the screenshot with regards to tab settings and session manager settings. Read on to find out more!
Preparation
I know after seeing the before and after shots you can't wait to get started
1. First you'll obviously need the latest version of Firefox.
2. The rest of us that have a superior intellect and good looks (thus; we already have Firefox) will want to backup our current settings. Mozilla have a great guide on how to backup and restore your profile.
Now with the preparation out of the way we can actually go ahead and make some changes.
1. Navigation
Toolbar Edits
Combining the Navigation Toolbar with the Menu Toolbar
1. Go to View -> Toolbars -> Customize...
2. Once you get the Customize Toolbar dialog box, drag and drop buttons one by one from your Navigation Toolbar onto your menu toolbar. So gradually you should have the back, forward, stop and home buttons, the address bar, and the search bar on the menu bar.
3. Remove the throbber in the upper right corner.
4. Check "Use Small Icons".
5. Download and install the TinyMenu Extension. This extension will allow you to put the text menu underneath one "Menu" heading
5. Optional: Right click on the Bookmarks Toolbar and click on the "check" besides it to get rid of it. Otherwise you'll be left with a blank bar. (Thanks Android412!)
userChrome.css Edits
Now we're going to be playing around with userChrome.css to change the appearance of the navigation buttons in Firefox. Actually, I've uploaded a userChrome.css that you can throw into you your Firefox installation so you don't have to manually make changes.
DOWNLOAD (OSNN.net Sample userChrome.css)
Copy that file into C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome
However, if you've previously made some changes to userChrome.css and don't want to lose those use the following bits of code:
Removing Disabled Back/Forward Buttons:
Code:
[FONT=System]/[FONT=Courier New]* 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 */[/FONT] [/FONT] [FONT=Courier New]#forward-button[disabled="true"] { display: none; }[/FONT]
Code:
[FONT=Courier New]/* Remove Stop button when there's nothing to Stop */
#stop-button[disabled="true"] { display: none; }[/FONT]
Code:
[FONT=Courier New]/* Remove Home button */
#home-button { display: none; } [/FONT]
Code:
/* Remove Go button */
#go-button-stack, .search-go-button-stack {
display: none !important;
}
Code:
[FONT=Courier New]/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; } [/FONT]
Download and install the following extensions:
1. Download Status Bar: View and manage downloads from a tidy statusbar - without the download window getting in the way of your web browsing.
2. Fasterfox: Performance and network tweaks for Firefox.
3. IE Tab: View sites using the Internet Explorer engine inside a Firefox tab.
4. PDF Download: Allows to choose if you want to view a PDF file inside the browser (as PDF or HTML), if you want to view it outside Firefox with your default or custom PDF reader, or if you want to download it. No more browser crashes just because you clicked on a PDF link!
5. Resizeable Form Fields: Resize HTML form fields, including textareas, select boxes, and text fields.
6. Tab Mix Plus: Saved the best for last. Tab Mix Plus enhances Firefox's tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. It also includes a full-featured session manager that is better than the one that comes bundled with Firefox.
Extension Settings (click on thumbnails for full view):
Only extensions that require further setting changes are explained below. Otherwise they work great out of the box.
Download Status Bar:
Fasterfox:
Under extension options, click on "Turbo Charged". It is recommended to turn off "Enhanced Prefetching" while on a work computer.
PDF Download:
Tab Mix Plus:
Problems and Feedback
If you have any problems, please post below. If you've got any suggestions to improve this guide or tips of your own, please post below.
Last edited: