Spin Ink

I would talk about how to widen Firefox’s menus by using a custom style sheet, known as userChrome.css, to tweak the user interface. While most users my not find this applicable, those of us who run our monitors at very high resolutions like 1280×1024, 1600×1200 or higher, will find this to be a must have Firefox tweak. This problem is most annoying and obvious on RSS feeds like those from BBC News or Digg.com for example. This screenshot illustrates the problem more clearly. Notice how some of the longer article names have been truncated with ‘…’.

When you encounter this you ask yourself, “How can I make this bookmark menu stretch wide enough to fit more of the headline?” Immediately you look in the Firefox prefences and come up empty handed. Those of you more familiar with tweaking Firefox would probably search the ‘about:config’ page for a possible ‘width’ or ‘menu’ setting. Unfortunately, there is no solution for this problem there either. I scoured Mozilla.org as well as the web in general with Google, and I even talked to the actual Firefox developers on irc.mozilla.org about the problem.

Despite all of my efforts, the above sources could not give me the a definitive list of the CSS classes used Firefox to define the user interface. All I was able to find was bits and pieces of information about how to customize the UI. As a result, I had to do a good bit of trial and error in order to figure what I needed to add to my userChrome.css file. So now I am sharing my customized userChrome.css with the world, in hopes that others who wish to widen their Firefox menus will not have as difficult of a time as I did. Just save this file to your Firefox profiles ‘chrome’ dir. Be sure to restart Firefox, and you should a have much wider search box as well as your bookmark menus will now fit much longer links and headlines. If you would like more information on editing the userChrome.css file, please visit the ‘Customize Firefox‘ Mozilla page.