May 24, 2007

Firefox controls are ugly!

For some reasons, web controls are rather ugly in Firefox when it runs under Linux. (as a reminder, I am talking about running Firefox under Ubuntu Linux and Gnome)
It is particularly the case with radio buttons. Here are comparison screenshots of what it looks like and what it will look after you follow and implement the following instructions:

Fortunately, I found a solution in ubuntuforums.org to fix this problem.
First close Firefox if it is running. Then open terminal and run this commands, one by one.

wget http://users.tkk.fi/~otsaloma/art/firefox-form-widgets.tar.gz

tar -xvzf firefox-form-widgets.tar.gz

sudo cp /usr/lib/mozilla-firefox/res/forms.css /usr/lib/mozilla-firefox/res/forms.css.bak

cat firefox-form-widgets/res/forms-extra.css | sudo tee --append /usr/lib/mozilla-firefox/res/forms.css > /dev/null

sudo cp -r firefox-form-widgets/res/form-widgets /usr/lib/mozilla-firefox/res

rm -rf firefox-form-widgets

Now start Firefox again and start enjoying nice looking controls. Life is beautiful once more!


46 comments:

Anonymous said...

cool

Anonymous said...

Thanks. I've been wondering about this for a while.

Neil said...

Ah. I always thought firefox looked funny in Linux, but I could never really pinpoint why it looked so bad. Thanks for the info.

Anonymous said...

Inserting a Window's cd and rebooting will solve all of your font issues.

Anonymous said...

Why are you tee'ing to /dev/null ?

speeb said...

An even easier method can be found here:
http://ubuntuforums.org/showthread.php?t=369596

Anonymous said...

it looks the same on mac and windows as well.

"OS independence for you: the same ugliness on every platform!"

Anonymous said...

>> Inserting a Window's cd and rebooting will solve all of your font issues.

What font issue?

Anonymous said...

i don't really think the default is ugly. perhaps this is why it's such that you think it's ugly :p

(sudo tee is appending to a file which is only writable by root. shell redirection wouldn't work since it wouldn't be running as root)

Anonymous said...

I'd like to inform y'all that this works for OSX as well!

wget http://users.tkk.fi/~otsaloma/art/firefox-form-widgets.tar.gz

tar -xvzf firefox-form-widgets.tar.gz

cp /Applications/Firefox.app/Contents/MacOS/res/forms.css /Applications/Firefox.app/Contents/MacOS/res/forms.css.bak

cat firefox-form-widgets/res/forms-extra.css | tee -a /Applications/Firefox.app/Contents/MacOS/res/forms.css > /dev/null

cp -r firefox-form-widgets/res/form-widgets /Applications/Firefox.app/Contents/MacOS/res/

rm -rf firefox-form-widgets

And you're done! :)

Anonymous said...

Mine never looked that way. I wonder why. I went from Edgy Eft to Feisty Fawn... what are you running? Just wondering. Seems interesting this wouldn't effect everyone.

Anonymous said...

BAH! You said Feisty right there. I can't believe how blind I am.

rollerskatejamms said...

Anybody know how I can UNDO that?
It has some side effects in gmail that I really don't like.

"Knows how" said...

My gmail works perfectly fine. Are you sure those side effects are because of this?

Anonymous said...

Its because its firefox. Use Opera.

Desmond said...

Thanks, it works great !

Anonymous said...

thx for the tip!

William Zhang said...

Cool~but,my debian....bad luck

Anonymous said...

To the first anon - Like crap you don't have to do any work to fix windows fonts, i spend plenty of time making my titles and menu buttons to look purdy. To get everything purdy (and i still can't go as much as easily as linux), i have to download cleartype and tweakui. Go to Control Panel>Display Properties>Appearance>Advanced, change the font type, sizes, and colours. Cleartype fixes up fonts especially on stretched LCD screens. I go to tweak ui to change the colour indicators of some text (i like my stuff really customized. Blue = encrypted? Pass!) And in my bloodlust for prettyness, it is still not enough. So yeah, bullcrap windows fixes everything. Besides, the ultimate "It's OK when you install it" system is mac OSX, not windows. They simplify install, spend less time getting everything fixed up, spend less time (i know it's not all because of OSX) fighting viruses. But that's not for me, i build my own system, build my own OS, build my own EVERYTHING, and macs don't handle that well.

A few more things. This isn't a font issue, my firefox (for windows) has the same issue, and if i want to be nitpicky i can point out you have to spend time installing firefox, unlike with most linux distros.

Unknown said...

couldn't this be changed in a local user's ~/.mozilla/firefox/profiledir/chrome/uerChrome.css file? Also for reference, the CSS also works in seamonkey (not surprisingly)

Unknown said...

that would be userChrome.css

Anonymous said...

that's weird. I thought firefox was ugly in general.

Anonymous said...

In KDE Firefox looks a tad better. The form submit buttons are a bit rounded and the shadow on the radio and check boxes is more pronounced.

Unknown said...

works great with gentoo as well! thanks

Anonymous said...

Windows Cleartype just looks like garbage, anyone who thinks it looks good is either naive or needs a trip to the optician.
Linux has lovely type when set up correctly, however nothing comes close to how beautifully OSX can render text, 100pt Helvetica has never looked so good on a computer

Anonymous said...

Just use Windows...end troubles (except for BSOD)

Anonymous said...

Firefox widgets look the same in Linux as they do in Windows if you have disabled the visual effects in Windows. This is something I do straight away with Windows to gain back some wasted resources so I really hadn't noticed any difference.

Might be worth using these new css files in Windows too with the visual effects switched off. Off to try it now.

Saulo said...

That looks much better, thanks!

Anonymous said...

imo original is better

Anonymous said...

Still ugly....

Anonymous said...

Replace:
cat firefox-form-widgets/res/forms-extra.css | sudo tee --append /usr/lib/mozilla-firefox/res/forms.css > /dev/null
With:
sudo cat firefox-form-widgets/res/forms-extra.css >> /usr/lib/mozilla-firefox/res/forms.css
Much cleaner, and less waste. (Seriously, WHY are you tee'ing?)

Anonymous said...

"sudo cat firefox-form-widgets/res/forms-extra.css >> /usr/lib/mozilla-firefox/res/forms.css"

Won't work. The shell will then redirect output from the sudo command and cat will fail.

Anonymous said...

OMGSOHARD!

0.
su -
cat blah >> blah


1.
sudo bash
cat blah >> blah

2.
sudo "cat blah >> blah"

3.
"hey, i'm a doob newb, quick, spare me some IQ points!"

Anonymous said...

I have Debian and Iceweasel so i've changed your script a few. Here we go!

#!/bin/sh
# http://osnovice.blogspot.com/2007/05/firefox-controls-are-ugly.html

# Run this script as root
wget http://users.tkk.fi/~otsaloma/art/firefox-form-widgets.tar.gz
tar -xvzf firefox-form-widgets.tar.gz
cp /usr/share/iceweasel/res/forms.css /usr/share/iceweasel/res/forms.css.bak
cat firefox-form-widgets/res/forms-extra.css | tee --append /usr/share/iceweasel/res/forms.css > /dev/null
cp -r firefox-form-widgets/res/form-widgets /usr/share/iceweasel/res
rm -rf firefox-form-widgets

Anonymous said...

thx for the post, always thought the forms are horribly designed ;)

Changed it in flock and it worked just fine.

Anonymous said...

Cool! It's look goods on my Ubuntu 7.04 laptop now :)

Peter Gasston said...

I'm not sure I like these. How can I remove them?

Anonymous said...

I realise that I'm late but I'll still post this: To remove it, go to System -> Administration -> Synaptic Package Manager. Find the Firefox package (just start typing firefox). Right click it and choose "Mark for Reinstallation". Click apply (top button, third from left). Then start firefox again. That *should* remove them (did for me at least).

redeemed said...

Thanks. It works good.

Anonymous said...

Probably worth noting that Firefox 3 will use the GTK theme for form controls.

Anonymous said...

To the anonymous that posted removal instructions... THANK YOU!!! That certainly helped ALOT! This plugin sucked.

Anonymous said...

thank you it is working fine on centos 5 :)

I was looking all over the web for this :D

Anonymous said...

God ... like i'm crying in happiness, i hate those default radio buttons so much

Sammy said...

Thank you that was very useful. Worked well on Gusty Gibbon.

Anonymous said...

Super super super tip!!! I've hated the ugly Firefox buttons for sooooo long.

(For Suse (10.2): replace "mozilla-firefox" with "firefox" in all the paths)

Anonymous said...

to make all that without root priv's and in you FF profile do the following:
locate your FF profile and in there:
cd chrome
tar -xvzf ~/firefox-form-widgets.tar.gz

(I've downloaded archive to my home dir)'
cp -r firefox-form-widgets/res/form-widgets ./
cat firefox-form-widgets/res/forms-extra.css >> userContent.css
rm -rf firefox-form-widgets

and that's all, you have your niced widget's in FF and you do not need to do that again and again on each reinstall of FF.