Меняем картинку у папок в панели избранного Mozilla Firefox

  • 27.05.2019
  • 8 721
  • 10
  • 12.12.2022
  • 14
  • 13
  • 1
Меняем картинку у папок в панели избранного Mozilla Firefox

Браузер Mozilla Firefox заслуженно пользуется славой одного из самых продвинутых по "кастомизации" браузеров - большой выбор тем и гибкие настройки позволяют пользователю максимально подстроить под себя данный интернет обозреватель. Но есть некоторые мелочи, которые все же не доступны к реализации через обычные настройки - например, желание изменить внешний вид иконки папки в панели избранного. Однако, такая возможность есть, и сейчас мы узнаем как это сделать.

Смена значка у папки избранного в Mozilla Firefox

Возьмем в качестве примера данную панель закладок:

На ней мы видим несколько закладок без имени (Google, ВКонтакте, YouTube и Яндекс). Кроме этого тут присутствуют четыре папки с абсолютно одинаковым изображением. Исправить это дело можно, но потребует немного возни с CSS файлами.

Начиная с версии Firefox 69, данная возможность персонализации по умолчанию отключена. Для её включения, нужно в адресной строке браузера набрать about:config, и в настройках найти пункт toolkit.legacyUserProfileCustomizations.stylesheets, и переключить его в значение true.

Сперва нужно перейти в директорию профиля пользователя, которую можно найти по следующему адресу:

Windows - %appdata%\Mozilla\Firefox\Profiles
Linux - ~/.mozilla/firefox/
Mac - ~/Library/Application Support/Firefox/Profiles или ~/Library/Mozilla/Firefox/Profiles

В данной директории будет находится папка профиля - обычно имеющая вид из случайным образом сгенерированных букв. Нужно перейти в неё и создать там папку chrome, а в папке chrome - файл userChrome.css. В данном файле пишем:

#personal-bookmarks .bookmark-item[container][label="Музыка"] {
	-moz-image-region:auto !important;
	list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAFGSURBVDhPlZI9S8RAEIZzaCVCzp2P3dj4CeIfsLES7OxOi0PwDwgWioJeoyBaCXKCvVjY2AhaWFna3A+wtJNrrBTESt89p86uD4QkMzsz7ztJkUtVVSOO5cwxdyz0LxpO5J5YXnF/sFg+KFolkS4RjRPrqYXzIdGuiMxCwTOazFk4TfRNpOsD6SxfzLptqSRDkLyHwndM/3Gib3jfsFwaeL5xrB/EfAHPt2VZNi2VxqkuY+KLc2EeU/fx3Iv+LZ0Gkw+J/BImP0JJDxa+o4W4DztSzxjrTjOEiSid2a+gSQsL/HTOL9iRekrvp1C0BfmbuE4gfxQN+iEEsSNp0GANxce430HJFZ53LVWPqk7j8LmHCkyewT4uoWjS0mmi78F3Z+1E72iyaKk8UHSA6yn+rvic1wgN/2XyaWDzbdg4isu0WA1F8Qs6cTj0ZdoHZAAAAABJRU5ErkJggg==') !important;
}

Как должно быть видно в данном css коде, применяется иконка по имени папки "Музыка", и после перезапуска браузера выглядеть папка будет уже совсем по другому:

Требования для иконки следующее - она должна быть в размере 16х16, и либо закодирована в base64 (для помещения в css файл), либо находится в папке chrome. Если использовать вариант с файлом в папке chrome (который, допустим, будет называться music_note.png), то css код примет следующий вид:

#personal-bookmarks .bookmark-item[container][label="Музыка"] {
	-moz-image-region:auto !important;
	list-style-image: url('music_note.png') !important;
}

Если хочется оставить только картинку (иконку, значок), то удаление наименования папки избранного даст совсем противоположенный эффект - значок сменится на по умолчанию, так как по названию папки применяется пользовательская картинка. Но можно воспользоваться все тем же css файлом, чтобы скрыть отображение названия папки, при этом не удаляя его. Для этого достаточно добавить несколько строк в css, и содержимое файла приобретет следующий вид:

#personal-bookmarks .bookmark-item[container][label="Музыка"] {
	-moz-image-region:auto !important;
	list-style-image: url('music_note.png') !important;
}
#personal-bookmarks .bookmark-item[container][label="Музыка"] > .toolbarbutton-text {
	display: none !important;
}

И после этого от названия папки не останется и следа, а картинка никуда не денется:

Была ли эта статья Вам полезна?

Комментарии к статье (10)

    • Lord Vishnu

    Можно ли то же сделать в Google Chrome? И как? Подробно, если можно. Заранее благодарю.

    • Sol

    Спасибо, помогло.

    Важно, для linux файл должен называться userChrome.css спасибо арч вики: (https://wiki.archlinux.org/title/Firefox#Changes_to_userChrome.css_and_userContent.css_are_ignored)

    Так же можно использовать иконки тем оформления, к примеру для использования стандартного значка каталога в теме Adwaita:
    list-style-image: url('/usr/share/icons/Adwaita/16x16/places/folder.png') !important;

    • Гость

    Сделал, не вышло...

      • Recluse

      С таким обилием информации, помочь не представляется возможным.

    • Иван

    Автору привет.
    Статья хорошая, но на свой вопрос я ответ не нашел.
    В начале статьи написано: "Кроме этого тут присутствуют четыре папки с абсолютно одинаковым изображением."
    Меня как раз интересует, как сменить значок не каждой конкретной папке, а как сменить значок который назначен этим стандартным папкам. Он в прежних версиях Firefox был желтого цвета (как в проводнике Windows) и я до сих пор плююсь от этих нынешних серых значков.
    Как вернуть вид папок который был в прежних версиях Firefox?
    Спасибо заранее

      • Recluse

      С помощью описанного способа можно сменить значки и у всех папок в закладках. Для этого, нужно указать следующий CSS селектор:

      #personal-bookmarks .bookmark-item[container]

      То есть, если есть нужный файл иконки (который соответствует всем необходимым требованиям, указанным в статье), которую надо поставить значком всем директориям в закладках, то пишем следующее:

      #personal-bookmarks .bookmark-item[container] {
      	-moz-image-region:auto !important;
      	list-style-image: url('folder.png') !important;
      }

      Где folder.png - та самая иконка, которая лежит в нужной директории (про это тоже написано в самой статье).

    • Вячеслав

    Добрый день!
    У меня в директории Profiles две папки, а не одна: bgyuzxxp.default-release и l80sn2af.default
    Я в каждой создал по папке chrome и файл userchrome.css. Попробовал все три варианта, но результата не получил. Ни один из вариантов у меня не сработал.
    Кстати legacyUserProfileCustomizations в таком как у вас виде не нашел, там есть toolkit.legacyUserProfileCustomizations.stylesheets.
    Спасибо.

      • Recluse

      Извиняюсь, в статье я написал не полное название пункта - речь шла именно о toolkit.legacyUserProfileCustomizations.stylesheets, именно его нужно ставить в значение true. Переключение данного пункта никакого результата не дает?

      • Аноним

      Задай название закладки на английском

Добавить комментарий для Recluse

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Напоминаем Вам, что Ваше сообщение будет опубликовано только после проверки администратором сайта. Обычно это занимает 1-2 рабочих дня.