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

Troika #33: Endings

18 Feb 2019

Identity Design discussion on Elastic Brand podcast

23 Jan 2019

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

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

Instagram Hickstagram

  • 18 Feb 2019

    Troika #33 is out, for pleasuring your lug-holes! Link in the bio!

  • 17 Feb 2019

  • 15 Feb 2019

    I didn’t manage to do a single episode of the Troika Podcast in 2018, but I’ve managed to record one now. Doing the whole process on my iPad Pro is wonderful! Episode 33 coming soon…

  • 14 Feb 2019

    That time of year when I keep marvelling at “Still light at 5!” On my way home…

  • 03 Feb 2019

    Black-headed Gulls huddled together on the ice at Rushy Common. #birding #digiscoping

  • 02 Feb 2019

    Found a bundle of things from my birth while at my Dads today. Leaflets on maternity benefits, welfare services and my weight card (Johnathan? Have I been spelling my one name wrong all these years?!)

  • 01 Feb 2019

  • 01 Feb 2019

  • 27 Jan 2019

    For her birthday last year, some of Leigh’s chums clubbed together bought her a gin blending weekend at the Plough in Clanfield. We booked it for January (when it would be needed most). It was like a potions class, and after a lot of smelling, she now has a gin that tastes like pencil shavings! It’s even nicer than it sounds!

  • 23 Jan 2019

    Pondering about pictograms - we’re going to need a new symbol soon. #icons #pictograms #symbols #representations

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