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.
- 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.
- 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.
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 |

