throbber sizing

Discuss application theming and theme development.
Post Reply
User avatar
cheeaun
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia
Contact:

throbber sizing

Post by cheeaun »

I hope this is useful for some Firefox themers
http://cheeaun.phoenity.com/weblog/2004 ... izing.html

Cheers.
Phoenity http://phoenity.com/
You should follow me on Twitter here http://twitter.com/cheeaun
Old miahz
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by Old miahz »

Interesting. Throw a link up on the KB page.
http://kb.mozillazine.org/index.phtml?t ... evelopment
User avatar
aaron
Posts: 3130
Joined: November 4th, 2002, 8:49 pm
Location: Texas
Contact:

Post by aaron »

Nice. I'll do that for my themes.
User avatar
Schrade
Posts: 1187
Joined: March 17th, 2004, 12:24 am

Post by Schrade »

Is there a way to make this code work from userChrome.css? For instance - I have two throbber files. One is a normal sized icon and the other is small sized like the default Firefox one. I'm wanting to know if I can add some code to userChrome.css to use the normal sized throbber on bars with normal sized icons and then use the smaller throbber file for places like the menubar.

Or is this only possible inside of a theme package?

Here's my throbbers:

Image

Image
User avatar
cheeaun
Posts: 826
Joined: November 5th, 2002, 10:55 pm
Location: Malaysia
Contact:

Post by cheeaun »

Schrade wrote:Is there a way to make this code work from userChrome.css? For instance - I have two throbber files. One is a normal sized icon and the other is small sized like the default Firefox one. I'm wanting to know if I can add some code to userChrome.css to use the normal sized throbber on bars with normal sized icons and then use the smaller throbber file for places like the menubar.

Or is this only possible inside of a theme package?
Yes, it can work from userChrome.css too. You also have to create the non-animated versions of the throbbers. I haven't try this but you can try these codes:

Code: Select all

#navigator-throbber {
list-style-image: url("throbber.gif");
}
#navigator-throbber[busy="true"] {
list-style-image: url("throbber_loading.gif");
}

toolbar[iconsize="small"] #navigator-throbber,
toolbar[mode="text"] #navigator-throbber,
toolbar:not([currentset*="-button"]) #throbber-box > #navigator-throbber{
list-style-image: url("throbber_small.gif");
}
toolbar[iconsize="small"] #navigator-throbber[busy="true"],
toolbar[mode="text"] #navigator-throbber[busy="true"],
toolbar:not([currentset*="-button"]) #throbber-box > #navigator-throbber[busy="true"] {
list-style-image: url("throbber_small_loading.gif");
}
Just name the image files accordingly and move them to the same folder as where userChrome.css is located.
Phoenity http://phoenity.com/
You should follow me on Twitter here http://twitter.com/cheeaun
User avatar
Schrade
Posts: 1187
Joined: March 17th, 2004, 12:24 am

Post by Schrade »

Yay it works! Thanks so much. I had to add !important though:

Code: Select all

#navigator-throbber {
list-style-image: url("throbber.gif") !important;
}
#navigator-throbber[busy="true"] {
list-style-image: url("throbber_loading.gif") !important;
}

toolbar[iconsize="small"] #navigator-throbber,
toolbar[mode="text"] #navigator-throbber,
toolbar:not([currentset*="-button"]) #throbber-box > #navigator-throbber{
list-style-image: url("throbber_small.gif") !important;
}
toolbar[iconsize="small"] #navigator-throbber[busy="true"],
toolbar[mode="text"] #navigator-throbber[busy="true"],
toolbar:not([currentset*="-button"]) #throbber-box > #navigator-throbber[busy="true"] {
list-style-image: url("throbber_small_loading.gif") !important;
}
Post Reply