Firefox Widgets

[fatsheep]

I should note for the record that I stopped supporting the widgets when Firefox 3 was released with native GTK widgets. I felt that these widgets were no longer needed after Firefox 3 came out. However, there are apparently some people who still use these widgets from looking at the posts in this topic. I no longer have the time to update this widgets package consistently but please feel free to improve upon the widgets in any way you see fit and release your improved version wherever you want to. Thanks to everyone who downloaded, I'm glad these widgets could be of use.

- fatsheep, August 25th 2009

News

2.7 has been released (August 6th). There are no changes to the CSS. Changes are strictly to the graphic installer interface. The text entry for the installation path has been replaced with a combo entry containing a dropdown menu. The dropdown menu will "remember" previous installation/removal paths you have used and display them the next time you use it (assuming you don't delete the "paths" file it creates!). It will also display some standard installation paths for browsers such as '/usr/lib/firefox'. The browse button also now will go to the directory specified in the entry box instead of just automatically going to root.

Check out the screenshot below. :KS

----------------------------------

http://img365.imageshack.us/img365/32/firefoxwidgetsuiof2.png

One thing that has always bothered me about Ubuntu's firefox is that the buttons, radio buttons, drop down menus, text fields, and checkboxes (known as widgets) are very cruddy looking. Fortunately I found a simple way to fix this. What we have below is a replacement set of images and CSS code for the widgets which will make them much nicer on the eyes (see bottom of the post for screenshots).

The original widgets are done by Osmo Salomaa <otsaloma@cc.hut.fi>. I have written a bash script to make the installation and removal process easier. You can download this at the bottom of this post.

To run the graphic installer (for point and click installation and removal), simply unpack the archive anywhere you like, double click on the "graphic_installer", then select "Run". If you do not have the python-kiwi, it will be installed (python-kiwi is required for the graphical installer to run). It has been reported that on older Ubuntu's such as Dapper (6.06) this package is simply called "kiwi". If this is the case you will need to install that package by hand. After python-kiwi is installed (if it has not already been installed), the graphical installer will run (shown above).

Or, if you prefer, you can use the text based installer which does not require python-kiwi: open a shell, cd to the directory you unpacked the firefox widgets to and run install script (do this with the ./install command). Now you are presented with a menu.

Read the README for more information. Run the "install" script with the "--help" option for command line option help ("./install --help" works if you are in the same directory).

Also make sure you are installing to the path of your Firefox directory. By default this script installs to /usr/lib/firefox (which is the default location). If that is not your Firefox directory you can change it easily. If you are using the graphic installer it will ask you for the path. If you are using the text installer ("install" script), then you can enter a new path at the main menu or use the "--path=PATH" or "-p=PATH" command line options to set a path (run the "--help" option for more information).

I should also mention, I have included a backup forms.css file incase you mess anything up. This file is from a default 64-bit Firefox 2.0 installation. The forms.css file an be found in Firefox's "res" directory. You won't need my backup unless you accidently delete your's or the script malfunctions (in which case please contact me).

Buttons
http://img525.imageshack.us/img525/9933/buttoncomparisonit7.png

Check Boxes
http://img525.imageshack.us/img525/4695/checkboxcomparisongb7.png

Radio Buttons
http://img525.imageshack.us/img525/5641/radiobuttoncomparisonyz0.png

Drop Down Menus
http://img410.imageshack.us/img410/7093/scrollercomparisoniy8.png

Text Fields
Due to image limitations on the forum I've got to hyperlink this image:
http://img525.imageshack.us/img525/4117/textfieldcomparisondz6.png

Before
http://img525.imageshack.us/img525/2541/oldgoogleuz4.png

After
http://img410.imageshack.us/img410/9629/newgooglexq7.png

Note:

If you are tired of the widgets getting restored after every Firefox update, try this command:

sudo dpkg-divert --add <INSERT FIREFOX ROOT DIRECTORY HERE>/res/forms.css

This should prevent the file from getting updated when Firefox does. To remove this:

sudo dpkg-divert --remove <INSERT FIREFOX ROOT DIRECTORY HERE>/res/forms.css

Let me know if this technique works or not, I have not tested it.

Revisions

1.1 (March 24th 2007) - Fixes a bug where the widgets override the Ubuntu forum's default "Go!" button (to the right of the search box in the top right). I'm assuming this bug could also appear on other sites but have not seen it.
1.2 (June 8th 2007) - Fixes a bug that distorted buttons on this website: http://www.extjs.com/deploy/ext/docs/index.html.
1.5 BETA - All past bug fixes have been made by removal of specific !important statements in the CSS that overrode web page defaults. In this BETA I have removed all !important statements in the CSS. Please report any problems.
1.6 BETA (June 9th 2007) - The removal of a few !important statements caused the corruption of radio buttons, checkboxes, and some text fields. These !important statements have been edited back in to correct the problem.
1.7 BETA (June 9th 2007) - python-kiwi now automatically installs when you choose to run the graphic interface. Added information for LKRaider to the "AUTHORS" file.
1.8 BETA (June 10th 2007) - Minor bug fixes: a typo in the graphic_installer file that may have caused the prompt to install python-kiwi to pop up when it shouldn't have as well as a fix for a bug where buttons would expand to the right and left when selected.
1.9 BETA (June 13th 2007) - Removes the margin from buttons so they wil be located in the right place.
2.0 BETA (June 14th 2007) - Added messages to the graphic installer and to the text installer instructing the user to restart firefox after installation or removal. The python-kiwi package is now installed in an xterm terminal. Fixed a bug in the graphic_installer script. Minor changes to the install script (I removed a lot of messages to make the output of the script less verbose).
2.1 (June 17th 2007) - Increased text input border to 2 px and removed padding and margin from dropdowns. Minor message changes to the script and graphic installer. Minor changes to the README. Removed borders from active (clicked on), disabled radio buttons.
2.2 (June 19th 2007) - Added reinstallation option. The graphic installer now tells you what type of change was completed (installation, removal, or reinstallation) instead of just "changes applied". Install script modified so that it doesn't produce messages already being displayed by the GUI. Fixed a re-occuring problem where disabled radio buttons were deformed. Fixes the size of checkboxes at 12 pixels and radio buttons at 13 pixels in order to avoid the tiling of radio or checkbox images when larger sizes are used like in this website: http://govsearch.publications.gov.au/search/search.cgi?collection=pubs&chksummary=chksummary&fscope=512&form=simple&fqp=1&query=book.
2.3 (June 20th 2007) - Fixed bug #2: deformed radio buttons on http://www.vietfinsv.net/ due to borders and background-colors that conflict with the site's defaults.
2.4 (June 21st 2007) - Fixed bug #3: Deformed checkbox on http://forums.invisionpower.com/index.php?act=Search. Removed reinstallation (upgrade) option. The install option now can install over previous installations of the Firefox Widgets. Modified the installation script to make better use of functions.
2.5 (July 9th 2007) - Radio buttons now gray out when disabled, show a slightly different color when active (pressed), and drop down menus show the correct button image.
2.6 (July 11th 2007) - Fixed a bug where the image for the drop down menu did not display properly on http://arcticmonkeys.trinitystreetdirect.com/. Borders are also now removed from dropdown menus.
2.7 (August 6th 2007) - Improved the graphic installer so it now has a dropdown menu to select standard install paths from as well as the previous 5 installation or removal paths. The number "5" is one that I picked and is set by the max_saved_path variable in ff_widgets.py. You can change it if you like. All installation/removal paths are saved in the "paths" file (path_file variable in ff_widgets.py if you want to change this name). The browse button also now opens to the directory specified in the entry field.

[fatsheep]

I hate to be the one bumping my own topic but I'd really appreciate some feedback. Of the 43 of you who downloaded the attachment so far, what did you think? Did it work well for you?

[Bossieman]

Thanks for bumping it. I tried it out and it worked perfect.
I use swiftfox so I changed the path to /opt/swiftfox

Thanks!

[lcohen999]

trying it out now

thank you!

[stalefries]

Very nice, worked perfectly. I had forgotten all about this.

[Nikron]

Worked perfectly... Even used my gtk theme better than the default ccs did. Thanks a lot. The only bad thing I can say is that the drop down menu is still a drop down menu, those arrows don't work.

[kobewan]

Looks really nice, but is there any way to customize what you want to change? For example, I love the radio buttons and checkboxes, but prefer the default 'Buttons'.

[userundefine]

And for KDE:

Form widgets
As you can see, the default forms that firefox renders is not too nice (disgusting).
The solution is pretty easy, i found that here.

You need to download a tarball with some css and pngs, then extract it to your firefox install direcotory.

Code:

wget http://home.comcast.net/~tehdnite/linux/prettywidgets_firefox2_linux.tar.gz
sudo cp -r /usr/lib/firefox/res/ /usr/lib/firefox/res_original
tar -xvvzf prettywidgets_firefox2_linux.tar.gz
sudo mv ./prettywidgets_firefox2_linux/* /usr/lib/firefox/res/
Then, restart firefox, and enjoy the first step of this how to.


credit (http://ubuntuforums.org/showthread.php?t=336181&highlight=kgtk)

[Spudgun]

Looks good, cheers :]

[ifross]

Works great! :)

[Hoag]

Excellent! When I first got Ubuntu, I noticed the less than lovely looking widgets , and this made everything much better!

Worked seamlessly, and took less than a minute to do.

Two thumbs up. :)

[Catsworth]

This didn't apear to work with my install, I think it's because I don't have the /usr/local/firefox32 directory. How do I know what path I should set instead?

Thanks.

[fatsheep]

This didn't apear to work with my install, I think it's because I don't have the /usr/local/firefox32 directory. How do I know what path I should set instead?

Thanks.

Well what browser are you trying to install to? Regular firefox or firefox32?

[hornett]

Thanks for this, fatsheep. :KS

You reminded me of this article: http://mpt.net.nz/archive/2005/04/11/ubuntu

The form controls Firefox draws in Web pages are not just inconsistent with those in the rest of the operating system, they are quite possibly the ugliest interactive controls seen in any graphical interface since AmigaDOS 2.04. For example, text fields have borders that, by default, are visible on only two sides out of four. <select> elements are rendered not as normal option menus, but as much less efficient drop-down scrolling listboxes. And radio buttons look like they were drawn in the dark with a broken pencil.


I appreciate your work on the script (and of course the artist's work it installs) but why is this not fixed by default (two years after the article)?

[Ago12]

Thanks, it has worked flawlessly on a regular Firefox on Feisty :)

[diskotek]

how can i work it out with Xfce? if anyone wrote littlbe bit briefly, it wouldbe wonderful..

[Catsworth]

Well what browser are you trying to install to? Regular firefox or firefox32?

Didn't even realise there *was* a Firefox32.....

I think I must be running the regular version, whatever comes with Ubuntu as standard.

Cheers.

[Ago12]

Fx is desktop agnostic.

It works the same way on xfce (tested and approved) :)

[xolot1]

great job. works perfectly and looks so much better.

[Catsworth]

Ok, I changed the install path to:

/usr/share/firefox

Which appears to be where FF lives on my Ubuntu install, and it still isn't working.

Do I need to reboot or something?

[diskotek]

Fx is desktop agnostic.

It works the same way on xfce (tested and approved) :)

thanks i'll try it tonight :D

[DaVinciXL]

Great job!
Works pefectly and is absolutely amazing...

[diskotek]

yes, i applied it; so easy & simple and works great. thank you very much...

[nero_86]

Very good work! Looks very fine! thanks :)

[Condoulo]

Hey, this works great. :) Glad you posted this.

[jamienos]

I'm glad i was not the only one who thoght that the button's looked ugly - installed and work's fine! nice work thankyou:)

[Leonivek]

Wow! Awesome! Looks sweet, now! Thanks! \\:D/

[Kobalt]

Hell it's great... !
I'd love Firefox to ship with this kind of look.

[Catsworth]

Ok, I changed the install path to:

/usr/share/firefox

Which appears to be where FF lives on my Ubuntu install, and it still isn't working.

Do I need to reboot or something?

Ok, a reboot didn't help - and I'm still stuck with nasty looking FF, anybody got any ideas?

Thanks.

[gschoper]

Great post. Thanks.

gschoper

[alephiej]

Works fine on Edgy. Thanks. As a matter of fact I haven't even realized how ugly default controls looked like.

[kobewan]

Ok, a reboot didn't help - and I'm still stuck with nasty looking FF, anybody got any ideas?

Thanks.

Try /usr/lib/firefox instead.

[fatsheep]

Thanks for the support everyone, I'd love it if firefox shipped with these widgets by default too.

Try /usr/lib/firefox instead.

/usr/lib/firefox is the default home of firefox and also the default installation path of the script. Are there any errors when the script is run? Just to make sure this is where firefox is installed post the output of this command:

dpkg -S firefox

[Catsworth]

The output of that command would seem to suggest that it's installed in /usr/share/firefox/

I'll try the inatall again with that path (although I'm sure I've tried that before.....).

[Catsworth]

Nope, doesn't work with that path either.

[freexzai]

very nice update. id been so used to how it looked id never thought about chaning it haha.

[psyke83]

fatsheep,

Firefox looks much better now, thanks. Just a note, your little packaged script works fine on Feisty too :)

[ykpaiha]

this should be the first change for any firefox installed
:guitar:

[wolf08]

Wow! This looks great. Thanks for the modifications.

Have you posted this on the mozillazine forums?

[spanella47]

yeah nice work, had looked at the old attempts at this but never liked the widgets or the difficulty of installing them.

side note - feel like the buttons are very flat compared to the checkboxes and bullets. anyone skilled at this wanna take a stab at making them look more like the default ubuntu buttons. (ie lighter grey with more rounded dark border then when pressed, visually depressed and dark grey)

[ykpaiha]

in extra for a very good looking use as well
flatstyle in your menu and you never go back to msexplorer (lol)
https://addons.mozilla.org/search.php?q=flatstyle&type=E&app=firefox

:lolflag:

[fatsheep]

The output of that command would seem to suggest that it's installed in /usr/share/firefox/

I'll try the inatall again with that path (although I'm sure I've tried that before.....).

Could you post the output of the dpkg -S firefox command as well as the output of the script when you install? Also, make sure you completely close out ALL firefox windows after installation. Even if you have the download window open, the widgets will not appear when you open up firefox.

Wow! This looks great. Thanks for the modifications.

Have you posted this on the mozillazine forums?

Nope, I've actually never posted there before.

[Catsworth]

Could you post the output of the dpkg -S firefox command as well as the output of the script when you install? Also, make sure you completely close out ALL firefox windows after installation. Even if you have the download window open, the widgets will not appear when you open up firefox.

Will do that tonight, thanks for your continued help with this.

[Catsworth]

Ok.

dpkg -S firefox

See attachment


./install

rob@raistlin:~/Desktop/firefox-widgets-1.0$ ./install
1 ) Install Firefox widgets.
2 ) Remove Firefox widgets.
3 ) Specify a new installation/removal path.
4 ) Scroll the help file.
5 ) Exit.
Select an Option: 3
Please enter a new path: /usr/lib/firefox
$destdir = /usr/lib/firefox
------------

1 ) Install Firefox widgets.
2 ) Remove Firefox widgets.
3 ) Specify a new installation/removal path.
4 ) Scroll the help file.
5 ) Exit.
Select an Option: 1
Installing Firefox Widgets
==========================

We will be creating a folder at /usr/lib/firefox/res/form-widgets.
We will then append the contents of forms-extra.css
to /usr/lib/firefox/res/forms.css.
Press enter to continue.
---------------

Installing the widget images to /usr/lib/firefox/res/form-widgets.
Appending contents of forms-extra.css to /usr/lib/firefox/res/forms.css.
Installation process complete.
rob@raistlin:~/Desktop/firefox-widgets-1.0$

[fatsheep]

Ok.

dpkg -S firefox

See attachment


./install

rob@raistlin:~/Desktop/firefox-widgets-1.0$ ./install
1 ) Install Firefox widgets.
2 ) Remove Firefox widgets.
3 ) Specify a new installation/removal path.
4 ) Scroll the help file.
5 ) Exit.
Select an Option: 3
Please enter a new path: /usr/lib/firefox
$destdir = /usr/lib/firefox
------------

1 ) Install Firefox widgets.
2 ) Remove Firefox widgets.
3 ) Specify a new installation/removal path.
4 ) Scroll the help file.
5 ) Exit.
Select an Option: 1
Installing Firefox Widgets
==========================

We will be creating a folder at /usr/lib/firefox/res/form-widgets.
We will then append the contents of forms-extra.css
to /usr/lib/firefox/res/forms.css.
Press enter to continue.
---------------

Installing the widget images to /usr/lib/firefox/res/form-widgets.
Appending contents of forms-extra.css to /usr/lib/firefox/res/forms.css.
Installation process complete.
rob@raistlin:~/Desktop/firefox-widgets-1.0$

Ok. Go to the shortcut for firefox that you use and find out what file it links to (put it on the panel or desktop if it isn't already, right click on it and go to properties). It probably points to /usr/bin/firefox. In this case you would use the command readlink /usr/bin/firefox to see what executable file this file is symlinked to. It should be either /usr/share/firefox/firefox or /usr/lib/firefox/firefox. In other words, your firefox is either located in /usr/share/firefox or /usr/lib/firefox.

Now go to whichever directory firefox is located in navigate to the "res" folder. There should be a folder inside called "form-widgets". Make sure it exists and make sure it has the correct images inside (you have the same folder inside the archive that the script shipped in. Now open "forms.css", scroll down to the bottom. There should be this line:

/*** END EXTRA FIREFOX WIDGETS ***/

And if you scroll up you will find a similar comment for the beginning of the appended text. Make sure this exists. If everything is in place then the only other suggestion I would have would be to reinstall firefox. Good luck,

-sheep

[mykalreborn]

really cool ... definetly bookmark this post. one thing though... is it possible to get your gtk/murrine/clearlooks theme instead of the widgets you made?
just curious. that would be really cool.

[Catsworth]

Sorted, and it was in:

/opt/firefox

Thanks very much for your help, and for putting this together - it looks great.

[Airwalka]

Thanx ... it works perfectly!

[fatsheep]

Sorted, and it was in:

/opt/firefox

Thanks very much for your help, and for putting this together - it looks great.

Wow that's odd. I'm glad it worked. :)


really cool ... definetly bookmark this post. one thing though... is it possible to get your gtk/murrine/clearlooks theme instead of the widgets you made?
just curious. that would be really cool.

Thanks for the complements. I didn't make the widgets by the way, I just made the installer script and guide. I'm not sure what you mean by the gtk/murrin/clearlooks theme? Do you mean have the buttons on the internet look like the buttons on GTK widgets?

[maddog39]

Installed your little mod, was pretty cool. Although I would like to see the buttons depress when clicked and stuff. I think it would be/look alot nicer. But nice mod, I have it installed right now. It also works perfectly in epiphany. :D

[mykalreborn]

Do you mean have the buttons on the internet look like the buttons on GTK widgets?

yep, that's exaclty what i meant
:D

[BobSongs]

Mmm. Now that helps to make FireFox look much more professional in Ubuntu.

Thank you.

Sure; it's a minor detail. But on occasion I have friends in to look at my PC as an example of what Ubuntu does. And a shabby looking FireFox doesn't help sell the product.

[jbus]

Thanks fatsheep, This works great!

I think it's ridiculous that Firefox developers have continued to ignore this very noticeable UI enhancement for Linux users. I suspect it will be 2035 and Firefox users will still be waiting for Firefox developers to implement this feature.

[foureight84]

NICE!!! i was wondering if i could change that. great work!

[fatsheep]

yep, that's exaclty what i meant
:D

Feel free to try editing the widget images to imitate the gtk look if you want. I don't know of any other way to get the gtk buttons in firefox.

[tgrisier]

Great look. I'm using it in both firefox and swiftfox. Install was as painless as they come.

[mykalreborn]

Feel free to try editing the widget images to imitate the gtk look if you want. I don't know of any other way to get the gtk buttons in firefox.

oh. cool! thanks!

[i M@N]

Hello !

Many thnxX for this !! :grin:

i've just launched ./install -p=/home/iman/swiftfox -i and it's been working like a charm ...

@+...

[rko618]

Thanks fatsheep! I have always felt that Firefox under Linux was rather ugly compared to its Windows counter part. This script fixes a lot of those issues. Much thanks.

[matburton]

Awesome!

Much prettier ;)

[sancheztavo]

Great, now I feel much more comfortable...
Now, it would be nice to see when a button / form / etc. is disabled. Because they show as if they were enabled.
Thanks!

[fatsheep]

Now, it would be nice to see when a button / form / etc. is disabled. Because they show as if they were enabled.
Thanks!

I'm not sure what you mean. Could you explain?

[FuturePilot]

Wow! These look great. I was always a little annoyed by the way these widgets looked, but now they're much better. Everything went perfectly. I'm running Firefox 2.0.0.3 on Dapper so it's installed in the /opt directory. Changed the installation path and everything went perfectly:)
The only issue I found was the GO button next to the search bar on the forums here is unreadable now because of the text color.

[qyte]

I am running firefox on feisty. the script seems to have worked just fine but i noticed something that is somewhat ugly :(
HAS anyone noticed the button here in this very forum the one up right in the search that used to be a Go? For me it is just a blank button :confused:
And i don't mean the vbulletin tools search...
THE ONE that is hi up... If it causes a problem there it may very well cause problems elsewhere.
Well apart from that i haven't noticed any other malfunction (i just installed it though ;) ).

[TheMono]

I just installed on Feisty as well. Does look a lot better, but I also have the blank button on the search thingy for this forum!

[FuturePilot]

Yeah, that's what I was talking about. The only other thing I noticed was that certain sites actually skin the widgets to match the site. However I noticed that these seem to override that.

[Outrunner]

Very well done! Works perfectly and looks nice. Good job, keep up the good work ;)

[Nikron]

I am running firefox on feisty. the script seems to have worked just fine but i noticed something that is somewhat ugly :(
HAS anyone noticed the button here in this very forum the one up right in the search that used to be a Go? For me it is just a blank button :confused:
And i don't mean the vbulletin tools search...
THE ONE that is hi up... If it causes a problem there it may very well cause problems elsewhere.
Well apart from that i haven't noticed any other malfunction (i just installed it though ;) ).

I have the same problem

[gkasinath]

It works awesome! Thanks for that!
Excellent work guys!

Cheers
Gautham Kasinath
P.S. The *Go* button is er.. Gone though. I dont use that much so it dont hurt me! :)

[gjtoth]

NICE STUFF! Thanks!

[fatsheep]

I am running firefox on feisty. the script seems to have worked just fine but i noticed something that is somewhat ugly :(
HAS anyone noticed the button here in this very forum the one up right in the search that used to be a Go? For me it is just a blank button :confused:
And i don't mean the vbulletin tools search...
THE ONE that is hi up... If it causes a problem there it may very well cause problems elsewhere.
Well apart from that i haven't noticed any other malfunction (i just installed it though ;) ).


Yep, I have the same problem and unfortunately I'll look into it - maybe a simple recoloring of the widgets will do.

EDIT: Nope the text color is not the issue, the text on that button is bright red, it's just the fact these new widgets are covering overriding the forum's defaults. I have emailed the creator of the widgets - I will post back here when he replies.

[morneHeru]

Just installed these on Minefield.

Looking great, thanks! :)

[fatsheep]

Osmo got back to me and said I could try deleting some of the "!important" statements in the CSS file. I fiddled around with the file until I found the right !important statement to delete and now the widgets no longer override the forum's defaults. I have uploaded a new version with this fix (1.1). The only change is to the forms-extra.css file.

Please report any bugs.

[zerwas]

In my opinion this should get default in Ubuntu. Works perfectly with Feisty.

Any reason why it shouldn't be a default setting?

[fatsheep]

In my opinion this should get default in Ubuntu. Works perfectly with Feisty.

Any reason why it shouldn't be a default setting?

I don't see why not. We would just have to contact the previous people who worked on the widgets to make sure we could license it under the GPL.

[ktak]

Perfectly! Thank you!!!

[zerwas]

We would just have to contact the previous people

Would you want to do that? My english is very bad :(. Having this improvement would be so great.

[fatsheep]

Would you want to do that? My english is very bad :(. Having this improvement would be so great.

I have emailed all of them but how do you intend to get this included in Ubuntu by default?

[Twizz]

Really nice How to. It worked great for me. thx :)

[fatsheep]

So far Timothy Babych has agreed to open source his work. I'm waiting on responces from Garrett LeSage and Kevin Gerich.

Really nice How to. It worked great for me. thx :)

Glad it worked for you. :)

[drago]

Ehhrm, Is there any way anyone could mirror the widget pack? I cant fetch them from this forum (gets a zero byte file and nothing happens).
Thanks in advance.

[zerwas]

Ehhrm, Is there any way anyone could mirror the widget pack? I cant fetch them from this forum (gets a zero byte file and nothing happens).
Thanks in advance.

http://koti.mbnet.fi/~ots/artwork/firefox-form-widgets-ots.tar.gz

[Quillz]

Thanks for this tutorial! I actually made a thread just tonight (without finding this one first) about changing the ugly widgets.

[fatsheep]

Ehhrm, Is there any way anyone could mirror the widget pack? I cant fetch them from this forum (gets a zero byte file and nothing happens).
Thanks in advance.

It works for me, that mirror below didn't though. Perhaps someone else can mirror it for you, I don't have a means of doing that.

Thanks for this tutorial! I actually made a thread just tonight (without finding this one first) about changing the ugly widgets.

Your welcome. Did you use a similar method? I'd be interested in your thread, could you link me to it?

[huntermix]

thanks, looks great!!!!

[strabes]

I'm so glad I found this. It looks wonderful. Thanks for your contribution.

[schnupi]

Thanks dude! I really hated those old forms, buttons etc.. now i like firefox/swiftfox again^^

[BobSongs]

I may have posted before, but I thought I'd put something here you may even wish to add to your tutorial.

You see: I'm running Dapper Drake and I've updated Firefox from 1.5 to 2.0.0.3 using the script found in this thread (http://pykeylogger.sourceforge.net/wiki/index.php/Ubuntuzilla#Install_Official_Mozilla_Build_of_Fire fox).

However the change of browser version caused the previous widgets to vanish (gah!). Re-running the script as is did nothing. I found out that at Step 1 it was necessary to change the path to /opt/firefox and it worked beautifully. (I missed the radio buttons most).

All works well now. It's much appreciated. Thanks.

[TalkJesus]

Bit of a problem. I am using 64bit Ubuntu Feisty and followed this guideline to install firefox 32bit version for sake of using plugins
http://ubuntuforums.org/showthread.php?t=202537

I ran your script (which worked fine in 32bit of ubuntu) and it did not work. I closed firefox, retried, opened ff and it did not take effect.

[mandela]

Two thumbs up. It worked perfectly.

[TalkJesus]

Can someone please help me out here?

[Rui Pais]

Can someone please help me out here?

do you still have your 32bit ubuntu installation? you can try mount it somewhere and copy the /mozilla-firefox/res/* over the 32b firefox/res/
(you can make previously a copy of the res being overwritted so you can revert things in case it fails somehow...)

hth

[TalkJesus]

do you still have your 32bit ubuntu installation? you can try mount it somewhere and copy the /mozilla-firefox/res/* over the 32b firefox/res/
(you can make previously a copy of the res being overwritted so you can revert things in case it fails somehow...)

hth

What are you talking about? I'm not a linux guru, so I don't understand your language unfortunately.

Yes, I have the '32bit' install as I already installed it.

[Rui Pais]

What are you talking about? I'm not a linux guru, so I don't understand your language unfortunately.

Yes, I have the '32bit' install as I already installed it.

no prob...

locate your firefox32 install.
If you used kilz script should be /usr/local/firefox32, i think (confirm on your box, please). Inside there are a res/ directory, among others.

Now mount the partiticion with your 32b install. it should be something like:
mkdir 32ubu
sudo mount /dev/sdxxx 32ubu
where sdxx is the partition name of 32b ubuntu (sda1, hda4, something like that.)
When mounted close any firefox windows and copy with:
sudo mv /usr/local/firefox32/res /usr/local/firefox32/res_BACKUP
sudo cp -a 32ubu/usr/lib/firefox/res /usr/local/firefox32/ (assuming thats the path on 64b)

you can unmount then:
sudo umount /dev/sdxxx

start firefox to see it it worked.

[TalkJesus]

Didn't work sorry

chad@Secured:~$ sudo move /usr/local/firefox32/res /usr/local/firefox32/res_BACKUP
sudo: move: command not found

chad@Secured:~$ sudo cp -a 32ubu/usr/lib/firefox/res /usr/local/firefox32/
cp: cannot stat `32ubu/usr/lib/firefox/res': No such file or directory

However, the directory is there

/usr/local/firefox32/res

[Rui Pais]

Didn't work sorry

chad@Secured:~$ sudo move /usr/local/firefox32/res /usr/local/firefox32/res_BACKUP
sudo: move: command not found

sorry, silly me. it's sudo mv, not sudo move (i add that in a run as an edit, :()


chad@Secured:~$ sudo cp -a 32ubu/usr/lib/firefox/res /usr/local/firefox32/
cp: cannot stat `32ubu/usr/lib/firefox/res': No such file or directory

However, the directory is there

/usr/local/firefox32/res

seems that you forget to mount first the 32 version on 32ubu.

[TalkJesus]

No I did not forget

chad@Secured:~$ sudo mount /dev/sda3 32ubu
mount: /dev/sda3 already mounted or 32ubu busy
mount: according to mtab, /dev/sda3 is mounted on /

chad@Secured:~$ sudo mv /usr/local/firefox32/res /usr/local/firefox32/res_BACKUP

chad@Secured:~$ sudo cp -a 32ubu/usr/lib/firefox/res /usr/local/firefox32/
cp: cannot stat `32ubu/usr/lib/firefox/res': No such file or directory

chad@Secured:~$ df -h
Filesystem Size Used Avail Use% Mounted on
/dev/sda3 9.9G 3.5G 6.0G 37% /
varrun 1002M 116K 1002M 1% /var/run
varlock 1002M 0 1002M 0% /var/lock
procbususb 1002M 140K 1002M 1% /proc/bus/usb
udev 1002M 140K 1002M 1% /dev
devshm 1002M 0 1002M 0% /dev/shm
lrm 1002M 39M 964M 4% /lib/modules/2.6.20-15-generic/volatile
/dev/sda1 101G 16G 86G 15% /media/sda1
/dev/sda3 9.9G 3.5G 6.0G 37% /home/chad/32ubu

[Rui Pais]

No I did not forget

chad@Secured:~$ sudo mount /dev/sda3 32ubu
mount: /dev/sda3 already mounted or 32ubu busy
mount: according to mtab, /dev/sda3 is mounted on /

chad@Secured:~$ sudo mv /usr/local/firefox32/res /usr/local/firefox32/res_BACKUP

chad@Secured:~$ sudo cp -a 32ubu/usr/lib/firefox/res /usr/local/firefox32/
cp: cannot stat `32ubu/usr/lib/firefox/res': No such file or directory

chad@Secured:~$ df -h
Filesystem Size Used Avail Use% Mounted on
/dev/sda3 9.9G 3.5G 6.0G 37% /
varrun 1002M 116K 1002M 1% /var/run
varlock 1002M 0 1002M 0% /var/lock
procbususb 1002M 140K 1002M 1% /proc/bus/usb
udev 1002M 140K 1002M 1% /dev
devshm 1002M 0 1002M 0% /dev/shm
lrm 1002M 39M 964M 4% /lib/modules/2.6.20-15-generic/volatile
/dev/sda1 101G 16G 86G 15% /media/sda1
/dev/sda3 9.9G 3.5G 6.0G 37% /home/chad/32ubu

You are mounting you system (the 64b one?) inside 32ubu folder.

You need to mount the 32bits Ubuntu install on that folder to copy from its firefox.

unmount that with:
sudo umount /home/chad32ubu
since thats a special case (you mounted your running system) i don't know if it will umount. If not you may need to reboot.

keep post any doubts or problems till we get it. Good luck.

[TalkJesus]

" You need to mount the 32bits Ubuntu install on that folder to copy from its firefox."

What are you talking about? I simply followed your instructions.

[Rui Pais]

" You need to mount the 32bits Ubuntu install on that folder to copy from its firefox."

What are you talking about? I simply followed your instructions.

Ok. Something is not clear here. Let me try to clarify (if i get it correctly).

By 32bits install i mean your Ubuntu (the all operating system) 32 bits, not the firefox32 install inside your Ubuntu 64bits.

You said you have the script running correctly at 32b thats why i ask if you still have that install.

If you still have both install of Ubuntu - 32b and 64bits - you need to from inside one mount the other and copy the res folder inside the firefox folder of 32b Ubuntu to the firefox32 on 64b Ubuntu.

Sounds complicated and tricky 'cause of that annoying 32/64 naming... but it's simple.

If i miss something or point something incorrect post, please.

[Grosser]

Hello fatsheep,

it looks very nice.
Could you make the Buttons like Opera please (round and glass-look) ?

Greets

[TalkJesus]

I said it worked in 32bit but I *do not* have 32bit Ubuntu installed now, only 64 bit hence why I'm trying to get it to work in 64bit.

I hope someone has a solution

[Rui Pais]

I said it worked in 32bit but I *do not* have 32bit Ubuntu installed now, only 64 bit hence why I'm trying to get it to work in 64bit.

I hope someone has a solution

thats why i ask if you still had your 32bits install.
in attach ( 31911) there is a compressed file with a working res.
just uncompress it to your home or somewhere else,
go to place that conains the uncompressed res/ and do:
sudo mv /usr/local/firefox32/res /usr/local/firefox32/res_BACKUP
sudo mv res /usr/local/firefox32/

[Rui Pais]

Hello fatsheep,

it looks very nice.
Could you make the Buttons like Opera please (round and glass-look) ?

Greets

hi,
if you look inside your firefox installation folder (usually /usr/lib/mozilla-firefox/) there is a folder named res with the images, in png format, of the widgets.
You can replaced them by the ones that came with opera or any others that you like, as long as they have the same size and you give them the same name, should work.

good luck.

[Condoulo]

Awesome Tutorial. Thanks a lot. :)

[Condoulo]

hi,
if you look inside your firefox installation folder (usually /usr/lib/mozilla-firefox/) there is a folder named res with the images, in png format, of the widgets.
You can replaced them by the ones that came with opera or any others that you like, as long as they have the same size and you give them the same name, should work.

good luck.

Wow. I should really do that so the widgets go along with my theme.

[andrek]

GREAT tutorial, GREAT widgets :)

Thanks a lot.

[fatsheep]

If anyone gets an opera theme working I'd like to see screenshots. :)

[moredhel]

awesome! :)

If only these widgets were the default :P

[DarthWHO]

Fantastic!!

The appearance of some of these, with particular emphasis on the Radio Buttons, has been a sticky point with me from day one! Thanks for this. This should be in the repository and installable through Add/Remove (didn't read all 11 pages, not sure if this has been said or not)

[TalkJesus]

Wow. I should really do that so the widgets go along with my theme.


Have you tried this yet? can you please provide screenshots and possibly upload the files (images)? Thanks

[Iokua]

This is an awesome fix! It looks great! Thanks! :)

Although I think the check boxes themselves would look better if they were rendered the same way as form field. On my machine, check boxes look pretty bad. I can only see the left and top borders.

[Twizz]

I think the Check boxes are done that way to make it look more 3D? Although all around would look good to.

[limaunion]

Awesome! I hope to see this included by default in the next Ubuntu release.
Thank you!

[MetaMorfoziS]

Hey!
Thank you for this! It solves some problems that i have my previous widget set ("pretty widgets") and it looks elegant (but a little gnomeish).

I updated my related topic: http://ubuntuforums.org/showthread.php?t=336181&highlight=kgtk

So again, thx!:)

[MetaMorfoziS]

Hey!
I have found a bug in this stuff.
Check my attachment (from asus wifi router config)

I also solved that, so add this two lines:

background-repeat:no-repeat !important;
background-position: center center !important;

to the forms.css input[type="radio"] block near line 571.

Peace!

[HaxTbh]

Pro, Cheers

[icechen1]

Great tips!I finally gotten rid of those ugly buttons!

[ravenus]

Just installed this and it seems to work fine. Thanks a lot for this beautifier :)

[cornelius2]

Thanks for the widgets fatsheep. It looks nicer than the defaults.

However you are lacking a "pressed" (active) state for the buttons. Here is a patch that adds this, together with a more pronounced button image (+ the active version).

[gggggdxn]

It's great! But how about put these files in ~/.mozilla/firefox instead of /usr/lib/firefox? Then we wouldn't have to repeat those operations when firefox updates in the future :)

[jaywee]

Great script!!thanks!!

[Callandor64]

Worked great here (Feisty x86)

Cheers for your work,

Callandor64

[Landser]

I made a small deb package for easy installation/removal (attached)

[kwaanens]

Link leads to a 404.

[kwaanens]

Tried the package in the first post, and see no difference :(

- K

[Landser]

Link leads to a 404.

Yeah, sorry, I added it as an attachment to my previous post now.

[schmappel]

Works great, thanks a bunch! You know, there are more useful scripts like this one out there (like the 'Take back the Firefox & Thunderbird logo' script for example), it would be great if they were all combined somehow, wouldn't it? Or perhaps there should be some sort of Ubuntu Script Repository where these scripts could be maintained. Or perhaps I should just shut up and enjoy life :D

Thanks again!

[kwaanens]

Tried the package in the first post, and see no difference :(

- K

Nevermind, I ./install -r and then installed again, and now it works. Looks great!
This should be put in official Ubuntu repos. Maybe the artwork team should handle it?

- Ketil

[ubersoldat]

Very nice, didn't know you could do this with firefox. Very nice. Thanks!

[TimJBart]

sweet mother!! this has made web browsing in firefox beautiful. Thank you very much :D

Out of interest, why are the old ones so cruddy? Can this be addressed in the next version of ubuntu or is it a firefox problem?

[hmsf]

I think it's more a Firefox problem.

BTW, I've just installed the widget, it's perfect! It was one of the few appearance things that used to annoy me when I switched to Ubuntu, together with the bad font rendering, which I found the solution in this forum... Now only OpenOffice needs a better rendering...

[ghislain2]

Looks very prettier like this. Thanks !

[babozor]

Nice... work perfectly
Really nice
(btw i got the link from here: http://www.chevrel.org/fr/carnet/index.php?2007/05/30/663-des-beaux-formulaires-dans-firefox-pour-ubuntu)

[canen]

I didn't read the entire thread so this may have already been covered.

There is a permission issue with the images. Using Kubuntu/Feisty here. After installation the files are not readable by regular users. This can be fixed by doing the following:

sudo chmod 755 -R /usr/lib/firefox/res/form-widgets/

I think this can also be achieved by adding the following line to the install script (not tested):

sudo chmod 755 -R "$destdir/res/form-widgets/"

Add it after this line:

sudo cp -r form-widgets "$destdir/res"

[oCfuu]

I like! Not a lot to say, but it works and it works oh so well. Thanks to the author for making this wonderful widget and thanks to Lifehacker for posting this!

[dbrummer]

Installation and appearance are smooth! Great job.

-Dan

[ricardovich]

Works great

[Samjiman]

I'm using Iceweasel. I have tried installing to /usr/lib/iceweasel/res, but no changes are made.
Which directory do I need to install to?

Thanks.

[tycjan]

Nice :) This works! THX

[lollikerwin]

Found this via lifehacker.com... Beautiful!! :KS Thank you!

[Ghostlove]

This works great. The only issue I have with it is that it changes deviantART's search button. :/

[maique]

also found this via lifehacker, installed and firefox looks much nicer now.

i'm a newbie at this linux stuff and proud to have used a ./install for the first time... :D

[mydrac]

Hello:
Thanks for this it's work perfect.
lifehacker too.

[yamokojc]

One of my biggest disappointments with firefox on ubuntu was that the buttons looked like crapola. Now that is fixed...everything looks great now!

=D>

[rookieone]

works like a charm and looks good too, thanks

[mattdee]

AWESOME!!!

Very nice and polished!!!

[PendragonUK]

Very nice, works a tread :)

[revchris]

Works Great!

[geokker]

Excellent! Well done. The ugly widgets have bugged me for ages.

[zerwas]

This doesn't work with Epiphany. Has anybody an idea how i could make it more beautiful in epiphany?

Regards,
zerwas

[jmcantrell]

It looks cool, but i'm seeing some strange overlapping and odd sizing of buttons and textboxes.

[jro]

They look great! Its subtle, but really finished off the look for the browser. Thanks for taking the time to bundle these and create the installer. Your work is appreciated.

[werewolves]

Looks awesome and works great on Xubuntu Fiesty!

[DeaconSune]

ok, congratulations, I have been running ubuntu for 1 day now, and i ran it fine. I have no idea what i was doing, but it worked. thanks for making fireforks look prettier

[dliberal]

It works nice!

Firefox looks much better now!

Thanks!

[Zamber]

Hi there ;]
I have a dark theme (ubuntu studio) and the Go button on the ubuntu forums has a dark frame. Look: http://img241.imageshack.us/img241/6370/200706011005531280x1024sn6.png
Is it my fault?

[hoagie]

It works !!!:popcorn:

[AntiBodies]

Triple Sweet!!!

Worked great from what I can see.. Although I do notice that it applies the border to the "Go" button on the search for Ubuntu Forums.. as the button already has a style already applied to it it looks a bit funny but hey....

This should be installed as the default for any Firefox installation.. is so much more pretty.

Installation was fine though and I didnt have a problem.

Cheers,

AntiBodies

[thejart]

i also found this via lifehacker...and it works great for me. thanks!

[nyex]

hip!
this is lovely!
and considering the only page I really care for is gmail, it couldn't be any better.

thanks a lot for this.

[zerwas]

I have a little problem with some webpages.

The text doesn't fit in the text boxes:

[icallshogun]

I saw this over on lifehacker... Very nice upgrade to the visuals in FF.

[milouse1664]

It works very fine with swiftfox... As we say in France, it's realy change our lives ^^
Thanxx

[angrykeyboarder]

And for KDE:



credit (http://ubuntuforums.org/showthread.php?t=336181&highlight=kgtk)

This rocks. Heck, I think it looks even better than the Osmo's (GNOME, KDE or otherwise). :)

http://img.photobucket.com/albums/v208/meloncholyman/Screen%20Shots/widgets.png

[t1pt2p]

It just works perfectly. Thanks

[ukripper]

Worked like charm. Firefox looks much better than even any other browser. Thanks for script mate

cheers

[psyopper]

FYI -

Apparently upgrading Firefox will require you to reinstall this little charm. It's a wonderful thing that will remind you just how wonderful it is every few months...

[ukripper]

FYI -

Apparently upgrading Firefox will require you to reinstall this little charm. It's a wonderful thing that will remind you just how wonderful it is every few months...

Dont worry about that I will write script which will re-install these widgets after if/have to update firefox down the line until then it is charming.

[xcorex]

congratz. i was looking for that!
thank u

[shashipr]

Perfect!! Exactly what I was looking for. Thanks for your efforts

[Xpf]

Muito bom funcionou direitinho aquí, Obrigado.

[eilu]

works perfectly! thanks!

[Green_Star]

This works like a champ, Thank you very much for providing this wonderful program to us.

[Vindemiatrix]

I found a little visual bug, who appear which the mouse is pressed. The radio button, then, leave to be transparent which the mouse is still pressed, turning back to normal, transparent, after release them.

My solution was add (or change in some cases) the css rule for all selectors for input[type="radio"] with the folowing statement: background-color: transparent;

This resolves the problem with transparency.

PS: Sorry for my bad english, I don't have good speech on this language.

[ukripper]

just installed swiftfox for fast performance even on swiftfox it worked like breeze.

[rakup]

thanks a lot, i was wondering why FF on linux so ugly is. good job.

[kigol]

installed and looking great in Fedora 6.

tks

[gotmonkey]

i didn't realize how cheap the google homepage looked until I ran this script.

Thanks!

[LKRaider]

I created a GTK+ interface for the installer, check the attached screenshots.

It's written in Python, and requires the python-kiwi lib to be installed to work. The code is attached too. I had to edit your install script a bit to not ask for a key press on the automated install. The diff is attached aswell.

:popcorn:

[Catsworth]

Script works great, bloody FireFox trashes all your hard work when you upgrade though!!

Just downloaded the latest upgrade to FF as prompted by Ubuntu, and now I'm back to ugly FF hell!!

[Catsworth]

And there's the reason that I often find myself so frustrated with Ubuntu.

The last time I ran this script the installation directory was /opt/firefox/, this time it's /usr/share/firefox/.

Upgrading firefox has changed the damn installation directory!

[Abdelmalek]

Nice look but it has compatibility problems with ExtJS javascript library.

The library first try to render nice buttons then your buttons are added on top.

Try any demo on http://www.extjs.com/deploy/ext/docs/index.html to see what I mean.

[danzk]

I've updated firefox and everything is messed up how can i remove it

[ukripper]

I've updated firefox and everything is messed up how can i remove it

What you want to remove Firefox or Widgets? Not sure what you mean by 'Everything' here

You can still install widgets after updated firefox by using same method. just make sure where is the new updated Firefox in /usr or /opt and then install the widgets accordingly.

[Catsworth]

See my post a little way up the board. I had the same problem and had to reinstall the widgets.

[xncramar]

Works perfectly under the current version of Gutsy Gibbon too. Great work! Thanks! :popcorn:

[Programmerfromthehood]

How do you use these for swiftfox?

[camtech]

Brilliant! :D

[ukripper]

How do you use these for swiftfox?

In similiar way you use it for firefox just make sure where swiftfox gets installed (normally /opt/swiftfox) and simply change the path for widgets while installing.

[Jedi Penguin]

I've noticed this widget fix erases the blacktheme text/background fix in firefox for gnome from here: http://www.gnome-look.org/content/show.php/Neutronium-Midnight?content=57255

[s4lv1n0]

Perfect.
Congratulations and thank you so much, really nice work.

[fatsheep]

Nice look but it has compatibility problems with ExtJS javascript library.

The library first try to render nice buttons then your buttons are added on top.

Try any demo on http://www.extjs.com/deploy/ext/docs/index.html to see what I mean.

I've noticed this widget fix erases the blacktheme text/background fix in firefox for gnome from here: http://www.gnome-look.org/content/show.php/Neutronium-Midnight?content=57255


Thanks for both of these bug reports. I don't know if I'll be able to fix them but I will try. I'm going to remove more of the !important statements in the CSS and see if that helps.

[Dread Knight]

The changes i've seen in the first post are awsome! Will try this soon!

Keep up the good work! :)

[derapao]

this is great!
have you considered submitting the patch to mozilla? this should become the default appearance of firefox.
thank you for you work.

alessandro

[sweetthdevil]

fantastic looking much better, many thanks!!

[rockallite]

Very nice widgets at a first glance. However, something doesn't look good even in this very forum ;)

Please have a look at the screenshot I uploaded, which shows the Go button surrounded by an unexpected border.

[uthturn]

Ok I know this is a stupid question but I downloaded the file into my home directory what do i do next i have no clue. Sorry for such a noobish question

[fatsheep]

Very nice widgets at a first glance. However, something doesn't look good even in this very forum ;)

Please have a look at the screenshot I uploaded, which shows the Go button surrounded by an unexpected border.

I fixed that bug in 1.1. Make sure you are using the newest version (1.1). You'll probably have to download the new version, remove the widgets and then install the widgets again.

[fatsheep]

I have just added two revisions:

1.2 (June 8th 2007) - FIxes a bug that distorted buttons on this website: http://www.extjs.com/deploy/ext/docs/index.html.
1.5 BETA - All past bug fixes have been made by removal of specific !important statements in the CSS that overrode web page defaults. In this BETA I have removed all !important statements in the CSS. Please report any problems



I created a GTK+ interface for the installer, check the attached screenshots.

It's written in Python, and requires the python-kiwi lib to be installed to work. The code is attached too. I had to edit your install script a bit to not ask for a key press on the automated install. The diff is attached aswell.

:popcorn:

:o I completely missed your post. This should make a great addition to the installer. Thanks for your contribution, I'll look into incorporating it into the next revision(s).

I have a little problem with some webpages.

The text doesn't fit in the text boxes:

What version of the widgets are you using? If you are using 1.1 or earlier, try the newer 1.2 and 1.5 (beta) revisions to see if this problem has already been fixed. If not, please provide a link to one of these web pages and as much information as possible.

Nice look but it has compatibility problems with ExtJS javascript library.

The library first try to render nice buttons then your buttons are added on top.

Try any demo on http://www.extjs.com/deploy/ext/docs/index.html to see what I mean.

Look at the main post, I have just added the 1.2 revision which has fixed the problems I saw on the website you linked to. Please let me know if there are still any problems.

I've noticed this widget fix erases the blacktheme text/background fix in firefox for gnome from here: http://www.gnome-look.org/content/show.php/Neutronium-Midnight?content=57255

I've downloaded the theme but I don't understand what you mean by the blacktheme text/background fix. Please clarify. Thanks.

[reclusivemonkey]

Just installed the BETA version; I seem to have corrupted radio buttons on all websites, as well as corrupted tick boxes.

[conjur3r]

Thanks for your hardwork on beautifying the fox on *nix.

I can confirm ugly radio and checkboxes using the 1.5beta version.

[shen-an-doah]

Yeh, I got the same with radio buttons and checkboxes.

[BlackSkad]

I can confirm them too. It's fixed by replacing "border: none" with "border: none !important" to the css for the radio-buttons and "border-width: 0;" to "border-width: 0 !important;" for the checkboxes.
I also removed the margin and padding from the types text and password, as it messed up some layouts (including the search-box in the top-right corner of http://tweakers.net )
I tried to create a patch. It was the first time I created one, so I hope I did it right :) It has to be applied to forms-extra.css

Thank you very much for the beautification, it looks way better then the default :)

[fatsheep]

Thanks for the fast bug reports everyone, 1.6 BETA is available for download in the main post and it features a graphic installer as well as the fixes for the above reported bugs.

I can confirm them too. It's fixed by replacing "border: none" with "border: none !important" to the css for the radio-buttons and "border-width: 0;" to "border-width: 0 !important;" for the checkboxes.
I also removed the margin and padding from the types text and password, as it messed up some layouts (including the search-box in the top-right corner of http://tweakers.net )
I tried to create a patch. It was the first time I created one, so I hope I did it right :) It has to be applied to forms-extra.css

Thank you very much for the beautification, it looks way better then the default :)

Thanks, I looked at that web page as well as gmail and it's settings pages and through some experimentation I think I arrived with about the same solution that you did, it's in the 1.6 BETA. I'm going to check out your diff file now.

EDIT: I have a few less !important statements on the radio buttons but from what I've seen it still corrects the problem. If there are any more problems, link me to the site and I'll try to patch it.

[Dark Seraphim]

man I have been lookin for somethin like this for so long. thank you for this its awesome and works well on all the sites I go to and on my router. no longer have to look at those old dodgy circles and boxes got these kick *** new ones. I was wondering if I made my own and replaced the ones in the folder would they show up instead. im tryin to get the ones from vista, they look pretty nice.

[fatsheep]

man I have been lookin for somethin like this for so long. thank you for this its awesome and works well on all the sites I go to and on my router. no longer have to look at those old dodgy circles and boxes got these kick *** new ones. I was wondering if I made my own and replaced the ones in the folder would they show up instead. im tryin to get the ones from vista, they look pretty nice.

Yea sure go ahead and try it, make sure to post some screenshots to! ;)

[conjur3r]

Confirmed: checkboxes and radios are pretty in 1.7beta

Just a question, are buttons supposed to expand left and right after clicking them? You can view the differences by clicking and holding on a button.

I've disabled this behaviour by commenting out the following line under the

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
select {

selector

padding: 0px 1px;

[Mr.mouse]

can you create the same button as the Ubuntu default human theme ?


thanks

[fatsheep]

Confirmed: checkboxes and radios are pretty in 1.7beta

Just a question, are buttons supposed to expand left and right after clicking them? You can view the differences by clicking and holding on a button.

I've disabled this behaviour by commenting out the following line under the

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
select {

selector

padding: 0px 1px;

Nope that's a bug, thanks for the report - it is fixed in 1.8 BETA.


can you create the same button as the Ubuntu default human theme ?


thanks

If you make images that look like the human theme then yea you probably could do something similar.

[rockallite]

Great improvement since v1.1!

Confirmed a bug of the position of text input widgets in v1.8.
Screenshots uploaded. (http://mp3.baidu.com)
As far as I remember, this bug didn't exist in earlier versions. (~1.1, maybe?)

[mystery]

I hate to be the one bumping my own topic but I'd really appreciate some feedback. Of the 43 of you who downloaded the attachment so far, what did you think? Did it work well for you?

They look great thank you. If using the latest downloaded version of Firefox 2.0.0.4 just need to change /usr/lib/firefox to /opt/firefox in the commands you have kindly listed.:D

[martinarg]

Install worked fine with the graphic installer and the widget just looks great, and since I use gmail on a daily basis it really changed the looks of my day to day home page.
Great work!

[fatsheep]

Great improvement since v1.1!

Confirmed a bug of the position of text input widgets in v1.8.
Screenshots uploaded. (http://mp3.baidu.com)
As far as I remember, this bug didn't exist in earlier versions. (~1.1, maybe?)

Thanks. What exactly is the problem? Are you talking about how the button is higher then the text input?

[kknd]

Great!!!

[rockallite]

Thanks. What exactly is the problem? Are you talking about how the button is higher then the text input?

Actually, the button is in the correct position, while the text input seems to be vertically lower than the normal one. Maybe there's a redundant margin at the top of text input?

Since I'm not familiar with programming, I'm able to provide visual information only. :( If there's anything I can help to test or debug this, please do give me instructions. I can't wait to see perfect Firefox widgets!

(Edited: correct some typos.)

[rockallite]

Please take a look at the attached screenshots. There seems to be a redundant margin at the bottom of the button this time, making it higher than the original...I'm really confused now.

[rockallite]

In order to make everything clear, I did an experiment.

First, a web page for testing:
<html>
<body bgcolor="orange">
<input type="text" value="fatsheep"
style="position:absolute; top:0px; left:0px; width:75px; "/>
<input type="button" value="rocks"
style="position:absolute; top:0px; left:75px; width:75px; " />
</body>
</html>

Test #1, page rendering without the widget patch: (unnecessary edges are cut off for clarity)
http://ubuntuforums.org/attachment.php?attachmentid=35150&stc=1&d=1181675172

Test #2, page rendering with the widget patch applied:
http://ubuntuforums.org/attachment.php?attachmentid=35151&stc=1&d=1181675172

Result:
(Since I use absolute positioning, the data should be isolated for each widget.)
Normal: (test #1)
text input button
top 0px 0px
left 0px 75px
width 75px 75px
height 23px 23px

Patched: (test #2)
text input button
top 0px 2px
left 0px 77px
width 75px 75px
height 21px 23px


Conclusion:
After the patch being applied,
1. the text input remained the same position, but shrunk by 2px in height.
2. the button remained the same size, but moved by 2px downward and right.
3. fatsheep rocks! Need to keep on your good job, though...:p

[fatsheep]

In order to make everything clear, I did an experiment.

First, a web page for testing:
<html>
<body bgcolor="orange">
<input type="text" value="fatsheep"
style="position:absolute; top:0px; left:0px; width:75px; "/>
<input type="button" value="rocks"
style="position:absolute; top:0px; left:75px; width:75px; " />
</body>
</html>

Test #1, page rendering without the widget patch: (unnecessary edges are cut off for clarity)
http://ubuntuforums.org/attachment.php?attachmentid=35150&stc=1&d=1181675172

Test #2, page rendering with the widget patch applied:
http://ubuntuforums.org/attachment.php?attachmentid=35151&stc=1&d=1181675172

Result:
(Since I use absolute positioning, the data should be isolated for each widget.)
Normal: (test #1)
text input button
top 0px 0px
left 0px 75px
width 75px 75px
height 23px 23px

Patched: (test #2)
text input button
top 0px 2px
left 0px 77px
width 75px 75px
height 21px 23px


Conclusion:
After the patch being applied,
1. the text input remained the same position, but shrunk by 2px in height.
2. the button remained the same size, but moved by 2px downward and right.
3. fatsheep rocks! Need to keep on your good job, though...:p

Alright, thanks for that. I'll take a look next time I get a chance.

[grickaby]

Freakin' Sweet!

Easy to install (Just double clicked "Graphic Install" and it just worked. This is why I love UBUNTU!

[pirothezero]

Works great have loved it since it came out. Sorry I didn't post earlier.

[nchase]

I just installed the latest version. It fixes a bug that I had noticed in version 1.1. Thank you for this wonderful thing.

[LiamPreston]

It works very well for me - not the most adept of Linux newbies. It certainly is an improvement. Thank you very much.

[nosuchuser]

Thanks! A million thanks!

However...

There is no package called python-kiwi in 6.06, which I'm using. It's called kiwi, so perhaps you should look for the ubuntu distro variant and change the scripts according to that (that only happens in the graphical installer, the text installer did it right once I installed kiwi.

[Rui Pais]

hi,
just to say that the graphical installer worked here with swiftweasel either on Feisty32b as on Feisty64b.

Good work :)

[fatsheep]

Thanks for the comments everyone!


In order to make everything clear, I did an experiment.

First, a web page for testing:
<html>
<body bgcolor="orange">
<input type="text" value="fatsheep"
style="position:absolute; top:0px; left:0px; width:75px; "/>
<input type="button" value="rocks"
style="position:absolute; top:0px; left:75px; width:75px; " />
</body>
</html>

Test #1, page rendering without the widget patch: (unnecessary edges are cut off for clarity)
http://ubuntuforums.org/attachment.php?attachmentid=35150&stc=1&d=1181675172

Test #2, page rendering with the widget patch applied:
http://ubuntuforums.org/attachment.php?attachmentid=35151&stc=1&d=1181675172

Result:
(Since I use absolute positioning, the data should be isolated for each widget.)
Normal: (test #1)
text input button
top 0px 0px
left 0px 75px
width 75px 75px
height 23px 23px

Patched: (test #2)
text input button
top 0px 2px
left 0px 77px
width 75px 75px
height 21px 23px


Conclusion:
After the patch being applied,
1. the text input remained the same position, but shrunk by 2px in height.
2. the button remained the same size, but moved by 2px downward and right.
3. fatsheep rocks! Need to keep on your good job, though...:p

Fixed in 1.9:

http://img258.imageshack.us/img258/2804/fixedkf1.png

There was a 2 px margin applied to the Buttons, I just commented that out and there is no longer a problem.

Thanks! A million thanks!

However...

There is no package called python-kiwi in 6.06, which I'm using. It's called kiwi, so perhaps you should look for the ubuntu distro variant and change the scripts according to that (that only happens in the graphical installer, the text installer did it right once I installed kiwi.

I added a note about this on the main post.

[loserboy]

hey, thanks for this... I never knew this even existed till i stumbled onto it in ubuntuguide. Anyway I always knew there was something wrong with the widgets but couldnt figure it out... shows how observant I am.

could I suggest that you add a confirmation dialog when the script finishes installing, I ended up installing it like 3 times before i realized i just need to restart firefox.

btw 1.9 worked perfect for me thanks again

[tombug]

had this before used it for a day maybe, messes up some thing but now its all updated and works great:)
thanks for this great and very usefull

[zero_2x]

looks great, works better!! =)

Thanks men!!

[sunexplodes]

Yeah, kudos. Looks great.

[fatsheep]

could I suggest that you add a confirmation dialog when the script finishes installing, I ended up installing it like 3 times before i realized i just need to restart firefox.



Done in 2.0. Also, has python-kiwi been automatically installed for everyone? There is an error in the script, it shouldn't work at all. I've fixed that in 2.0 but I'm suprised no one mentioned that the graphic_install script didn't automatically install python-kiwi like it should. (I used the dpkg -l option to test if python-kiwi was installed instead of the dpkg -L option)

[loserboy]

actually now that you mention the graphic installer didn't work for me, but I thought it was because I did something wrong and was busy trying to figure out if it was just an instant install, text based installer was super easy though

[fatsheep]

actually now that you mention the graphic installer didn't work for me, but I thought it was because I did something wrong and was busy trying to figure out if it was just an instant install, text based installer was super easy though

Does the graphic installer work in 2.0 for you?

[loserboy]

I'll go go try and report back here in a minute

yep worked fine, not that it matters but you named the folder in the tarball 2.1 beta

[rockallite]

Excellent work on 2.0 beta!!

However, I highly recommend the patch introduced below, which is based on 2.0 beta. I'll show you some pictures.

From Google Search:
(http://www.google.com/)
http://img167.imageshack.us/img167/6655/googlediffmy5.png

From Gmail:
(http://mail.google.com/)
http://img201.imageshack.us/img201/9955/gmaildiffiz0.png

From Baidu MP3 Search:
(http://mp3.baidu.com/)
http://img201.imageshack.us/img201/1066/baidudiffkz6.png

With the patch applied, it makes the widgets look more similar to the original ones.

The real thing:
Here's how I patched form-extra.css:

## It changes the border of text input widgets to 2px, and adds a 1px 3d inner border
## for eye candy. Anyway, the original ones has a 2px border. We'd better follow that.
# line 5
/* Text inputs */

input[type=text],
input[type=password],
input:not([type]),
textarea {
border: 2px solid ThreeDShadow;
-moz-border-top-colors: ThreeDShadow Window;
-moz-border-right-colors: ThreeDShadow ThreeDHighlight;
-moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
-moz-border-left-colors: ThreeDShadow Window;
/* margin: 2px;
padding: 2px 0px; */
}


## Margins and paddings of dropdowns are removed. We should treat text inputs
## and dropdowns the same!
# line 98
/* Dropdowns */

select,
select:not([size]),
select[size="0"],
select[size="1"] {
## ...other configurations omitted...
/* margin: 2px;
padding: 0px 1px; */
-moz-border-radius: 1px;
}


Hey, that button is a bit higher!
You mean the patched version in the 3rd picture? That's true. But it's normal, even if the original version "appears" to be difference from that.

For fastidious users, please take a look at this:
http://img201.imageshack.us/img201/4759/baidudiff2pz8.png

(1) shows the original version. It seems that the button are horizontally aligned with the text input. But, wait!
(2) shows a darken version of (1) via GIMP. Notice that the button is ACTUALLY 1PX HIGHER than the text input. Don't fooled by the similar background color!
(3) shows the patched version. You'll see that it doesn't differ much from (2).

Conclusion:
The patched version is perfect. Well, nearly perfect.;)

[fatsheep]

Excellent work on 2.0 beta!!

However, I highly recommend the patch introduced below, which is based on 2.0 beta. I'll show you some pictures. (log in to see them!)

From Google Search:
(http://www.google.com/)
http://ubuntuforums.org/attachment.php?attachmentid=35551&stc=1&d=1182009360

From Gmail:
(http://mail.google.com/)
http://ubuntuforums.org/attachment.php?attachmentid=35552&stc=1&d=1182009575

From Baidu MP3 Search:
(http://mp3.baidu.com/)
http://ubuntuforums.org/attachment.php?attachmentid=35553&stc=1&d=1182009575

With the patch applied, it makes the widgets look more similar to the original ones.

The real thing:
Here's how I patched form-extra.css:

## It changes the border of text input widgets to 2px, and adds a 1px 3d inner border
## for eye candy. Anyway, the original ones has a 2px border. We'd better follow that.
# line 5
/* Text inputs */

input[type=text],
input[type=password],
input:not([type]),
textarea {
border: 2px solid ThreeDShadow;
-moz-border-top-colors: ThreeDShadow Window;
-moz-border-right-colors: ThreeDShadow ThreeDHighlight;
-moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
-moz-border-left-colors: ThreeDShadow Window;
/* margin: 2px;
padding: 2px 0px; */
}


## Margins and paddings of dropdowns are removed. We should treat text inputs
## and dropdowns the same!
# line 98
/* Dropdowns */

select,
select:not([size]),
select[size="0"],
select[size="1"] {
## ...other configurations omitted...
/* margin: 2px;
padding: 0px 1px; */
-moz-border-radius: 1px;
}


Hey, that button is a bit higher!
You mean the patched version in the 3rd picture? That's true. But it's normal, even if the original version "appears" to be difference from that.

For fastidious users, please take a look at this: (log in to see the picture)
http://ubuntuforums.org/attachment.php?attachmentid=35554&stc=1&d=1182011543

(1) shows the original version. It seems that the button are horizontally aligned with the text input. But, wait!
(2) shows a darken version of (1) via GIMP. Notice that the button is ACTUALLY 1PX HIGHER than the text input. Don't fooled by the similar background color!
(3) shows the patched version. You'll see that it doesn't differ much from (2).

Conclusion:
The patched version is perfect. Well, nearly perfect.;)

Good work on the patch but I don't see any pictures. Did you mean to attach a picture?

[sd.chen]

Beautiful! You should submit this to Mozilla...

[conjur3r]

I've noticed a minor rendering bug to radios and checkboxes. When they have been specified a height or width that is greater than 13px or 12px (depending on if it's a radio or checkbox), you get repeating of the images. Take a look at the picture.

This was caused by the following html/css:


<style type="text/css">
input {
height: 1.5em;
width: 1.5em;
}
</style>

<h1>radio</h1>
<input type="radio" name="blah" /> option 1<br />
<input type="radio" name="blah" /> option 2<br />
<input type="radio" name="blah" /> option 3

<h1>checkbox</h1>
<input type="checkbox" name="bleh" /> option 1<br />
<input type="checkbox" name="bleh" /> option 2<br />
<input type="checkbox" name="bleh" /> option 3


To fix this problem, I've tried specifying no-repeat to the background-image commands for those form images but it didn't work too well. So I ended up with a temporary fix of restricting the size of checkboxes and radios to 12px or 13px width and height (changes highlighted in bold):


input[type="radio"] {
width: 13px !important;
height: 13px !important;
background-image: url("form-widgets/radio.png");
-moz-border-radius: 0;
border: none !important;
background-color: inherit;
}

...

input[type="checkbox"] {
width: 12px !important;
height: 12px !important;
border-width: 0 !important;
background-image: url("form-widgets/checkbox.png");
background-color: -moz-Field;
}


Edit: I am using 2.0 beta

[rockallite]

Good work on the patch but I don't see any pictures. Did you mean to attach a picture?

I'm sorry. Didn't know that images uploaded to ubuntuforums.org don't display via [img] tags. I've changed the image source to imageshack.us. It should be OK now.

Here's the link to my post, for convenience::-P
http://ubuntuforums.org/showpost.php?p=2856079&postcount=235

[rockallite]

I've noticed a minor rendering bug to radios and checkboxes. When they have been specified a height or width that is greater than 13px or 12px (depending on if it's a radio or checkbox), you get repeating of the images. Take a look at the picture.

...

Confirmed this bug in 2.0 beta from http://imageshack.us ;)
A picture attached below:
http://img72.imageshack.us/img72/8368/imageshackww7.png

However, I don't think it's a good idea to make widgets fixed in size. It would change the layout of web pages, thus violate (Mozilla) browser standard.

[mostwanted]

It's not working for me. My Firefox does live in /usr/lib/firefox and the post-install notice says it installs correctly. I've restarted Firefox, but still get the old square widgets so what am I doing wrong?

[peppy.ch]

work's and looks great
thanks

[fatsheep]

I've noticed a minor rendering bug to radios and checkboxes. When they have been specified a height or width that is greater than 13px or 12px (depending on if it's a radio or checkbox), you get repeating of the images. Take a look at the picture.

This was caused by the following html/css:


<style type="text/css">
input {
height: 1.5em;
width: 1.5em;
}
</style>

<h1>radio</h1>
<input type="radio" name="blah" /> option 1<br />
<input type="radio" name="blah" /> option 2<br />
<input type="radio" name="blah" /> option 3

<h1>checkbox</h1>
<input type="checkbox" name="bleh" /> option 1<br />
<input type="checkbox" name="bleh" /> option 2<br />
<input type="checkbox" name="bleh" /> option 3


To fix this problem, I've tried specifying no-repeat to the background-image commands for those form images but it didn't work too well. So I ended up with a temporary fix of restricting the size of checkboxes and radios to 12px or 13px width and height (changes highlighted in bold):


input[type="radio"] {
width: 13px !important;
height: 13px !important;
background-image: url("form-widgets/radio.png");
-moz-border-radius: 0;
border: none !important;
background-color: inherit;
}

...

input[type="checkbox"] {
width: 12px !important;
height: 12px !important;
border-width: 0 !important;
background-image: url("form-widgets/checkbox.png");
background-color: -moz-Field;
}


Edit: I am using 2.0 beta

Could you provide links to web pages where this bug occurs? I do see it in your html but I haven't seen it on an actual web site.

Excellent work on 2.0 beta!!

However, I highly recommend the patch introduced below, which is based on 2.0 beta. I'll show you some pictures.

From Google Search:
(http://www.google.com/)
http://img167.imageshack.us/img167/6655/googlediffmy5.png

From Gmail:
(http://mail.google.com/)
http://img201.imageshack.us/img201/9955/gmaildiffiz0.png

From Baidu MP3 Search:
(http://mp3.baidu.com/)
http://img201.imageshack.us/img201/1066/baidudiffkz6.png

With the patch applied, it makes the widgets look more similar to the original ones.

The real thing:
Here's how I patched form-extra.css:

## It changes the border of text input widgets to 2px, and adds a 1px 3d inner border
## for eye candy. Anyway, the original ones has a 2px border. We'd better follow that.
# line 5
/* Text inputs */

input[type=text],
input[type=password],
input:not([type]),
textarea {
border: 2px solid ThreeDShadow;
-moz-border-top-colors: ThreeDShadow Window;
-moz-border-right-colors: ThreeDShadow ThreeDHighlight;
-moz-border-bottom-colors: ThreeDShadow ThreeDHighlight;
-moz-border-left-colors: ThreeDShadow Window;
/* margin: 2px;
padding: 2px 0px; */
}


## Margins and paddings of dropdowns are removed. We should treat text inputs
## and dropdowns the same!
# line 98
/* Dropdowns */

select,
select:not([size]),
select[size="0"],
select[size="1"] {
## ...other configurations omitted...
/* margin: 2px;
padding: 0px 1px; */
-moz-border-radius: 1px;
}


Hey, that button is a bit higher!
You mean the patched version in the 3rd picture? That's true. But it's normal, even if the original version "appears" to be difference from that.

For fastidious users, please take a look at this:
http://img201.imageshack.us/img201/4759/baidudiff2pz8.png

(1) shows the original version. It seems that the button are horizontally aligned with the text input. But, wait!
(2) shows a darken version of (1) via GIMP. Notice that the button is ACTUALLY 1PX HIGHER than the text input. Don't fooled by the similar background color!
(3) shows the patched version. You'll see that it doesn't differ much from (2).

Conclusion:
The patched version is perfect. Well, nearly perfect.;)

Added in 2.1, thanks for the bug report. :)

[fortunecookie289]

Installing this changed my default firefox font, although it still shows the same default font under preferences.
I tried uninstalling, and the font change remained.
Any way this could be fixed without me having to revert to an earlier backup of my system? Forgive me if this was already answered (I did a search through the thread and didn't come up with anything)

[DjBones]

great work! i had to change the path because i use swiftfox, but it worked like a charm
:popcorn:

[fatsheep]

Installing this changed my default firefox font, although it still shows the same default font under preferences.
I tried uninstalling, and the font change remained.
Any way this could be fixed without me having to revert to an earlier backup of my system? Forgive me if this was already answered (I did a search through the thread and didn't come up with anything)

I'm really not sure how that could happen? What was your default font and what is it now?

[conjur3r]

Could you provide links to web pages where this bug occurs? I do see it in your html but I haven't seen it on an actual web site.

http://govsearch.publications.gov.au/search/search.cgi?collection=pubs&chksummary=chksummary&fscope=512&form=simple&fqp=1&query=book

I played around with no-repeat and got it to work but there's white rounded areas filling up the missing gaps. Maybe when the height/width is larger than the image, the image should be recentred (if possible)?

[Surkow]

http://img508.imageshack.us/img508/1180/phpbbbulletuv9.png

Currently my profile in phpBB 2.0 looks like this at the section where you can specifiy your gender.

Part of the code:

<tr>
<td class="row1"><span class="gen">Gender:</span></td>
<td class="row2">
<input disabled="disabled" name="gender" value="0" type="radio">
<span class="gen">None Specified</span>&nbsp;&nbsp;
<input name="gender" value="1" checked="checked" type="radio">
<span class="gen">Male</span>&nbsp;&nbsp;

<input name="gender" value="2" type="radio">
<span class="gen">Female</span></td>
</tr>

As you can see the bullet is disabled and suffers from a render error.

[fortunecookie289]

I'm really not sure how that could happen? What was your default font and what is it now?

My default font was serif, and my preferences still show it as being serif, but it looks more like.... arial? sorry I'm bad at identifying fonts.
But the font change was the first thing I noticed after restarting firefox after my install.

[fatsheep]

It's not working for me. My Firefox does live in /usr/lib/firefox and the post-install notice says it installs correctly. I've restarted Firefox, but still get the old square widgets so what am I doing wrong?

Sorry missed this post. First off, make sure you are closing out ALL firefox windows and then restarting firefox. I've left a download window open before and thought that the script wasn't working but I actually just hadn't closed everything out. Second off, make sure you are executing the firefox at /usr/lib/firefox. Go to the terminal and type: /usr/lib/firefox/firefox

Also you could try manually inspecting the end of the forms.css file: gedit /usr/lib/firefox/res/forms.css

Look for a big commented section that looks like:

/******* BEGIN EXTRA FIREFOX WIDGETS *****/

And a respective:

/******** END EXTRA FIREFOX WIDGETS ******/

at the end.