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

Support Forum

Toolbar text instead of icons?

Posted

I was a big fan of the Tabmixplus extension and left FF when it became permanently disabled. Chrome has it's own issues for me and the Waterfox browser was clunky compared to the newer FF (and I worried about security issues).

So now I'm back to trying FF with the 66.03 ver and hoping I can replicate some of the simpler functions that I had with TM+. One of the first is to customize the toolbar so I can get text instead of icons. My brain works better with words than pictures... I'm constantly trying to guess what the icons are supposed to do. It seems like such a simple option to have text but I've not been able to find it. Am I missing it somewhere? Thanks.

Windows 10

I was a big fan of the Tabmixplus extension and left FF when it became permanently disabled. Chrome has it's own issues for me and the Waterfox browser was clunky compared to the newer FF (and I worried about security issues). So now I'm back to trying FF with the 66.03 ver and hoping I can replicate some of the simpler functions that I had with TM+. One of the first is to customize the toolbar so I can get text instead of icons. My brain works better with words than pictures... I'm constantly trying to guess what the icons are supposed to do. It seems like such a simple option to have text but I've not been able to find it. Am I missing it somewhere? Thanks. Windows 10
Quote

Additional System Details

Application

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

More Information

Are you talking about the Menu Bar? If so just right click to the right side of the right most tab then in the context menu click on Menu Bar.

I always enable this after I install Firefox, I like it better than using the hamburger menu.

Are you talking about the Menu Bar? If so just right click to the right side of the right most tab then in the context menu click on Menu Bar. I always enable this after I install Firefox, I like it better than using the hamburger menu.
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8507 solutions 69508 answers

Hi LocalHero, do you mean the buttons on the main toolbar? That seems a bit more in the territory of the old Classic Theme Restorer extension. Anyway, the author of that extension has created a giant archive of custom style rules that accomplish many of the same changes, but to apply them to Firefox, you need to use a userChrome.css file instead of an extension.

If that is all new to you, here are some resources to get started:

The following subreddit can help with tweaking rules to better suit your needs:

https://www.reddit.com/r/FirefoxCSS/

Hi LocalHero, do you mean the buttons on the main toolbar? That seems a bit more in the territory of the old Classic Theme Restorer extension. Anyway, the author of that extension has created a giant archive of custom style rules that accomplish many of the same changes, but to apply them to Firefox, you need to use a userChrome.css file instead of an extension. If that is all new to you, here are some resources to get started: * My site with general information: https://www.userchrome.org/ * Classic CSS site: https://github.com/Aris-t2/CustomCSSforFx The following subreddit can help with tweaking rules to better suit your needs: https://www.reddit.com/r/FirefoxCSS/
Was this helpful to you?
Quote

Question owner

I'm not sure what this bar is called but I added a pic here to show what I'm referring to. The bar at the very top has File, Edit, View, etc in text but the added buttons to the right are all icons and I can't find a way to change them as I used to. JScher, you might be right about it being a classic theme extension rather than TM+... that sounds right. Either way, that's just one of many many tweeks I miss in the new FF.

Edit: to clarify, the bottom of that image shows multiple tabs. There's lots of things I'd like to be able to do with them as well but it's the top bar that I'm asking about here.

I'm not sure what this bar is called but I added a pic here to show what I'm referring to. The bar at the very top has File, Edit, View, etc in text but the added buttons to the right are all icons and I can't find a way to change them as I used to. JScher, you might be right about it being a classic theme extension rather than TM+... that sounds right. Either way, that's just one of many many tweeks I miss in the new FF. Edit: to clarify, the bottom of that image shows multiple tabs. There's lots of things I'd like to be able to do with them as well but it's the top bar that I'm asking about here.

Modified by LocalHero

Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8507 solutions 69508 answers

Hi LocalHero, that top bar is the menu bar, and it seems you dragged some toolbar buttons there. There's no built-in feature to change button images to text, at least not since Firefox 29. You definitely would need custom style rules for that.

Hi LocalHero, that top bar is the menu bar, and it seems you dragged some toolbar buttons there. There's no built-in feature to change button images to text, at least not since Firefox 29. You definitely would need custom style rules for that.
Was this helpful to you?
Quote

Question owner

I usually try to minimize bars so as to maximize screenspace. Whatever it gets called, I find I can fit all the buttons I need on one bar so I guess that's why I put the buttons up there. The css file concept is new to me. I'm not a programmer in any way. I'll have to look into it when I have time but if I can't solve more of these customization features easily, I might just go back to Waterfox and see if they've improved it since my last trial. The new ver of FF is faster but at the expense of a lot of functionality it seems.

Thanks for the help!

I usually try to minimize bars so as to maximize screenspace. Whatever it gets called, I find I can fit all the buttons I need on one bar so I guess that's why I put the buttons up there. The css file concept is new to me. I'm not a programmer in any way. I'll have to look into it when I have time but if I can't solve more of these customization features easily, I might just go back to Waterfox and see if they've improved it since my last trial. The new ver of FF is faster but at the expense of a lot of functionality it seems. Thanks for the help!
Was this helpful to you?
Quote

Question owner

This is a crop of my toolbar in Waterfox and is what I was trying to replicate in FF. Btw, that "closed tabs" button will show me at least 100 of my last closed tabs. I can't find a FF addon that claims to allow more than 25 (I actually only get 9) and the creator says it's a FF limitation. Why would FF want to limit something like that? I found it to be a very useful feature.

This is a crop of my toolbar in Waterfox and is what I was trying to replicate in FF. Btw, that "closed tabs" button will show me at least 100 of my last closed tabs. I can't find a FF addon that claims to allow more than 25 (I actually only get 9) and the creator says it's a FF limitation. Why would FF want to limit something like that? I found it to be a very useful feature.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17273 solutions 156121 answers

Note that this used to be fairly easy with a Legacy extension. With using CSS this is a lot harder to achieve.

Here is some sample code for the Browser Console to toggle text/icon mode for the Menu bar and the Navigation Toolbar.


(function(){ /*toggle text/icons mode*/
var doc = Services.wm.getMostRecentWindow("navigator:browser").window.document;
var tbs = ["toolbar-menubar","nav-bar"];
var atr = ""; /*toggle*/
var mod = ["icons","text","icons-text"];
for (tb in tbs){
 var elm = doc.getElementById(tbs[tb]);
 if (elm){
  var atr = atr || elm.getAttribute("mode");
  elm.setAttribute("mode",atr==mod[0]?mod[1]:mod[0]);
  console.log(tbs[tb],"mode:",elm.getAttribute("mode"));
}}
})()
Note that this used to be fairly easy with a Legacy extension. With using CSS this is a lot harder to achieve. Here is some sample code for the Browser Console to toggle text/icon mode for the Menu bar and the Navigation Toolbar. *https://developer.mozilla.org/en-US/Tools/Browser_Console ---- <pre><nowiki>(function(){ /*toggle text/icons mode*/ var doc = Services.wm.getMostRecentWindow("navigator:browser").window.document; var tbs = ["toolbar-menubar","nav-bar"]; var atr = ""; /*toggle*/ var mod = ["icons","text","icons-text"]; for (tb in tbs){ var elm = doc.getElementById(tbs[tb]); if (elm){ var atr = atr || elm.getAttribute("mode"); elm.setAttribute("mode",atr==mod[0]?mod[1]:mod[0]); console.log(tbs[tb],"mode:",elm.getAttribute("mode")); }} })() </nowiki></pre>

Modified by cor-el

Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8507 solutions 69508 answers

You could try:

If you already have a userChrome.css file:

Start with step (C) below.

If you have never set up a userChrome.css file:

Allow about 10 minutes for this:

(A) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I also created videos for both Windows and Mac, on that same page.

(B) Set your OS to show file extensions

See Step #4 in the above article.

(C) Download the following file

https://www.userchrome.org/samples/userChrome-toolbar_buttons_text.zip

This file contains:

  • toolbar_mode_icons_and_text.css
  • toolbar_mode_text.css
  • userChrome.css importing the above

(D) Move file(s) to your new chrome folder

Move the zip file into your new chrome folder.

If you do not have a userChrome.css file:

Extract all of three files into the chrome folder.

If you already have a userChrome.css file:

To avoid overwriting your existing userChrome.css file, extract only the first two files into your chrome folder, and then add

@import url("toolbar_mode_text.css");

as the first line in your userChrome.css file.

The next time you exit Firefox and start it up again, it should discover that file and apply the rules. I am attaching a sample "Before and After" screenshot.

You could try: ''If you already have a userChrome.css file:'' Start with step (C) below. ''If you have never set up a userChrome.css file:'' Allow about 10 minutes for this: '''(A) Create a new '''chrome''' folder in your profile folder''' The following article has the detailed steps for that (#1, #2, and I recommend #3) https://www.userchrome.org/how-create-userchrome-css.html ''I also created videos for both Windows and Mac, on that same page.'' '''(B) Set your OS to show file extensions''' See Step #4 in the above article. '''(C) Download the following file''' https://www.userchrome.org/samples/userChrome-toolbar_buttons_text.zip This file contains: * toolbar_mode_icons_and_text.css * toolbar_mode_text.css * userChrome.css importing the above '''(D) Move file(s) to your new '''chrome''' folder''' Move the zip file into your new chrome folder. ''If you do not have a userChrome.css file:'' Extract all of three files into the chrome folder. ''If you already have a userChrome.css file:'' To avoid overwriting your existing userChrome.css file, extract only the first two files into your chrome folder, and then add <code>@import url("toolbar_mode_text.css");</code> as the first line in your userChrome.css file. The next time you exit Firefox and start it up again, it should discover that file and apply the rules. I am attaching a sample "Before and After" screenshot.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17273 solutions 156121 answers

Here is a screenshot after modifying the mode attribute. Notice that you keep the download icon, so you can still see the download progress.

Here is a screenshot after modifying the mode attribute. Notice that you keep the download icon, so you can still see the download progress.

Modified by cor-el

Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17273 solutions 156121 answers

Helpful Reply

Interestingly: I edited xulstore.json and added "mode":"text" for both toolbars (nav-bar wasn't present, so I added it).

"nav-bar":{"mode":"text"},"toolbar-menubar":{"autohide":"false","mode":"text"}

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:preferences page.

Interestingly: I edited xulstore.json and added "mode":"text" for both toolbars (nav-bar wasn't present, so I added it). <pre><nowiki>"nav-bar":{"mode":"text"},"toolbar-menubar":{"autohide":"false","mode":"text"}</nowiki></pre> You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the <b>about:preferences</b> page. *Help -> Troubleshooting Information -> Profile Directory:<br>Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder *http://kb.mozillazine.org/Profile_folder_-_Firefox

Modified by cor-el

Was this helpful to you? 1
Quote
jscher2000
  • Top 10 Contributor
8507 solutions 69508 answers

cor-el said

Interestingly: I edited xulstore.json and added "mode":"text" for both toolbars (nav-bar wasn't present, so I added it).
"nav-bar":{"mode":"text"},"toolbar-menubar":{"autohide":"false","mode":"text"}

Wow, that is way simpler.

So the mode becomes an attribute on each <toolbar> with corresponding rules. So from a userChrome.css perspective, a much simpler text mode style would be:

/**** Override Icons Mode to Text Mode ****/

/* MAIN TOOLBAR */

/* Show the text, except for menu button */
#nav-bar[mode="icons"] toolbarbutton:not(#PanelUI-menu-button) .toolbarbutton-text {
  display: -moz-box !important;  
}
/* Hide the icon, except menu button */
#nav-bar[mode="icons"] toolbarbutton:not(#PanelUI-menu-button) .toolbarbutton-icon {
  display: none !important;
}

/* MENU BAR */

/* Show the text, except Windows min/max/close */
#toolbar-menubar[mode="icons"] toolbarbutton:not(.titlebar-button) .toolbarbutton-text {
  display: -moz-box !important;
  padding-top: 1px !important; /* align tops */
}
/* Hide the  icon, except Windows min/max/close */
#toolbar-menubar[mode="icons"]  toolbarbutton:not(.titlebar-button) .toolbarbutton-icon {
  display: none !important;
}

Actually, Aris's code handles a lot of special cases, so while this is easier to understand, it is incomplete.

''cor-el [[#answer-1214976|said]]'' <blockquote> Interestingly: I edited xulstore.json and added "mode":"text" for both toolbars (nav-bar wasn't present, so I added it). <br> <code>"nav-bar":{"mode":"text"},"toolbar-menubar":{"autohide":"false","mode":"text"}</code> </blockquote> Wow, that is way simpler. So the mode becomes an attribute on each <toolbar> with corresponding rules. So from a userChrome.css perspective, a much simpler text mode style would be: <pre>/**** Override Icons Mode to Text Mode ****/ /* MAIN TOOLBAR */ /* Show the text, except for menu button */ #nav-bar[mode="icons"] toolbarbutton:not(#PanelUI-menu-button) .toolbarbutton-text { display: -moz-box !important; } /* Hide the icon, except menu button */ #nav-bar[mode="icons"] toolbarbutton:not(#PanelUI-menu-button) .toolbarbutton-icon { display: none !important; } /* MENU BAR */ /* Show the text, except Windows min/max/close */ #toolbar-menubar[mode="icons"] toolbarbutton:not(.titlebar-button) .toolbarbutton-text { display: -moz-box !important; padding-top: 1px !important; /* align tops */ } /* Hide the icon, except Windows min/max/close */ #toolbar-menubar[mode="icons"] toolbarbutton:not(.titlebar-button) .toolbarbutton-icon { display: none !important; } </pre> Actually, Aris's code handles a lot of special cases, so while this is easier to understand, it is incomplete.

Modified by jscher2000

Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17273 solutions 156121 answers

I noticed a problem with the overflow chevron on the Navigation Toolbar. This code in userChrome.css fixes this. I'm not using extensions that display a badge, so I do not know whether these are causing problems.

/* mode="text" - fix some icons */
:-moz-any(#PanelUI-button, #nav-bar-overflow-button) .toolbarbutton-icon {
  display:block !important;
  visibility: visible !important;
}
/* adjust min-width for URL bar */
#urlbar-container {
 min-width: 20ch !important; 
}
I noticed a problem with the overflow chevron on the Navigation Toolbar. This code in userChrome.css fixes this. I'm not using extensions that display a badge, so I do not know whether these are causing problems. <pre><nowiki>/* mode="text" - fix some icons */ :-moz-any(#PanelUI-button, #nav-bar-overflow-button) .toolbarbutton-icon { display:block !important; visibility: visible !important; } /* adjust min-width for URL bar */ #urlbar-container { min-width: 20ch !important; }</nowiki></pre>
Was this helpful to you?
Quote

Question owner

I appreciate all of this help on my original question and I'm still following! Much of this information is over my head and it will take me some time find the time to understand it.

When someone creates an extension, is it likely just a program that installs the css files that you all are talking about? While I don't understand the programming, I certainly appreciate what the extensions can do.

I appreciate all of this help on my original question and I'm still following! Much of this information is over my head and it will take me some time find the time to understand it. When someone creates an extension, is it likely just a program that installs the css files that you all are talking about? While I don't understand the programming, I certainly appreciate what the extensions can do.
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8507 solutions 69508 answers

Hi LocalHero, extensions run inside Firefox and modify the browser or web content through strictly defined methods. Currently, they have no way to change the structure of the toolbar area, so that is why a userChrome.css file is needed for those kinds of modifications.

Hi LocalHero, extensions run inside Firefox and modify the browser or web content through strictly defined methods. Currently, they have no way to change the structure of the toolbar area, so that is why a userChrome.css file is needed for those kinds of modifications.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17273 solutions 156121 answers

Do you want to hide the icons (favicons) on the Bookmarks Toolbar as well?

This is about making changes to the Firefox user interface and Legacy extension aren't able to make these changes. You would have to use the userChrome.css file with the code Jscher2000 posted above or give the Browser Console code I posted a try, but with the later you need to perform this action every time you start Firefox unless you modify xulstore.json like posted above (the console stores the code, so once entered you can recall via the cursor Up key on the command line and press the Enter key).

If you would want to try the console then you need to enable the command line in the Browser Console.

See "Enable browser chrome and add-on debugging toolboxes":

NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable browser chrome and add-on debugging toolboxes" (Firefox 40 and later) option in the developer tool settings.

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

Do you want to hide the icons (favicons) on the Bookmarks Toolbar as well? This is about making changes to the Firefox user interface and Legacy extension aren't able to make these changes. You would have to use the userChrome.css file with the code Jscher2000 posted above or give the Browser Console code I posted a try, but with the later you need to perform this action every time you start Firefox unless you modify xulstore.json like posted above (the console stores the code, so once entered you can recall via the cursor Up key on the command line and press the Enter key). If you would want to try the console then you need to enable the command line in the Browser Console. *https://developer.mozilla.org/en-US/Tools/Browser_Console See "Enable browser chrome and add-on debugging toolboxes": *https://developer.mozilla.org/en-US/Tools/Settings <blockquote>NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the <b>devtools.chrome.enabled</b> preference to true in about:config, or set the "Enable browser chrome and add-on debugging toolboxes" (Firefox 40 and later) option in the developer tool settings.</blockquote> You can open the <b>about:config</b> page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue. *http://kb.mozillazine.org/about:config

Modified by cor-el

Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.