::[ Empty Spaces ]:: Wandering through, a journey within.
More on Form Widgets for Gecko Browsers
Slowly, but surely we are getting there. A while ago we noted some techniques, using user stylesheets, to improve the appearance of form widgets in Gecko browsers (Firefox, Mozilla) running on OS X. Missing then were the radio buttons and checkboxes (input[type="radio"] and input[type="checkbox"]). Thanks to some input from Kevin Gerich, this gap has been filled as well. Forms on our copy Firefox look like this now.
Interesting in Kevins approach is the use of Gecko specific values for border colours, in order to add some slight embossed effect to the various fields. Radio buttons and checkboxes are drawn by using background images. Based on Kevins style sheet, Kaz also made some input, using aguablue colours instead. We’ve taken a slightly different route, a background image to simulate the OS X input fields and textarea, and using a different background image for submit buttons and the like. A focussing ring has been added as well. We’ve surfed through a number of complex forms, and through heavily styled forms, and didn’t encounter any problems. Our personalized styles overrides them all.
One small problem with this approach: this has to be installed into the Firefox package itself (instructions: control click on the Firefox.app icon, and select ‘Show Package Contents’; drill down the folders ‘Contents’>’MacOS’>’res’, and place the contents of the download (a few images and the platform-forms.css file) in there. If you’re a frequent updater (using nightly builds), you’ll have to repeat this everytime you install a fresh copy.
Download forms.tar.gz. It is not yet perfect, but vastly better then the default form styles.
[update]: We’ve made a new package available, fixing some small bugs. Some code has moved from platform_form.css to userContent.css, as it was causing display problems in some fields in the DOM inspector, the cookies alert box and others. See the instructions in the ReadMefile. In userContent.css we’ve also included a workaround for bug 262191.Download Firefox_widgets_v3.tar.gz. updated below.
It didn’t take long, Amake made a script to ease the problem(s) of reconfiguring Firefox everytime one updates (very useful for users of nightly builds): Firefoxy. While that little utility uses the code and images made by Kevin Gerich, it is very easy to play around with it and include our package. Download and unzip Firefoxy, and then right click or control click and select ‘Show Package Contents’. Drill down the folders: Contents > Resources > Widgets and replace the files by those available in our own package (everything in the folder Res). Thanks Amake.
[update 2]: A few bugfixes in my package, mostly cosmetic things. I also added some padding to the input[type="text"] and textarea to deal with the partly hidden cursor when the widget has focus (see the comments below; the cursor is actually covered by the focussing ring).
Download firefox_widgets_v4.tar.gz.
[update, December 21, 2004]: a note for users of Firefox nightly builds, after the release of Firefox 1.0.
[update, July 3, 2005] The latest version of these widgets (current release notes) is always available in the downloads section.
Comments
Commenting is closed for this article. If you have anything to share, feel free to contact us.
-
Recently posted
-
Around here
-
select a style
- grey spaces (default)
- stripped spaces (high contrast, larger fonts)
More information about these options for style and layout.
Comment by: Peter da Silva — 31.10 2004 - 01:59 UTC+9 [ # ]
Comment by: Philippe — 31.10 2004 - 08:51 UTC+9 [ # ]