X
Tap here to go to the mobile version of the site.

Support Forum

Adjusting Icon spacing on Firefox Toolbars (using CSS)

Posted

I am trying to adjust the size and spacing of icons on specific Firefox toolbars (namely: Bookmarks toolbar, Status Bar, and Tab Bar).

I was originally using a very simple command in my userchrome,css to achieve this.

toolbarbutton {min-width: 30px !important;}

This sized and spaced the buttons nicely on ALL my toolbars at once (which was fine), but it also has an unwanted effect on some of the items in Firefox's Panel menu (i.e. the panel that opens when you click on the 'hamburger' menu).

I would therefore like to know how to exclude items in the Panel from being affected by the command above, or (even better still) how to apply the min-width command individually to each of the 3 toolbars (Bookmarks toolbar, Status Bar, Tab Bar) so they can be adjusted independently if needed.

Thanks

I am trying to adjust the size and spacing of icons on specific Firefox toolbars (namely: Bookmarks toolbar, Status Bar, and Tab Bar). I was originally using a very simple command in my userchrome,css to achieve this. toolbarbutton {min-width: 30px !important;} This sized and spaced the buttons nicely on ALL my toolbars at once (which was fine), but it also has an unwanted effect on some of the items in Firefox's Panel menu (i.e. the panel that opens when you click on the 'hamburger' menu). I would therefore like to know how to exclude items in the Panel from being affected by the command above, or (even better still) how to apply the min-width command individually to each of the 3 toolbars (Bookmarks toolbar, Status Bar, Tab Bar) so they can be adjusted independently if needed. Thanks

Additional System Details

Installed Plug-ins

  • Shockwave Flash 22.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

More Information

the-edmeister
  • Top 25 Contributor
  • Moderator
5395 solutions 40091 answers

What extensions and themes do you have installed?

The Status Bar was removed from Firefox 4.0, so if you have that now it must have been "added" by an extension or other customization.

As far as code to 'ID' the Tab bar via css:

#TabsToolbar

And the Bookmarks Toolbar:

#PersonalToolbar
What extensions and themes do you have installed? The Status Bar was removed from Firefox 4.0, so if you have that now it must have been "added" by an extension or other customization. As far as code to 'ID' the Tab bar via css: <blockquote> #TabsToolbar </blockquote> And the Bookmarks Toolbar: <blockquote>#PersonalToolbar</blockquote>

Question owner

I'm using Status 4 Evar for my status bar. This used to have the ID #status4evar-status-bar but in recent versions it seems to also work with #status-bar. I can use either ID value to change the color or size of the status bar.

I already know the ID for each of the toolbars that I want to affect, but using the ID on its own just changes the toolbar background and not the 'buttons actually on the toolbar.

If I put the ID in front of the previous command that I was using, then that doesn't work either. Nothing changes.

e.g. #status-bar toolbarbutton {min-width: 30px !important;}

I'm using Status 4 Evar for my status bar. This used to have the ID #status4evar-status-bar but in recent versions it seems to also work with #status-bar. I can use either ID value to change the color or size of the status bar. I already know the ID for each of the toolbars that I want to affect, but using the ID on its own just changes the toolbar background and not the '''buttons'' actually on the toolbar. If I put the ID in front of the previous command that I was using, then that doesn't work either. Nothing changes. e.g. #status-bar toolbarbutton {min-width: 30px !important;}
cor-el
  • Top 10 Contributor
  • Moderator
17424 solutions 157444 answers

Did you use the DOM Inspector to check what rules are applied to the toolbar buttons?

Note that in some cases you may have to use -moz-appearance:none!important; to override CSS rules that are applied automatically.


Did you use the DOM Inspector to check what rules are applied to the toolbar buttons? Note that in some cases you may have to use -moz-appearance:none!important; to override CSS rules that are applied automatically. ---- *DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/ *https://developer.mozilla.org/DOM_Inspector *https://developer.mozilla.org/Introduction_to_DOM_Inspector

Modified by cor-el