howTo: Tweak chrome for a cleaner Firefox
Wow. According to the vote you guys like Firefox. Want your Firefox to look cleaner and sleeker? There is so much you can tweak. If you haven’t optimized your Firefox setup so you can do more efficient research/development/browsing/downloading, it is time to start. Stay tuned for more posts that will look at different ways to improve your ‘fox experience.
Today we will look at modifying the userChrome.css file to remove unused menus, give you more viewing space, and generally give you the flexibility to see only what you care about and nothing that you don’t. Mozilla has created a Configuration Guide that you should check out to find the directory to create your userChrome.css file (it does not exist by default, but there is an example file in that folder).
Find it and open it up in your favorite text editor. Paste any of the following snippets under the @namespace… line at the top. Make your edits and restart Firefox to see your changes.
Share how you rock your Chrome in the comments!
/* Add a keyword when adding a bookmark */
#keywordRow { display: -moz-grid-line !important; }
/* Remove the close button on the tab bar and sidebar */
.tabs-closebutton { display: none !important; }
/* Hide Tabbar close Button */
tabbrowser .tabs-closebutton-box { display: none; }
/* 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;
}
/* Remove the Edit and Help and History menus
Id's for all toplevel menus:
file-menu, edit-menu, view-menu, go-menu, bookmarks-menu, tools-menu, helpMenu */
#file-menu, #helpMenu, #edit-menu, #go-menu, #bookmarks-menu { display: none !important; }
/* 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; }
/* Remove Home button */
#home-button { display: none; }
/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }
/* Eliminate the throbber and its annoying movement: */
#throbber-box { display: none !important; }
/* Remove extra padding from the Navigation Bar */
.toolbarbutton-1, .toolbarbutton-menubutton-button {
padding: 0px !important;
margin: 0px !important;
}
/* Remove extra padding from the status bar */
#status-bar { padding: 0px !important; }
/* Multi-row bookmarks toolbar */
#bookmarks-ptf { display:block; }
#bookmarks-ptf toolbarseparator { display:inline; }
/* Make inactive tabs partially transparent */
#content tab:not([selected="true"]) { -moz-opacity: 0.5 !important; }
/* Hide mail stuff from Tools Menus */
menuitem[label="Read Mail (0 new)"] { display: none; }
menuitem[label="Read Mail (0 new)"] + menuseparator { display: none; }
menuitem[label="New Message..."] { display: none; }
menuitem[label="New Message..."] + menuseparator { display: none; }
/* Remove Web Search from Tools Menu */
menuitem[label="Web Search"] { display: none; }
menuitem[label="Web Search"] + menuseparator { display: none; }
/* Hide For Internet Explorer Users & Release Notes from Help Menu */
menuitem[label="For Internet Explorer Users"] { display: none; }
menuitem[label="Release Notes"] { display: none; }
/* Show tab favicon only on selected tab */
tab:not([selected="true"]) .tab-icon { display: none !important; }
/* Slightly rounded address and search bar corners */
#urlbar {
-moz-appearance: none !important;
-moz-border-radius: 3px !important;
padding-right: 1px !important;
}
/* Remove separators between toolbars*/
#toolbar-menubar {
min-height: 12px !important;
padding: 0px !important;
margin: 0px !important;
border: none !important;
}
#nav-bar {
border: none !important;
padding: 0px !important;
}
#PersonalToolbar { border: none !important; }
#navigator-toolbox { border-bottom-width: 0px !important; }
/* Remove Bookmark Toolbar folder from the bookmarks menu */
menu[label="Bookmarks Toolbar Folder"] { display: none !important; }
Next time we will look at optimizing your Add-ons so that you can have extra tools in your browser toolbox without making Firefox too bloated.
Popularity: 26% [?]
25 Responses so far
Trackbacks
- Tweaking Thunderbird’s chrome | Eric Wendelin
- Early Adopters: Your Firefox 3 chrome tweaks are HERE | Eric Wendelin's Blog
- 8 steps to my personal Firefox setup for productivity | Eric Wendelin's Blog
Leave a reply
Most excellent, dude!
I get a 404 not found on the Config Guide link!
Nice post though…
Arg. That is what I get for running a case-insensitive regex replace. The link is fixed now. Thank you for letting me know.
How do you get the folders in the Bookmarks Toolbar to have custom favicons instead of the generic folder favicon ? I’d really like to know.
@christophe: Does this do the trick?
.bookmark-item[container='true'][label='your folder name'], #treechildren::-moz-tree-image(folderNameCol, name-your folder name)
{list-style-image: url(”file://Path to icon”) !important;}
i was wondering if there was a way to customize the dropdown window when you go to add a new bookmark. it seems to keep the most recent folders you added bookmarks in there, i wanted it to have a few fixed folders, and maybe take a few out that are in there
thx!
@bubxyz:
Hmmm… that is a tough one. My theme colors this dialog nicely but I am not sure what part of chrome contains the bookmark dialog.
I can only suggest you go to the Bookmarks Manager and try to remove/reorder what you want. Sorry I can’t be of more help.
I would like to remove the ability to delete firefox’s history entries, as part of a “trust but verify” for children.
there are several ways of deleting history entries.
opposite click on an entry.
Control-H
Delete key
from the menu?
Can anybody shed some light on ways to disable (or password) the ability to delete history entries?
Someone said create a file: usercontent.css and add code to it. What code would I add?
Any clues?
@skm:
In the case of “trust but verify” history. I would consider using Google Web History. Details at the link, but basically you install the Google Web Toolbar and associate it with a certain Google Account of which only you have access.
Another option is the Google Browser Sync firefox extension set up to sync history. Hope either of those help. Test them out yourself and if it’s not a good solution for you email me at emwendelin@gmail.com and I will try to figure out a better system.
Nice tips but sadly for FireFox 3 Beta 5 the remove seperators between de mainmenu and navigation bar doesn’t work. And I love how your firefox looks and I want it the same! :O
Help?
Even better.
Could you send me your complete userChrome.css to me so that I get the same config?
FireFox 3 beta 5 compatible?
Nevermind. I solved it by configuring the bars the normal way. I just dragged and dropped it up. :)
@Foxtrot:
Glad you got it. I’ll email you my config files when I get home but note that there is more to it (like customizing the toolbars) which I may write a post about soon (hint, hint…) ;)
I used a fake e-mail cuz I’m a bit causious about putting my e-mail on sites I don’t know that well.
On other note:
I found that you can just right-click the menubar and then Edit. You can remove/move the following things then:
- The throbber (No need for the Chrome code)
- Home button
- Searchbar
- Stop button
- Refresh
- New page
- New tab
- Site bar
- And some more.
All of those in that list need no userChrome.css codes.
Thus no coding for those gone. Works with FireFox 2 and 3.
You can’t remove the menu’s. but you can remove navigator bar and bookmarkbar. I just moved all things I wanted to the menu bar and removed navigator bar with right-click on it and then select it.
Easier to do it this way. xD
So for the menu’s you need the Chrome codes. Also for the feature of not showing back and forward or stop when there is nothing to go back to, go forward to or to stop.
Hope that makes things easier. ;)
@Foxtrot:
Yes, I definitely prefer using the UI to remove unnecessary items. One thing is most useful when using userChrome.css to make these changes is that you can more easily transfer settings to another computer by just emailing yourself your config files.
thanks i will try this
Is there a code to change the Edit, Help and History etc buttons into icons (little pictures) instead of the word itself?
@Zach:
Let me do a bit of looking and see if I can come up with something.
Thank you Eric, I’ll be checking this page regularly.
It seems the ids for the menus have changed slightly for Firefox 3 - there isn’t a go menu, and the #menu-bookmarks is now known as #bookmarksMenu. A short extract from my userChrome.css for reference:
/* Remove menu items
Id’s for all toplevel menus:
file-menu, edit-menu, view-menu, menuBookmarks, tools-menu, helpMenu*/
#helpMenu, #bookmarksMenu, #history-menu, #view-menu {display: none !important;}
@Zach:
This does not yet work with FF3, but it might work out for you:
https://addons.mozilla.org/en-US/firefox/addon/3895
I haven’t yet had enough time to develop some other way yet.
Hope that helps!
hello, any idea on how to change the color of the background color of the tab toolbar (I don’t mean color of the tabs but the space underneath them)
thanks
nevermind, found it!
/* Change tab bar background color */
#browser tabs {-moz-appearance: none !important;
border: 0 !important;
background-color: #FFFFFF !important;
}
here’s what my Firefox 3 looks like now! not too shabby ey?! :)
http://i15.photobucket.com/albums/a390/bigblubox/firefox3.jpg