Lifehacker
by Gina Trapani
Update: An updated version of this post is now available for Firefox 3.
You're a power web surfer, so of course you use Firefox. But while the Firefox team has done a great job of creating an interface that accommodates most web surfers, you're not most surfers. There are bunch of unnecessary buttons, menus and doodads in the Firefox control area (the "chrome") that you don't need, taking up space you could be using to see and do more with your web pages and tabs.
Screen real estate is precious; let's make the most of it. Today we're going to make over the Firefox default chrome and consolidate only the stuff you need into as little space as possible so you can scroll less and see more while you surf.
BEFORE: Check out the default Firefox chrome layout, with tabs and the bookmarks toolbar turned on (click to enlarge).
Not bad, right? Still, there's a bunch of space there that could be utilized a lot more efficiently.
AFTER: Here's what our consolidated version will look like (click to enlarge).
With the same amount of information and features, the compacted version takes up 23% less vertical space (about 113px versus 145px on my setup), giving you more room to see your web pages and less reason to scroll. (Also, the consolidated version fits more tabs across than the default. See the previously-posted Top Firefox 2 tweaks article for more on that.)
Let's take a closer look at exactly what went where in our makeover. All the highlighted areas and buttons in this screenshot are either removed or utilized in our compact version:
Let's get started making the most of every pixel on your chrome.
Note: Many (but not all) of the chrome adjustments below involve editing your Firefox userChrome.css configuration file. Detailed information on how to do that is included in the How to edit userChrome.css section below.
Combine the menu and navigation bar
This tweak's the basis of our chrome reorganization. Right-click on a toolbar and choose "Customize..." from the context menu. On the "Customize Toolbar" dialog, check the "Use Small Icons" box. Now, behind the dialog, drag and drop items from the navigation toolbar onto the menu bar, one by one - your back, forward, stop and home buttons, the address bar, and the search bar. When there's nothing left, click the "Done" button. Now you'll have an empty navigation toolbar.
Right-click on it, and uncheck "Navigation toolbar," and it will disappear, pulling everything up a row.
Remove the Edit and Help menus
Now that the navigation area is up on the menu bar, you want to get rid of anything you don't need taking up horizontal space, because you want to see as much of the current web page address as possible.
If you've got all the Edit keyboard shortcuts memorized (Copy Ctrl-C, Paste Ctrl-V, Find Ctrl-F, Select All Ctrl-A), you don't need the Edit menu. And if you're a Firefox power user, chances are you never use the Help menu, either. To remove both of these menus, add the following to your userChrome.css [1]:
/* Remove the Edit and Help menus Id's for all toplevel menus: file-menu, edit-menu, view-menu, go-menu, bookmarks-menu, tools-menu, helpMenu */ #helpMenu, #edit-menu { display: none !important; }
Using that same code and the menu id's in the comments (between the /* and */), you can hide any other menu you don't use.
If you don't like the idea of getting rid of menus, an alternative is to compress them all into one menu item with submenu's using the previously-mentioned TinyMenu extension.
Remove disabled back, forward and stop buttons
If there's no page to go back to, no page loading, or no page to go forward to, why do you need those buttons on your chrome? The following userChrome.css tweaks will remove those buttons only when they're not usable anyway (they dynamically appear when they can be used.)
/* 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 nothing to Stop */ #stop-button[disabled="true"] { display: none; }
I (and maybe you) also never use the Home button. It can be removed with this snippet in userChrome.css:
/* Remove Home button */ #home-button { display: none; }
Remove the Go button
Always hit the Enter key to go to the web page address you just typed in? Get rid of the unnecessary Go button hogging up pixels at the end of the address bar within your userChrome.css:
#go-button-stack, .search-go-button-stack { display: none !important; }
Note that you can also use an about:config tweak to turn off the Go button. (Set the browser.urlbar.hideGoButton config value to true).
Remove the search bar magnifying glass
Also always hit Enter when you type queries into the search box? Want to see more characters in the input field? Get rid of that pretty - but useless - magnifying glass. In userChrome.css:
/*Remove magnifying glass button from search box*/ .search-go-button-stack { display: none !important; }
Remove the "throbber"
The "throbber" - or spinning dotted circle in the upper right hand corner of the 'fox - does a nice job of advertising the fact that Firefox is in the midst of fetching a page, but the bottom status bar includes a page loading progress meter which is a lot more informative. Since the throbber offers less of the same information we already get on the status bar, let's kick its redundant butt off our chrome island. In userChrome.css:
/* Eliminate the throbber and its annoying movement: */ #throbber-box { display: none !important; }
Organize your bookmarks into folders
If you've got a bunch of bookmarks on your toolbar that scroll off to the side into a menu, consider organizing them into folders with short names so you can fit more horizontally. I like putting all my bookmarklets into a "bkmklts" folder and then organizing the rest of my bookmarks by project (Lifehacker links go into an "lh" folder, for example), but your system is up to you. The shorter the names, the better - alternately, just use favicons to represent a bookmark.
How to edit userChrome.css
In order to modify certain aspects of Firefox's chrome, you have to edit a file called userChrome.css stored in your Firefox profile directory. This file is user-specific and can be easily copied from one Firefox installation to another. Here's where your userChrome.css file is located, depending on your operating system:
Windows XP/2000
C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\
where xxxxxxxx is a random string of 8 characters.
Windows 95/98/Me
C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\
Linux
~/.mozilla/firefox/xxxxxxxx.default/chrome/
Mac OS X
~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/chrome/
With Firefox closed, open your userChrome.css file and append whatever chunks of code listed in this article float your boat. Alternatively, right-click the link to this copy of userChrome.css that incorporates all of the changes made in this article. Back up your existing userChrome.css, place the downloaded version in your profile directory and launch Firefox to see the changes.
What are your favorite Firefox chrome adjustments? Let us know in the comments.
Gina Trapani, the editor of Lifehacker, can't seem to stop writing about Firefox. Her semi-weekly feature, Geek to Live, appears every Wednesday and Friday on Lifehacker. Subscribe to the Geek to Live feed to get new installments in your newsreader.
Comments
Remove the Go button -- I needed that one! Thanks.
I've already tweaked my FF in this way, but I don't think I'll ever remove disabled back buttons, because I can imagine the navigation bar would keep on changing width as a result of buttons appearing and vanishing.
Here is a screenshot of my current firefox. Notice the icons on the favourites bar? If there are any sites I visit in particular (lifehacker, boingboing, slashdot) i'll stick them on the fav's bar, remove all the text from the fav so you can only see an icon. I find a visual representation of a site through an icon is a great way to remember what a link is linking to.
Also, if you use the favicon firefox extensions you can customise the icons - I have a custom Pirate Bay icon on the right, the little skull which I made myself. It's useful in the case that a site doesn't provide a favicon itself.
Great walkthrough, the one thing that I do is remove my bookmarks tool bar all together, and just open them in the sidebar (All-in-one Sidebar), and since I do quicksearches from the addressbar for all of my frequently used search engines, I just removed the search bar thingie. One thing to note though is that I believe every time you use the Google search bar thingie, Mozilla Corp gets thrown a bone from Google money wise...so if you don't ever donate directly, it would be nice to use the search bar to support them. At least, thats what I think happens, that might be different now.
You dont need an about:config or chrome hack to remove the Go button after the address bar. When you are configuring the buttons (right click, Configure...) just drag it off the toolbar.
There's a typo in there: it should be "edit-menu" instead of "editMenu".
One more thing that I use:
#search-container, #searchbar {
width: 300px !important;
}
This makes my search box wider. I use the search box quite a bit so I like it wider. Who needs to read the URL anyway?
That was a good walkthrough. Thanks. Since upgrading, the vertical size of the tabs has been annoying me. They seem just a bit too big. But I can't seem to figure out how to adjust it. Theme files like LittleFox make the height smaller (but look a bit worse) but I can't find where in their code it is. Does anyone know how to adjust the vertical height of tabs?
I'm using FF 2.0 on my Mac G5 and without doing anything, the location bar is next to the nav icons and the whole control area is minuscule.
There's a typo in there: it should be "edit-menu" instead of "editMenu". - Cool Frood
Ah HA!
I couldn't figure out why that dang Edit menu was still there, but the Help menu disappeared.
Thanks!
Wow, this is a great article. There's something powerfully annoying about cluttered interfaces.
You could also consolidate your bookmark bar further and drag it onto one line. I have one for GTDTW, one for Google Reader, one for Gmail and one folder where the rest of my bookmarklets go-- they just aren't used enough to justify taking up real estate.
Now someone needs to make an extension for tiny tabs. Or maybe an option for one of the tab-navigators that allows no tabs at all.
For me it's not even so much the used space (though it is that) but the non-minimalism of the interface. I don't like the little favicons that have started popping up everywhere. All of a sudden Firefox has started to look like 1996-era homepage design.
This might be in the article, I didn't see it though: My userchrome.css wasn't there, it was userchrome-example.css, it needed to be renamed in order to work.
Whoops, thanks all - fixed the edit-menu typo. D'oh!
Does anybody know how to remove the small red "Tab-closing-button" at the right side of every tab?
Nice post. I've had my firefox customized for a long time now, and never realised how much clutter the default installation sets up.
Space-saving points for me:
remove the bookmark toolbar, instead use the bookmark position a-top.
As LH suggests, remove the menus you don't use. I keep Tools, but that's it. (Actually, that could co really!).
I like the go button on my address bar as using a wacom tablet it's quicker to hit it than to press Enter/return.
are kept. Even though I use mouse gestures, these are useful for stubborn pages.
Search bar has gone(ctrl-n, enter search term, enter is much easier for me), or Superdrag&go extension.
Bookmarks: everything is keyworded, so a quick ctrl-n + LH gives me Lifehacker, tor searches for torrents, del searches delicious, f searches flickr, q gives my stock quotes etc. bookmarks only used when i want to link to 'my page' on a site.
Is there a recent post on good bookmarks/keyword tricks at LH? I've keyworded 99% of my ff tricks, but am sure i'm missing something!
I'm with BostonMark - thanks for the info on removing the Go button.
With TinyMenu, I'm already down to one, very useful tooblar. The Go button was the one thing I wanted to remove but couldn't.
@Gina & @Nemo
I love the screenshots! It really helps to give me ideas on how I can change mine around by seeing others.
I like the part about getting rid of the navigation bar. I moved everything but the search bar to the top bar, and moved the search bar to my Google toolbar. I would also highly recommend using just favicons for links. They are all you need to recognize the link. I love the change.
This is terrific, Gina, thanks. It might be worth mentioning that the "Combine the menu and navigation bar" optimization is Windows-only.
Also! Probably worth mentioning that there is a FF extension (ChromEdit) that makes changing userChrome.css (and other config files) easy.
It might be important to point out that userChrome.css may not yet exist in your /chrome directory.
Excellent post. I've been wishing for so long to move the navigation bar onto the menu bar. So much wasted space, specially on a wide-screen monitor.
Is it possible to move the red [X] to the left-side of the tabs? It just feels so much more natural there to me as a Mac user.
Tip: It may be important to point that the userChrome.css file may not yet exist in your /chrome directory, unless you've messed with the chrome in the past. You can use userChrome-example.css as a starting point:
1. Make a copy of the file userChrome-example.css
2. Rename the 2nd copy to userChrome.css
3. Make changes.
It took me a bit to figure out why the changes I was making were not showing up. Turned out I didn't do me any good to make changes in userChrome-example.css. Hope this helps others who encountered the same problem as myself.
Most, if not all, of that button-removing can must more easily be done by right-clicking the toolbar area, selecting "customize," and drag/dropping the unwanted icons into the icon tray.
In addition, I think that watching the toolbar expand/contract all day as the forward/back buttons appear and reappear like two jumping jack-russel-friggin-terriors would be quite annoying.
Finally, I'd like to add my own suggestion. In userChrome.css:
* {
font-family: Tahoma;
font-size: 8pt !important;
line-height: 9pt !important;
}
There are also a couple of different stylesets available at userstyles.org for de-iconifying menus.
This sure is an incomplete article!
Removing the magnifying glass was a new one to me,thanks!
I have the majority of these now and also use tiny menu extension same as dagwud.
Link: https://addons.mozilla.org/firefox/1455/
What happens when Firefox releases updates? Will all these tweaks remain, or do they have to be done all over again?
@markus -
Tab close buttons
Fx 2 only: Another tab interface change in Firefox 2 is the addition of a close button on each individual tab. I happen to love this, but some hate it, saying it causes them to accidentally close a tab when just trying to switch to it. If you're a hater, revert to the Firefox 1.5 behavior by changing the browser.tabs.closeButtons value to 3. This will not display close tabs on individual tabs, and turn on a single close tab at the right end of the tab bar.
Key: browser.tabs.closeButtons
Modified Value: 3 (revert to Firefox 1.5 behavior)
Alternate Modified Value: 2 (don't display any close tab buttons)
Default: 1 (display close buttons on all tabs)
This was taken from an earlier article about customizing Firefox 2 here on LH, but I am unable to find it.
Take a look at my chrome
I've taken this a step or two further. Note the lack of a stop button...this is thanks to the Stop-or-Reload extension. All Opera-style. I've been debating ditching the forward button, but I do use it occasionally, and I just like the way it looks up there. If you look to the right, the search bar and throbber are gone. I'm using bookmark keywords to replace the search box. And that last icon on the right is a mod of the CompactMenu extension. The standard extension has an ugly fish-icon...there are two mods, one with the Mozilla M, and one that ganks weboso's brilliant and beautiful Firebird glass icon. The mods can be found here. I also use All-in-One Sidebar to stick some extra buttons I use infrequently, like my bookmarks (I eschew the bookmarks toolbar), Adblock Plus and the DOM inspector. You can see the thin gray bar to pop that out on the left side of the window.
Not to spam or anything on my first comment, but check out my blog!
Hey Marcus
search back a couple of days for a LH article on hacking or tweaking firefox 2.0 Links ot lots of great stuff.
I think you are looking for:
type about:config into your address bar.
then search for
browser.tabs.closeButtons
double click on it, and change the value. I think you can go back to the one close on the right hand side, or no close buttons, but I am not sure. easy enough to play with it and see.
@Markus:
Go to about:config
In there, look for:
browser.tabs.closeButtons
Default is 1 where it's on every window, 2 no close button and 3 is 1.5 style close button (on the right hand side).
I use this amazing Firefox extension that does all of these things for you!
The UITweaker: https://addons.mozilla.org/firefox/1342/
It works great and I can tweak all the things you listed above without having to do it myself.
You know, you can remove most anything on the menu bar by just right clicking on the menu bar, selecting customize, and just dragging what you no longer want to be there into the "customize toolbar" box(with the rest of the icons).
I know you can do it with all the back, forward, reload, home, and throbber icons. The only thing you really need to go to chrome and edit to remove is the magnifying glass, because as you said, the go button can be removed in about:config.
I told u stupid cunt don't write more articles. Go and suck your boyfriend's cock. At least that useful activity. Oh sorry I forget you don't have any because you rude as hell, then why don't you shot yourself bitch? someone who worthless in life that is the same on the net...
Great post! I've been looking for a way to remove the go and magnify button for a while now. Auto hiding the forward/back buttons is also a good idea. I use mouse gestures normally but 100% flash based pages make using them impossible so it's nice to have the buttons there.
For even more control over your UI, why not try UI Tweaker (Formerly Toolbar Cleanup). It has a whole lot of UI tweaks including combining the Stop/Reload buttons.
You can save even more space by hiding the status bar once a page has loaded using autoHideStatusbar .
Menu Editor is a way to customise your menus (including what is in each menu) without editing the chrome.
To keep the search bar small until you need it, try Searchbar Autosizer.
Using Tab Mix Plus to customise tabs, you can change many things including the tab close button.
Well, Pinky. Thank you for your insight. Have a good weekend.
You're leaving out one of the biggest space wasters -- get rid of the search box and just use keywords/bookmarklets in the location box. Eg "g foobar" to do a Google search.
Also, there are a couple Firefox extensions for rearranging the menu items (I use "Menu Editor"), which let you get rid of ones you don't use, like Go, and also let you reorganize what's in each menu.
Well, I've got to ask a few questions. I've just done most of this (but without the .css editing). I kept the URL bar where it's at, moved the search bar up next to the file/edit/view/etc, and tossed my Google search bar next to the URL bar. Ditched the throbber, too.
But now I'm wondering, I'd like to get rid of the Edit, View, History and Help menu items, but I wasn't sure: Will editing the chrome.css ONLY change the chrome theme? Because I'm not overly fond of the default chrome theme, and I'd prefer to keep Noia or Graphite.
Ok, please help me... i'm tried doing this tweak, but it didn't work. I substituted the original file with the one given here and it didn't work. I have windows xp and all of that... and i think i did right... any suggestions?
Oh, and one more comment, is it possible to make the search field open a new tab instead of loading the search in the same window that you are? Because I hate it when you do a search and I always forget that I need to do it in a separate tab, or else I'll go away from my current web page! Any suggestions?
the extension "MenuX" lets you do a lot of this stuff without dirtying your hands with CSS or javascript, by adding a ton of buttons to your options when customizing your toolbars, and giving you the ability to hide your menubar.
(don't worry - you can add a "menu button" that displays a popup of "File, Edit, View..." etc)
other buttons i use: "view source in a new tab" "allow/block flash from this site", "open DOM inspector" "open settings" "StumbleUpon" etc.
it's worth checking out if you're into reclaiming real estate and adding quick access to functionality.
Actually, the 2.0 compatible extension you want would be TinyMenu.
Another tip I'd like to give is to replace icons you don't like with ones you want. I suggest installing both MenuX (which you have to manually mod to be compatible right now) and FirefoxMenButtons. There's plaenty of good stuff in there. Finally, install the Minifox Flat theme.
my favorite thin firefox extension is the icon picker for your bookmarks. Just pick an icon you know as the icon for your bookmark, and then you can get rid of all the words so that you can fit much more bookmarks on your toolbar, withuot making it look fugly :D
oh and Pinky, go to hell. I'm gunna laugh when you get your account destroyed.
I also noticed something when I copied and pasted from this post. Unless this is kept all in one line, for the removal of the edit and help menus, there should be *'s in front of each new lines within the comment section. (I had originally pasted it as is, and had all my menu items greyed out, inaccesible for use). Upon adding the leading *, everything works.
/* Remove the Edit and Help menus
* Id's for all toplevel menus:
* file-menu, edit-menu, view-menu, go-menu, bookmarks-menu, tools-menu, helpMenu */
#helpMenu, #edit-menu { display: none !important; }
I'd go further and ditch the separate search box. Just create search keywords (ie, go to google, right click in the box for your search term, choose "Add a Keyword for this search..." and pick something short, like "goo"). That way you can just hit control-L to put the cursor in the location box, then type your search shortcut and term "goo firefox 2 tricks" and hit enter to run the search.
Editing the userChrome.css file is made much easier with the ChromEdit Plus extension. It was created because the old ChromEdit extension is no longer being maintained.
Good article Gina. I just wanted to comment that the 'Home' and 'Go' buttons can be removed via the user interface (by customizing the toolbar and dragging them off).
I also disable dropdown arrows for the back and forward buttons, since right-clicking on them has the same effect:
#back-button .toolbarbutton-menubutton-dropmarker,
#forward-button .toolbarbutton-menubutton-dropmarker
{display: none !important}
And here is some neat code that makes the 'back' button larger and easier to click (courtesy of the Fitt's Back Bar extension):
/* Force the back-button label to be visible, even in no text */
toolbar:not([mode=full]) #back-button .toolbarbutton-text {
display: -moz-box !important;
padding-bottom: 2px;
padding-right: 10px;
padding-left: 2px;
float: left;
}
/* put some spacing around the back-button icon */
toolbar:not([mode=full]) #back-button .toolbarbutton-icon {
padding-left: 8px;
padding-right: 6px;
}
/* Put the label to the right of the back button */
toolbar:not([mode=full]) #back-button .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal !important;
}
Is there a way to utilize the status bar? I do not use it very much, but do use it. Is there a way of adding your bookmarks or something to it? I am using FF 2.0 for mac.
I prefer extensions to editing. Here are a few to reduce clutter:
1. Menu Editor, I got rid of the "go" and "bookmarks" menus but also individual entries within the tools menu;
2. Status Buttons lets you put buttons in the status bar, at the bottom of FF, reclaiming wasted space; and
3. UI Tweaker, too many options to list.
Eh, if you're really concerned about space, you can remove the search box and just use "g " to Google search right in the address bar, or create your own for other search engines. :P
Personally, I use quite a bit of the buttons, and I have other things taking up most of the "free" space on my bars, so I don't see a need for removing stuff. Either way, this was an interesting article. Thanks.
Just a comment to anyone worried about the toolbars jumping around and resizing if you hide the back button when it's disabled -- I've set mine up just now, and haven't had problems with jumping so far (I've been keeping a close eye on 'em...).
I've actually got my home button just to the right of my TinyMenu, then my stop & my refresh (which appear as one, but without any extensions -- just a chrome hack I found at:
http://mozillalinks.org/wp/2006/09/merge-firefox-reloadsto...
And then my back & forward buttons to the right of them. Then I've got some flexible space (mmm...flexible space) between the buttons & my bookmark favicons. (You could try using some flexible space between your buttons & your urlbar -- it would probably work too.) The effect is quite nice...the buttons just appear when needed, no shifty business so far.
A couple other chrome-savers I use:
I'm a fan of sidebar content, so All-in-One sidebar is great for tucking extra buttons that only pertain to the sidebar (plus I stick a reset button at the bottom, and group my dom inspection stuff down there too -- pushed down with more flexible space).
I'm also a bit of an extension hoarder, and they always seem to come with some new toolbar button or other. So I've installed the Personal Toolbar Button extension: it gives you yet another button, but this one button toggles a toolbar -- which is where I stick rarely-used-but-still-useful buttons, and extenstions I'm still testing the waters with. (And I'll bet there's a way to hook up a shortcut key to toggle the toolbar, but I haven't figured it out yet.)
And because I tend to use too many tabs, I've always had the new tab button on my toolbar, since it's hard to double-click an empty spot when there isn't an empty spot. But I've just discovered that the miniT extension (which isn't updated for 2.0, so you'll need to override the max version), while claiming to provide a lot of functionality that seems to be native to the 'fox now, still allows you to double click on *any* tab to open a new one.
So, since I'm given to so much excess in other areas, a tidy bit of browser chrome is much needed...
One bit of functionality that I've been craving, though -- does anyone know how to create a single bookmark button that you could place, say, on your sidebar? I'd love to make my own single bookmark buttons to place in appropriate spots, and not be confined to the "bookmarks toolbar" pen.
Does anyone know of an extention that can autohide tool-bars?
It would be great if I could have a short OSX like dock at the top of my browser that popped up when I was near the top of the page and let me select bookmarks.
I personally use the Stylish extension to do this kind of stuff. It lets you do the same thing as editing your userChrome and userContent files, but without having to restart the browser...it applies them instantly. There's also more than 1000 styles you can download from userstyles.org, and it supports not only firefox, but thunderbird as well.
As the author describes it, "Stylish is to CSS what Greasemonkey is to JavaScript". So if you like Greasemonkey, try out Stylish.
Another idea is to bookmark your chrome folder, adding a keyword to it. Mine is
C:\Documents and Settings\davey\Application Data\Mozilla\Firefox\Profiles\romft1m2.default\chrome, keyworded to 'chrome'.
I also use these:
.tabbrowser-tabs > tab:focus .tab-middle {
outline: none !important;
}
.tabbrowser-tabs > tab .tab-middle .tab-text {
border: 1px solid transparent !important;
}
.tabbrowser-tabs > tab:focus .tab-middle .tab-text {
border: 1px solid transparent !important;
} to get rid of the cotted line around tabs' text when they are selected / moved.
Hi, does anyone know how to add the "next" button back into the "search as you type" bar ? In Firefox 1.5 for example, you could search for a word, and then click "next" to go to all words in that page. I really miss that feature.
Sadly, I've been doing this since 1.5 but I left my back, forward, and stop buttons. Also, all my file, edit, etc menus are on the right had side of the address bar because the buttons are usually on the top left. This makes it easy to use for
My Version's Picture here.
Don't remove the 'Edit' menu if you are working in Linux. The 'Preferences' option is in the edit menu rather than in the 'Tools' menu as in Windows.
I hate to bash Firefox, but IE7 has really done a good job of collapsing the menu bar.
One question for all the TinyMenu fans. Has anyone found a way to bring the bookmarks menu back after installing TinyMenu. i.e I want TinyMenu except I don't want it to touch my Bookmarks menu since I use that too frequently to add another click to get to it. Thanks in Advance.
To save space and keep my hands on the keyboard as much as possible, I've hidden the navigation and bookmarks toolbars entirely. I only need to remember a few keyboard shortcuts for how I surf. (new tab, close, back, forward, go, search).
I don't build web sites anymore, so I don't really care what the URL or path of a page is (most of the time). I do keep the status bar on the bottom; I still like to know what domain that link goes to before I click it.
For Mac folks using the Aqua goodness of Camino, note that Camino doesn't display the encryption padlock and domain name in the status bar like Firefox. You may want to display your location bar for on-line banking, etc.
@Cool Frood:
I too tweaked my chrome to expand the search box until I found the Optimoz Tweaks extension. It will auto-magically expand your search box when it gains focus (using a neat expansion animation, if desired). The extension was designed to expand your sidebar, also, if you so desire.
http://optimoz.mozdev.org/tweaks/
I've got a weird History menu that I never noticed before, and can't seem to get rid of. I tried using likely css names (history-menu, historyMenu) but it hasn't gone away. Can anybody help me figure out how to get rid of this, whether through chrome or otherwise?
Thanks much - screenshot
I used to work off a small Windows laptop and the one program (not extension) that helped me get as much screen real estate as possible was PowerPro.
http://powerpro.webeddie.com/
I think of it as my equivalent to Quicksilver on Windows. It takes a bit of learning, and has heaps of features.
For Firefox the main benefit is that it lets you create multiple toolbars of buttons that can launch anything with keystrokes, or run macros, scripts, and various internal functions of PowerPro, with a left, right, or middle click of the button (yes, that's 3 commands per button.
The toolbars can show/hide on any side of the screen, be embedded in the title bar, or float anywhere you want. And the best thing is that you can set Firefox specific menus to only appear when Firefox is in the foreground.
It can also assign any action to keystrokes or mouse gestures. And it has a multi-desktop manager, stickies and lots I haven't mentioned.
I've been meaning to write a blog post on PowerPro for a long time, but never got around to it. Some pictures would probably help people get an idea of how it works.
http://flickr.com/photos/ct5821/sets/72157594348750523/
I don't have any pics of Firefox because when I moved to a Mac I made my laptop's Firefox configuration match what I had on the Mac, so I didn't get annoyed that I didn't have PowerPro on my main machine. If that makes sense.
mitten, do the same as with the edit and help menus, except name it "go-menu" instead of "history-menu" or whatever the format is.
I, too, forgo the use of a bookmark toolbar. I've been shrinking my toolbars to as small as I can stand for years. This has been greatly helped by the Tiny Menu and UI Tweaker extensions mentioned above. UI Tweaker took care of a couple of things I was using multiple extensions for and Tiny Menu, IMO, is just brilliant.
I like that with Tiny Menu I can opt to leave certain items visible. I like using "Bookmarks" as a dropdown, so it stays. I also like having both the forward and backward arrow visible, even when disabled, it just doesn't look right to me otherwise.
If I can't condense everything I need into one toolbar I'm not happy.
Here's something I found a bit disturbing: As I was going through my "about:config" page (Which I've bookmarked, at this point) I noticed several lines referring to extensions I no longer had installed. There were a lot; I've tried and abandoned many, many extensions. Can I just delete them? Is there a check list of stuff that's absolutely essential to FireFox so I don't arbitrarily delete something important? Is there a way to backup my "about:config" page, so that I can remove new lines put in by a new extension I'm trying out, or in case I remove functionality on accident? Have I asked enough questions in this paragraph? Have I wandered far enough off topic? Will Bat Boy ever find True Love? What about Mary Lou?
@ Slackwise- You said: [...] just use "g " to Google search right in the address bar, or create your own for other search engines. :P
I can do this in Opera, but how do we set this up in FF?
I have two questions. When I add the bookmarks toolbar, it only shows the bookmarks in my first bookmark folder. I want the toolbar to show every folder in my bookmarks only, similar to the way Gina has it in this article, how do I do that?
Also, how do I remove the History menu item. I removed Edit and Help, but want to remove History too.
Too bad that the search box doesn't pop up when you push ctrl+k when it's not on the toolbar like the navigation bar does when it's not there :(
Wow! That is a very useful set of tips. I was getting pretty frustrated with the amount of real estate taken up by toolbars etc.
A couple of other "feature requests":
1. Is there a way to make the "Find" bar autohide when moving to a new page?
2. On Linux (or at least Gnome), the "Preferences" dialogue is under "Edit" menu, rather than "Tools -> Options" in Windows. Is there any way of moving "Preferences" to the "Tools" menu - then I could get rid of the Edit menu.
is there a way to have two search boxes in a toolbar?
I did everything you said.. and it looks great.. works great too! Thanks. Especially the part where the buttons disappear when their not needed. This actually happens a lot, especially when you're using tabs a lot.
I did everything you said and it looks great! Works great too. Especially that bit about the buttons disappearing when their useless. This happens a lot, especially if you're using tabs a lot.
John H, Menu Editor allows you to move items from one menu to another.
@mitten & Loop Universe - To remove the History menu, you can add this to your userChrome.css file:
#main-menubar > #go-menu { display: none !important; }
The History menu was previous called the Go menu, so that's why it was a bit harder to guess =)
I was worried about the Address bar changing sizes as well, but it's really not that noticable, as it changes simultaneously with the page changing, which takes attention away from the toolbar, which is nice.
If you really want to get rid of as much clutter as possible (I'm personally into the minimalistic look), you could just scrap the search box altogether and replace it with bookmark keywords. It's much more convenient for me to just hit F6 and type "dict *word*" than it is to click and use the search menu.
All you need to do is search for something in, for example, Wikipedia. Then copy and paste the resulting address bar into a new bookmark, replacing the search term with '%s', sans apostrophes. Then add whichever keyword you like, such as 'wiki', again sans apostrophes, and save. You can now search whichever engine you designed the bookmark for by typing 'wiki *subject*' or whatever.
I guess muscular atrophy is a small price to pay for quick searching abilities.
If you need a larger space to browse, just hit F11.
Gus. H - To add a word-prefaced search in FF, go to the destination page and right-click on the search box. Select "Add a keyword for this search" and fill in the box that appears. So for Google, if you wanted "g", then put "g" in the Keyword space.
After that all you have to do to search something on Google is type "g(what you're searching for)" in the nav bar and it'll take you to Google's search results.
A good note is that this works for any search engine, including those within specific websites. Hope that helps.
The trick of showing the buttons only when you need them is neat. But the rest of the changes are simple drag and drop changes which have been easily available through right-click and customize (on the bars) for a long time now. Of course the other advantage with changing the user.css is that you can move it to another machine.
I'm all about slimming firefox. my toolbar is only one row. I use the tiny menu extension (er add-on. I'll never get used to saying that) to consolidate the entire menu into one convenient drop down menu, got rid of all the buttons but the new tab, home and back button. Moved the adress bar up to the top row next to those buttons. I use favicon extension to get rid of any text on my icons, and then just put the search bar next to those. It ust fits so perfectly. Heres a screen:
http://img146.imageshack.us/my.php?image=thinbar002gq1.png...
(hope that works, first time using imageshack)
You can just edit your chrome by going to Tools> Edit My Config> ChromeEditor
Lot easier
Swash
Swash, that must be an addon you have installed, it's not default on in Firefox.
Excellent article! Very helpful. The tip for hiding the forward/back buttons when they are inactive is great.
I too am using All-In-One Sidebar and Tiny Menu to maximize convenience while conserving space. I was also using Tab Mix Plus until I upgraded to FF2. I tried overriding the version check on this extension but it breaks the tab close functionality in FF2. From user comments it looks like the current beta works well with FF2 but I'll wait for the official upgrade.
I'm surprised that no one has mentioned the incredibly useful MR Tech Local Install extension. It adds a wealth of functionality and replaces a couple dozen other extensions.
Some other extensions that I'm currently using...
Stylish. I'm really just playing with this at this point. I haven't decided if I'm going to keep it or not.
Download Statusbar. This is a very nice space saver. I got really tired of the downloads window (sidebar, in my case) always popping open whenever I downloaded something. This sits unobtrusively in the status bar and still lets you keep an eye on your progress.
Web Developer. An absolute must have for any developer. Great tool! It comes with a handy toolbar button which you can put on your main toolbar or your all-in-one toolbar to show or hide the web developer toolbar. Once again saving space without sacrificing functionality.
del.icio.us Bookmarks. Be careful with this one. It completely replaces your FF bookmarks with your del.icio.us bookmarks. This is cool if that's what you want, just be aware before you install it. It is actually quite nice and is a great alternative to various extensions that sync your FF boookmarks between machines. If you want to keep your FF bookmarks separate from your del.icio.us bookmarks, try a different extension.
GButts (what an unfortunate name!) which gives you buttons for gmail, gcal, greader, etc. I've dropped the google toolbar and switched to this extension because the toolbar was taking up a lot of space and wasn't really adding value to my browsing experience.
Adbock Plus, Greasemonkey, Cards and Mines (just 'cause they're fun).
@AbraCadabra
To show or hide specific menus using TinyMenu open Extension (Add-On) Manager, click on TinyMenu, click the Options button (or right click on the TinyMenu extension and select Options), select the menus that you want displayed. The Bookmarks menu is one of the choices.
Has no-one seen this one on the mozilla site?
It reduces the space above and under the URL bar, who needs an odd 5 pixels separating them when you could have 2?
/* Remove extra padding from the Navigation Bar */
.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;
}
@Bobly:
Ignore last post, that one doesn't seem to work XD I got carried away and thought my already really shrunk navigation bar and shrunk even more XD
Thank you so much for all of these. One of my favorite parts of computing is configuring stuff to my taste. I can't believe they've made it so difficult to get rid of the Go button.
I've got a wide screen laptop so my horizontal real estate is precious. I never got the address bar to go up to the menu bar until Lifehacker showed me how. You guys rule!
Strangely, there was no userChrome.css file in the location specified above, which i thought was weird. But nevertheless, if it aint there, just create it and enter your desired tweaks, and it works fine.
Don't forget that extension 'TinyMenu' that will really condense the size of the toolbars...
Great article too.
So how do I stop Firefox from resetting the location of the back/forward/etc. buttons, the location bar and the search bar back to the navigation bar when I restart Firefox? It's kind of annoying to have to reset it again, over and over.
Thank you SO much! While I have a pretty large monitor with my desktop computer, I mostly use my laptop, which does not have a huge screen. I've consolidated my bookmark toolbar nicely, using drop-down folders and the icon trick mentioned earlier by another reader. However, I could not figure out how to eliminate an entire toolbar. What a lifesaver!
I can't move my icons to the menu bar for some reason...I follow the steps and then the icons just snap back into place...is there something that I am missing? Thanks for the help and would love to get this to work because my 12" screen could use the space...
Just for anyone who wants to know: For Firefox Portable, the directory to place your userChrome.css is in FirefoxPortable\Data\profile\chrome.
@twan1:
You can add back the old-style "Find as you type" buttons with the FAYT extension.
I agree, that was one of the first things that I needed to fix when I upgraded.
FAYT is a useless extension. You can just hit Ctrl-F in default Firefox 2.0 to use the normal search bar.
My colaboration here is that in windows vista, the userChrome.css is in: C:\Users\xxx\AppData\Roaming\Mozilla\Firefox\Profiles\xxx
I recently ran into the "Edit->Preferences" menu problem on my Linux Firefox. My solution... . I already have Firefox configured to not let anything open new windows, and these bookmarks allow me to take that one step further. (Note that the Theme bookmark won't work in Firefox 2.0, of course.)
Aghh, link didn't post. Here it is: http://www.lifehacker.com/software/firefox/hack-attack-qui...
I've also been customizing my firefox UI for a while now, but usually with a different end in mind: instead of adding a line or two to my web page's vertical rendering real estate, I want to reclaim precious characters in my address bar's horizontal real estate.
This is especially useful when you have a lot of similar URLs in your autocomplete history list. I find that if the address bar is too narrow, there's no way to distinguish URLs with common prefixes in the autocomplete list.
So I've moved my bookmarks and search bar to the right of the buttons on the navigation toolbar and created a new toolbar just for the address bar from the customize toolbars dialog. This way my address bar gets the full width of the window, and I can (usually) see my URLs in their entirety.
(BTW, this "real-time" edit box is positively GLACIAL. I might as well be typing over a 48baud line. Firefox 2.0.0.1 on Linux 2.6.18.)
But one question...
... do you know how can we change window icon in different profiles? I know how to change to all firefox profiles... and what I want is change the window icon of profiles.
For example, two profiles, two different window icons.
Thanks
Screenshot
Can anyone please tell me how I can remove that waste of space below my bookmarks toolbar? No matter what I try, nothing seems to work... Thanks.
the location for the chrome file in vista is:
C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\gpis1ol7.default\chrome
Another fantastic space saver is the "stop or reload button" extension:
[addons.mozilla.org]
Basically, if a page is loading it will only show the stop button, and if it has loaded it will only show the reload/refresh button.
Simple! :D
Start a discussion:
Login with your username and password below. Or comment on this post via email.
Forgot your username or password? New User?