Firefox and Thunderbird userChrome.css Tricks

If you’re like me, you have big oafish paws and don’t like to hit very tiny little buttons on your screen. A more genteel way of saying this is that onscreen buttons you use all the time should be bigger than others to help you get to them faster with the mouse. This is referenced back to Fitt’s law, which is a model to describe how fast people can point at a target of given width. (The short version: People can point to bigger targets faster than smaller targets)

Anyway, really what I want to talk about is how to make the “Back” button in Firefox much wider. All you need to do is add or modify a file called userChrome.css. This file will live in your Firefox user directory. On unix, this directory will be ~/.mozilla/firefox, and in Windows, it will be in C:\Documents and Settings<username>\Application Data\Mozilla\Firefox. Note, that in Windows, your Application Data directory is normally “hidden”, so you will have to go into your folder options to make hidden folders visible.

Within the firefox user directory, go to Profiles/????????.default/chrome. In that directory you should find your userChrome.css. If it doesn’t exist, you can add it yourself. There should be an example file in that directory called userChrome-example.css. Rename this to userChrome.css and then you can add to it the css code described below.

This file is a great way to make changes to the way that firefox looks without too much hassle. For instance, if you want menus to highlight with navy blue like Windows XP, (instead of the pseudo-3D default behavior,) see these instructions.

To make the “Back” button bigger, add the following text to your userChrome.css:

/* make Back button big! */
toolbarbutton[label="Back"] {
    min-width: 10.0ex !important;
}

The first line is just a comment. Next, we say that we’re going to apply a style to a toolbarbutton with label property equal to “Back”. We assign a minimum width that is in “ex” units, which is proportional to whatever font we’re using. And finally we say that it’s “!important” to make sure that we override the default behavior as defined in the mozilla css code.

In a similar way, you can get Thunderbird to make the “Send” button very large on the compose window. Find the thunderbird userChrome.css in a similar place in the .thunderbird (unix) or Thunderbird (Windows) directory structure. Then add the following code to userChrome.css:

/* make Send button big! */
toolbarbutton[label="Send"] {
    min-width: 10.0ex !important;
}

Voila! Now you can write embarrassing drunken emails, and still have no problem mousing to the “Send” button. You’re welcome.