No need for an Add-on.

Right click on the item on the Bookmarks toolbar. Click on Properties(at the end) and you can abbreviate the name right down to just the Icon if you wish.

Thanks so much, Alan - exactly what I was looking for except better!

jjlothin Best thank you I've had in quite a while.

Remember, to save space that you can also create Folders on your Toolbar to group similar bookmarks(right click on the toolbar; also offers new separators). Also don't be afraid of the easily accessed spillover - >> at the end of the Bookmarks Toolbar.

alan_r said

jjlothin Best thank you I've had in quite a while. Remember, to save space that you can also create Folders on your Toolbar to group similar bookmarks(right click on the toolbar; also offers new separators). Also don't be afraid of the easily accessed spillover - >> at the end of the Bookmarks Toolbar.

Getting better and better - many thanks once again, Alan!

YOU DON'T NEED ROOMY'S BOOKMARK ANYMORE! (Kinda)

r-click and bookmark, and you can leave the title completely blank, leaving only icon.

Only problem with that is when making a new bookmark, you got to remember to erase the title also. ANOTHER problem now that I think of it, there's sites with different pages but same icon. And make the icons spaced out less. And give in option to make the option to put the title in the mouse rollover description not url jumble - titles in the bookmark bar takes up TOO MUCH space.

Thanks, Robert!

I created the Chrome folder and then put this code in the userchrome.css file. It works except no multiple rows.

/* Recreates the basic functionality of the popular Roomy Bookmarks Toolbar add-on:
Hide bookamrks bar items label text, show on hover. */

.bookmark-item > .toolbarbutton-text {
margin-top: -1px !important;
}
.bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-text {
display: none !important;
}
#PlacesToolbarItems > .bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}

too many words and syntax in this CSS file to understand Thanks Carver

"No need for an Add-on.

Right click on the item on the Bookmarks toolbar. Click on Properties(at the end) and you can abbreviate the name right down to just the Icon if you wish."

Thanks Alan! Fantastic! And when you go to properties the name is already highlighted so all you have to do is click is delete! Bam! Quick fix! Your a life saver Brah! :)

robertbrooks said

YOU DON'T NEED ROOMY'S BOOKMARK ANYMORE! (Kinda) r-click and bookmark, and you can leave the title completely blank, leaving only icon. Only problem with that is when making a new bookmark, you got to remember to erase the title also. ANOTHER problem now that I think of it, there's sites with different pages but same icon. And make the icons spaced out less. And give in option to make the option to put the title in the mouse rollover description not url jumble - titles in the bookmark bar takes up TOO MUCH space.

I would love to have icon only with roll over info pop up. Other suggestions of removing the name in properties just puts up the link info and doesn't help any length issues.....

Add code to the userChrome.css file below the default @namespace line.

• http://kb.mozillazine.org/userChrome.css

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

/* hide label for bookmarks */
#PlacesToolbarItems > .bookmark-item:not([container]) .toolbarbutton-text{ display:none !important; }

/* hide icon for folders */
#PlacesToolbarItems > .bookmark-item[container] .toolbarbutton-icon { display:none !important; }

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.

• Help -> Troubleshooting Information -> Profile Directory:
  Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder
• http://kb.mozillazine.org/Profile_folder_-_Firefox

• create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
• use a plain text editor (Windows: Notepad; Mac: Textedit) to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
• paste the code in the userChrome.css file in the editor window
• make sure that the userChrome.css file starts with the default @namespace line
• make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
  otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

That works now only multiple rows are needed. I've already shortened names and even no names on a few as the icon tells all.

This is what I have, below.

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

/* hide label for bookmarks */
#PlacesToolbarItems > .bookmark-item:not([container]) .toolbarbutton-text{ display:none; }

/* hide icon for folders */
#PlacesToolbarItems > .bookmark-item[container] .toolbarbutton-icon { display:none; }

/* Recreates the basic functionality of the popular Roomy Bookmarks Toolbar add-on:
Hide bookmarks bar items label text, show on hover. Always show Folder Labels*/

.bookmark-item > .toolbarbutton-text {
margin-top: -1px !important;
}

.bookmark-item:not([container="true"]):not(:hover):not([open="true"]) > .toolbarbutton-text {
display: none !important;
}

#PlacesToolbarItems > .bookmark-item:not([container="true"]):not(:hover):not([open="true"]) > 

.toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}

Thanks carversmith! after trying other mods to the userchrome.css file that didnt work I was surprised happy after this one!

now to get lastpass tuned up so it doesnt log me out so often.

Hi,

i played around with userChrome.css a bit. You can also make a multirow bookmark bar almost identical to the former multirow bookmark addon. I usually have text labels on so i always need more space.

/* Multi-Row Bookmarks Toolbar */

#personal-bookmarks {
  display: block;
}

#personal-bookmarks #PlacesToolbar {
  display: block;
  min-height: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 64px;
  max-height: 64px;
}

#personal-bookmarks #PlacesToolbar > hbox {
  display: -moz-stack !important;
  left: 0px;
  right: 0px;
  width: 100%;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
  overflow-x: visible;
  overflow-y: visible;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
  display: block;
}

#personal-bookmarks #PlacesToolbar > .bookmark-item{
  visibility: visible !important;
}

#personal-bookmarks #PlacesToolbar .chevron{
  display: none;
}

#personal-bookmarks #PlacesToolbar > hbox > hbox{
  overflow-x: hidden;
  overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
  display: none;
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
  padding-top: 1px;
  padding-bottom: 1px;
  /*margin-left: -4px !important;
  padding-right: 9.5px !important;*/
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  /*-moz-padding-start: 4px;
  -moz-padding-end: 2px;*/
}

#personal-bookmarks #PlacesToolbar toolbarseparator{
  -moz-appearance: none !important;
  visibility: visible !important;
  display: inline;
  text-shadow: none !important;
  border-left: 3px solid ThreeDShadow !important;
  border-right: 3px solid ThreeDHighlight !important;
  vertical-align: middle;
}

Only thing that is still looking bad ist the color of folder icons (gray instead of yellow), this seems to be an issue in version 57 which will be fixed soon hopefully.

I add the code with some other code I found and got 5 rows to display, Nice, but the old add-in allowed me to scroll up and down since the size of my bookmarks toolbar is 90 rows, Is there a way to add that also. That would pretty much be that whole show. Thanks so much.

bmazak said

I add the code with some other code I found and got 5 rows to display, Nice, but the old add-in allowed me to scroll up and down since the size of my bookmarks toolbar is 90 rows, Is there a way to add that also.

90 rows?! You must be kidding. Have you thought about putting some of those items into folders?

If you have a scroll wheel or you like to scroll with the touchpad, you can set a new overflow rule and use the wheel to scroll. However, at least in my test, the displayed scroll bar itself didn't function normally, it just shows where I am in the set of rows.

/* Scrollable Bookmarks Toolbar 
   (displayed scroll bar nonfunctional) */
#PersonalToolbar #PlacesToolbarItems {
  overflow-y: auto !important;
}
#PersonalToolbar {
  min-height: 104px !important;
  padding-right: 0 !important;
}
#PersonalToolbar #PlacesChevron {
  display: none !important;
}

For context, I was adding that to this style recipe: https://www.reddit.com/r/firefox/comments/75wya9/multiple_row_bookmark_toolbar_for_firefox_5758/dp4f53n/

Yes I have 32 folders. I like to organize my links. Of course I need to get rid of allot of these but I don't have an app that reviews toolbar links in an orderly fashion to make that job easier.

That did not do anything, Perhaps I have it in the wrong place in the userchrome.css file. Here's what I have

/* Tab bar below Navigation & Bookmarks Toolbars 
   For best results, show Title Bar or Menu Bar */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  border-top-width: 0 !important; 
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
}
/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
  /* Provide room for up to 4 rows at 26px */
  max-height: 104px !important;
}
#PlacesToolbarItems > box {
  display: inline-block !important;
}
#PersonalToolbar #PlacesToolbarItems {
  /* Override hiding */
  overflow-x: visible !important;
  overflow-y: visible !important;
  /* Add a little cushion */
  padding-bottom: 1px;
}

#PersonalToolbar #PlacesToolbarItems .bookmark-item {
  /* Reduce padding on individual bookmarks to fit rows closer together */
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  
  /* --- [2] --- */
toolbarbutton.bookmark-item[type="menu"]{
    margin-right: .5em !important
}
toolbarbutton.bookmark-item[type="menu"] .toolbarbutton-text{
    display: -moz-box !important;
}
/* --- [/2] --- */	
/* Scrollable Bookmarks Toolbar 
   (displayed scroll bar nonfunctional) */
#PersonalToolbar #PlacesToolbarItems {
  overflow-y: auto !important;
}
#PersonalToolbar {
  min-height: 104px !important;
  padding-right: 0 !important;
}
#PersonalToolbar #PlacesChevron {
  display: none !important;
}

What is PlacesChevron? Thanks so much for your help.

You can use <pre> before and </pre> after to prevent the site from interpreting your code as wiki-text. You were missing a closing } before this line:

/* --- [2] --- */

This should work:

/* Tab bar below Navigation & Bookmarks Toolbars 
   For best results, show Title Bar or Menu Bar */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  border-top-width: 0 !important; 
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
}
/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
  /* Provide room for up to 4 rows at 26px */
  max-height: 104px !important;
}
#PlacesToolbarItems > box {
  display: inline-block !important;
}
#PersonalToolbar #PlacesToolbarItems {
  /* Override hiding */
  overflow-x: visible !important;
  overflow-y: visible !important;
  /* Add a little cushion */
  padding-bottom: 1px;
}

#PersonalToolbar #PlacesToolbarItems .bookmark-item {
  /* Reduce padding on individual bookmarks to fit rows closer together */
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
  /* --- [2] --- */
toolbarbutton.bookmark-item[type="menu"]{
    margin-right: .5em !important
}
toolbarbutton.bookmark-item[type="menu"] .toolbarbutton-text{
    display: -moz-box !important;
}
/* --- [/2] --- */	
/* Scrollable Bookmarks Toolbar 
   (displayed scroll bar nonfunctional) */
#PersonalToolbar #PlacesToolbarItems {
  overflow-y: auto !important;
}
#PersonalToolbar {
  min-height: 104px !important;
  padding-right: 0 !important;
}
#PersonalToolbar #PlacesChevron {
  display: none !important;
}

The places chevron is the >> that shows overflow items on the Bookmarks Toolbar.

Loved my Roomybookmarks styling and scrolling etc...

here is a tip to colorize the background and text of a folder.. I needed so much this to segregate items and see them at a quick glance..

#PlacesToolbarItems > toolbarbutton[label=CAMs] > label {
	background-color: #66FFFF!important;
	color:black!important;
        font-weight:bold!important;
        padding-right:14px!important;
}

omit the "pre" statements if they show up.. I didn't see a "code" button.

Playing with a lot of parameters I don not undrestand, but I got the Bookmarks toolbar to show 9, yes nine rows, with icons and text. I don't want text to show except on hover and I think the max number of icons is about 100 give or take several, hard to count. This code in userchrome.css is what gives me the 9 rows with icons plus text. I've tried adding other code to hide text but then it starts showing only 2 2.5 lines and has a slider to go down but I can't slide it.

/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
/* Provide room for up to 4 rows at 26px */
max-height: 999px !important;
}
#PlacesToolbarItems > box {
display: inline-block !important;
}
#PersonalToolbar #PlacesToolbarItems {
/* Override hiding */
overflow-x: visible !important;
overflow-y: visible !important;
/* Add a little cushion */
padding-bottom: 0px;
}
#PersonalToolbar #PlacesToolbarItems .bookmark-item {
/* Reduce padding on individual bookmarks to fit rows closer together */
padding-top: 1px !important;
padding-bottom: 1px !important;
}

Hi carversmith, you can set the text part of the bookmark to hidden, but showing it on hover will make the bar shift around and may make it difficult to view what you want to view on hover. Unless you meant you just want to use the tooltips.

If you did want the text next to the icon to show, you could experiment with rules like the following:

/* 
   Bookmark text labels are hidden until hovered for
   at least a quarter second (250 milliseconds).
   Once shown on hover, they remain for 2 seconds
   after hover ends before collapsing out again.
*/
toolbarbutton.bookmark-item .toolbarbutton-text {
  visibility: collapse !important;
  opacity: 0 !important;
  transition: all 250ms 2s ease-in-out !important;
}
toolbarbutton.bookmark-item:hover .toolbarbutton-text {
  visibility: visible !important;
  opacity: 1 !important;
  transition: all 250ms 250ms ease-in-out !important;
}

The transition parameters are:

• properties affected
• duration of the transition
• delay before the transition starts
• which transition is used

See: https://developer.mozilla.org/docs/Web/CSS/transition