Changing Bookmarks Toolbar folder favicons Topic is solved

Users and developers helping users with technical Pale Moon issues (Windows and other non-Linux O.S.). Please direct questions about the Linux version to the appropriate Linux board.

Moderator: trava90

Forum rules
This board is for technical/usage questions and troubleshooting for the Pale Moon browser only. The main focus here is on Pale Moon on Windows. Please direct your questions for Linux, Android and Mac to the dedicated boards.
Technical issues and questions not related to the Pale Moon browser should be posted in "technical chat"
Please keep off-topic and general discussion out of this board, thank you!
Post Reply
User avatar
back2themoon
Board Warrior
Board Warrior
Posts: 1685
Joined: 2012-08-19, 20:32

Changing Bookmarks Toolbar folder favicons

Post by back2themoon » 2020-05-23, 21:49

I managed to change all icons (globally) with this CSS bit:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"] {
    list-style-image:url('icon_here.ico')
   -moz-image-region:auto!important;}
I managed to change single folder icons with this:

Code: Select all

.bookmark-item[container="true"][label="folder_name_here"] {
list-style-image:url('icon_here.png') !important;
-moz-image-region:auto !important;}
Problem is that the first always overrides the second, so if I want to use a few icons for some folders and another icon for all remaining folders, I can't. Any help welcome.

I've seen Bookmark Favicon Changer mentioned, but haven't tried it (looks abandoned) - and this is why I didn't post in the Extensions board. But if someone knows it works well, let me know - thanks.
Safe Mode / clean profile info: Help/Restart in Safe Mode
Information to include when asking for support - How to apply user agent overrides
How to download videos

Windows 10 Pro • Pale Moon x64 • Interlink x64 • Emsisoft Anti-Malware

coffeebreak
Moon Magic practitioner
Moon Magic practitioner
Posts: 2186
Joined: 2015-09-26, 04:51
Location: U.S.

Re: Changing Bookmarks Toolbar folder favicons

Post by coffeebreak » 2020-05-23, 23:37

Starting the css for the individual folder(s) with #personal-bookmarks seems to work.
Probably it wasn't specific enough without it:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"][label="folder_name_here"] {
    list-style-image:url('icon_here.ico')
   -moz-image-region:auto!important;}


As an alternative, Bookmark Favicon Changer will also work, but the css for the other folders needs to include specific exceptions for those different single folders so that the css won't override it:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"]:not([label="name1"]):not([label="name2"]):not([label="name3"]) {
  list-style-image: url("base64_string") !important;
  -moz-image-region: auto !important;
}

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 26661
Joined: 2011-08-28, 17:27
Location: 58°2'16"N 14°58'31"E
Contact:

Re: Changing Bookmarks Toolbar folder favicons

Post by Moonchild » 2020-05-24, 07:32

Keep in mind that in CSS, ordering of rules matters
"There will be times when the position you advocate, no matter how well framed and supported, will not be accepted by the public simply because you are who you are." -- Merrill Rose
Image

User avatar
back2themoon
Board Warrior
Board Warrior
Posts: 1685
Joined: 2012-08-19, 20:32

Re: Changing Bookmarks Toolbar folder favicons

Post by back2themoon » 2020-05-24, 16:26

Thanks both. I tried changing the order before posting but it didn't make any difference in this case.
coffeebreak wrote:
2020-05-23, 23:37
Starting the css for the individual folder(s) with #personal-bookmarks seems to work.
What seems to work with this change? I didn't notice any difference with that addition. Both codes I posted worked fine when used separately, the problem is when trying to use them both. Note I'm still not using Bookmark Favicon Changer.

I tried adding the specific exceptions :not([label="name1"]) but now I'm having a strange issue, even when reverting everything: the first code (global override) has stopped working so I can't test stuff.

Not sure wtf happened. I even removed everything from userChrome.css only keeping the initial, working code. The single folder CSS override still works normally.
Safe Mode / clean profile info: Help/Restart in Safe Mode
Information to include when asking for support - How to apply user agent overrides
How to download videos

Windows 10 Pro • Pale Moon x64 • Interlink x64 • Emsisoft Anti-Malware

coffeebreak
Moon Magic practitioner
Moon Magic practitioner
Posts: 2186
Joined: 2015-09-26, 04:51
Location: U.S.

Re: Changing Bookmarks Toolbar folder favicons

Post by coffeebreak » 2020-05-24, 17:07

back2themoon wrote:
2020-05-24, 16:26
What seems to work with this change?
Retaining the first CSS while also setting exception folder images worked simultaneously.
It seemed that "exceptions" code had to be equally (more?) specific than the other code about what items to affect, even to specifying #personal-bookmarks.
The entry order of the two CSS bits didn't seem to matter for me.

All bookmarks bar folders:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"] {
  list-style-image: url("filepath_to_image_or_base64_string") !important;
  -moz-image-region: auto !important;
}

Together with bookmarks bar folder exceptions:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"][label="folder_name"] {
  list-style-image: url("filepath_to_image_or_base64_string") !important;
  -moz-image-region: auto !important;
}

1. Created four folders at R end of bookmarks toolbar, named "1", "2", "3", "4".
folders1.png

2. Applied CSS to change ALL folders on bookmarks toolbar to a "checkmark" icon.
folders2.png

3. Applied CSS to change folder named "2" to yet a different icon, while retaining "checkmark" for the rest.
folders3.png

User avatar
back2themoon
Board Warrior
Board Warrior
Posts: 1685
Joined: 2012-08-19, 20:32

Re: Changing Bookmarks Toolbar folder favicons

Post by back2themoon » 2020-05-24, 22:24

Perfect - many thanks, coffeebreak. :thumbup:

If you know of a way to also change subfolder icons (either globally or individually, still within the Bookmarks Toolbar) then please let me know, even though customization is already quite strong.
Safe Mode / clean profile info: Help/Restart in Safe Mode
Information to include when asking for support - How to apply user agent overrides
How to download videos

Windows 10 Pro • Pale Moon x64 • Interlink x64 • Emsisoft Anti-Malware

coffeebreak
Moon Magic practitioner
Moon Magic practitioner
Posts: 2186
Joined: 2015-09-26, 04:51
Location: U.S.

Re: Changing Bookmarks Toolbar folder favicons

Post by coffeebreak » 2020-05-25, 00:21

Globally:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"] menupopup .bookmark-item[container="true"] {
  list-style-image: url("filepath_to_image_or_base64_string") !important;
  -moz-image-region: auto !important;
}

For subfolders of a specific parent folder, specify the parent folder name:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"][label="parent_folder_name"] menupopup .bookmark-item[container="true"] {
  list-style-image: url("filepath_to_image_or_base64_string") !important;
  -moz-image-region: auto !important;
}

For an individual subfolder, specify its name:

Code: Select all

#personal-bookmarks .bookmark-item[container="true"] menupopup .bookmark-item[container="true"][label="subfolder_name"] {
  list-style-image: url("filepath_to_image_or_base64_string") !important;
  -moz-image-region: auto !important;
}

Post Reply