cancel
Showing results for 
Search instead for 
Did you mean: 

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)?

SOLVED
Highlighted
New Contributor

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)?

"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.

1 ACCEPTED SOLUTION

Accepted Solutions
Site Moderator

Re: 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)?

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; }
15 REPLIES
Legendary Contributor

Re: 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)?

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:

2013-09-15-16-49-00-5e7eab.png
New Contributor

Re: 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)?

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.

Site Moderator

Re: 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)?

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

Re: 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)?

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 Smiley Happy

Site Moderator

Re: 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)?

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.
New Contributor

Re: 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)?

Thank you

New Contributor

Re: 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)?

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.

New Contributor

Re: 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)?

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!

Legendary Contributor

Re: 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)?

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.)