Tweaking Firefox with CSS

I’ve only recently discovered the power of Mozilla’s ‘user content’ files that reside in the profile directory. I’d created a user.js file to add preferences for things like pipelining, but I’d never looked into the others – ‘userChrome.css’ (for tweaking the interface), and ‘userContent.css’ (for tweaking the web page display).

Here are the tweaks and customisation that I’ve done to my copy of Firefox to give you an idea. First of all, make life easy for yourself and install Chris Neale’s ChromEdit extension. This allows you to edit the user files from within Firefox. Once you’ve restarted, ‘Edit User Files’ will appear under the Tools menu.

userChrome.css

Firefox is a an XUL application which means that the display of the interface is controlled by the same CSS we all know and love. The only real hard part is finding the name for each element – something that DOM Inspector tool is good at revealing.

Copy and paste this first example into userChrome.css, and the changes will take effect when Firefox is restarted.

download {
 border-bottom: 0px !important;
}

This removes the dashed line beneath each item in the Download Manager. By giving the rule priority – !important; – we can make sure that this overrides rules in the default theme. This one prevents the ‘throbber’ (spinny thing on the OS X toolbar) from displaying, something thats hard to get rid of:

#throbber-box {
    display: none !important;
 }

This also makes it easy to make small interface tweaks without having to create a special theme. In order to know what rules to overide, you might find it easier to find the classic.jar file inside Firefox>Contents>MacOS>Chrome and unzip it. This is where all the pinstripe theme CSS is kept.

Here, I’ve changed the appearance of the tabs slightly with new images to make the corners less rounded.

tab[selected="true"] > .tab-image-right {
    background: url(activetab-right.png) no-repeat !important;
}
tab[selected="true"] > .tab-image-left {
    background: url(activetab-left.png) no-repeat !important;
}
tab[selected="true"] > .tab-image-middle {
    background: url(activetab-middle.png) repeat-x !important;
}

Place the images into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).

userContent.css

With this file, we’re going to try and improve Firefox OS X’s form widgets. If you’re unfamiliar with the term ‘widgets’, it refers to the various form elements – input, textarea, select etc. These aren’t native in the OS X version, and they may never be, but here are some rules that you can drop into the userContent.css file to improve the form buttons a little:

input[type="button"],
input[type="submit"] {
    font-size: 12px !important;
    font-family: 'Lucida Grande' !important;
    background: #eee !important;
    -moz-border-radius: 18px !important;
    padding: 1px 6px !important;
    border: 1px solid #ccc !important;
    border-bottom: 2px solid #999 !important;
}

Here’s the result:

Unfortunately, the aliasing on a Mac is a bit ropey, so keeping the border quite light helps to hide this a little bit. Its something that I’m sure someone can take further, but at least its an improvement on the older PC style widgets. (Anyone know of a way of applying a background image to an ?!).

I’ve also had a go at form fields, but there is less you can do with these. If you use these rules then at least they don’t have that harsh appearance:

input[type="text"],
textarea {
    font-size: 12px !important;
    padding: 1px 3px !important;
    font-family: 'Lucida Grande' !important;
    border: 1px solid #999 !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 2px solid #c3c3c3 !important;
    border-right: 2px solid #c3c3c3 !important;
    border-top: 2px solid #989898 !important;
}

Tags: code, css, firefox, themes