How do I alter the size of the web address bar?
The space for the address bar is so large that the size of the 'Search' box (Google in my case) is tiny. How do I reduce the size of the web address box so that I can make the search address box bigger? Note: this is nothing to do with the toolbar or customising that - it is about customising the layout of the whole bar and changing the amount of space on the bar that each element takes.
Réiteach roghnaithe
The location bar and search bar are controlled by a flex property and take (combined) all available space on the Navigation toolbar.
- You can change the relative size of both with the resizer between the two bars, but that won't change the space that both take together. Adding other items to the Navigation toolbar will reduce the sizes of the Location and Search bars.
- You can also add Space elements at the right of the bar in the View > Toolbars > Customize OR Firefox button > Options > Toolbar layout window to make the location bar shorter.
You can set a maximum width for both/each of the bars with code in userChrome.css below the default @namespace line. With this method, the widths will remain fixed until you change them in the userChrome.css file.
- The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.
Below this line in userChrome.css:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
add one or both of these lines, setting the pixels (i.e., 400px, 200px) to the width you want; include the # sign at the beginning of the line(s):
#urlbar-container { max-width: 400px !important; }
#search-container { max-width: 200px !important; }
Other - Update to Firefox 19.0.2, a security update released today
Read this answer in context 👍 3All Replies (5)
Réiteach Roghnaithe
The location bar and search bar are controlled by a flex property and take (combined) all available space on the Navigation toolbar.
- You can change the relative size of both with the resizer between the two bars, but that won't change the space that both take together. Adding other items to the Navigation toolbar will reduce the sizes of the Location and Search bars.
- You can also add Space elements at the right of the bar in the View > Toolbars > Customize OR Firefox button > Options > Toolbar layout window to make the location bar shorter.
You can set a maximum width for both/each of the bars with code in userChrome.css below the default @namespace line. With this method, the widths will remain fixed until you change them in the userChrome.css file.
- The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.
Below this line in userChrome.css:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
add one or both of these lines, setting the pixels (i.e., 400px, 200px) to the width you want; include the # sign at the beginning of the line(s):
#urlbar-container { max-width: 400px !important; }
#search-container { max-width: 200px !important; }
Other - Update to Firefox 19.0.2, a security update released today
Athraithe ag TheOldFox ar
Thanks, the code in userchrome sorted it. Could not get the double-headed arrow on the toolbar to re-size it that way. Was already updated to 19.0.2 earlier today.
Note that the resizer appears in normal mode, so not in customize mode.
Also some customizations may prevent the resizer from appearing.
I found all the answers above not very helpful, partly because they assume everyone knows all the terms that Firefox use for parts of their screen. I am sure all the answers above are technically better than the following, but have a disadvantage that they are unintelligible to non-techies. I suspect 99% of Google searches on this topic are looking for something as simple as the following. By trial and error, resizing for dummies:
1) Right click on one of the toolbars, or the blank area of the tab bar until you get a menu which says "customize", click on that.
2) Remove any elements or objects between the address/url bar and the search bar by select the elements or objects and dragging them to the left side of the address bar, or the right side of the search bar.
3) The two bars should now exist with a a very small space between them.
4) Exit the customize mode.
5) If you place the cursor between the 2 bars the double headed arrow appears. Slide as required.
6) If you want to replace the elements or objects back between the bars, enter customize mode again and drag them back. Exit customize mode when finished.
Athraithe ag cwhit ar
Here is an answer that may help you. Move the search window from the top to the add-on bar at the bottom of the page. Move your mouse to the area at the top where Firefox tabs are and left click. Set the add-on bar as on. Left click again and select customize. Take the mouse, now a hand, cover the search bar, right click and hold it down, drag the search bar to the add-on bar where you want it and let it go. I like this because now both the address and search bars have plenty of room. Customize allows you to put the icons where ever you want. There is also an add-on that gives you another add-on bar to place on the left or right side of the browser Now lots of room for icons. In fact, there is also an add-on bar at the top where the menu bar is located. Have a good day.