Pretty Widgets

Posted on by Kevin

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!

widgets.png

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.

Published by Kevin

46 thoughts on “Pretty Widgets”

  3. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  12. Fields look strange if they have a background color set. You can see the white part of the shadow.

  16. 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.

  20. 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.

  21. 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.

  25. 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.

  26. 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?

  27. 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

  33. 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.

  36. 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.

  37. 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) 😉

  40. 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?

  41. … 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

  42. Check out for mortgage company
    Flmortgagefor Florida mortgage information and personalized mortgage rate quotes from a network of qualified Florida mortgage brokers and lenders.

  43. 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…

  44. 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…

  45. 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.

  46. 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

Comments are closed.