Pretty Widgets, Part 3
Posted on | January 23, 2005 |
This 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.
Comments
16 Responses to “Pretty Widgets, Part 3”
January 23rd, 2005 @ 10:11 pm
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?
January 23rd, 2005 @ 10:16 pm
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.
January 23rd, 2005 @ 10:17 pm
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.
January 23rd, 2005 @ 10:21 pm
Thanks Philippe!
January 23rd, 2005 @ 10:48 pm
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.
January 23rd, 2005 @ 10:54 pm
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!
January 23rd, 2005 @ 11:12 pm
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).
January 23rd, 2005 @ 11:16 pm
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?
January 24th, 2005 @ 7:07 am
OK, I’ve updated the firefox-widgets3.zip file with a a fix for the focus rings and disabled text boxes.
January 24th, 2005 @ 8:52 am
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…:-)
January 24th, 2005 @ 9:38 am
Habit, Philippe. You’re right, I should get in the habit of using opacity
January 24th, 2005 @ 7:34 pm
What? No blue selected radio boxes yet? Or blue checked boxes?
January 24th, 2005 @ 8:11 pm
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.
January 24th, 2005 @ 9:46 pm
Note that I updated Firefoxy to use these widgets as well as the old ones, depending on the version of Firefox.
January 26th, 2005 @ 9:09 am
TwisterMc,
If you want blue selected radio buttons and checked boxes, try my package.
http://homepage.mac.com/travellers/software/Firefox/aquafirefox_en.html
February 27th, 2005 @ 11:20 am
G5-optimized Firefox 1.0.1 released
Alrighty then. I just built a Firefox 1.0.1 release version with optimizations for the G5…