Pretty Widgets, Part 2


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!

49 thoughts on “Pretty Widgets, Part 2

  1. EDIT:

    FYI: I get no radio or checkbox in’s “Quick vote” area, about half-way down the page on the right.

  2. Very nice! I noticed a problem with selected radio buttons though. If you check a radio button with the mouse and the focus stays there, you don’t see the radio_check.png image, but some weird place holder image. It looks fine after the focus leaves the radio button though. Check out my screen shot in the link below to see what I’m talking about.

  3. I’m not on a mac full-time, this is just a peripheral opinion, but I find when you can’t use native widgets, it’s best not to try to fake them either.

    That’s what I liked about the flydown, text input, and submit buttons here – they look good, but aren’t odd fakes of real OS X controls. That said, I think the radio and checkboxes do suffer a bit from this – they look a lot like the real OS X controls, but a bit different. I’d rather see them take a more unique style until we can get the real native widgets in there.

  4. wow, i’m liking it, I’ve been without a Mac for a whole month now, and every day just keeps making me miss the mac more and more, I can’t wait to try this out when I get my mac back! Finally Firefox gets a more macish feel on webpages

  5. I like it a lot, but is there any way to get rid of the blue border when you click on a link?

  6. These buttons are excellent! Thank-You! Maybe they can be added to Firefox if someone can program the old buttons to orrivide the nice ones when displaying a CSS that specifies special button attributes. Keep up the good work.

  7. One little bug I noticed: when a radio button has focus, it does display some additional border, hiding most of the background-image.

    I added to platform_forms.css:
    html|input[type=”radio”]:focus {
    border:none !important;

  8. It wasn’t clear to me that these widgets replace your previous ones specified in userChrome.css. Maybe you should mention that.

  9. Hey, I took a look at that CNN radio button issue, it seems that you get the weird button only when the radio button is depressed, and still highlighted, eg, if you click on the radio button, then click elsewhere on the page (unhighlighting) the button then looks correct. So it’s something to do with the focus.

  10. Thanks Kevin, for your great work. I’m impressed.

    Here’s my customized version of your CSS, replacement PNGs, and my “userChrome.css” which improves buttons and fonts of I’ve archived all of the files as “FirefoxSet.tar.gz” so please check it out.

    My page is written in Japanese but I think you can figure it out.

  11. I’ve also been working a bit more on this, based on what I had done a month ago. I think I’ve made some more improvements to the stylesheet (fixing the aforementioned problems with radio buttons, adding a real focussing ring on input fields and textarea, set foreground/background colours on all widgets, … ).

    One slight problem I have atm is the lack of focus ring around submit buttons. I have to investigate that further.

  12. Firefox for Linux DESPERATELY needs something like this. How about a Bluecurve one?

  13. No, only scrollbars and XUL, not HTML widgets.

    This is the default look: (specially the buttons are ugly..)

    And this is my first attempt to make your theme look like Bluecurve:

    It’s avaliable here if someone wants to try it or improve it:

    One should make a whole theme pack for Bluecurve like this, only with styled html widgets also:

  14. And the reason why they don’t use GTK style is of cource the difference between the “Sök” buttons (in the lower right) on the two screenshots.

  15. These sure look nice!

    Kevin – I noticed that you decided to stick with the current font size for controls (13 px), which is larger than what Safari and Camino use.
    Can you please have a quick look at bug 262191 (and bug 261346, which spawned it), and give your opinion? The bug will probably end up being closed as WONTFIX – but since you’re working in this area I’d like to know that you are aware of it.

  16. Looks good! I just wish this could be implemented in the actual Firefox builds so I wouldn’t have to modify each nightly I download.

  17. I can’t seem to get rid of the issue of when a radio button has focus, it displays an additional border.

  18. Kevin, you’ve done a great job and a service to the Mac/Firefox community)!

    Two minor issues that maybe someone can provide solutions so I can drop: 1) the extra border on focused radio buttons and 2) the blue borders that are created when clicking on links.

  19. This was just mentioned at Burningedge — first I’ve come across the info somehow, and delighted to find this page. Thanks.

  20. Just for the hell of it, I tried this mod on Firefox on my work PC (hey, my Mac is at home). It doesn’t look bad under Windows! The only problem is, whilst a control has focus, its border disappears (probably due to -moz-mac-focusring).

    I’m not suggesting that you should actually do one for Windows, of course, just that somebody here was crazy enough to see what would happen.

  21. Nice work – but a small problem with ecommerce apps. Disabled buttons no longer are displayed as disabled – they look like regular enabled buttons. A small (and no doubt minor update), but without it, I can’t use Pretty Widgets (especially in my corporate intranet).

  22. Aaaaack… This doesn’t work at all any more using the latest nightly builds (20041202), based on Trunk. platform-form.css isn’t recognised at all. I managed to get it partly working by moving everything into userContent.css. Works, sort of. Only thing that doesn’t work is the styling of the radio buttons and checkboxes.

  23. Is there any work being done to have native widgets in firefox? I cant seem to find a definitvie answer whether this work is something that’s being done or going to be done.

  24. Pingback: elblogg
  25. Pingback: d-_-b
  26. Pingback: Linuxart
  27. Pingback: A View From Home
  28. Pingback: VERSIONARY::BLOG
  29. Pingback: CocoaBlog
  30. Pingback: Egon's Blog
  31. Pingback: pics and titbits
  32. Pingback: PD

Comments are closed.