Bookmarks toolbar
How do I remove the graphics that accompany the names of items in the bookmarks toolbar, so limiting the number of items visible?
Chosen solution
OK, I've now managed to solve the problem myself, as follows:
1. In a text editor / word-processor, create a file containing this:
- personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon { display: none !important; }
2. Save the file as a text file (not RTF) called userChrome.txt.
3. Change the name of the file to userChrome.css.
4. Create a folder called chrome, and move the userChrome.css file into it.
5. In Firefox, go to Help > More Troubleshooting Information > Application Basics > Profile Folder, and click Show in Finder alongside this to open the Profile Folder itself.
6. Drag the newly created chrome folder into the Profile Folder.
7. In Firefox, type about:config in the address space and press Return.
8. Accept the warning of risk, then on the next page click on Show All.
9. Scroll down to toolkit.legacyUserProfileCustomizations.stylesheets and click in the last-but-one column to change the second column to read 'true'.
10. Quit Firefox and restart, and the favicons in the visible part of the bookmarks toolbar should now have disappeared.
Read this answer in context 👍 0All Replies (10)
The icons next to the names of your bookmarks are called favicons. I don't think it's possible to remove them without the use of custom CSS code.
Thanks – I came across the term 'favicon' after I posted my query. Some years ago I managed to get rid of them by means of a userChrome.css file, but after a recent Firefox Refresh they returned and neither my old CSS file nor any of the strings of code I've found online will shift them. (One batch of code I found did replace them with a generic 'globe' graphic, which was a slight improvement, but its favicon returned after I'd used a particular bookmark.) As others have commented before me, it's surprising that the choice of favicon or text or both for bookmarks isn't available in the standard FIrefox customisation menus. Anyway, a CSS file that works would be greatly appreciated.
Chosen Solution
OK, I've now managed to solve the problem myself, as follows:
1. In a text editor / word-processor, create a file containing this:
- personal-bookmarks .bookmark-item:not([container]) .toolbarbutton-icon { display: none !important; }
2. Save the file as a text file (not RTF) called userChrome.txt.
3. Change the name of the file to userChrome.css.
4. Create a folder called chrome, and move the userChrome.css file into it.
5. In Firefox, go to Help > More Troubleshooting Information > Application Basics > Profile Folder, and click Show in Finder alongside this to open the Profile Folder itself.
6. Drag the newly created chrome folder into the Profile Folder.
7. In Firefox, type about:config in the address space and press Return.
8. Accept the warning of risk, then on the next page click on Show All.
9. Scroll down to toolkit.legacyUserProfileCustomizations.stylesheets and click in the last-but-one column to change the second column to read 'true'.
10. Quit Firefox and restart, and the favicons in the visible part of the bookmarks toolbar should now have disappeared.
Bob Davenport said
OK, I've now managed to solve the problem myself, as follows:
After creating the file in the location you mentioned, one can also use about:config to toggle toolkit.legacy...sytlesheets to true
but userChrome.css is no longer reliable, and functionality may disappear without notice at anytime, see here
https://support.mozilla.org/en-US/kb/contributors-guide-firefox-advanced-customization
fwiw, here is my userChrome.css for getting rid of the icons in the bookmark toolbar. I've been using as-is it for decade, give or take, but it still works in FF147. So since it is so old, some stuff might be out dated.
/* ************************************************************************************ */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* https://www.userchrome.org/how-create-userchrome-css.html
Open your currently active profile folder Create a new folder named chrome Create a new text file inside the chrome folder named userChrome.css Change a preference in Firefox so it looks for your files at startup about:config search userprof toggle toolkit.legacyUserProfileCustomizations.stylesheets
- /
.bookmark-item > .toolbarbutton-icon { display: none !important; }
/* Make bookmark folders bold and navy blue */ .bookmark-item[type="menu"] > .toolbarbutton-text {
font-weight: 600; color: black;
}
- personal-bookmarks toolbarbutton {
margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;
}
/* Sets the space around the bookmark toolbar text */
- personal-bookmarks .toolbarbutton-text {
margin: 0px 0px 0px 0px !important; padding: 0px 5px 0px 0px !important;
}
/* http://support.mozilla.org/en-US/questions/967313 */ /* #tabbrowser-tabs{display: none !important;} */
/* https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin */ toolbar { background-color: #77AABB !important; }
/* Make separators in bookmarks easier to see */ menuseparator { -moz-appearance:none !important; /* nothing changes without this */ background: green !important; height: 3px !important; padding: 1px !important; margin: 2px 3px; border-top: 1px solid #5AC43F; border-bottom: 1px solid #11CE08; }
fwiw, here is my userChrome.css It get rids of the icons in the bookmark toolbar, and has a couple of other tweaks. I wrote it up about a decade ago and have been using it ever since, as is. Still works with FF147. So since it is so old, some stuff might be out of date.
However, userChrome.css has been dropped, and functionality may change without notice at anytime. See here: https://support.mozilla.org/en-US/kb/contributors-guide-firefox-advanced-customization
/****************************************************/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* https://www.userchrome.org/how-create-userchrome-css.html
Open your currently active profile folder Create a new folder named chrome Create a new text file inside the chrome folder named userChrome.css Change a preference in Firefox so it looks for your files at startup about:config search userprof toggle toolkit.legacyUserProfileCustomizations.stylesheets
- /
.bookmark-item > .toolbarbutton-icon { display: none !important; }
/* Make bookmark folders bold and navy blue */ .bookmark-item[type="menu"] > .toolbarbutton-text {
font-weight: 600; color: black;
}
- personal-bookmarks toolbarbutton {
margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;
}
/* Sets the space around the bookmark toolbar text */
- personal-bookmarks .toolbarbutton-text {
margin: 0px 0px 0px 0px !important; padding: 0px 5px 0px 0px !important;
}
/* http://support.mozilla.org/en-US/questions/967313 */ /* #tabbrowser-tabs{display: none !important;} */
/* https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin */ toolbar { background-color: #77AABB !important; }
/* Make separators in bookmarks easier to see */ menuseparator { -moz-appearance:none !important; /* nothing changes without this */ background: green !important; height: 3px !important; padding: 1px !important; margin: 2px 3px; border-top: 1px solid #5AC43F; border-bottom: 1px solid #11CE08; }
Modified
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* https://www.userchrome.org/how-create-userchrome-css.html
Open your currently active profile folder Create a new folder named chrome Create a new text file inside the chrome folder named userChrome.css Change a preference in Firefox so it looks for your files at startup about:config search userprof toggle toolkit.legacyUserProfileCustomizations.stylesheets
- /
.bookmark-item > .toolbarbutton-icon { display: none !important; }
/* Make bookmark folders bold and navy blue */ .bookmark-item[type="menu"] > .toolbarbutton-text {
font-weight: 600; color: black;
}
- personal-bookmarks toolbarbutton {
margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;
}
/* Sets the space around the bookmark toolbar text */
- personal-bookmarks .toolbarbutton-text {
margin: 0px 0px 0px 0px !important; padding: 0px 5px 0px 0px !important;
}
/* http://support.mozilla.org/en-US/questions/967313 */ /* #tabbrowser-tabs{display: none !important;} */
/* https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin */ toolbar { background-color: #77AABB !important; }
/* Make separators in bookmarks easier to see */ menuseparator { -moz-appearance:none !important; /* nothing changes without this */ background: green !important; height: 3px !important; padding: 1px !important; margin: 2px 3px; border-top: 1px solid #5AC43F; border-bottom: 1px solid #11CE08; } ~ ~
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* https://www.userchrome.org/how-create-userchrome-css.html
Open your currently active profile folder Create a new folder named chrome Create a new text file inside the chrome folder named userChrome.css Change a preference in Firefox so it looks for your files at startup about:config search userprof toggle toolkit.legacyUserProfileCustomizations.stylesheets
- /
.bookmark-item > .toolbarbutton-icon { display: none !important; }
/* Make bookmark folders bold and navy blue */ .bookmark-item[type="menu"] > .toolbarbutton-text {
font-weight: 600; color: black;
}
- personal-bookmarks toolbarbutton {
margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;
}
/* Sets the space around the bookmark toolbar text */
- personal-bookmarks .toolbarbutton-text {
margin: 0px 0px 0px 0px !important; padding: 0px 5px 0px 0px !important;
}
/* http://support.mozilla.org/en-US/questions/967313 */ /* #tabbrowser-tabs{display: none !important;} */
/* https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin */ toolbar { background-color: #77AABB !important; }
/* Make separators in bookmarks easier to see */ menuseparator { -moz-appearance:none !important; /* nothing changes without this */ background: green !important; height: 3px !important; padding: 1px !important; margin: 2px 3px; border-top: 1px solid #5AC43F; border-bottom: 1px solid #11CE08; }
userChrome.css functionality may disappear at any time
/*
https://www.userchrome.org/how-create-userchrome-css.html
Open your currently active profile folder Create a new folder named chrome Create a new text file inside the chrome folder named userChrome.css Change a preference in Firefox so it looks for your files at startup about:config search userprof toggle toolkit.legacyUserProfileCustomizations.stylesheets
- /
.bookmark-item > .toolbarbutton-icon { display: none !important; }
.bookmark-item > .toolbarbutton-icon { display: none !important; }
.bookmark-item[type="menu"] > .toolbarbutton-text {
font-weight: 600; color: black;
}
- personal-bookmarks toolbarbutton {
margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;
}
- personal-bookmarks .toolbarbutton-text {
margin: 0px 0px 0px 0px !important; padding: 0px 5px 0px 0px !important;
}
toolbar { background-color: #77AABB !important; }
menuseparator { -moz-appearance:none !important; /* nothing changes without this */ background: green !important; height: 3px !important; padding: 1px !important; margin: 2px 3px; border-top: 1px solid #5AC43F; border-bottom: 1px solid #11CE08; } ~
Modified
But userChrome.css functionality in part or whole, may disappear without notice at any time as explained here:
https://support.mozilla.org/en-US/kb/contributors-guide-firefox-advanced-customization
Modified