Pretty Widgets
Posted on | August 30, 2004 |
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.
Comments
46 Responses to “Pretty Widgets”
August 30th, 2004 @ 8:53 pm
those are hot.
just for Mac or will that work with Windows builds as well?
mmm sugar.
August 30th, 2004 @ 9:02 pm
Great work! One less reason for Mac people to use Safari over Firefox.
August 30th, 2004 @ 9:36 pm
Dude. Figure out how to do this as a patch to the existing Mozilla code for Mac-only and do all the widgets, and we’ll slurp this up.
August 30th, 2004 @ 9:47 pm
Kevin, why not use the new images for buttons from
http://hicksdesign.co.uk/journal/551/native-looking-firefox-os-x-widgets
August 31st, 2004 @ 3:24 am
I need to stop visiting this blog, it’s making me want to buy a Mac.
August 31st, 2004 @ 7:07 am
GURT, I’m not sure if this will work with Windows or Linux. Windows uses -moz-appearance to style the HTML form widgets based on the OS theme.
Asaf, Jon’s buttons using the image backgrounds look great but they don’t scale. They also don’t change colors when you change the theme. I want to create styles that don’t necessarily copy the Mac buttons pixel-by-pixel, but are a little nicer than the primitive widgets that we have now.
August 31st, 2004 @ 8:34 am
It does affect Windows. But it doesn’t work quite right (I assume, since I can’t see what effect it actually has on a Mac).
Input and text areas dissapear when selected, there’s no hover effeect on buttons, etc.
August 31st, 2004 @ 8:47 am
Nice one Kevin, they remind me slightly of Opera’s own widgets. Nice style!
Asaf- Kevin’s right. The ones I came up are seriously limited.
August 31st, 2004 @ 9:16 am
Stephen, oh that’s right. The focus rings have a style called -moz-mac-focusring which is probably not available on Windows
For the button backgrounds, I use an image from the Pinstripe theme that doesn’t exist in Winstripe.
August 31st, 2004 @ 10:49 am
Can everyone please take a few minutes to test these styles on various web sites, especially those that apply CSS to form widgets? I’d like to make these styles not stomp on web page CSS too much. for that reason I’ll probably lose the gradient background image on buttons.
August 31st, 2004 @ 11:05 am
Looks great. The day draws near where I might actually consider ditching Camino for Firefox. Can’t wait!
August 31st, 2004 @ 11:23 am
Fields look strange if they have a background color set. You can see the white part of the shadow.
August 31st, 2004 @ 12:06 pm
Example URLs?
August 31st, 2004 @ 12:45 pm
Mozilla.org the search field.
August 31st, 2004 @ 12:57 pm
Even better
http://www.fred.net/dhark/demos/css/css_form_val_exp.html
August 31st, 2004 @ 2:01 pm
Ow, my eyes!
OK, two problems: First, I’m using -moz-border-*-colors to get the sunken Mac OS X text field look. It seems that web page CSS border colors do not override my -moz-border-*-colors rules.
Seeing that Safari doesn’t allow CSS in form fields at all, this might be acceptable. I could explicitly set a white background but I don’t want to override any more styles than I have to.
August 31st, 2004 @ 2:03 pm
Another heavily styled form:
http://www.picment.com/articles/css/funwithforms/step5.html
Regardless, I really like the style. Thanks for putting it together
Josh
August 31st, 2004 @ 5:18 pm
This is beautiful!
August 31st, 2004 @ 7:26 pm
http://wwwa.accuweather.com/adcbin/public/radar_menu.asp?partner=accuweather
The drop down radar menus are unreadable unless you are highlighting or mousing over an option. They sure look nice though
September 1st, 2004 @ 1:12 am
Joel, I fixed that issue by adding the following (the Lucida Grande part isn’t required)…
“input, button, select, texarea {
font-family: “lucida grande” !important;
color: black !important;
}”
Kevin, if you’d like I can slim down that CSS for you (minus my changes unless you want them). I think the same effects can be produced with less code and it makes sense to make Firefox as fast as possible. Just send me an email if you’re interested and I’ll be more than happy to help.
September 1st, 2004 @ 3:03 am
After a little browsing, I’ve come to the conclusion that it would actually be better to use the following code instead of what I posted above…
“input, button, select, texarea {color: black !important; background: white !important;}”
Do not specify a font because it will make some form elements larger than intended.
September 1st, 2004 @ 9:15 am
Lovely work, Kevin — thanks so much.
Now, if we only had proper tabindex support for these sexy form fields…
September 1st, 2004 @ 9:58 am
Macskeeball, feel free to share any changes
I’ve made a lot of changes myself and will post them soon.
September 1st, 2004 @ 11:00 am
The Windows users are drooling ATM, so I’m looking for a way to mimic these in FF/Win. I’ll keep you updated.
September 1st, 2004 @ 11:55 am
To Ethan and anyone else who wants to tab to all fields in Mozilla or Firefox:
1. type about:config in the url bar
2. in the Filter field, type tabfocus
3. double-click on the accessibility.tabfocus preference and change the integer value to 7.
You might have to restart the browser.
September 1st, 2004 @ 12:18 pm
Kevin, you’re a rockstar — I’d been missing this functionality since moving to the Mac. I’ve updated my user.js file with the accessibility.tabfocus value, and things are working wonderfully.
Is there a reason this feature is disabled by default on the Mac?
September 1st, 2004 @ 12:40 pm
Kevin, it works and looks wonderfully in Linux too, but It seems to have a problem with selects, I have to either click them thrice or keep the mouse clicked for about half a second (this is FF 0.9.3).
This is weird, I’ll have a try on my Mac when I get home.
mic
September 1st, 2004 @ 5:59 pm
Check out compusa site… button text is missing!
September 1st, 2004 @ 10:59 pm
Ok, Kevin. I’ve optimized the code, made it a little more consistent, added the enhancement I posted above, and corrected typos made by both you and me: http://macskeeball.no-ip.com/forums/tjp/userContent.css
September 2nd, 2004 @ 10:45 am
I also noticed a weird problem with selectable lists that are scrollable and not dropdowns.
Such as: http://bonsai.mozilla.org/cvsqueryform.cgi
September 2nd, 2004 @ 4:50 pm
I see no such problem with my version, Stephen.
September 2nd, 2004 @ 5:23 pm
Hmmm, well I tried both version and still get this:
http://www.noved.org/~stephen/public_files/select_with_size.png
September 2nd, 2004 @ 6:17 pm
Hi Kevin,
With the first version (I didn’t check anything else… not yet) I see an issue on mozdev’s search button.
You can see an example here: http://bidiui.mozdev.org (see the search button in the top right corner).
BTW: I think the borders should not apply image buttons, but I’m not sure if we can _always_ handle this (since you can’t use css selectors “on” css values :-/)
Mano.
September 2nd, 2004 @ 9:06 pm
What version of Firefox are you using, Stephen? I’m using the September 12th nightly and don’t see that.
September 10th, 2004 @ 1:35 am
Very nice. I hope this gets officially added to the Mac version of Firefox.
September 10th, 2004 @ 2:17 pm
Wow, much better.
These remind me of the buttons in the Milk theme. I haven’t encountered many problems. Some list menus seem to have scroll bars though.
I hope these get used for the Mac version as well.
September 13th, 2004 @ 5:35 pm
Is it just me or do these buttons not have a ‘down’ state? Using Asa’s Firefox 1.0RC-RC (or 0.10rc if you must)
September 14th, 2004 @ 12:31 pm
Hot widgets
Kevin Gerich have posted a custom stylesheet for content in Mozilla firefox (known as chrome/userContent.css. It looks really neat, its made for MacOSX (those spoiled mac-users) but works on Linux too. I have not tested it on Windows. There is…
September 14th, 2004 @ 6:24 pm
Here’s a site that kind of trips up on this mod:
http://www.pointroll.com/ShowCase/ShowCase.asp
If background colors will be forced to be white/light gray, then the foreground color should be forced, as well, to prevent any white text on light gray fields like in the above example.
September 15th, 2004 @ 2:38 pm
Piccolo mod per Firefox
È appena uscita la public preview di Firefox 1.0 che nella versione per mac porta con sé un piccolo lifting all’interfaccia, molto piacevole e sobria.
Contemporaneamente a quest’uscita, Kevin Gerich (autore dell’interfaccia di Firef…
September 22nd, 2004 @ 11:37 am
Un lifting per Firefox
Saranno anche nati per il Mac, ma questi controlli stanno molto bene anche su Linux e ora il mio Epiphany e il mio Firefox sono molto pił piacevoli da usare.
September 24th, 2004 @ 4:04 pm
This is really great!
October 4th, 2004 @ 3:16 pm
I am seeing a border added to links that I click on on Livejournal (like “comment to this post” links and such). The border appears shortly after I click and stays there until the page changes to the new URL. This is annoying and highly visible against the dark grey background of the style I set. Is there a way to remove this?
Also, wtf is with the comment above this one?
October 4th, 2004 @ 3:17 pm
… my comment is now referring to something that is not loading anymore … and I forgot my build info anyway.
Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.3) Gecko/20041003 Firefox/0.10
November 27th, 2004 @ 5:46 am
Check out for mortgage company
Flmortgagefor Florida mortgage information and personalized mortgage rate quotes from a network of qualified Florida mortgage brokers and lenders.
December 1st, 2004 @ 10:31 pm
Old Fragments
A shell script to edit text files as root in the GUI(via)”I’ve Gained Strength” (via)Making Visited Links RadicalReduce compile time with distccDesktop Managerrentzsch.com: mach_injectFunny Microsoft Q Articles From The Knowledge BaseMedia Matters for Ame