• From: Lincoln, UK
  • Registered: 2008-11-20
  • Posts: 4,429

Topic: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

I am not sure if anyone else has noticed(?), but Iceweasel's default page loading throbber is a bit fugly when using dark GTK+ themes. I never noticed this when running Firefox under Ubuntu, so I guess this is either a default Firefox setting, which Ubuntu changes, or, it is not a default and the Iceweasel developers have modified it. Either way, it is still fugly and I wanted to fix it on my systems, so I created a custom throbber.

To use my throbber (that almost sounds wrong), you will need to install the Stylish Firefox extension. Once Stylish is installed, create a new style and paste in the following code:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* regular throbber */
#navigator-throbber {
list-style-image: url(data:image/gif;base64,R0lGODlhEAAQAIABAG5ubv///yH+J0NyZWF0ZWQgd2l0aCBHSU1QIGJ5IFBoaWxpcCBOZXdib3JvdWdoLgAh+QQBCgABACwAAAAAEAAQAAACIIyPaQDbwZyEL1KFs0Y2246B26iJyfd4Kckq6PResjkWADs=) !important;
}
/* loading indicator */
#navigator-throbber[busy="true"] {
list-style-image: url(data:image/gif;base64,R0lGODlhEAAQAKEAAG5ubv///25ubm5ubiH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAEAAQAAACI5SPaREG4KB4q01Jr9q8o8xl4DZ6ZlcmohSy56us0azVMmwUACH5BAEKAAMALAAAAAAQABAAAAIjnI9pABax2mDRwSmp2rwfzWngNnpmVyaiFLLnq6wVNss0bBQAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA2xOCm4OZSJXePGtbPRvYlSX5Paiymi4CxupMye9RAAAh+QQBCgADACwAAAAAEAAQAAACI5yPaQDbw0wIrsI3ld4cRf59m9iVHamEz7iabvqolnxZ71AAACH5BAEKAAMALAAAAAAQABAAAAIinI9pANvDnIQvUoWzRjaHMHngRpYdZp2KWrZcBU9pfLlGAQAh+QQBCgADACwAAAAAEAAQAAACIpyPaQDbw5yEL1KFs0Y2246B26iJSRBMGUq2ZQVPX3y5RgEAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA28OchC9ShbNGNtuOgduoicn3eCnJKugUBNM7xO1RAAAh+QQBCgADACwAAAAAEAAQAAACI5yPaQDbw5yEL1KFs0Y2246B26iJyfd4KckqqBEE0zvEUzsUACH5BAEKAAMALAAAAAAQABAAAAIjnI9pANvDnIQvUoWzRjbbjoHbqInJ93gpySpWEEyoAcsrWwAAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA28OchC9ShbNGNtuOgduoicn3eCnJKkEwocYbVytbAAAh+QQBCgADACwAAAAAEAAQAAACIpyPaQDbw5yEL1KFs0Y2246B26gFwWaZ6EO2YQVPX3y5RgEAIfkEAQoAAwAsAAAAABAAEAAAAiKcj2kA28OchC9ShbNGIWzbfc9GklZmnZhatklaxRM8uUMBADs=) !important;
}
/* LOADING - Animated Loading Throbber: */

tab[busy] .tab-icon-image
{
  list-style-image: url("data:image/gif;base64,R0lGODlhEAAQAKEAAG5ubv///25ubm5ubiH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAA EAAQAAACI5SPaREG4KB4q01Jr9q8o8xl4DZ6ZlcmohSy56us0azVMmwUACH5BAEKAAMALAAAAAAQABAAAAIjnI9pABax2mDRwSmp2rwfzWngNnpmVyaiFLLnq6wVNss0bBQAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA2xOCm4OZSJXePGtbPRvYlSX5Paiymi4CxupMye9RAAAh+QQBCgADACwAAAAAEAAQAAACI5yPaQDbw0wIrsI3ld4cRf59m9iVHamEz7iabvqolnxZ71AAACH5BAEKAAMALAAAAAAQABAAAAIinI9pANvDnIQvUoWzRjaHMHngRpYdZp2KWrZcBU9pfLlGAQAh+QQBCgADACwAAAAAEAAQAAACIpyPaQDbw5yEL1KFs0Y2246B26iJSRBMGUq2ZQVPX3y5RgEAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA28OchC9ShbNGNtuOgduoicn3eCnJKugUBNM7xO1RAAAh+QQBCgADACwAAAAAEAAQAAACI5yPaQDbw5yEL1KFs0Y2246B26iJyfd4KckqqBEE0zvEUzsUACH5BAEKAAMALAAAAAAQABAAAAIjnI9pANvDnIQvUoWzRjbbjoHbqInJ93gpySpWEEyoAcsrWwAAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA28OchC9ShbNGNtuOgduoicn3eCnJKkEwocYbVytbAAAh+QQBCgADACwAAAAAEAAQAAACIpyPaQDbw5yEL1KFs0Y2246B26gFwWaZ6EO2YQVPX3y5RgEAIfkEAQoAAwAsAAAAABAAEAAAAiKcj2kA28OchC9ShbNGIWzbfc9GklZmnZhatklaxRM8uUMBADs=") !important;
}

#navigator-throbber {
  background-color: transparent !important;
  min-height: 0 !important;
  width: 16px !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 7px 0 7px !important;
  opacity: 1 !important;
}

Simples. big_smile

My website | Follow me on Twitter | CrunchBang on DistroWatch

corenominal's Website

  • From: Lincoln, UK
  • Registered: 2008-11-20
  • Posts: 4,429

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

corenominal wrote:

...so I guess this is either a default Firefox setting, which Ubuntu changes, or, it is not a default and the Iceweasel developers have modified it.

roll

I think I know what I mean. big_smile

My website | Follow me on Twitter | CrunchBang on DistroWatch

corenominal's Website

  • From: Lost River Lake
  • Registered: 2009-02-19
  • Posts: 516

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

corenominal wrote:

I am not sure if anyone else has noticed(?), but Iceweasel's default page loading throbber is a bit fugly when using dark GTK+ themes.

Indeed! Thanks for your throbber, it's perfect!

I never use smilies, but there are exceptions that prove the rule wink
Now playing: Libre.fm
  • From: Lincoln, UK
  • Registered: 2008-11-20
  • Posts: 4,429

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

Piraja wrote:

Indeed! Thanks for your throbber, it's perfect!

I am happy you like it. smile

My website | Follow me on Twitter | CrunchBang on DistroWatch

corenominal's Website

  • From: France, but living in Prague
  • Registered: 2009-04-13
  • Posts: 222

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

I use nightshade theme and think it fits very well with dark gtk+ themes :-)

  • Registered: 2009-10-09
  • Posts: 429

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

I like this throbber a lot!


errmmm... that didn't sound right at all...

lol

Last edited by chillicampari (2010-06-07 03:49:49)

  • From: Lincoln, UK
  • Registered: 2008-11-20
  • Posts: 4,429

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

^ lol

My website | Follow me on Twitter | CrunchBang on DistroWatch

corenominal's Website

  • Registered: 2009-11-03
  • Posts: 2,011

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

Oh, it's an Iceweasel throbber. neutral
...and here I thought you were just excited to see me.

Thanks Corenominal.
Don't really use Firefox/IceWeasel that often these days, but it throbs much nicer now with my dark themes.
Looks great as well big_smile

Last edited by gutterslob (2010-06-07 13:26:45)

Point & Squirt
  • Registered: 2010-03-26
  • Posts: 548

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

That's nice -- it looks like it matches the darker gray of the titlebar.  Is that correct?  Thanks for all the good work you do corenominal.  smile

NOTE TO SELF - do not fall into their trap...do not fall into their trap...

  • From: Athens, Greece
  • Registered: 2009-10-22
  • Posts: 600

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

Saturday I made a new dark theme (which I'll upload later today) and the whole Sunday I was trying to make openoffice (easy one, from gtkrc) and thunderbird/firefox (harder one) to work with it. For Thunderbird I used the /Profiles/.../chrome/userChrome.css file to make the menu text color white instead of the showing black contrary to theme's default. here is the result for thunderbird:

http://i964.photobucket.com/albums/ae127/slapfish17/etc/th_2010-06-07-143006_1280x800_scrot.png

and here is the content of userChrome.css which usually doesn't exist by default and has to be created:

menubar > menu {
   color: White !important;  /* color of menu text */
}
menubar > menu[_moz-menuactive="true"] {
   color: White !important;  /* color of menu text on mouse over*/
}
menubar > menu[_moz-menuactive="true"][open="true"]  {
   color: White !important;   /* color of menu text on menu open */
}

Sadly, I don't know (yet) how to change the black color of firefox's menu bar to white with userChrome.css, so I installed an addon to hide the menu bar and moved all the staff to another toolbar. the result of a fullscreened firefox is:

http://i964.photobucket.com/albums/ae127/slapfish17/etc/th_2010-06-07--1275919295_1280x800_scr.png

It's quite easy to change the color of menubar on all mozilla apps through gtkrc file, but with fixed thunderbird, I'll have to find a way to change it only on firefox.

Also a firefox/thunderbird theme, apart from the default which tries to adopt the gtkrc settings will *fix* any color problems, but this is well known in this thread by now and I'm just making it more clear.

Edit: I fixed the firefox link

Last edited by slapfish (2010-06-09 12:19:21)

  • Registered: 2010-03-26
  • Posts: 548

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

slapfish you may already be aware of this little site that has helped me, being the computer putterer that I am.  Maybe you'll find something here http://www.linnhe2.free-online.co.uk/fi … hrome.html  smile

  • From: Athens, Greece
  • Registered: 2009-10-22
  • Posts: 600

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

winotree wrote:

slapfish you may already be aware of this little site that has helped me, being the computer putterer that I am.  Maybe you'll find something here http://www.linnhe2.free-online.co.uk/fi … hrome.html  smile

Just before you post it I have found a solution with a white persona, but this site rocks!!! thanks!!!

personas remove: check!
useless addons remove: check!
update userChrome.css: check!

/* background color for all toolbars */
toolbox,
#toolbar-menubar,
#nav-bar,
#PersonalToolbar,
#FindToolbar,
tabbox,
sidebarheader,
#sidebar-box,
window statusbarpanel {
  -moz-appearance: none !important;
  background-color: White !important;
}
  • Registered: 2010-03-26
  • Posts: 548

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

Good deal.  big_smile

EDIT  - has anyone else noticed that this new throbber is round in the nav or menu bar, wherever you have it, and it's qquare on the tabs?  Now that's clever.  I like it even more now.

Last edited by winotree (2010-06-07 15:27:51)

  • From: California, USA
  • Registered: 2008-11-29
  • Posts: 8,647

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

@winotree - I added the code and both my throbbers changed to the square one.

The code under "regular throbber" and "loading indicator" changed the throbber on the toolbar so did you not add that part?

Note: ** Please read before posting **

BTW if you wish to contact me, send me an e-mail instead of a PM.
  • Registered: 2010-03-26
  • Posts: 548

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

I installed it correctly so this http://userstyles.org/styles/3228 may be over-riding it.  It's OK.  Thanks for checking on me.  smile

  • pvsage
  • Internal Affairs
  • Online
  • From: Section Six
  • Registered: 2009-10-18
  • Posts: 6,012

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

@corenominal:  Does this mean that the next Statler alpha will include more dark themes? big_smile  Don't get me wrong, I think the light gray themes you've been including with CrunchBang have a very polished look, but it seems a lot of us are leaning toward The Dark Side™.

while ( ! ( succeed = try() ) );
  • From: California, USA
  • Registered: 2008-11-29
  • Posts: 8,647

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

Well he did say there would be new themes:

corenominal wrote:

So, I thought it might be good to give a little progress report on the next Statler build, alpha 2. [...] New Openbox, Xfce and GTK+ themes. New icon themes. etc. etc.

It would be a nice surprise if they were dark themes.

Note: ** Please read before posting **

BTW if you wish to contact me, send me an e-mail instead of a PM.
  • From: Athens, Greece
  • Registered: 2009-10-22
  • Posts: 600

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

At least some of them are already in my system trough apt-get and they are... darkish smile

  • From: Lincoln, UK
  • Registered: 2008-11-20
  • Posts: 4,429

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

pvsage wrote:

@corenominal:  Does this mean that the next Statler alpha will include more dark themes? big_smile  Don't get me wrong, I think the light gray themes you've been including with CrunchBang have a very polished look, but it seems a lot of us are leaning toward The Dark Side™.

You have gone and done it now; I was quite settled on my Shiki-Statler theme, but then I read your post and decided to have a play with creating a darker version, and now I do not know which one I prefer! big_smile

My website | Follow me on Twitter | CrunchBang on DistroWatch

corenominal's Website

  • From: California, USA
  • Registered: 2008-11-29
  • Posts: 8,647

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

Did you say Shiki-Statler? I WANT NOW! GIMMEEEE!

Note: ** Please read before posting **

BTW if you wish to contact me, send me an e-mail instead of a PM.
  • From: Lincoln, UK
  • Registered: 2008-11-20
  • Posts: 4,429

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

anonymous wrote:

Did you say Shiki-Statler? I WANT NOW! GIMMEEEE!

I will update the repository when I get home, it should be in the statler-theme package, version 0.10. smile

My website | Follow me on Twitter | CrunchBang on DistroWatch

corenominal's Website

  • pvsage
  • Internal Affairs
  • Online
  • From: Section Six
  • Registered: 2009-10-18
  • Posts: 6,012

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

shiki-statler apparently made it into the repos a couple days ago.  Seems about the same as StatlerBox, except the title bar is a little darker.

By the way, corenominal's trobber looks great with very dark themes like Arta-Dark and the black themes that gutterslob and I like to tinker with.

while ( ! ( succeed = try() ) );

23 Reply by dom

  • dom
  • #! Member
  • Offline
  • From: de
  • Registered: 2010-09-29
  • Posts: 56

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

I just did a fresh install of the newest stalter images and noticed the white background of the tabs section in iceweasel. i'm not sure if this was before or it came with the updated artwork.

ho can i fix it to be the same greyish color as the navigation bar?

http://img33.imageshack.us/img33/3865/201012161292527635797x6.png

cheers.

EDIT: Found the problem. The firefox addon "num.ext" caused the white background.

Last edited by dom (2010-12-17 11:15:30)

[geek to live; don't live to geek]
  • Hanna
  • Conky Queen
  • Offline
  • From: Finland
  • Registered: 2008-11-29
  • Posts: 752

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

Sorry to waking this thread. Anyway I want to change the throbber in ff4 and I have to say I don't exactly understand how it's made with stylish (or any other way...).

 list-style-image: url("data:image/gif;base64,R0lGODlhEAAQAKEAAG5ubv///25ubm5ubiH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAA EAAQAAACI5SPaREG4KB4q01Jr9q8o8xl4DZ6ZlcmohSy56us0azVMmwUACH5BAEKAAMALAAAAAAQABAAAAIjnI9pABax2mDRwSmp2rwfzWngNnpmVyaiFLLnq6wVNss0bBQAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA2xOCm4OZSJXePGtbPRvYlSX5Paiymi4CxupMye9RAAAh+QQBCgADACwAAAAAEAAQAAACI5yPaQDbw0wIrsI3ld4cRf59m9iVHamEz7iabvqolnxZ71AAACH5BAEKAAMALAAAAAAQABAAAAIinI9pANvDnIQvUoWzRjaHMHngRpYdZp2KWrZcBU9pfLlGAQAh+QQBCgADACwAAAAAEAAQAAACIpyPaQDbw5yEL1KFs0Y2246B26iJSRBMGUq2ZQVPX3y5RgEAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA28OchC9ShbNGNtuOgduoicn3eCnJKugUBNM7xO1RAAAh+QQBCgADACwAAAAAEAAQAAACI5yPaQDbw5yEL1KFs0Y2246B26iJyfd4KckqqBEE0zvEUzsUACH5BAEKAAMALAAAAAAQABAAAAIjnI9pANvDnIQvUoWzRjbbjoHbqInJ93gpySpWEEyoAcsrWwAAIfkEAQoAAwAsAAAAABAAEAAAAiOcj2kA28OchC9ShbNGNtuOgduoicn3eCnJKkEwocYbVytbAAAh+QQBCgADACwAAAAAEAAQAAACIpyPaQDbw5yEL1KFs0Y2246B26gFwWaZ6EO2YQVPX3y5RgEAIfkEAQoAAwAsAAAAABAAEAAAAiKcj2kA28OchC9ShbNGIWzbfc9GklZmnZhatklaxRM8uUMBADs=") !important;
}

Like what is the meaning of that long mess?

HANNA (without "h" in the end) likes green and #! smile
Also know as ultraturquoise online / #! last.fm / #! DeviantART / U / Q
  • From: Lincoln, UK
  • Registered: 2008-11-20
  • Posts: 4,429

Re: Stylish Iceweasel/Firefox throbber for dark GTK+ themes

The long mess is the image, encoded to base64. From what I can remember, Firefox uses base64 to encode/decode small images such as favicons etc.

My website | Follow me on Twitter | CrunchBang on DistroWatch

corenominal's Website