X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

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

Posted

"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

Additional System Details

Installed Plug-ins

  • Shockwave Flash 11.8 r800
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.04
  • 5.1.20513.0
  • NPWLPG

Application

  • Firefox 23.0.1
  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:23.0) Gecko/20100101 Firefox/23.0
  • Support URL: http://support.mozilla.org/1/firefox/23.0.1/WINNT/en-US/

Extensions

  • Adblock Plus 2.3.2 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • Back to Top 7.0 ({3C9A65A6-9563-4485-BA4A-4BCD698BCFB4})
  • BugMeNot 2.2 ({987311C6-B504-4aa2-90BF-60CC49808D42})
  • ColorfulTabs 19.7 ({0545b830-f0aa-4d7e-8820-50a4629a56fe})
  • Copy Plain Text 2 1.2.1 (copyplaintext@teo.pl)
  • eBay Sidebar for Firefox 3.0.0.3 ({62760FD6-B943-48C9-AB09-F99C6FE96088})
  • F.B. Purity - Cleans Up Facebook 8.7.0 (fbp@fbpurity.com)
  • gTranslate 0.9 ({aff87fa2-a58e-4edd-b852-0a20203c1e17})
  • IE View Lite 1.3.5 ({FDD8ECF0-451A-414D-8C8F-7B7F78B0ECD3})
  • Image Zoom 0.6.3 ({1A2D0EC4-75F5-4c91-89C4-3656F6E44B68})
  • Norton Toolbar 2013.4.2.2 ({2D3F3651-74B9-4795-BDEC-6DA2F431CB62})
  • Norton Vulnerability Protection 12.0.0.380 - 1 ({BBDA0591-3099-440a-AA10-41764D9DB4DB})
  • Pixlr Grabber 2.1.4 ({d47a9f51-8281-43fa-f450-f28ef8735e9a})
  • Read Easily 1.0.9 ({411ff9bf-b22f-4777-b030-32bb280744db})
  • RightToClick 2.9.5 ({cd617375-6743-4ee8-bac4-fbf10f35729e})
  • TinEye Reverse Image Search 1.1 (tineye@ideeinc.com)
  • toggleDocumentColors 1.4.20120122 (toggleDocumentColors@darkoshi)
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: Intel(R) Graphics Media Accelerator 3150
  • adapterDescription2:
  • adapterDeviceID: 0xa011
  • adapterDeviceID2:
  • adapterDrivers: igdumdx32
  • adapterDrivers2:
  • adapterRAM: Unknown
  • adapterRAM2:
  • adapterVendorID: 0x8086
  • adapterVendorID2:
  • clearTypeParameters: Gamma: 2200 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 300
  • direct2DEnabled: False
  • direct2DEnabledMessage: [u'blockedDriver']
  • directWriteEnabled: False
  • directWriteVersion: 6.2.9200.16571
  • driverDate: 4-19-2010
  • driverDate2:
  • driverVersion: 8.14.10.2117
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'skia', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'none'}
  • isGPU2Active: False
  • numAcceleratedWindows: 0
  • numAcceleratedWindowsMessage: [u'']
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (Intel(R) Graphics Media Accelerator 3150)
  • windowLayerManagerType: Basic

Modified Preferences

  • accessibility.blockautorefresh: True
  • accessibility.typeaheadfind.flashBar: 0
  • browser.cache.disk.capacity: 358400
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size.use_old_max: False
  • browser.cache.disk.smart_size_cached_value: 358400
  • browser.places.smartBookmarksVersion: 4
  • browser.startup.homepage: http://www.google.com
  • browser.startup.homepage_override.buildID: 20130814063812
  • browser.startup.homepage_override.mstone: 23.0.1
  • browser.tabs.onTop: False
  • dom.mozApps.used: True
  • extensions.lastAppVersion: 23.0.1
  • font.internaluseonly.changed: True
  • font.size.variable.x-western: 17
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1379270904
  • places.history.expiration.transient_current_max_pages: 26567
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • plugin.state.flash: 2
  • privacy.clearOnShutdown.cookies: False
  • privacy.clearOnShutdown.downloads: False
  • privacy.clearOnShutdown.formdata: False
  • privacy.clearOnShutdown.history: False
  • privacy.sanitize.migrateFx3Prefs: True
  • privacy.sanitize.promptOnSanitize: False
  • privacy.sanitize.timeSpan: 0
  • storage.vacuum.last.index: 1
  • storage.vacuum.last.places.sqlite: 1378752013

Misc

  • User JS: No
  • Accessibility: No
jscher2000
  • Top 10 Contributor
2365 solutions 20922 answers

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:

Question owner

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.

cor-el
  • Top 10 Contributor
  • Moderator
10751 solutions 96755 answers

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

Helpful Reply

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

cor-el
  • Top 10 Contributor
  • Moderator
10751 solutions 96755 answers

Helpful Reply

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.

Question owner

Thank you

Question owner

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

Question owner

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!

jscher2000
  • Top 10 Contributor
2365 solutions 20922 answers

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

Question owner

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.

jscher2000
  • Top 10 Contributor
2365 solutions 20922 answers

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

the-edmeister
  • Top 10 Contributor
  • Moderator
3195 solutions 24398 answers

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.

Question owner

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.

jscher2000
  • Top 10 Contributor
2365 solutions 20922 answers

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

Question owner

Thanks for trying.