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

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

Turning off autoscroll in Firefox

100% positive, 0 comments
– Tip added by libby on Feb 25, 2008 at 4:11 pm

Turn off tool tips in Firefox

75% positive, 4 comments - last added on May 30, 2008 at 1:50 pm
– Tip added by an anonymous user on Jan 22, 2008 at 7:32 pm

Open Firefox search results in a new tab

100% positive, 1 comment - last added on Jul 16, 2008 at 11:19 am
– Tip added by foxnut on Apr 02, 2008 at 3:37 pm

Quick searches in Firefox

100% positive, 0 comments
– Tip added by foxnut on Apr 01, 2008 at 12:02 pm

Fix the Home button in Firefox 3

100% positive, 1 comment - last added on Mar 27, 2008 at 6:48 am
– Tip added by foxnut on Mar 20, 2008 at 8:34 am

running multiple firefox versions on a Mac

Categories: browsers firefox Mac
100% 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

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

Clicking the address bar in Firefox 3

100% positive, 0 comments
– Tip added by an anonymous user on May 27, 2008 at 4:49 pm

Quick copy of text in Firefox

100% positive, 0 comments
– Tip added by an anonymous user on May 12, 2008 at 7:36 am

Duplicate a tab in Firefox

50% positive, 2 comments - last added on May 16, 2008 at 12:56 pm
– Tip added by foxnut on Mar 19, 2008 at 3:12 pm

Run Firefox 2 and Firefox 3 at the same time

Categories: browsers firefox
100% positive, 0 comments
– Tip added by an anonymous user on Jan 30, 2008 at 9:28 am

Saving passwords in Firefox

no ratings, 0 comments
– Tip added by an anonymous user 1 day, 23 hours ago

Safe surfing at work

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

get search results as you type

no ratings, 0 comments
– Tip added by an anonymous user on Jun 06, 2008 at 3:48 pm

Quicker searching in pages on Firefox

no ratings, 0 comments
– Tip added by an anonymous user on Apr 11, 2008 at 7:04 pm

Zooming text only in Firefox

no ratings, 0 comments
– Tip added by foxnut on Apr 01, 2008 at 9:40 am

Setting the homepage in Firefox

no ratings, 0 comments
– Tip added by an anonymous user on Mar 19, 2008 at 9:30 am

Firefox page navigation

no ratings, 0 comments
– Tip added by an anonymous user on Feb 21, 2008 at 10:50 am

Never lose form text entries again

no ratings, 0 comments
– Tip added by matesh on Feb 03, 2008 at 9:39 am