MozillaZine

throbber sizing

Discuss application theming and theme development.
cheeaun

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

Post Posted October 1st, 2004, 5:33 am

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 Posted October 1st, 2004, 10:40 am

Interesting. Throw a link up on the KB page.
http://kb.mozillazine.org/index.phtml?t ... evelopment

aaron

User avatar
 
Posts: 3130
Joined: November 4th, 2002, 8:49 pm
Location: Texas

Post Posted October 1st, 2004, 11:53 am

Nice. I'll do that for my themes.

Schrade

User avatar
 
Posts: 1187
Joined: March 17th, 2004, 12:24 am

Post Posted October 21st, 2004, 12:09 pm

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

cheeaun

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

Post Posted October 22nd, 2004, 7:06 am

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

Schrade

User avatar
 
Posts: 1187
Joined: March 17th, 2004, 12:24 am

Post Posted October 22nd, 2004, 10:41 am

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;
}

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest