Resize Addon Button?

[kla87]

I have one addon, the button of which screws with my toolbar size because it is bigger than the rest. Anyway I could alter it?

[SpockFan02]

Try adding a rule to your userChrome.css, something like this:

Code: Select all

.toolbarbutton-1 chromeclass-toolbar-additional:nth-of-type(N) { height: Ypx; width: Xpx; }

The N in :nth-of-type(N) should be replaced with a number to select the offending add-on button, and X and Y are how wide and tall you want it to be (test a few until you get it right). I hope this helps.

[jars_]

addon.xpi this is a zip-archive, so simplest way is replace icon in %addon%.xpi. enter in addon-archive(7-zip, WinRar, TotalCommander[ctrl+PgDn] etc...), get the icon file, edit(reduce the size) and replace icon in addon.xpi

[kla87]

Thank you both. Given my inexperience, Spock's solution seems slightly more accessible. My questions"

+how to determine N ("The N in :nth-of-type(N) should be replaced with a number to select the offending add-on button").

+how to determine the surrounding buttons dimensions

you guys rock

[JustOff]

What is the name of the add-on?

[SpockFan02]

Thank you both. Given my inexperience, Spock's solution seems slightly more accessible. My questions"

+how to determine N ("The N in :nth-of-type(N) should be replaced with a number to select the offending add-on button").

+how to determine the surrounding buttons dimensions

you guys rock

:nth-of-type(1) should be the first add-on button, :nth-of-type(2) the second, and so on. I just had the thought, if the order changes, you should update your userChrome.css as well.

As for determining the right dimensions, I would just try a few times with different values until it looks right. You have to restart your browser after saving changes to userChrome.css for them to take effect, I think. So try, I don't know, height: 10px and width: 20px, save it, restart, check it, repeat with adjustments until it's the right size.

[SpockFan02]

Okay, so I've done some testing and it's a little more complicated than I thought.

The back and forward buttons, and other non-add-on buttons on the toolbar, fall under the .toolbarbutton-1 class, meaning the :nth-of-type number would have to be adjusted. However, I can only seem to get :nth-of-type to work for the back and forward buttons, anyway. Also, min-height and min-width need to be reset as well as height and width, and !important is required.

Since :nth-of-type doesn't seem to be working, and you don't want to shrink all the buttons (the back button would look weird, and it would apply to bookmarks, as well), the best solution I can find is to select the particular button by id. The one I was trying to select for testing purposes was my Encrypted Web button, which has the id https-everywhere-button. So, the way I made it smaller was this:

Code: Select all

#https-everywhere-button .toolbarbutton-icon { min-height: 0 !important; height: 2px !important; }

This makes that particular button two pixels tall. For it to work for you, you'll need to use the id of whichever add-on button isn't the right size. If you tell me which add-on you're using, I could probably find it and tell you—Or, you could get the add-ons DOM Inspector and Element Inspector and Ctrl/Cmd+Shift+Right-click on the button to see its id. Then, you'd paste the code I have above into your userChrome.css, swap out https-everywhere-button for the id of the button you want to change after the #, and change the height/width.

(On the off chance the particular button is the one for the ColorPicker add-on, try

Code: Select all

#cpButton .toolbarbutton-icon { min-height: 0 !important; height: 2px !important; }

)