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

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

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

Всё это в принципе неудобно, поэтому я нашёл ещё один способ добавить на значок папки изображение 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
Получилось проще и симпатичнее:

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

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;
  }

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

• Об авторе
• Недавние публикации

DenTNT

Задать вопрос в Telegram:
@dentnt.trmw.ru
Помочь проекту: Яндекс.Деньги

DenTNT недавно публиковал (посмотреть все)

• Не приходит СМС для авторизации на сайте Госуслуги - 01.11.2024
• VSCode: Найти и удалить элементы xml - 29.10.2024
• WordPress: Ошибка в плагине WpDiscuz - 08.10.2024