VectorLinux
October 21, 2014, 11:35:01 pm *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News: Visit our home page for VL info. To search the old message board go to http://vectorlinux.com/forum1. The first VL forum is temporarily offline until we can find a host for it. Thanks for your patience.
 
Now powered by KnowledgeDex.
   Home   Help Search Login Register  
Please support VectorLinux!
Pages: [1]
  Print  
Author Topic: How to replace the Firefox "throbber" with a VL one.  (Read 4931 times)
exeterdad
Packager
Vectorian
****
Posts: 2046



« on: August 27, 2007, 11:19:28 am »

First of all the subject is a bit misleading as we won't be actually replacing anything.  Just adding a override in our home dir that uses a VL animation rather than the one included with Firefox.  One could actually replace the throbber in the system files by exploding a .jar file, swapping the images, then repacking the jar file again.  But if you screw up...  well then Firefox will be screwed up.

A large part of Firefox (and many Mozilla apps) are merely javascript and .css files.  Most of the browser GUI is programmed like a web page.


Here's the trobber before

And after

Right click this image and save it to
Quote
/home/you/.mozilla/firefox/xxxxx.default/chrome
This static image will be visible above the search bar
 
Right click and save this image to the same location.
This will be the animation that plays while a page is loading.

Now, in the same folder create new text file called userChrome.css.  Add this to the file and save it:
Code:
/*Throbber Control*/

toolbar #navigator-throbber { list-style-image: url("VL-static-30x30.gif") !important; }
toolbar #navigator-throbber[busy="true"] { list-style-image: url("VL-animate-30x30.gif") !important; opacity: 1 !important }

That's it!  Just reload Firefox and your done.  Deleting the 3 new files from the chrome dir will restore Firefox back to original if you wish.
The second entry in userChrome.css can be edited to your liking.  If the
Quote
opacity: 1 !important
is removed...  the animation will become semi-transparent during load time.  It actually looks bleached out.  This is Firefoxs default.  If you would like that effect to a lesser degree, just increase the number in
Quote
opacity: 1
to your liking.

Of course you may use any images you wish ( I should of put more love into the VL one I made). They just have to be in .gif format.  The animated one is a animated .gif of course.  The number of frames doesn't matter.  The size doesn't seem to matter either.  But a larger image swells up the height of the bar that it rests in.
Logged
easuter
Global Moderator
Vectorian
*****
Posts: 2160



« Reply #1 on: August 28, 2007, 10:57:36 am »

Awesome!

Another addition for the next firefox release (if thats ok with you) Wink

BTW, just remembered, incognu also has something like this for the seamonkey package (a V + globe throbber)
Logged

exeterdad
Packager
Vectorian
****
Posts: 2046



« Reply #2 on: August 28, 2007, 11:19:18 am »

Of course it's okay!  Grin But give me some heads up.  I'll work on a segment to add to the packagers build script so the changes are in firefox's system files rather than in the users home directory.

And I would like to work on the globe more.  Since its a round gif, the edges are too jagged (at least on my LCD monitor).  I'm wondering if I should place it on a square black background.  Or would that look a little too Internet Explorer?

Input and ideas would be good here. 
« Last Edit: August 28, 2007, 11:21:35 am by exeterdad » Logged
M0E-lnx
Administrator
Vectorian
*****
Posts: 3184



« Reply #3 on: August 28, 2007, 12:04:44 pm »

That's crazy!  Grin
Logged

incognu
Packager
Vectorite
****
Posts: 256



WWW
« Reply #4 on: August 29, 2007, 03:47:21 pm »

Of course it's okay!  Grin But give me some heads up.  I'll work on a segment to add to the packagers build script so the changes are in firefox's system files rather than in the users home directory.

And I would like to work on the globe more.  Since its a round gif, the edges are too jagged (at least on my LCD monitor).  I'm wondering if I should place it on a square black background.  Or would that look a little too Internet Explorer?

Input and ideas would be good here. 

Hi exeterdad,

Nice work!

Round gifs are a pain because they can't handle partial transparency, thus have jagged edges.

The trick is to use a cheat of a neutral grey colour, just a little larger than the image, so the grey blends with the toolbar background and looks smooth.  The drawback is, that if someone's got a very dark or colourful toolbar, the cheat shows up.  But, imo it's worth it to get a smooth look 90% of the time.

That's what I did with the animated VL SeaMonkey throbbers.  I use png for the single ones, so they have a nice smooth edge without using a cheat background.



the vl throbbers I use in my Nuvola theme: vlthrobbers.tar.bz2

source for a of vl anim throbber (so you can see what I mean): xcf src
Logged

Vector Linux 6.0 Light
exeterdad
Packager
Vectorian
****
Posts: 2046



« Reply #5 on: August 29, 2007, 05:12:50 pm »

incognu
Logged
incognu
Packager
Vectorite
****
Posts: 256



WWW
« Reply #6 on: August 29, 2007, 08:24:49 pm »

Aw, you're making me blush!  Grin
Logged

Vector Linux 6.0 Light
incognu
Packager
Vectorite
****
Posts: 256



WWW
« Reply #7 on: September 03, 2007, 09:07:54 pm »

Thought I'd add another little tip about the "cheat"

Ideally, you want it as small  as possible, so it won't show much of a "halo", but just enough larger than the throbber icon to blend the jagged edges away.  For circles, I've had better luck achieving this by starting out with a large circle, and resizing down, then using that behind the throbber frames.  This lets you get a cheat thats only fractionally (a fraction of a pixel) larger than the throbber image itself.  I usually have the throbber image smaller than the canvas, also, to allow room for the cheat.

For example, I might start out with a cheat that's a 114px grey circle in a 128px image, and scale down.

Sometimes too, you can get good results by making a copy of the real throbber layer, then Layer > Colours > Brightness-Contrast, reduce contrast completely to give a grey image without detail; then boost brightness.  Make a few copies of that layer and test by making a gif copy of the image.  This is good to try for non-circle shapes.

Testing is easier if you have a test html page, with background set to something like #c7c7c7
Logged

Vector Linux 6.0 Light
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!