X
Tap here to go to the mobile version of the site.

Support Forum

How to change bookmark folder icons color in Library window?

Posted

Is it possible to extend the bookmark folder icon color change of the userChrome.css script below to the Library window All Bookmarks list?

https://www.userchrome.org/samples/userChrome-color_bookmark_folders.css

In the Library window, bookmark folder icons are still appearing gray with this script. It is also true for the folder icons in the new (FF 62) "New Bookmark" pop-up window.

Is it possible to extend the bookmark folder icon color change of the userChrome.css script below to the Library window All Bookmarks list? https://www.userchrome.org/samples/userChrome-color_bookmark_folders.css In the Library window, bookmark folder icons are still appearing gray with this script. It is also true for the folder icons in the new (FF 62) "New Bookmark" pop-up window.

Modified by gnabbel

Chosen solution

Thanks, cor-el, I updated the CSS here: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder

Hi gnabbel, I think it now covers the additional places that folders and top-level containers appear, but if you are happy with that super-short rule, it may not be worth changing.

Read this answer in context 0
Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 30.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0

More Information

Pkshadow
  • Top 10 Contributor
1051 solutions 14538 answers

Hi, no. Also think a code change as per : https://www.reddit.com/r/FirefoxCSS/

A Firefox Contributors page they talk about :

Hi, no. Also think a code change as per : https://www.reddit.com/r/FirefoxCSS/ A Firefox Contributors page they talk about : *https://www.userchrome.org/what-is-userchrome-css.html
Was this helpful to you?
Quote
Pkshadow
  • Top 10 Contributor
1051 solutions 14538 answers

Maybe as mentioned, code is broken for the time being.

Maybe as mentioned, code is broken for the time being.
Was this helpful to you?
Quote

Question owner

https://www.reddit.com/r/FirefoxCSS/comments/9dmbdy/possible_to_change_color_of_bookmark_folder_icons/

This works for changing folder colors in library (#placesView), but not for the new bookmark pop-up window.

https://www.reddit.com/r/FirefoxCSS/comments/9dmbdy/possible_to_change_color_of_bookmark_folder_icons/ This works for changing folder colors in library (#placesView), but not for the new bookmark pop-up window.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
16544 solutions 149349 answers

This updated code should cover some cases of treechildren type lists. The #placesList and #placeContent work in the Library and you can choose not to include these selectors in the :-moz-any() list.


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

/* Colored folders for bookmark sidebar, toolbar, menu button, classic menu
   Updated for Firefox 60 on May 10, 2018
   https://www.userchrome.org/what-is-userchrome-css.html
*/
/* Updated for Firefox 62 on Sep 15, 2018
   [/questions/1232447#answer-1151074] How to change bookmark folder icons color in Library window?
*/

  /* Standard folder */
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
:-moz-any(
 #PlacesToolbarItems,
 #PlacesChevronPopup,
 #BMB_bookmarksPopup,
 #bookmarksMenu)
  menu[container="true"] > .menu-iconic-left > .menu-iconic-icon {
   fill: #e8bb00 !important; /* slightly muted gold */
  }

  /* Live Bookmark (RSS Feed) */
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
:-moz-any(
 #PlacesToolbarItems,
 #PlacesChevronPopup,
 #BMB_bookmarksPopup,
 #bookmarksMenu)
   menu[container="true"][livemark="true"] > .menu-iconic-left > .menu-iconic-icon {
    fill: orange !important;
   }

  /* Smart bookmark folder */
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
:-moz-any(
 #PlacesToolbarItems,
 #PlacesChevronPopup,
 #BMB_bookmarksPopup,
 #bookmarksMenu)
   menu[container="true"][query="true"] > .menu-iconic-left > .menu-iconic-icon {
    fill: #69c !important; /* similar to blue smart folder color */
   }


/* NEW code for treechildren */

   /* Standard folder */
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container) {
 fill: #960 !important;
 background-color: #eee !important;
}

   /* Live Bookmark (RSS Feed) */
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, livemark) {
 fill: orange !important;
}

  /* Smart bookmark folder */
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, query) {
  fill: #69c !important; /* similar to blue smart folder color */
}

  /* These "containers" are SVG in the sidebar and in the menu */
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_menu________) {
  fill: olive !important;
}

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
  fill: olive !important;
}

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
  fill: olive !important;
}
/* END of code for treechildren */

/* Avoid overriding classic Bookmarks Toolbar and Other Bookmarks icons in menus */
#BMB_bookmarksPopup #BMB_bookmarksToolbar.menu-iconic-icon,
#bookmarksMenu #bookmarksToolbarFolderMenu.menu-iconic-icon {
  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
}

#BMB_bookmarksPopup #BMB_unsortedBookmarks.menu-iconic-icon,
#bookmarksMenu #menu_unsortedBookmarks.menu-iconic-icon {
  list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png") !important;
}
This updated code should cover some cases of treechildren type lists. The #placesList and #placeContent work in the Library and you can choose not to include these selectors in the :-moz-any() list. ---- <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* Colored folders for bookmark sidebar, toolbar, menu button, classic menu Updated for Firefox 60 on May 10, 2018 https://www.userchrome.org/what-is-userchrome-css.html */ /* Updated for Firefox 62 on Sep 15, 2018 [/questions/1232447#answer-1151074] How to change bookmark folder icons color in Library window? */ /* Standard folder */ #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon, :-moz-any( #PlacesToolbarItems, #PlacesChevronPopup, #BMB_bookmarksPopup, #bookmarksMenu) menu[container="true"] > .menu-iconic-left > .menu-iconic-icon { fill: #e8bb00 !important; /* slightly muted gold */ } /* Live Bookmark (RSS Feed) */ #PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon, :-moz-any( #PlacesToolbarItems, #PlacesChevronPopup, #BMB_bookmarksPopup, #bookmarksMenu) menu[container="true"][livemark="true"] > .menu-iconic-left > .menu-iconic-icon { fill: orange !important; } /* Smart bookmark folder */ #PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon, :-moz-any( #PlacesToolbarItems, #PlacesChevronPopup, #BMB_bookmarksPopup, #bookmarksMenu) menu[container="true"][query="true"] > .menu-iconic-left > .menu-iconic-icon { fill: #69c !important; /* similar to blue smart folder color */ } /* NEW code for treechildren */ /* Standard folder */ :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container) { fill: #960 !important; background-color: #eee !important; } /* Live Bookmark (RSS Feed) */ :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, livemark) { fill: orange !important; } /* Smart bookmark folder */ :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, query) { fill: #69c !important; /* similar to blue smart folder color */ } /* These "containers" are SVG in the sidebar and in the menu */ :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu), :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_menu________) { fill: olive !important; } :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar), :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) { fill: olive !important; } :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks), :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____) { fill: olive !important; } /* END of code for treechildren */ /* Avoid overriding classic Bookmarks Toolbar and Other Bookmarks icons in menus */ #BMB_bookmarksPopup #BMB_bookmarksToolbar.menu-iconic-icon, #bookmarksMenu #bookmarksToolbarFolderMenu.menu-iconic-icon { list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important; } #BMB_bookmarksPopup #BMB_unsortedBookmarks.menu-iconic-icon, #bookmarksMenu #menu_unsortedBookmarks.menu-iconic-icon { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png") !important; }</nowiki></pre>

Modified by cor-el

Was this helpful to you?
Quote

Question owner

Thanks for your help! Unfortunately #editBMPanel_folderTreeRow doesn't seem to do anything for folder color in the new bookmark pop-up window.

I now go with this code snippet. It gives you yellow bookmarks folders except in Side Bar, which I don't use. For the time being I am happy with this.

 /* Yellow Bookmarks Folders */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
 fill: #e8bb00 !important;  /* slightly muted gold */
}
Thanks for your help! Unfortunately #editBMPanel_folderTreeRow doesn't seem to do anything for folder color in the new bookmark pop-up window. I now go with this code snippet. It gives you yellow bookmarks folders except in Side Bar, which I don't use. For the time being I am happy with this. <pre><nowiki> /* Yellow Bookmarks Folders */ .bookmark-item[container], treechildren::-moz-tree-image(container) { fill: #e8bb00 !important; /* slightly muted gold */ }
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
7668 solutions 62450 answers

Chosen Solution

Thanks, cor-el, I updated the CSS here: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder

Hi gnabbel, I think it now covers the additional places that folders and top-level containers appear, but if you are happy with that super-short rule, it may not be worth changing.

Thanks, cor-el, I updated the CSS here: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder Hi gnabbel, I think it now covers the additional places that folders and top-level containers appear, but if you are happy with that super-short rule, it may not be worth changing. <center><img src="https://prod-cdn.sumo.mozilla.net/uploads/images/2018-09-15-15-42-51-ec89ad.png" width="400"></center>

Modified by jscher2000

Was this helpful to you?
Quote

Question owner

jscher2000 said

Thanks, cor-el, I updated the CSS here: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder Hi gnabbel, I think it now covers the additional places that folders and top-level containers appear, but if you are happy with that super-short rule, it may not be worth changing.

Thanks for the updated code! Very nice result.

''jscher2000 [[#answer-1154715|said]]'' <blockquote> Thanks, cor-el, I updated the CSS here: https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder Hi gnabbel, I think it now covers the additional places that folders and top-level containers appear, but if you are happy with that super-short rule, it may not be worth changing. <center><img src="https://prod-cdn.sumo.mozilla.net/uploads/images/2018-09-15-15-42-51-ec89ad.png" width="400"></center> </blockquote> Thanks for the updated code! Very nice result.

Modified by gnabbel

Was this helpful to you?
Quote

Question owner

I tested the code more closely and found one folder icon in the "Edit Bookmark" window still showing up as grey. It is the icon showing the selected folder icon in the Drop Down menu: What code would be needed to change this icon to a custom color?

In addition, I discovered a (very) minor bug in the Edit Bookmark window: After opening the Edit Bookmark window and then in the Drop-Down menu clicking "Choose..." you are directed to the Other Bookmarks folder. The folder icon for Other Bookmarks then shows the wrong icon:

I tested the code more closely and found one folder icon in the "Edit Bookmark" window still showing up as grey. It is the icon showing the selected folder icon in the Drop Down menu: What code would be needed to change this icon to a custom color? <center><img src=https://prod-cdn.sumo.mozilla.net/uploads/images/2018-09-17-13-50-57-1d1d15.png width="400"></center> In addition, I discovered a (very) minor bug in the Edit Bookmark window: After opening the Edit Bookmark window and then in the Drop-Down menu clicking "Choose..." you are directed to the Other Bookmarks folder. The folder icon for Other Bookmarks then shows the wrong icon: <center><img src=https://prod-cdn.sumo.mozilla.net/uploads/images/2018-09-17-14-14-48-d85ba3.png width="400"></center>
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
7668 solutions 62450 answers

Yes, I never checked that. One more line is needed:

/* Standard folder -- on Toolbar and Menus */
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
:-moz-any(
#PlacesToolbarItems,
#PlacesChevronPopup,
#BMB_bookmarksPopup,
#bookmarksMenu) menu[container="true"] > .menu-iconic-left > .menu-iconic-icon,
/* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */
:-moz-any(
#bookmarks-view, 
#editBMPanel_folderTree, 
#placesList, 
#placeContent) treechildren::-moz-tree-image(container), 
#editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,
#editBMPanel_folderMenuList menupopup menuitem {
  fill: #e8bb00 !important; /* slightly muted gold */
}
Yes, I never checked that. One more line is needed: <pre>/* Standard folder -- on Toolbar and Menus */ #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon, :-moz-any( #PlacesToolbarItems, #PlacesChevronPopup, #BMB_bookmarksPopup, #bookmarksMenu) menu[container="true"] > .menu-iconic-left > .menu-iconic-icon, /* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */ :-moz-any( #bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container), '''#editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon,''' #editBMPanel_folderMenuList menupopup menuitem { fill: #e8bb00 !important; /* slightly muted gold */ } </pre>
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
7668 solutions 62450 answers

On the bug, after you click Choose, Firefox updates the selectedIndex to "4" since Choose is the 4th 5th item on the list (counting the separator), and that replaces the custom icon with a generic folder.

Before clicking "Choose..." -- correct icon:

<menulist id="editBMPanel_folderMenuList" class="folder-icon" label="Other Bookmarks" selectedIndex="2">

After clicking "Choose..." -- generic folder:

<menulist id="editBMPanel_folderMenuList" class="folder-icon" label="Other Bookmarks" selectedIndex="4">

The custom icons are keyed to the first three positions (0, 1, and 2). For example:

#editBMPanel_folderMenuList[selectedIndex="2"] {
  list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg") !important;
}

Someone could file a bug report. https://bugzilla.mozilla.org/

On the bug, after you click Choose, Firefox updates the selectedIndex to "4" since Choose is the <s>4th</s> <u>5th</u> item on the list (counting the separator), and that replaces the custom icon with a generic folder. Before clicking "Choose..." -- correct icon: <code>&lt;menulist id="editBMPanel_folderMenuList" class="folder-icon" label="Other Bookmarks" '''selectedIndex="2"'''></code> After clicking "Choose..." -- generic folder: <code>&lt;menulist id="editBMPanel_folderMenuList" class="folder-icon" label="Other Bookmarks" '''selectedIndex="4"'''></code> The custom icons are keyed to the first three positions (0, 1, and 2). For example: <pre>#editBMPanel_folderMenuList[selectedIndex="2"] { list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg") !important; } </pre> Someone could file a bug report. https://bugzilla.mozilla.org/

Modified by jscher2000

Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.