Resize Firefox Search Bar
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.
for explanation about what this rule does, see my comments at redemption in a blog:
http://blog.codefront.net/archives/2004/04/23/outsearch_with_firefox.php#comment1
the main article covers various methods to perform searches in firefox along with several tips.
Please try my extension that adds some pretty neat functionality to the Search Bar you mention here…
You might like it…
http://lookahead.mozdev.org/installation.html
/* Make the Search box flex wider */
#search-container {-moz-box-flex: 800 !important;
}
#searchbar {
-moz-box-flex: 400 !important;}
the 2nd line is needed to change the actual size of the text box.
(choose numbers to suit) without it you get a smaller url bar and the search bar stays at the same size!
chrome edit currently isnt working
so you need to find your profile
and create userchrome.css
find userchromeExample.css
add the lines to it and save as
userChrome.css
Yeah… that doesnt seem to cut it for me.
Maybe its the theme I’m using? (Phoenity on 1.0PR)
doesnt seem to work for me either.
I used your chrome edit with a previous version of firefox to change the userchrome.css and it worked.
but manually doing it doesnt seem to work. I too am using a theme now. Could that be the problem?
I’m having the same problem, and turning off my themes (so I’m just using the default theme) didn’t help.
simply thx
I was wanting to do that for a while.
-todd
Now there is an extension which allows you to do this:
https://addons.mozilla.org/extensions/moreinfo.php?id=349&application=firefox
[...] Other sources: Resize Firefox Search Bar Make a Rollyo Firefox search plugin Learn to Create a Firefox Search Plugin in Less Than 2 Minutes [...]
In Firefox 2.0 you’ll need to do this instead (change 250px to suit you):
/* Make the Firefox Search box flex wider */
#search-container, #searchbar {
width: 250px !important;
}
That still doesn’t work for me in Firefox 2, and I don’t use themes.
This is a waste of time. It doesn’t work.
How do I increase the width of my search bar like on Culture Lounge ?