Home > Articles

  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

Customizing Firefox

You can find many tips for modifying Firefox to your liking by reading the forums, searching mozilla.org, or using a search engine.

Some of the modifications use a simple extension such as that used to resize the search bar (which is ridiculously short). Install ResizeSearchBox. Close and open Firefox. When it opens, instructions appear on the left on how to implement it.

You can implement this same feature and many other interface modifications with ChromEdit. ChromEdit makes it easy to create and modify prefs.js, userChrome.css, userContent.css, and user.js—the files that hold much of Firefox's customization information. No ChromEdit means having to create these three files, put them in the proper folders, adding the customization details, and saving the file. With ChromEdit, open the editor from within Firefox, paste the new information...and nothing more is needed.

After installing ChromEdit and doing the usual closing and reopening of Firefox, click Tools > Edit User Files to open the ChromEdit window (it has a tab for each file). Just copy the information in the correct file and then click Save.

For our first example, let's make the search bar wider. Copy the following lines into the userChrome.css tab of ChromEdit at the bottom or top. Change 325 to whatever number you prefer. (It may take a few tries before the search bar is the preferred length.)

/* Widen the Search bar */ 
#search-container {
width: 325px !important;
#searchbar {
-moz-box-flex: 325 !important;

Easy, right? Many configuration options have become extensions like the ResizeSearchBox extension, but there are still lots of things you can do using ChromEdit. Customizing Mozilla provides examples. If you want to know whether or not a link is JavaScript, you can add the following lines to userContent.css to give such links a different color. FF99CC makes the link pink. Change it to whatever color you want.

/* Change cursor for JavaScript links */ 
a[href^="javascript:"] { 
cursor: move; 
color: #FF99CC !important; 

To move the sidebar that appears on the left over to the right side, add the following lines to userChrome.css.

/* Place the sidebar on the right side of the window */
window > hbox {
window > hbox > * {


Modify the toolbars by right-clicking any toolbar and selecting Customize from the menu. While the Customize Toolbar window is open, click and drag the toolbar buttons to their new locations. If you want to get rid of a useless icon, click it and drag it into the Customize Toolbar window to dump it. Toolbar items can go on the menu bar (File, Edit, View, and so on).


You can move the bookmarks and folders anywhere you want. To move a bookmark, select it, click and drag it to where you want to put it, then let go of the button. To move a folder, use the same method (except press the Shift key while dragging).

Bookmark the currently opened page by dragging the icon from the location bar into Bookmarks or to the toolbar with other links to Web pages. Drag an icon from the location bar to the desktop. Next time you want to go to the Web site, click it from the desktop; it will open. Drag any file that Firefox can open—including HTML, JPG, GIF, and text files—into Firefox and it will appear. An HTML file has the Firefox icon next to it. Double-click it; it will open in Firefox.


Firefox has a nice interface, but (as with all things) you might get tired of it. There are many themes available to change it up. Look around the themes site, click the theme of interest, and then click Install Now. (It's best to close Firefox before using the theme.) To change themes, go to Tools, Themes, and then select the one you want.

  • + Share This
  • 🔖 Save To Your Account