And you can save a few more pixels by removing the forward button's drop-down arrow (right-clicking the button offers the same choice of URLs), and the gap between the URL and Search bars.
/*Remove Forward button's drop down arrow */
#back-forward-dropmarker {
display: none !important;
}
/* Remove splitter between the URL and Search bars */
#urlbar-search-splitter {
display: none !important;
}
Entire menus can be stripped out in a line or two. If you already know all the Edit menu keyboard shortcuts, for instance, then maybe you can do remove it entirely, like this.
/*Remove the Edit menu */
#edit-menu {
display: none !important;
}
You can change the text to hide other menus, so for example replacing #edit with #history will hide the History menu. But beware, this is case-sensitive - use #History-menu, say, and the new command won't work.
It's just as straightforward to strip out individual menu options. Who takes the time to click Tools > Web Search when they can just press Ctrl+K or click in the Search box, for instance? Not us, so we remove it, and the subsequent menu separator, like this.
/* Remove Web Search from Tools Menu */
menuitem{label="Web Search"} {
display: none;
}
menuitem{label="Web Search"} + menuseparator {
display: none;
}
We also like to remove the minimum width restriction on the sidebar, so you can have it as slim as you like.
/* remove sidebar minimum width restriction */
#sidebar {
min-width: none !important; min-width: 0px !important;
}
Some sites provide a userChrome.css tweak to remove the close button from inactive tabs, but that's another setting that's easier to change in another way. Enter about:config in the Location bar, filter on closebuttons and set browser.tabs.closebuttons to zero, or 3 if you'd prefer a single close button on the right hand side.
UserChrome.css is the perfect way to change how your tabs are displayed, though, and this can be particularly useful. Open a lot of tabs and the active one will almost vanish amongst the crowd, but if you give it a minimum width of, say, 180 pixels then it'll still stand out. Here we've helped out by also hiding the icon for inactive tabs, changing their colour and making them transparent. Remove or alter these additional lines if you don't like the combined effect.
/* Set a minimum width for the currently selected tab */
#content tab{selected="true"} {
min-width: 180px !important;
}
/* Hide favicon for inactive tabs */
tab:not({selected="true"}) .tab-icon {
display: none !important;
}
/* Change the colour of inactive tabs */
tab:not({selected="true"}) {
background-color: rgb(192,192,192) !important;
color: blue !important;
}
/* Make inactive tabs transparent */
#content tab:not({selected="true"}) {
-moz-opacity: 0.66 !important;
}
And you can even move complete interface elements around the screen. How about relocating the sidebar to the right side of the window, for instance, and displaying the tab bar at the bottom? Here's the code you need.
/* Place the sidebar on the right edge of the window */
window > hbox {
direction:rtl; } window > hbox > * {
direction:ltr;
}
/* Display the Tab bar at the bottom */
#content > tabbox
{
-moz-box-direction: reverse !important;
}
Feel free to experiment with these, and other settings (Google for "userchrome.css" and you'll find plenty). If something does ever go wrong, just delete your last change, or rename the userChrome.css file and Firefox will return to its default settings.
