This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Using list-style-image for bookmark library folders (sort of) works

  • 3 replies
  • 1 has this problem
  • 4 views
  • Last reply by cor-el

more options

@ jscher or anyone w/ an idea. I used some code off your site - userChrome.org. Using a list-style-image to replace the bookmark library folder icons & the subfolder icons that always show in the main bookmark pane (if the selected folder has subfolders). Every code I've tried *ALSO ADDS* the subfolder icons under *ALL* visible columns in the bookmark pane.

I used this (simplest I could think of) & a few others - same result. Maybe it will require specifying the unwanted columns (or the ID) don't get the image applied to them? I haven't found a way to inspect the library - don't know the html / CSS names, where there shouldn't be folder icons.

treechildren::-moz-tree-image(container) { list-style-image: url("/home/chuck/.mozilla/firefox/7njgd76j.fx-mint-08-27-18/chrome/image/images-mint-x-aqua/folder.svg") !important; }</code? </p>

FYI - don't know why the duplicate screens still show - I deleted 2 in edit mode, but they still show after saving the post.

@ jscher or anyone w/ an idea. I used some code off your site - userChrome.org. Using a list-style-image to replace the bookmark library folder icons & the subfolder icons that always show in the main bookmark pane (if the selected folder has subfolders). Every code I've tried *ALSO ADDS* the subfolder icons under *ALL* visible columns in the bookmark pane. I used this (simplest I could think of) & a few others - same result. Maybe it will require specifying the unwanted columns (or the ID) don't get the image applied to them? I haven't found a way to inspect the library - don't know the html / CSS names, where there shouldn't be folder icons. <code>treechildren::-moz-tree-image(container) { list-style-image: url("/home/chuck/.mozilla/firefox/7njgd76j.fx-mint-08-27-18/chrome/image/images-mint-x-aqua/folder.svg") !important; }</code? FYI - don't know why the duplicate screens still show - I deleted 2 in edit mode, but they still show after saving the post.
Attached screenshots

Modified by JoeB

All Replies (3)

more options

You can't style individual folders via CSS with an icon in treechildren type lists. Only some special folder have a selector. All regular bookmarks and folders (container) have the same icon unless there is one available (probably set via JavaScript).

See also:

more options

You can't?!? It sort of looks like it did. But I'm not trying to style "individual folders," if I understand you. Only replace the gray "file folder" image - everywhere the folder icon normally appears.

Inside the bookmark pane, I don't know why it's adding the folder icons in columns that never have any icon or image. But I've seen posts - others with the same problem - adding folder icons in bookmark pane columns other than the Name column.

The Name (of bookmarks) column is the only one that ever has sub-folder icons (when the selected folder in the folder tree *has* subfolders).

Maybe we misunderstand each other on "individual folders."

I only wanted to replace the existing "normal" gray folder icons with a different image.

I didn't care about the other icons that weren't the gray FOLDER image. Like "recently bookmarked," or "most visited."

What I used did that - but also adding folder images in columns that never have any icons. I'm surprised there's a designated place (say, in Tags or Location column) to put an image. Has anyone ever seen images / icons in bookmark columns

Modified by JoeB

more options

You use a pseudo class name ::-moz-tree-image, so any element this applies to will get the image. To prevent this you probably need to be more specific and ad more to the selector (::-moz-tree-image(s1,s2,s3)).

Some more examples: