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 can I get an Extension's toolbar icon to display image without text (without universally affecting other icons)? How can I edit the icons text (save space)?

  • 15 replies
  • 3 have this problem
  • 2 views
  • Last reply by george38

more options

"From the Show dropdown menu, you can choose what to display in the toolbars: icons, text, or icons and text together. By default, Firefox shows icons only." Is there a way to choose an individual setting for a specific toolbar icon to be icon only (no text) without universally affecting all other icons on the toolbars?

Second, is there a way to edit the text on a specific toolbar button from an extension (because it occupies too much horizontal space on the toolbar due to the amount of text)? I do know how to locate the xpi file & open it with notepad, but then it's mainly code (not English) & FIND doesn't locate the button's text (to edit it).

These 2 questions should apply to Extension buttons in general. However IF it makes any difference I'm referring to the Toolbar Button in Back To Top 7.0 which says "Go to top/bottom". I'd at least like to edit out "Go to", but my questions apply to other Extension buttons too. I do realize it may be necessary to redo any fix/change each time there is an update? THANK YOU.

"From the Show dropdown menu, you can choose what to display in the toolbars: icons, text, or icons and text together. By default, Firefox shows icons only." Is there a way to choose an individual setting for a specific toolbar icon to be icon only (no text) without universally affecting all other icons on the toolbars? Second, is there a way to edit the text on a specific toolbar button from an extension (because it occupies too much horizontal space on the toolbar due to the amount of text)? I do know how to locate the xpi file & open it with notepad, but then it's mainly code (not English) & FIND doesn't locate the button's text (to edit it). These 2 questions should apply to Extension buttons in general. However IF it makes any difference I'm referring to the Toolbar Button in Back To Top 7.0 which says "Go to top/bottom". I'd at least like to edit out "Go to", but my questions apply to other Extension buttons too. I do realize it may be necessary to redo any fix/change each time there is an update? THANK YOU.

Chosen solution

You should still see that icon as only the label text would be hidden.

You can try this code in the userChrome.css file below the default @namespace line.

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

toolbar[mode="full"] #b2tTBUnicon { min-width:0px !important; }
toolbar[mode="full"] #b2tTBUnicon .toolbarbutton-icon { margin-top:-20px !important; }
toolbar[mode="full"] #b2tTBUnicon .toolbarbutton-text { display:none !important; }
Read this answer in context 👍 1

All Replies (15)

more options

Using style rules, you can modify various aspects of the Firefox UI. I think a specific label under a button should be suppressible but it's tricky to generate text using style rules.

To remove the label, you can use code like the following, either in a Stylish rule or in a userChrome.css file:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#b2tTBUnicon label { /* Back to Top Unified Top/Bottom button */
  display:none !important;
}

More resources:

more options

Thanks for your reply. I pasted it into the userChrome.css file. It did not remove the label. It removed the entire button. Deleting it restored the button.

more options

Chosen Solution

You should still see that icon as only the label text would be hidden.

You can try this code in the userChrome.css file below the default @namespace line.

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

toolbar[mode="full"] #b2tTBUnicon { min-width:0px !important; }
toolbar[mode="full"] #b2tTBUnicon .toolbarbutton-icon { margin-top:-20px !important; }
toolbar[mode="full"] #b2tTBUnicon .toolbarbutton-text { display:none !important; }
more options

Thanks for your help. That now worked to remove the label without affecting other labels. Will this remain in there when FF gets updated?

How would I (or a later reader) modify your answer for a different Extension's label? Aside from not repeating the top header, would it be replacing the 3 occurrences of: b2tTBUnicon Where did you locate "b2tTBUnicon"? Is there a uniform way to locate the appropriate entry/name for other Extensions?

I do think I dealt with similar issues many years ago on a different computer by editing the label text in xpi files, but I don't recall the details. That was preferable to eliminating the text. I was younger with more brain cells :)

more options

We use the DOM Inspector to find the IDs and Class Names of elements.

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 from the 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 the the DOMi has located that element in the DOM tree.
more options

The Developer posted an answer in his forum. Seemed to make sense UNTIL the very end when it said: Access Denied. Here's what he posted:

The file you want to edit is named backtotop.dtd. It is contained in the BackToTop extension file located in your Fx [profile]/extensions directory. The extension file is named {3C9A65A6-9563-4485-BA4A-4BCD698BCFB4}.xpi.

The easiest way to edit the file would be to use the 7-zip utility open the .xpi. Then you can navigate to the .dtd file and open it for editing by selecting, right-clicking, and 'Edit' (the default editor is Notepad, I believe. If not, you can configure 7zip to use it.). Once you open {3C9A65A6-9563-4485-BA4A-4BCD698BCFB4}.xpi, the full path to the .dtd file is:

chrome\locale\en-US\backtotop.dtd

I believe the line you want to change is the one that reads:

ENTITY backtotop.unicon "Go to top/bottom"

which is line number 46.

Once you save the changes, 7zip will ask you if you want to update the archive. Answer 'yes' and you should be good to go.

Modified by george38

more options

Well I finally managed to accomplish the edit to the .dtd file! The missing step is that Firefox had to be closed before editing the file.

Please anyone reply still if you know how to do the same thing in userChrome.css so it won't be erased by extension's updates. Thank you!

more options

I've never heard of an extension update changing a userChrome.css file -- it is is a personal user file that installers shouldn't touch. (They could, but they have no reason to do so.)

more options

Hi jscher. Sorry if my last post wasn't clear. Editing the .dtd file (within the xpi) allowed me to change the text in the icon's label. Unlike removing the text (vs editing it), this was NOT done in userChrome.css

Thus I believe it will be erased each time an extension is updated. Correct? That's why I hope someone can now (or later) provide an alternate solution using userChrome.css?

A member of the Stylish forum said it had been done before, but couldn't get his/her attempt to work when tested.

more options

I agree that extension edits will be gone when you update the extension. However, I thought you also successfully removed the label using userChrome.css. Did I read your earlier message incorrectly -- did cor-el's rules in userChrome.css not work?

Note that Firefox only reads userChrome.css at startup. One of the advantages of using the Stylish extension for your UI changes is that you can modify and preview quickly (as in my screen shot).

more options

That now worked to remove the label without affecting other labels. Will this remain in there when FF gets updated?

That will affect only that extension and will persist as long as that extension is installed and either that userChrome file or Sylish remain installed, and the pref name isn't changed by the extension developer.

more options

Hi jscher2000. My initial goal was to EDIT the label. To still have a label, but reduce the horizontal space it took on the Toolbar. Only IF that wasn't possible then I preferred removing the label. So the first type userChrome solution removed it. The second solution from the Developer edited the label in the xpi's .dtd file (which will get lost on updates); it also required turning off the change made earlier in userChrome.css). I also implemented similar edits on other extensions & those will also be lost on updates. That's why a solution to edit the text label (not delete it) in userChrome would be much preferred. A contributor in Stylish thought that had been done before, but his testing didn't work.

more options

I see. I thought it might be possible using "generated content" rules, but I can't make it work on a toolbar button.

more options

Thanks for trying.