Tweaking Firefox with CSS

10 Aug 2004

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.

New Tabs

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:

Input butttons

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 <input>?!).

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:

textfields

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;
}

Recent Posts

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Instagram Hickstagram

  • 08 Dec 2018

    More Red-crested Pochard

  • 08 Dec 2018

    Wigeon + Red Crested Pochard

  • 05 Dec 2018

    A small glimmer of light on a very dark day.

  • 29 Nov 2018

    View from the office. To the left, and to the right…

  • 25 Nov 2018

    Gorgeous pre-gig food at Turtle Bay

  • 25 Nov 2018

    Lego Noddy Holder!

  • 18 Nov 2018

  • 18 Nov 2018

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom