Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to resize Firefox add-on name

  • 8 replies
  • 1 has this problem
  • 1 view
  • Last reply by DavidCal

more options

Some add-on names are too large on the FF 31 toolbar (top). How can I change name or re-size the icons?

Some add-on names are too large on the FF 31 toolbar (top). How can I change name or re-size the icons?

Chosen solution

You would have to use the DOM Inspector to find the ID of each of the buttons and set a max-width to the label text (this will add an ellipsis) or provide a new label text. You can do that with code in the userChrome.css file.

Add code to the userChrome.css file below the default @namespace line.

Here is an example for the TFS changer extension:


@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#themefontsizechanger-toolbarbutton .toolbarbutton-text {
 visibility:collapse!important;
}
#themefontsizechanger-toolbarbutton:after {
 content:"ThemeFS"; 
 display:-moz-box;
 font-size:12px;
}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Read this answer in context 👍 0

All Replies (8)

more options

Please provide a screenshot.

https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem

It is best to use a compressed image type like PNG or JPG to save the screenshot and make sure that you do not exceed a maximum file size of 1 MB.

Then use the Browse .... button below the Post a Reply text box to upload the screenshot.

more options

Here is a link to screenshot. I removed two of the larger icons to the Customize menu screen. Would like to resize CleanPrint This Page and others that might come along.

http://i.imgur.com/RI186Uq.png

Thanks for your help.

more options

Sorry, I am not "up to" trying to figure out how you did so many modifications. I have played with the Classic Theme Restorer and the Menu Wizard separately, but not in combination with each other. Overall that is exactly opposite how I customize Firefox. I put my efforts toward having everything accessible from the Tabstrip and the Navigation Toolbar - reducing the size of the UI, not increasing the size the UI consumes.

more options

Type about:customizing in the address bar and press Enter. On the bottom, select Buttons = Small, Mode = Icons.

more options

Thanks, Fred, but that eliminates the text label on the icon. I need the text. Too many icons to remember without it.

more options

Chosen Solution

You would have to use the DOM Inspector to find the ID of each of the buttons and set a max-width to the label text (this will add an ellipsis) or provide a new label text. You can do that with code in the userChrome.css file.

Add code to the userChrome.css file below the default @namespace line.

Here is an example for the TFS changer extension:


@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#themefontsizechanger-toolbarbutton .toolbarbutton-text {
 visibility:collapse!important;
}
#themefontsizechanger-toolbarbutton:after {
 content:"ThemeFS"; 
 display:-moz-box;
 font-size:12px;
}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Modified by cor-el

more options

The DOM Inspector (DOMi) has a menu item (Edit > Select Element By Click) and a toolbar button "Find a node to inspect by clicking on it" (left icon on the toolbar in the DOMi).

  • open the browser window in the DOMi (File > Inspect Chrome Document) and choose the first entry from the drop-down list.
  • click the "Find a node to inspect by clicking on it" button and use the keyboard (Alt Tab) or the Task bar to go back to the browser window (do not click in the browser window other than the title bar).
  • click that element with the mouse and keep the button pressed until you see a red border to indicate that the DOMi has located that element in the DOM tree.
more options

Yikes, Cor-el, that's a lot more work than I can handle. There are only two icons with very long names. I can live with them. Thought there might have been an easier way to do this.

Thanks, anyway.