userChrome.css

Prologue:

So, back in the day, I had changed the monitor for my PC. This was a bigger screen than my last one, but as is always advised with the bigger screens, it had to be kept somewhat further away from my eyes than I was used to.

While most of the things worked out fine, whilst using Mozilla Firefox, the size of the address box and the upper pane seemed to be far smaller for my liking. Following are the options that I tried out

1. Normal Zooming In : For most cases, normal zooming in works out in helping to resolve size issues. However, here I realized, bug or otherwise, zooming in does not increase sizes of the address bar and the upper panes.

2. about:config : This is one of the better things that Mozilla Firefox has. Go to a new tab, type about:config . Click OK when it prompts its warning. In the pane that appears after that, type layout.css.devPixelsPerPx and type out the values that you want. Once you click OK, you see that the zoom values of the browser change. However, here also, I realized that these values, bug or otherwise, only change the zoom portions of the main page. The upper panes, either shrink with increasing zoom requirements, or just remain as it is.

3. userChrome.css : This is when I discovered this hunk of a tool to make the browser look the way I want it to. With this, you can practically modify any version of the browser that you wish to. Kudos to Firefox for providing this.

userChrome.css

In this section, I'll give details on how to work with our userChrome.css file to modify the visual elements of our browser. The task at hand is to get a workarond to increase the size of our address bars and the upper panels of the browser window.

Following are the steps to modify the userChrome.css file:

• Open Mozilla Firefox

• Go to the Firefox Menu, click on help .

• Once the pop-up menu opens, click on the troubleshooting information button.

• A new page will open. This will contain your various sections to help you out.

• In the Application Basics section, Go the Profile Directory cell. Click on the Open Directory button.

• This will open the requisite Firefox directory.

• Look for a folder called, chrome. If you find it, great, else create one of your own. Enter it

• Once inside the folder, create the file ( unless already present ) , userChrome.css . Make sure you spell it correctly and make sure it's not stored as a .txt file. Check out it's properties to confirm.

• Once you have created the file, open it using the default browser editor. And Add the following code to it.

#urlbar {font-size: 15pt !important}
#TabsToolbar { height: 35px; font-size:15pt !important; }
#PopupSearchAutoComplete .autocomplete-richlistbox { font-size: 15pt !important;}

• Once this step is complete, close the file and restart Firefox. The changes should have taken effect.

Disclaimer:

There are cases where doing all this does not work. There is a reason for it. In the newer versions of Firefox, the support for this file has been disabled. This has been done so as to speedup and improve the Firefox loading/startup time and performance.

So, in order to re-enable functioning of these files, follow the following steps:

• Go the about:config page. The steps for reaching this page have been detailed above.

• Once you reach there, type the following in the search pane :

toolkit.legacyUserProfileCustomizations.stylesheets

• To restore the use of the CSS file, double click on this preference and set it to true. Alternatively, you can also right click on it and click on the toggle option.

• Once you have done all this, restart Firefox

Last word

So, now we come at the end of our post. Firstly, Thank You for reading on till here, I hope you got some real kick discovering this wonderful feature about Firefox. For more such content, please do subscribe. And in case of any discrepancies, do comment and let me know, or even get in touch personally through emails. Ciao!