Firefox: Изменить значок для папки из панели Закладок

На панели закладок я создал папку Сбербанк и туда поместил закладки на страницы Сбербанк-онлайн и закладки на страницы с описанием партнёров по программе «Спасибо от Сбербанка». При этом значок общей папки был дефолтовым, т.е. не информативным:
Firefox: Изменить значок для папки из панели Закладок
Можно для таких папок задать свои значки/иконки):
1. В папке chrome профиля Firefox создаём папку icons:
C:\Users\<USER>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\icons
2. Копируем туда файл со значком (иконкой) сайта.

Данный значок можно вытащить прямо с нужного сайта, достаточно в адресной строке к адресу сайта добавить favicon.ico, например:
https://online.sberbank.ru/favicon.ico

3. Поскольку у всех сайтов название этого файла одно и то же, то нужно файл переименовать (если таких папок будет несколько):
favicon.ico -> sb-favicon.ico
4. В файл userChrome.css добавляем такой код:

/* Bookmark folder icon replacement */
.bookmark-item[label="Сбербанк"] {
  list-style-image: url("./icons/sb-favicon.ico") !important;
}

5. Перезапускаем Firefox
6. Теперь у папки свой значок:
Firefox: Изменить значок для папки из панели Закладок

Иногда может быть проблема с русской кодировкой, тогда придётся для папки задавать имя латиницей (в моём примере не Сбербанк, а Sberbank), как в названии папки, так и в коде файла userChrome.css.

Чтобы визуально отличать папку от значка сайта, можно название взять в квадратные скобки, например так:
[ Сбербанк ]
Тогда код будет таким:

/* Bookmark folder icon replacement */
.bookmark-item[label="[ Сбербанк ]"] {
  background-image: url("./icons/sb-favicon.ico") !important;
}

Для папки Сбера я создал свой значок (изображение формата PNG):
Firefox: Изменить значок для папки из панели Закладок
Лучше конечно значок в формате SVG, но я не умею работать с редактором векторной графики.

Если лень скачивать значки, а потом указывать для них путь, можно задавать URL напрямую (правда в случае отсутствия инета, значок не будет отображаться, если его не окажется в кэше). Здесь я приведу пример для группы сайтов Google:

.bookmark-item[label="[ G ]"] {
  background-image: url("https://www.google.com/favicon.ico") !important;
}
Обратите внимание, что вместо свойства list-style-image мы используем background-image, т.о. значок отрисовывается не на кнопке, а на заднем плане, на фоне!

 

Чтобы правила из userChrome.css работали, нужно включить его поддержку!


Подписаться
Уведомление о
guest
0 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments