20+ Ways to Tweak Firefox with the Userchrome.css File

Last month, I showed you how to remove the “open in new window” option from your Firefox right-click menu by making a simple tweak to your Firefox userchrome.css file. This got me interested in what other tweaks you could make to the Firefox browser via the userchrome.css file so I went hunting.

Just to recap for those of you who don’t know what the userchrome.css file is. It is the file in your Firefox profile which you can use to make tweaks and customisations to the browser. It can be found by going to :

[WindowsXP] C:\Documents and Settings\<username>\ Application Data\Mozilla\Firefox\Profiles\Chrome

[Windows Vista] – C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\<some_profile>\chrome

Inside there, you will either find the userchrome.css file or a file called userchrome-example.css.

If it is the latter, just rename it to userchrome.css. Then open it using a text editor such as Notepad.

Now when you open it, you may see the following already there. Do NOT delete it :

/* * Do not remove the @namespace line — it’s required for correct functioning */ /* set default namespace to XUL */ @namespace url(”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

If you want to tweak your browser using the userchrome.css file, anything you add goes AFTER what you see above.

All you have to do is copy / paste the one you want into the userchrome.css file, save the file, close and re-start your Firefox browser and that’s it. Easy-peasy. As you will see, some of them can also be easily adapted to do other things too. If you can think of other ways to adapt any of them, let us know in the comments.

Please note that everything is reversible. So if you screw up, just delete what you copy/ pasted into your userchrome.css file. Then re-start your Firefox browser.

Userchrome.css tweaks

/* Remove Edit menu (if you already use all the keyboard shortcuts) */
#helpMenu, #edit-menu { display: none !important; }

NOTE! – This one can be adapted to remove other menus such as the File menu, the Help menu and so on. Just remove “edit” and insert the appropriate words. Using this, I removed everything except the Bookmarks menu and the Tools menu.

/* Remove Back button when there’s nothing to go Back to */
#back-button[disabled="true"] { display: none; }

NOTE! – This one can be adapted to also remove the Forward button.   Again, just remove “Back” and insert the appropriate words.

/* Remove Stop button when there’s nothing to Stop */
#stop-button[disabled="true"] { display: none; }

/* Remove Home button (never use it) */
#home-button { display: none; }

/* Remove Go button from address bar */
#go-button-stack, .search-go-button-stack { display: none !important; }

/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }

/* Remove the Bookmark Star */
#star-button { display: none !important; }

/* 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; }

/* Eliminate the throbber and its annoying movement: */
#throbber-box { display: none !important; }

/* Show keyword input box when adding a bookmark */
#keywordRow { display: -moz-grid-line !important; }

/* Make the active tab wider */
tab[selected="true"] { min-width: 200px !important; }

/* Make inactive tabs partially transparent */
#content tab:not([selected="true"]) { -moz-opacity: 0.5 !important; }

/* Show tab favicon only on selected tab */
tab:not([selected="true"]) .tab-icon { display: none !important; }

/* Change the progress bar color */
.progress-bar {
-moz-appearance: none !important;
background-color: #660000 !important; }

/* Multi-Row Bookmarks Toolbar */
#bookmarks-ptf {display:block} #bookmarks-ptf toolbarseparator {display:inline}

/* Hide AutoComplete in Address Bar */
#PopupAutoComplete, .autocomplete-tree { visibility: hidden !important; display: none !important; }

/* Use a Background Image for the Toolbars */
menubar, toolbox, toolbar, .tabbrowser-tabs {
background-image: url(”background.gif”) !important; background-color: none !important; }

/* Change Color of Active tab */
tab{
-moz-appearance: none !important; }

tab[selected="true"] {
background-color: rgb(222,218,210) !important;
color: black !important; }

/* Change Color of Normal Tabs */
tab:not([selected="true"]) {
background-color: rgb(200,196,188) !important;
color: gray !important; }

/* Remove the Close Button from the Tab Bar */
.tabs-closebutton-box {
display: none !important;

/* Change Cursor for Links that Open in New Window */
:link[target="_blank"], :visited[target="_blank"],
:link[target="_new"],   :visited[target="_new"] {
cursor:  crosshair; }

/* Remove Web Search from Tools Menu */
menuitem[label="Web Search"] { display: none; }
menuitem[label="Web Search"] + menuseparator { display: none; }

This last one is particularly good because now you can clean up your Firefox menus and get rid of things that you don’t need in your menus. The Tools menu is especially guilty of this. For example, I have never needed the Error Console or Page Info, so using userchrome.css, I can now hide them from view. You also tend to get a lot of unwanted menu add-ons when you install new extensions or install new software.  You can now get rid of them by making a small addition to the userchrome file.

They are still there if you ever want to bring them back in the future. They are just now hidden so you don’t see them anymore. The menus are now nice and tidy, showing only the things you actually need right now.

However, saying that, there ARE some things in the menus that the userchrome.css file didn’t seem to be able to hide. There are a couple of things in the bookmarks menu that I wanted hidden and the userchrome.css file failed. There’s also an “Add To Evernote” option in Tools that I wanted hidden and that defeated userchrome.css too. So userchrome.css doesn’t seem to be 100% guaranteed to work.

Plus remember that the userchrome.css file can be copied and backed up to a portable USB drive. So if you use more than one computer, you can copy your userchrome preferences to another Firefox profile. Also, if you decide to re-install your Firefox browser one day, you can overwrite the new userchrome.css file with your old one containing your preferences and tweaks. It’s only a text file, nothing more.

One thing I haven’t been able to work out yet and maybe the readers can help out – how to change the colour of my Firefox browser by tweaking the userchrome.css file. I haven’t been able to find out how to do that. Does anyone know? If so, please put me out of my suffering by revealing all in the comments!

Picture Credit : Flod