This is a third try at making Mac Firefox’s primitive-looking HTML widgets work with the design of Pinstripe. This time I took care to make the styles play well with others. For instance these styles won’t override CSS set by a web page in most cases.
Even though I’ve been working closely with Firefox and Thunderbird for over a year now, I’m amazed at the attention it’s receiving. Not actually surprised though. I’ve always thought of Mozilla as being full of potential. It’s great to see Mozilla technology being given its due.
My own involvement with Mozilla has been very rewarding so far. Thank you to Ben Goodger and Dave Hyatt for bringing me into Firefox. Thanks to Scott MacGregor who helped me land the first version of Pinstripe Thunderbird in CVS when I barely knew what I was doing. Thanks of course to Stephen Horlander who has been a great collaborator. He has brought great style and attention to detail to the Firefox and Thunderbird themes.
What’s next? Well, it’s easy to design something to death. I’d like to take a step back from the Firefox themes for a little while, move on to something else and then come back and consider Firefox with a fresh dose of perspective. I’d like to write a style guide for Pinstripe/Winstripe for extension developers. There’s been talk of a Thunderbird theme for Windows and maybe even a Nvu theme.
Here’s a followup on my attempt to make the HTML widgets on Mac Firefox presentable. I’ve had to make some compromises here to get the widgets to look nice, for instance I force the background-color and -image on buttons. And text box borders usually use my colors rather than the ones specified by the web page CSS. For these reasons these styles would probably not be acceptable for inclusion in Firefox, but in most cases I’ve found these to be more comfortable than the primitive default widgets.
Instructions: Close Firefox. Right-click on your Firefox application, choose “Show Package Contents”, and then open the Contents > MacOS > res folder. Make a backup copy of your platform-forms.css file. Then copy these files into the res folder:
Important: If you followed my instructions in the previous blog post to modify your userContent.css file, either delete it or remove my additional code before trying out the new and improved widgets.
A little bug: I’m not sure how I can get rid of the black border around the inside of the selected select box. Please let me know if you have any comments or suggestions for improvements!
Inspired by Jon’s attempt to make Mac Firefox HTML form widgets a little easier on the eyes, I’ve taken a shot at making a set of widget styles that blends with Mac Firefox. It has focus rings too!
Instructions: Download the userContent.css file and copy it to your ~/Library/Application Support/Firefox/Profiles/(profile name)/chrome folder. Or add the code within to your existing userContent.css file. It’ll look best on a recent Firefox branch build.
You can find up to date builds of Mozilla Firebird in this MozillaZine thread. I have never used one of these builds so I can’t comment on them. YMMV.
Work on the Pinstripe theme continues at a slow pace. My day job has been soaking up most of my free time. The bulk of the time I spend on Pinstripe is on creating icons. As I’ve said before, I’m not a “graphic designer” so it takes me a long time to come up with something good. If anyone out there would like to lend a hand at creating icons, drop me an email. I hope to have the next Pinstripe version available for the release of Mozilla 1.5 final.