Click on the thumbnail for a full screenshot.
Install the Pinstripe Theme (requires Firefox 2.0RC1 or later on Mac OS X)
]]>These are simply stand-alone versions of the Firefox themes before the Firefox “visual refresh” landed. The themes require at least Firefox 2.0b1. I will work on them in the coming weeks to smooth out the rough spots. I tested the themes on my machines but they may be buggy. Please let me know if they don’t work for you.
Install Pinstripe FF Classic (Mac only)
Install Winstripe FF Classic (Windows only)
Download Pinstripe FF Classic
Download Winstripe FF Classic
By the way, you can get the Illustrator and Photoshop files used to make these themes here.
]]>Winstripe has been the default theme on the Windows version of Firefox for over two years. Man, how time flies. To explain the odd name, the Pinstripe project started in 2001 as an attempt to make the appearance of the Mozilla Suite fit in with the Mac OS X desktop. Icon designer Stephen Horlander joined the project and took the icon artwork to a new level of usability and polish. The Windows version of Pinstripe, dubbed “Winstripe”, became the default look on the Windows version of Firefox 0.9.
I’d like to see you take the artwork and remix it, mash it up with your own projects, use the artwork as the basis for your own Firefox themes. If you’re not familiar with Firefox themeing, start with the documentation at the Mozilla Dev Center. There’s an active community over at the Mozillazine Themes forum that’ll help you get up to speed. If creating a theme for Firefox looks daunting but you have a great idea, create a mockup of your idea and share it on the Themes forum. You might find people to help you turn your idea into a real theme. Enjoy!
The artwork source zips contain Illustrator and Photoshop files. The majority of the icons were created by Stephen Horlander with contributions by Kevin Gerich. You can use, modify and distribute them under the Mozilla tri-license.
Pinstripe Browser Art (3.6MB)
Winstripe Browser Art (5.9MB)
]]>It’s puzzling that Mozilla has already applied for a trademark on the web feed icon: http://tarr.uspto.gov/servlet/tarr?regser=serial&entry=78836825. In light of Mitchell’s recomendation against the formal trademark option, does this mean that the Mozilla’s application will be withdrawn?
There’s also the question of the icon image license. Mitchell’s post implies that the feed icon is not subject to an open source license like the rest of the Firefox code. This is news to me. When Stephen Horlander and I checked in our images for Firefox and Thunderbird, we were told that they are covered by the Mozilla tri-license. In fact part of the move to replace the Qute theme before Firefox 1.0 was driven by the desire to have artwork that is free of proprietary licensing. I hope Mozilla will clear this up soon.
We should move quickly to come up with an icon kit that web sites can use and a clear set of usage guidelines. There has already been some good starts by Khoi Vinh, Matt Brett and others. I look forward to the discussion.
Update: Mitchell Baker posts details about the Mozilla Foundation’s trademark application.
]]>Single select boxes were the most problematic. How do you fuse the aqua pill-like control with a CSS background or border color? I think the answer is: You don’t. I decided to abandon Aqua for my own hand-rolled look which hopefully is Mac-like enough to blend with the other controls, but flexible enough to look good when CSS styles are applied.
The look for the select box is created with semi-transparent PNG images that allow the background color to show through. You’ll notice the widget also respects your choice of either the Blue or Graphite OS theme. Here’s a build off the Firefox 1.8 branch with the new Mac widget styles. Check it out and let me know what you think.
Download: ff-kmgerich-2006-03-11.dmg.gz, 9 MB
If you want a less experimental build of Firefox with native looking form widgets, check out Neil Lee’s G4 and G5 optimized builds.
]]>Why a Thinkpad? I’d like to be able to build Firefox and Thunderbird on Windows and Linux. I’m very slow in getting to my Windows Firefox bugs because of the lack of a good development machine. Now I have no excuse I’d also like to develop themes for GNOME at some point.
I’m not willing to give up on Mac OS X yet though. The Titanium Powerbook snared me in the year 2000 with its good looks, wireless networking, and wide screen. It taught me to overcome a general dislike of laptops: Small screens, cramped unergonomic keyboards, expensive upgrades, etc. Mac OS X was a breath of fresh Unixy air after going through the pain that was Linux at that time.
The machine itself feels good, if a little heavy. The keyboard is nice and chunky, not mushy like some Apple laptop keyboards. It’s got a 15″ screen that’s not quite as bright as the Powerbook display. The native resolution is 1400×1050. To my surprise, text looks absolutely gorgeous in Linux and less so in Windows.
My distro of choice is Ubuntu Linux. The install went very smoothly and most of my hardware was detected right away. After finding some missing software (mplayer, thinkpad utils, Mozilla development tools, etc.), and FTPing my Firefox and Thunderbird profiles from the Powerbook, I’m off and running. My only problem is that my system seems to freak out when it wakes from sleep, but I consider that a minor annoyance. In my previous encounters with Linux, it seems that I’d have to compile a new kernel if I wanted to do *anything* slightly non-standard, like have scanner drivers that work.
I’ll have a report about the Ubuntu user experience shortly
]]>There are bugs here, the most prominent is the inside of the URLbar that gets a focus ring when it’s not supposed to. Any ideas? I hope you’ll help me test these styles and let me know of any bugs.
Instructions: Download this file: firefox-widgets3.zip (13k) and unzip it. Close Firefox. Right-click on your Firefox application, choose “Show Package Contents”, and open the Contents > MacOS > res folder. BACKUP YOUR FORMS.CSS file. Then copy the unzipped files in, overwriting the forms.css file as you do so.
Note: This was designed to work on the recent Firefox trunk builds. It may work on older versions of Firefox, but there may be additional bugs. If you want to use these widgets on Firefox 1.0, try out Firefoxy.
Thanks to Amake for Firefoxy, the fancy widget applicator, and Garett LeSage, Kaz, and NAKAJIMA Hiroki, who expanded on my earlier widget styles.
]]>Someone tell me where I can get the Goats font.
]]>After the Pinstripe theme landed in Firebird, icon designer Stephen Horlander and I dove in to a companion Thunderbird theme. We started in early November 2003 and finally hit the “let’s stop fiddling with it and get it out there” phase in March of 2004. I’ve gone through the messages that Stephen and I exchanged during that time and pulled out a few examples of design decisions.
(Jump to comments)
Because there’s more UI in Thunderbird than Firefox, it’s doubly important to keep the icons simple and minimize the clutter. It’s a neat trick to make a UI get out of the way when there’s so much of it. Did we pull it off? I have a hard time being objective about it.
The colors started out a bit too clowny. Looking back, they seem more appropriate on Windows XP. Thankfully Stephen modified the Junk, Forward and Reply icons to use more subdued colors.
Apple’s Mail program features a paper airplane as a Send Mail icon. It’s very well done, but we wanted to avoid cliches and avoid copying Apple’s icons outright. I really liked all of the Send Mail icons that Stephen came up with, but none of the icons made us think “this is it”. The icons with the arrows on them are good, but ideally you want to use the primary elements of the icon to tell its story. We consciously tried not to overuse arrows in the theme. The last three icons were disqualified because the mailboxes might not be international enough. In the end we chose the mail slot and envelope icon and made a note to return to the icon later.
Messages in the Mozilla Suite have a 16px icon on the left side of the Subject column which indicates what type of message it is, if it has been read, if it has attachments and more. Since Thunderbird has a separate column to indicate that a message has an attachment, it seemed that all of the things indicated by the Subject bullet icon are redundant. We felt pretty confident that we could drop the Subject bullet icon entirely. Actually, not entirely – one piece of information provided by the Subject bullet wasn’t redundant. We retained the small arrows to indicate if a message was replied to or forwarded.
Stephen went on a rampage with this one to find just the right delete icon. I think he got it. There are some excellent ideas here but we went for the familiar circle with a slash.
Here are some variations on the icons in the folder sidebar. Some of the icons are just a touch complex, but we made an effort to use just one element or shape so you wouldn’t need a magnifying glass to understand the icon. Since we tried to minimize the badges that we put on the actual folder and message icons, I played around with using red dots in the background to indicate that you have new messages. In the end we just turned the folder label blue, which in retrospect, may be a bit too subtle.
Here are some variations on Mark Message as Read. I like the glasses
Strangely, when Thunderbird displays a message, the headers (From, Subject, etc) are fixed to the top of the pane and do not scroll with the message. The Bugzilla report on the issue has been open for four years. Let me say that again: FOUR YEARS. Even if there is a good technical reason why this hasn’t been fixed by now, it does make Thunderbird’s UI seem cramped when reading mail in the default 3-pane view. We used a rounded rectangle style with margins that gives the appearance that the header box is inside the message pane. The only problem with this approach is that when a message is too long for the Message Pane, the top of the scrollbars appear to be floating.
At the end this four month process, Stephen and I were pretty sick of the Thunderbird theme. It all seemed to blur together. We’ve updated the theme recently to keep up with the new features that have been added to the program, like Shared Search Folders and RSS feeds. At some point we’ll return to it and try to improve on the design armed with a good dose of perspective and thoughtful feedback.
]]>