How to change icon for a bookmarks folder via css
In FF 29, I have a need to change the yellow folder icon associated with one or more specific bookmarks folders. I prefer to do this with css, rather than with an extension. Following an example in another thread, I did the following:
Use the troubleshooting menu to open the profile folder. Create a subfolder named "chrome". In "chrome", create a file called "userChrome.css", and insert the text shown below. Copy sample ico, png and gif images to "chrome" for testing. Save and close the css file, and bounce the browser. No results - for example, in Library view. The "My Saved Links" bookmarks subfolder definitely exists. I suspected that I might be doing the URL wrong, trying to access a small image file in "chrome" called "test.png". I've tried 'test.png', '/test.png', and '../test.png' on hunches, though I'm not yet a heavy css user.
Help would be appreciated. The css is as follows:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#personal-bookmarks .bookmark-item[container][label="My Saved Links"],
#bookmarksMenuPopup .bookmark-item[container][label="My Saved Links"],
appmenu_bookmarksPopup .bookmark-item[container][label="My Saved Links"]
{ list-style-image:url('test.png')!important;
-moz-image-region:auto!important; }
moderator fixed the code formatting
Modified by the-edmeister
Chosen solution
It is not possible to select (address) a specific item in a tree list like I wrote above. You can only apply CSS rules to all folder items by using the ::-moz-tree pseudo selectors. So what you want to achieve is not possible when tree children are involved.
Read this answer in context 👍 0All Replies (10)
Note that the "1." and "2." bullets were not in the css I pasted in the first message. They got added after paste by some fluke.
Does other code in the userChrome.css file work?
Did you make sure that you didn't create a text file with a hidden .txt file extension (userChrome.css.txt)?
I've since gotten some css to work using:
.bookmark-item[container][label="Quick Links"] { list-style-image:url("test.png")!important; -moz-image-region:auto!important; }
This affects the Bookmark Toolbar and Bookmark Popup items.
My remaining problem is that I would like to similarly affect the Bookmarks Sidebar and the Library view bookmark items. They apparently use a different handle than ".bookmark-item". I've installed the DOM inspector, and have selected the Bookmarks Sidebar with it, but have been unable to use it to select specific items so I can see how these elements are designated.
Try this for the sidebar.
#bookmarks-view
I replaced ".bookmark-item ..." with "#bookmarks-view .bookmark-item ...", but got no results in the sidebar. "#bookmarks-view" may be correct, but the problem may be with ".bookmark-item". There must be a different such class handle for items in the sidebar.
As a curious aside, I'm not getting email notifications on posts to this thread, as I did to some earlier ones. I checked my profile settings, and every check box is "on", about following threads.
This works for me in userChrome.css .
#bookmarks-view, #historyTree {
background-color: #DDDDDD !important;
}
Been using it for years to color the sidebar background as the non-selected tabs were in Firefox 4 thru 28 versions (and maybe even older versions); close but not perfect. Still works in Firefox 29+ versions to darken the sidebar background for both Bookmarks and History.
Sorry, I don't know enough about CSS to help you work that into your coding for "bookmark folders".
Quite honestly, if I wanted to do a mod like that via userChrome.css and there was an extension available, I would right-click the "Add to Firefox" button on the AMO page for that extension and use Save Link As ... to save it to disk. And then open the XPI using 7-Zip and view the files in the /chrome/ folder of the extension to view the code that the extension developer used to do what he did.
Or I would look for a User Style here - https://userstyles.org/ - that had the code I wanted and use the "code bits" from the Style and put it in userChrome.css .
There is no CSS selector for individual items in the sidebar as that are tree children that do not have a unique individual selector.
The same is with the Library. You can only do this in the Bookmarks Menu button drop-down list and the Bookmarks menu and in the Bookmarks Toolbar items.
Modified by cor-el
Cor-el, the above link on Styling a Tree is very helpful. But I've tried the following examples:
/* Set icon for "My Saved Links" Bookmark folder */ .bookmark-item[container][label="My Saved Links"] { list-style-image:url("ipp_0005.gif")!important; -moz-image-region:auto!important; }
/* Set icon for Bookmark folder in sidebar and library view */ treechildren::-moz-tree-image(container) { list-style-image:url("ipp_0005.gif")!important; -moz-image-region:auto!important; }
The first example changes the icon for a specific folder in the Bookmarks popup. The second example changes ALL folder icons in the sidebar and library views, but I only want to affect a single folder. I've searched the web carefully, and can find no examples of selecting a specific treechildren element by referring to its "label", "name", or "text". Adding a property after "container" of "label=..." or "name=..." just fails.
Chosen Solution
It is not possible to select (address) a specific item in a tree list like I wrote above. You can only apply CSS rules to all folder items by using the ::-moz-tree pseudo selectors. So what you want to achieve is not possible when tree children are involved.