Tip Details Add a Related Tip

Rate as: Positive Negative

Adjusting the Firefox search bar

I love the search bar in Firefox, I think it's one of the best ideas ever. I don't even have a bookmark to search Google anymore, all I do is use the widget that's already there. The one problem I have though is that it is too small for me to easily read. The widget itself is small, and the size of the text in the widget is too small. After much experimentation, I've figured out how to adjust the size and the font used in the search bar.

I was able to change the search bar as shown here:

==>>

The key is the userChrome.css file. This is a file used by Firefox which allows mere users like ourselves to define the look and feel of the browser and the components. If you know where your userChrome.css file is, you can skip the explanation on how to find/get one and go directly to the Editing CSS section below.

Finding userChrome.css
----------------------
- To start, visit this site: http://www.mozilla.org/support/firefox/edit#profile. This site shows the location of your profile folder based on the type of machine you are using. Using this page, locate your profile folder.

- In your profile folder, there is a directory called chrome go in there.

- If there is a file called userChrome.css, you have found the file you need to edit. Open it in an editor. If there is no such file, there should be a file called userChrome-example.css. Copy this file somewhere else, rename it to userChrome.css and put that file back in the chrome directory. You now have a userChrome.css file that you can edit.

Editing CSS
-----------
- Open the userChrome.css file and add the following text to it at the bottom:

/* 
 *	This sets the width of the search bar 
*/
#search-container {
	max-width: 		250px 	!important;
	width: 			250px 	!important;
}

/* 
 *	This adjusts the font size/weight of the text in the search bar 
*/
#search-container .searchbar-textbox,
#search-container .textbox-input-box {
	font-size: 		14px 	!important;
	font-weight: 	        bold 	!important;
}

- To adjust the width to your liking, adjust the 250px value to one that you like.

- To set the font size to your liking, you can adjust the 14px value to one that you like. If you like the default as it is, you can just remove this line.

- The font-weight line results in the text in the search bar being displayed in bold. If you don't want the text to be bold, you can remove this line.

Once you have edited the file to your liking, save it. Then you need to close Firefox completely and restart it. Once it restarts, your changes will take effect. It may take a couple iterations, but using these controls you can adjust the Firefox search bar so that it works for you.
Rating: 100% positive, 1 Vote
Categories: firefox browsers hack
Added: on Jun 14, 2007 at 4:56 pm
Added By: rlansky
Searches: file firefox search bar userchrome.css

Comments on this Tip

Add a Comment
There are no comments for this tip
Your Comment:
(how to format)
Rate This Tip:

Verify Humanity:
Sorry, we know it's annoying, but please enter the characters shown in the image to the left so that we know you're an actual person and not an evil spammer. Thanks.
       

Related Tips

Use non-compatible plug-ins in Firefox 3

100% positive, 0 comments
– Tip added by an anonymous user on Jan 13, 2008 at 8:13 am

Opening Firefox search results in the same tab

100% positive, 0 comments
– Tip added by an anonymous user on Oct 02, 2008 at 4:07 pm

Change the default domains in Firefox

100% positive, 0 comments
– Tip added by an anonymous user on Oct 01, 2008 at 1:34 pm

Download protected images from flickr

100% positive, 0 comments
– Tip added by an anonymous user on Aug 05, 2008 at 3:36 pm

running multiple firefox versions on a Mac

Categories: browsers firefox Mac
66% positive, 1 comment - last added on Jun 18, 2008 at 7:58 am
– Tip added by an anonymous user on Jun 18, 2008 at 7:53 am

Changing Firefox startup behavior

100% positive, 0 comments
– Tip added by an anonymous user on Jul 19, 2009 at 10:33 am

Or simply run multiple profiles with Firefox

Categories: browsers firefox Mac
100% positive, 0 comments
– Tip added by an anonymous user on Mar 09, 2009 at 10:33 am

Create your own mash-ups on the fly with Ubiquity

100% positive, 0 comments
– Tip added by an anonymous user on Aug 28, 2008 at 7:43 am

Adding search engines to Firefox

100% positive, 0 comments
– Tip added by an anonymous user on Aug 26, 2008 at 8:13 am

Add opera-like stats to firefox

100% positive, 0 comments
– Tip added by an anonymous user on Aug 25, 2008 at 3:52 pm

Better Firefox Tabs

100% positive, 0 comments
– Tip added by an anonymous user on Aug 19, 2008 at 6:58 am

Using GMail in Firefox for mail links

100% positive, 0 comments
– Tip added by an anonymous user on Jun 13, 2008 at 8:26 am

Turn on visual tab previews in Firefox 3.6

no ratings, 0 comments
– Tip added by an anonymous user on Nov 05, 2009 at 7:10 am

Recovering Autoscroll in Firefox

no ratings, 0 comments
– Tip added by an anonymous user on Jun 05, 2009 at 7:59 am

Save space on your Firefox toolbar

Categories: firefox add-ons browsers
no ratings, 0 comments
– Tip added by an anonymous user on Jan 06, 2009 at 1:59 pm

Move the firefox sidebar

no ratings, 0 comments
– Tip added by an anonymous user on Sep 06, 2008 at 11:35 am

New tab behavior in Firefox

no ratings, 0 comments
– Tip added by an anonymous user on Sep 02, 2008 at 9:39 pm

Opening URLs in a new tab

no ratings, 0 comments
– Tip added by an anonymous user on Jul 28, 2008 at 3:17 pm

Saving passwords in Firefox

no ratings, 0 comments
– Tip added by an anonymous user on Jul 22, 2008 at 7:48 am

Safe surfing at work

no ratings, 0 comments
– Tip added by an anonymous user on Jul 07, 2008 at 9:35 am