Resize Firefox Search Bar

by Tom Mullaly on October 31, 2004

Firefox is a great web browser and one of it’s coolest features is the customizable search bar (located to the right of the address bar). However, in my opinion, the search bar is too small. It’s fine for typing in one word search phrases, but anymore than two search words get truncated. Here is a short tutorial that will show you how to make the search bar larger.

To make the search bar longer, we need to add a couple of CSS rules to a file named userChrome.css. This file is located in your profile directory and can sometimes be hard to find. So our first task will be to install the Chrome Edit extension to make finding and modifying this file easier.

You can install the Chrome Edit Extension from : http://downloads.mozdev.org/cdn/chromedit/chromedit.xpi

After installing the extension, restart Firefox.

Next, click on the Tools menu and choose Edit User Files. You will be shown a new window that has five tabs on it. These tabs represent all of the user files that you can modify to customize the Firefox browser. The first tab will be named userChrome.css – this is the file that we want to modify.

Scroll to the end of the file and add the following CSS rule:

/* Make the Search box flex wider(in this case 400 pixels wide) */
#searchbar {
-moz-box-flex: 400 !important;
}
#search-container {
-moz-box-flex: 400 !important;
}

Save the file, by clicking the Save button at the bottom of the Chrome Edit window and restart Firefox.

Now you will notice that your search bar is bigger, and in fact will resize itself as you resize the browser window.

Be Sociable, Share!

{ 9 comments }

Comments on this entry are closed.

Previous post:

Next post: