Changing icons in Firefox Library window
I used the instructions here: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder to change the icons used for Bookmarks in Firefox.
It works great, but it only changes the icons in the bookmarks Menu and Sidebar. However, if you open the main Library window to view bookmarks, then the icons in that particular window are all still in the original style and not changed.
What CSS needs to be added in order to get the changes to also apply to the Library window's icon set?
Thanks
It works great, but it only changes the icons in the bookmarks Menu and Sidebar. However, if you open the main Library window to view bookmarks, then the icons in that particular window are all still in the original style and not changed.
What CSS needs to be added in order to get the changes to also apply to the Library window's icon set?
Thanks
Comments
https://old.reddit.com/r/FirefoxCSS/
I'm using Old Icons.
I have actually managed to make some progress by looking at a thread that you contributed to on Mozilla Support.
In that thread there was post about coloring SVG icons, and it used a different (simpler) method for specifying which icon to affect, compared to the more complicated code that is used in the "Fx56_bookmark_buttons.zip" file which I downloaded from userchrome.org.
So I basically adapted the code from that forum post. I removed the "fill" commands and replaced it with the desired icon file instead.
Like this:
/* Bookmarks Toolbar */
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar)
{ list-style-image: url(Fx56-bookmarksToolbar.png) !important; }
/* Bookmarks Menu */
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu)
{ list-style-image: url(Fx56-bookmarksMenu.png) !important; }
/* Other (Unsorted) Bookmarks */
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks)
{ list-style-image: url(Fx56-unsortedBookmarks.png) !important; }
This method works great for the both the Sidebar AND the Library window (which is exactly what I wanted). I even managed to work out the command to use to change the 'All Bookmarks' icon (which was not included in the forum post).
/* All Bookmarks */
treechildren::-moz-tree-image(container, OrganizerQuery_AllBookmarks)
{ list-style-image: url(Fx56-all-bookmarksToolbar.png) !important; }
However, the forum post misses out several icons. It also uses only one entry for Query (which means that 'History' and 'Recent Tags' are both affected at the same time, whereas they should have different icons to each other).
Also, the command that was given to change standard bookmark folder icons is too broad:
.bookmark-item[container],
treechildren::-moz-tree-image(container)
This command overrides other icons and it also also breaks certain icons in the Bookmarks menu (makes them disappear) etc. I don't know how to restrict this command so that it only affects standard bookmark folders. I used DOM inspector but it does not give me any info for the individual tree branch; the info is only for the whole tree window.
Here is a reminder of what the Library icons used to look like. This is what I am trying to achieve: https://i.imgur.com/jI1umoX.png
SUMMARY:
I have several of the icons working, but there are still some missing that none of the online code examples have dealt with.
I do not know how to change the following icons:
1. History top-level icon
2. History sub-items (they should be a blue calendar icon)
3. Recent Bookmarks & Recent tags icons (blue folder with magnifying glass).
4. Recent Tags sub-items (not top-level) should use the same label icon that is used for the Tags top level item.
5. Standard folder icon. This should only apply to bookmark folders and not change other items.
This is what happens if I use the folder code that was supplied in the forum post: Folder icons appear everywhere!
https://i.imgur.com/cWC6tSd.png
Given how many people have shown interest in the Mozilla Support thread and used the solutions provided on userchrome.org, I suspect there would be many people who would appreciate a method that changes back all of the bookmark icons rather than just some of them.
I appreciate any help or advice you can offer.
After much research, I created a test version that seems mostly to be working in Firefox 62, but unfortunately I cannot figure out the yellow folders on the right side of the Library (how to get them only in the first position and not in every blank space).
Feel free to give this code a try:
https://www.userchrome.org/samples/userChrome_Fx56_bookmark_icons_TEST.css
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/bookmark_icons_colorized.css
Furthermore maybe some of the selectors used there may be helpful.
/edit
Of course you need to adjust the image paths to whatever you want (svg?) or copy the images used by the linked project.
You have managed to fix so many things. It's a huge improvement.
Looking through some of the code, I would have never been able to figure out what the names of these elements should be. I got lucky with my one guess for All Bookmarks, but I would've never been able to deduce names like: OrganizerQuery_history____v
Please note that I am using Firefox v56.0.2. My desire to change the icons is in order to get them to match the rest of my browser's existing default theme. However in Quantum versions of Firefox, the entire UI has been changed to black SVG icons, so I would have assumed that there would be fewer users who would want to restore the old style colored icons into their black and white themed browser environment. (But each to their own).
Here is what I found when I tested the latest code that you kindly supplied.
- Bookmarks Toolbar / Personal Bar -
All icons display correctly here, even when you click the 'Bookmarks' button that displays a menu of the entire bookmarks tree. However, this is to be expected because on Firefox v56 that particular buttons is completely unchanged from previous versions of Firefox. It displays all sub-menus with the correct old-style icons even on a brand new install that has no chrome folder at all. It is also not affected by anything that was in the userChrome.css that you supplied.
The 'Most Visited' and 'Recent Bookmarks' buttons that are also on the Bookmarks toolbar, display the correct icons as well (even without any css). However, unlike the Bookmarks button for the full bookmarks tree, these two query-based icons do change their icon in response to the supplied css. The css supplied the correct icon, meaning that they display correctly with or without the css.
Therefore, no problems were encountered on the Bookmarks toolbar when using Firefox v56.
- Bookmarks Menu -
This is the main menu that you see at very top of the browser window when you press the Alt key on your keyboard.
1. Under the 'Recent Tags' menu, the category groups have incorrect icons. Instead of showing the luggage tag icon (which is correctly displayed when using the Bookmarks button on the Bookmarks toolbar) this menu instead shows the same icon as the one that has been assigned to the query folders ("Fx56-query.png").
2. All of the standard bookmark folders on this Bookmarks main menu have missing icons (there is just a blank space where the icon should be). This is despite the fact that the yellow folder icons have been correctly assigned elsewhere (because you can see them in the Library).
Aside from that issue, it seems as the the standard yellow folder icons appear fine elsewhere (except for the right side of the Library, which you already explained in your last post).
- Library Window -
3.The top-level 'History' icon is using same icon as the query folders instead of having its own icon. This is actually caused by the css, because if you change the assigned icon in the userChrome.css file, not only does the two icons on the Bookmarks toolbar change, but the top-level History icon changes with them.
I should mention that when you said that you were using Firefox v62, I downloaded a portable copy to run strand-alone on my Desktop so that I could check what you were seeing on your browser. It seems as if this top-level History issue only happens on Firefox v56. When I did quick check on 62, the History icon changed to the unique icon that I assigned to when I edited the css.
4.The top-level 'Tags' icon is also using the same query icon instead of its own icon (just like the issue with History mentioned above). Again, this does not happen on v62, but it does on v56.
5. The 'All Bookmarks' top-level icon is also not using its own icon. It's using the same icon that the css has assigned to the standard yellow bookmarks folders. If you change the icon for the standard folders, then the All Bookmarks icon changes with it. Once more, this issue is seen only on v56, but not on 62.
6.The 'Most Visited' and 'Recent Bookmarks' icons in the Library window are not changed (they still have default icon). This is despite the fact that those same two query folders ARE changed on the Bookmarks toolbar / Personal bar. These two folders are located here: Library > Bookmarks Toolbar > Most Visited and here: Library > Bookmarks Toolbar > Recent Bookmarks. This is strange seeing as these two folders are just representations of the exact same items on the Bookmarks toolbar (where the icon does change and is correct).
This problem is seen on both Firefox v56 and Firefox v62.
7 Finally, a similar problem to number 6. also occurs with the 'Recently Bookmarked' folder that's listed under Bookmarks (in other words: Library > Bookmarks Menu> Recently Bookmarked
Again, the icon has not changed and does not respond to css. And just like with point number 6, this occurs in both Firefox v56 and Firefox v62.
Once again, thanks for your work on this.
Especially bugs for the current version will be addressed.
I can't reconstruct most of your mentioned items because I don't have the old FF version. The key is always inspecting the html structure via browser tools or maybe searching for explanations on MDN.
If something is changed wrongly, it's always helpful to identify the guilty rule by deactivating half of the rules, restart browser, look if it is still present, then deactivate half of the rules of the block you just identified and go on until you have only a single rule left.
To point 6:
I can't even see the Recently Bookmarked and Most Visited items in FF62 because now they are just optional columns that you can sort by. (Library window opened with Ctrl + Shift + B)
https://github.com/JYLD/User-CSS-For-Firefox-And-Thunderbird
This code works for me in myUserChrome.css file along with using Aris' stuff for customizing firefox:
/* This makes the status panel (former status bar look the way I like) */
label#statuspanel-label {
color: #0A54A0 !important;
font-size:110% !important;
font-weight: 550 !important;
background-image: none !important;
background-attachment: none !important;
background-color: #FFFFD2 !important;
border: 0px solid transparent !important;
margin: 8px 8px 8px 8px !important;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.7) !important;
}
/* This makes the generic bookmark item colorized and slightly smaller because its
just too big for my tastes. This does NOT effect your custom folder icons or
favicons. You can change the color to whatever you like.*/
.bookmark-item:not([container="true"]) image {
width: 14px !important;
height: 14px !important;
fill: #0098FC !important;
/* This will substitute a png file for the standard svg file, but it will overwrite your favicons so I prefer the above. /**/
/*
padding: 0px 0px 16px 16px !important;
background-image: url(file:///C:/Users/Administrator/AppData/Roaming/Mozilla/Firefox/Profiles/hn0vhgyx.default/chrome/image/SunIcon1.png) !important;
background-repeat: no-repeat !important;
background-size: 90% 90% !important;
background-position: center center !important;
/**/
}
/* I hate the github favicon so this substitutes a png for just the Github favicon. /**/
.bookmark-item[label="JYLD Github Repository"] image,
.bookmark-item[label="Firefox Screen Shots"] image {
width: 0px !important;
height: 0px !important;
padding: 0px 0px 16px 16px !important;
background-image: url(file:///C:/Users/Administrator/AppData/Roaming/Mozilla/Firefox/Profiles/hn0vhgyx.default/chrome/image/SunIcon1.png) !important;
background-repeat: no-repeat !important;
background-size: 90% 90% !important;
background-position: center center !important;
}
Best wishes,
Gary