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

В прошлой заметке я изменил внешний вид папки с панели Закладок с помощью свойства, которое используется в стилях интерфейса по-умолчанию:

.bookmark-item[label="[ G ]"] {
  list-style-image: url("https://www.google.com/favicon.ico") !important;
}

В этом случае дефолтовый значок с изображением папки (chrome://browser/skin/places/folder.svg) заменялся на установленный вручную. Для себя я сделал несколько значков в формате SVG, например такой:
Firefox: Изменить значок для папки из панели Закладок (часть 2)

Всё это в принципе неудобно, поэтому я нашёл ещё один способ добавить на значок папки изображение favicon с сайта (на примере группы закладок для сайтов Google):

.bookmark-item[label="[ G ]"] {
  background-image: url("https://www.google.com/favicon.ico") !important;
  background-position: left 15% top 60% !important;
  background-repeat: no-repeat !important;
  background-size: 12px;
}

Данный код необходимо добавить в файл userChrome.css
Получилось проще и симпатичнее:
Firefox: Изменить значок для папки из панели Закладок (часть 2)

Если папка расположена НЕ на панели закладок, а внутри папки на панели Закладок, то к таким папкам применяется другой код (здесь уже нужно подвинуть значок по горизонтали):

menu[label="[ Сбербанк ]"] > .menu-iconic-left > .menu-iconic-icon {
  background-image: url("https://www.sberbank.ru/favicon.ico") !important; 
  background-position: left 50% top 60% !important;
  background-repeat: no-repeat !important;
  background-size: 12px;
  }
Расположение иконки можно менять с помощью свойства background-position

_____
Довольно большой код, меняющий цветовую схему для Закладок, представлен здесь.
Много всякого полезного кода для userChrome.css можно найти на этом сайте.

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


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