Changing Favorites (Bookmarks) Folder Icons in Internet Explorer is a simple right-click menu selection (Properties > Customize > Change Icon, etc) and this allows each Favorite (Bookmark) Folder to display whatever icon you please. Regrettably this is not nearly so easy to achieve in Pale Moon (or Firefox) as there is no simple "built-in" change method, no right-click (context) menu option, and thus using an Add-on, such as Bookmark Favicon Changer, appears to be the only choice. (EDIT: Sadly it appears Bookmark Favicon Changer 1.74 will be the last version. )
Search a little further and you will find various "Change Bookmark Folder Icon" CSS scripts suggested on Firefox blogs and forums (e.g. mozillaZine). After trying several of these the CSS script below seems a good choice, it is simple, robust, and does a neat job.... and it's really not that difficult to do!
Additional Notes:
- This CSS script simplifies matters by storing the icons used in the "chrome" folder of your Pale Moon's Profile right next to the "userChrome.css" file that contains the "override" script that changes the browser UI. Apparently this is considered "good practice" in code writing as well?
- Additionally this method also allows you to change the Bookmark Folder Icons in both Pale Moon Bookmarks and PlainOldFavorites (POF's Add-on allows IE Favorites to be used directly in Pale Moon and/or Firefox) running in tandem, or alone, as you prefer.
HOW TO CHANGE YOUR PALE MOON BOOKMARK FOLDER ICONS USING A CSS SCRIPT
Navigate to your Pale Moon's Profile. Easiest route via: Pale Moon Button > Help > Troubleshooting Information. (or Help > Troubleshooting information if you display the Menu Bar)
Find "Profile Folder" and click "Show Folder" button. Open "chrome" folder. In recent Pale Moon downloads there is usually a "userChrome.css" file already - you can either modify it by adding your new CSS scripts to it or delete/rename/move it and then create a new file. Leave any other pre-existing files in the "chrome" folder e.g. "userChrome-example.css, userContent.css or userContent-example.css" as they are.
If you chose to delete/rename/move the original userChrome.css file, then create a new file as follows: In your Profile's "chrome" folder - Open a new text file (Right click > New > Text Document) and name it "userChrome.css" and then copy and paste in the next 4 lines exactly!:
Code: Select all
.bookmark-item[container="true"][label="BOOKMARK FOLDER NAME"] {
list-style-image:url('NEW ICON NAME.ico') !important;
-moz-image-region:auto !important;
}
Now save a copy of the icon file you want to use into the "chrome" folder and leave it there! (Size 16x16 to 128x128 .ico files work, Pictures using 16x16.png files will too. Other sizes or file types may work but not tried.) DO NOT OMIT this icon file or you will have no icon, just blank space, displayed against the Bookmarks Folder Name!
Restart Pale Moon and your chosen icon should now be displayed next to it's Bookmark Folder Name.
Repeat above process for each Bookmark Folder Icon you wish to change.
EXAMPLE My "userChrome.css" file contains 11 of the entries above, one for each Bookmark Folder in use. The Pale Moon Bookmark Folder entry is as follows:
Code: Select all
.bookmark-item[container="true"][label="Pale Moon"] {
list-style-image:url('Pale Moon.ico') !important;
-moz-image-region:auto !important;
}
PS. The CSS script 4 line format used above can be altered but it works - so I have posted the original. I used Get Icons 2.5 and Faviconizer 1.3 to extract and organise icons/favicons - both are available from Softpedia - plus many other similar "icon" extractor/manipulator tools!