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 do I remove icons from the bookmark toolbar? FF 69.0 broke my previous solution

  • 18 replies
  • 1 has this problem
  • 1 view
  • Last reply by jayindy58

more options

Prior to upgrading to FF 69.0 I had my chrome file configured to hide icons in my bookmark toolbar. With the update to FF 69.0, the icons have reappeared. How do I fix this again? Previously I had utilized this method:

"Yes, you can paste the full code posted above including the @namespace line. The :not([container]) selector means that you still have the folder icons with bookmarks folders. If you want to hide the icons for folders as well then leave out this selector."

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

#personal-bookmarks .bookmark-item .toolbarbutton-icon {
 display:none!important;
Prior to upgrading to FF 69.0 I had my chrome file configured to hide icons in my bookmark toolbar. With the update to FF 69.0, the icons have reappeared. How do I fix this again? Previously I had utilized this method: "Yes, you can paste the full code posted above including the @namespace line. The :not([container]) selector means that you still have the folder icons with bookmarks folders. If you want to hide the icons for folders as well then leave out this selector." <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #personal-bookmarks .bookmark-item .toolbarbutton-icon { display:none!important;</nowiki></pre>

Modified by cor-el

Chosen solution

You need to use browser.xhtml instead of browser.xul

@-moz-document url(chrome://browser/content/browser.xhtml){
#personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon { display: none !important; }
}
Read this answer in context 👍 1

All Replies (18)

more options

Note that your code is missing a closing curly bracket (}) That code in userChrome.css should still be working.

Firefox 69 blocks userChrome.css and userContent.css by default. You can check this pref on the about:config page to see if it is set to true.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

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.


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

/* leave icon for folders */
#personal-bookmarks .bookmark-item:not([container=true]) .toolbarbutton-icon {
 display:none!important;
}
more options

Toggled it to false with no change. Any other suggestions?

more options

lgsasso said

Toggled it to false with no change.

No, you need it to be true.

more options

It was originally set to true. Toggled it to false and then back with no change.

more options

What is the totality of your userChrome.css file? Since this site isn't good for posting code, if you don't mind sharing, you can create an anonymous paste on Pastebin: https://pastebin.com/

Select CSS for the Syntax Highlighting to make it easier to read.

more options

Did you verify that the userChrome.css is still in the chrome folder in the current profile folder as it is possible that a new profile has been created.

Also make sure that the file doesn't have a hidden extra .txt or .css file extension (userChrome.css.txt, userChrome.css.css).

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:profiles page.

more options

userChrome.css is in the current profile folder and there are no hidden files. i created a paste file per jscher2000's suggestion.

more options

lgsasso said

i created a paste file per jscher2000's suggestion.

Sorry, forgot to mention, you need to give us a link to it.

more options

Chosen Solution

You need to use browser.xhtml instead of browser.xul

@-moz-document url(chrome://browser/content/browser.xhtml){
#personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon { display: none !important; }
}
more options

Thanks Cor-el, that worked. I very much appreciate your help!

more options

I like Firefox, except for this annoying handicap --- wondering why? Many of us want to remove Bookmark Toolbar Icons (they consume valuable space).

more options

Hi bhs67, were you able to use the userChrome.css workaround in the first reply? If you aren't familiar with userChrome.css, I have a website with more information here: https://www.userchrome.org/

more options

I have Mac Pro 10.15.2 w/ Firefox 71.0 64 bit.

I've burnt hours trying to rid my toolbar icons leaving single letter descriptions like "c" = Chase Bank - I've created a userChrome.css w/ TextEdit, place it into my profile found via 3 upper right bars, Help, Troubleshooting Information, Profile Folder, Show in finder, I've created an alias on my desktop to continue my bench testing to no avail = ugh, I've copied raw below into it, reopened FF & still have my icons - please help. What am I doing wrong? I'm a Layer 1 installer - where is my hammer?

--

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

@-moz-document url(chrome://browser/content/browser.xul){

  1. personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon { display: none !important; }

}

more options

What is wrong is that browser.xul has been replaced by browser.xhtml for the main browser window

@-moz-document url(chrome://browser/content/browser.xhtml){ .... }

Actually you do not need to be that specific:

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

#personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon {
 display: none !important;
}
more options

cor-el, might you be so kind to paste below what exactly needs to be in my userChrome.css text file? Maybe userChrome.css lives in the wrong place buried in the seemingly obscure "sayw4..." folder seen below?? Just want to remove the toolbar icons and keep text descriptions. I saved several different syntax strings into userChrome.css this morning & opening FF - no joy, the icons were still there after repeat tries - I'm going to crack this nut. --

more options

Firstly, userChrome.css needs to be in the chrome folder (case sensitive; xxxxxxxx.default-release\chrome\userChrome.css) and not in the main profile folder if that is what the first screenshot shows. Secondly, userChrome.css is shown as a "Text Document" and not as a CSS Document what suggests that the filename has a .txt file extension and not only .css

more options

Success!

I did as you stated above, first had to create my "chrome" folder to contain my userChrome.css, then changed the about:config to true, lastly I pasted working syntax into userChrome.css. Now seen below is my single letter descriptions on favs, & on a few folders, however I'm now wondering if the real fix came when changing the "...legacy..." to true - could be past syntax is really removing the icons? .... none the less - icons are gone!