Pretty Widgets, Part 3

widgets-three.pngThis 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.

You’ll note that the styles have moved into forms.css from platform-forms.css. That’s because platform-forms.css doesn’t seem to exist in recent trunk builds of Firefox. If you’ve used a previous version of these widgets, you should remove them before you apply these files or start with a fresh new copy of Firefox.

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.

16 thoughts on “Pretty Widgets, Part 3”

  1. Off topic, but just out of curiousity, is the general look of the Windows Winstripe theme for Firefox going to stay as it is for a long, long while or will we see changes to come soon? What version number would we consider Winstripe to be on, anyway?

  2. I’d say that Winstripe is pretty solid. It isn’t going to change radically at all, maybe get a little more polished. There are certainly some icons in Winstripe that need some lovin’. But as much as we like to tinker, the look will stay pretty much the same.

  3. I had been working with Hiro to make those widgets nice on the latest nightlies. My package is here, and is the base for Hiro’s package. With my styling, I don’t see any problems in the URL bar.

    I’ll check the difference with your latest one, see if I can come up with something.

  4. After a quick test..
    That focus ring problem is not limited to the URL bar. Open the DOM inspector, and it is there as well, any fields in the right pane. All those are input elements as well, and the URL bar, according to the DOM inspector is a composite thing made of input elements.

    With my widgets, I don’t see the problem, because I load everything from the userContent.css. (Being a nightlies user, I don’t want to be too dependent on possible changes in forms.css).

    On HTML pages, your widgets look good, except that radio buttons are positioned above the base line. I set them lower, using text-align:text-bottom. Also, the select element appears a bit smaller than a submit button, when put side by side. See
    my test file. Some people complained about that. I’m about to change my own package for this.

  5. I just commented out the rule for input:focus from the section

    button:focus,
    select:focus,
    textarea:focus,
    *:-moz-any-link:focus {
    -moz-outline: 2px solid -moz-mac-focusring;
    -moz-outline-radius: 1px;
    -moz-outline-offset: -1px;
    }

    which seems to have worked. As someone above posted, the URL bar is an input type, too, which is why it gets the border.

    Seems to be working fine for me without all inputs being styled… thanks for this, Kevin!

  6. I see Neil beats me to that URL bar problem :-/

    The URL bar use an input without type attribute, then
    input[type=”text”]:focus
    should avoid the problem, instead of input:focus
    (need some testing).

  7. A small issue – disabled fields. The earlier pretty widgets I couldn’t use on my intranet, as disabled fields are used on many of our web apps. Previously, disabled fields were not shown as such. I haven’t tested with the latest – but has this been sorted?

  8. Kevin,
    Why do you use -moz-opacity instead of opacity (without the -moz prefix) ?
    opacity is perfectly supported by FF since I think 0.8.
    Just curious…:-)

  9. Nope. No blue, sorry. 🙂 I’m not trying to copy Aqua pixel for pixel, just do something that looks like it blends in. I can’t swap in images with a color based on the OS theme you have selected. I’d rather leave the color out than be wrong 1/2 the time.

Comments are closed.