>Форум Mozilla Россия
   http://forum.mozilla-russia.org/index.php
>Firefox
   http://forum.mozilla-russia.org/viewforum.php?id=4
>Не отображается картинка в base64 из userChrome.css
   http://forum.mozilla-russia.org/viewtopic.php?id=72869

emeraldblue > 05-12-2017 12:10:34

Доброго времени суток. Пишу данный код в userChrome.css для того, чтобы сменить иконку у папки на панели закладок и скрыть ее название:

Выделить код

Код:

.bookmark-item[container][label="Музыка"]{ list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACVklEQVQ4jaWTT2ucZRTFf/d5nnnnzcw0mcmb1mqxFJdZlYKuuqwb3QY3EYKIG/FTuFHyGYSShXSRbrMSAkoWXVQFKWkRixGS2Ew6k0kyM3n/Pfe6iGipsZue3eVwzrlnceA1IQDz8/OfAx9ewG8A68Ph8PCVBt1ud2N1dfWDl8m1tbWn29vbv5rZ16PR6IcLDRYWFj5T1S+zLLtaliUA3nt6vR4rKytsbW0NNzc3fy7LsnhBdwRsnJyc3JMsy9Y/udpZunM90L4EmsDvM8ZX39c00y7Ly8u4l1L3dneLb+7evT8ejz+WXq+3/sU7s0vX2Cdpw8AZN269wS+TJt9+V1GW9p+3k0aD54PBb977T32z2fzoZpYutlunuMvKTiE8HkzoXOvw1uIMvD3DqNtCr7R49/abpFcSmG1RRC5VJ9ODYGbQgUM1UqAvMEV49NMz+rljb+LJp0IIwuOjNvv9Ca1OBuYwM4KqctaG/aGgE/hj6qiCMCgch7lQ5IAqqW8yPTXOCsEnQqoOVT03OBJ4mjuiweFUyBHGtTCNgtWAQuoDdd0gViV5bgQn5wZmxgjH81qoI5xWQq7CVAWNQDScOFqkVDHQ9DM4DajavxX6x8ooF0qFvIbKQDlPJhpp0iDmwlleIRUYoCiqmgQz43js8GEWF5XgwCOIOCwazkGvMUddQCNEokGsAW/RzFxQ1YfjQf7eXDY/VxvUgAOcCBgE70lIqP8WFxHMlOP+swNV/THEGMOfuwcPZK9/+f8GcxHMbEdVCwHeB7qA57zePzt54ZYLuBJ48hd2sjFmNu+KFQAAAABJRU5ErkJggg==) !important; font-size: 0; }
.bookmark-item[container][label="Музыка"] .toolbarbutton-icon { margin-right: 0 !important; }

Проблема в том, что иконка у папки не отображается - просто прозрачная папка. Для конвертирования картинки в base64 использовал разные конвертеры по запросу в Гугле "image to base64 converter". В чем может быть проблема?

mokujin > 05-12-2017 12:21:12

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

emeraldblue > 05-12-2017 12:23:52

mokujin
есть вот такая картинка base64, найденная на просторах интернета:

Выделить код

Код:

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

Подключаю ее в userChrome.css - у папки сменилась иконка.
Только вот что интересно - конвертеры из base64 в image не могут ее раскодировать. Но ее код прекрасно работает!

05-12-2017 12:25:23

mokujin пишет

есть\были расширения с этой возм-стью

Были, да, но на FF57 работать уже не будут все те, которые мне удалось найти. Поэтому перед переездом ищу способ менять иконки у папок с закладками. Если подскажете способ/аддон - буду очень благодарен. Все мои поиски для FF57 были безрезультатны

mokujin > 05-12-2017 12:57:00

то что ты дал, там 4bit -ная картинко размером 1920x1080 :/  там черный квадрат с "нулём" надписью "Divided by zero" - так?

emeraldblue > 05-12-2017 13:08:29

mokujin
Хм, видимо да. Во всяком случае при установке на папку просто черный квадрат отображается, но устанавливается

mokujin > 05-12-2017 13:20:55

ха, вроде придумалось :) оказалось что можно, попробуй:

Выделить код

Код:

.bookmark-item[container][label="Музыка"] {

    -moz-appearance: none !important;
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAFPUlEQVRIiY2WX0xTdxTHT+9tC9QQ5swmick2DD4tezA3MWkqsYvNMNmD8YEH3Xhapji3LCZm0Rgb9uAEUaTrIICApQpCoZXa2wJWS6DS8MeigFtBKbQQIxARLC2DIve7B7i1OlDO8/l9zjk53++5l2iTsWijXcs8ZSw3UcaiidI3++59IVGr1VKO42RqtVoatbN+8ARYCdFG6fBGeUQk+SDZU0hJSqUyieM4hVKpTCIiSdTK+mElwEKI3owVkIh5F458tnVT8Pk2xYnZ1sQpT1XqPpVKlTxt/Wj3olV+MdrIhGEhwESI1jChcFVCfl/BDqVGw6U8vJCq/rdEOhXRKY5+EB5xShFulmKuSTazYEu4DTsDsXM0SIE6KQQjIXKVxVyxTHhRpLAt6ZiX0BNQJME7Rd5M5CmkpNnWxKlwsxQROwvBQQBPeH33S4QGr+DZUw+Gh4fw6NFDdLsaMHDrFGYq0iEUE1bhBOgIS3rpM1MWycXdxCoplcokT1Xqvrkm2YwIX3r4C6afTyAQCMDn88Hr9cLlcsFut8NsNuNWQy381Qdj8KienZ79U7GbiJi13ciIiGhNBQqVSpW8YEu4DZ6w5P0JU1NTCAQC8Pv9CAaDGOjrErzdHUJvbw8cDgeMRiPKy8vxtOpbQE9Y+kveSESMSqVK5jhOEZuA4ziZUqlMmm5U7Iadwes7uzD9fByBQABjY2O411Tx6lruwSMaDZeiUqmSa7QHsuoNl0I8z8NgMKDhphHh8h2I6iWCJzd1j0bDpYjqi01ARJJFq/wirIRXj/6IdX6vqeLVD1mZH4twImKIiExZWXJTRUGY53lYLBY8rjuOSDGLCV1ywVreKnzRRruidtYftbJ+UYoTQ+3w+XwIBoOI71yEi2HUZma3t7eD53m4rJUIl0gxWyoLL1Wy/mgl658roZ20zFOG6NBVnTPw+f6B1+vFQF+XsBFcjGabWXA4HHA6WxEulUOoIsBAgJEQKqO9tNxEGW/ghNe1LLzeB3C5XPB2dwjvgxMRw1sbBKfTCbe7HSuVTAyOG4Shy/Q1LZoofaCQGR28zIyOlzDzgpHQ0VIDu92O3t4e1GgPZG0Er9AePObxdMLtduNxlw0wEII6Zn4wjxkdyGdGrx2lr9564TorK4tcZXH/+s8wm81wOByoN1wKlR1d03McPCf7m09tdcULPT3d6O/vh//OOcBIaDvH6uPy3rpNktJjnxwIXJQJT4o+R2PddRiNRvA8j8aqgnmjNjNbhFfmHsqx1RUv9PX1ob+/H098/Zg0pGGyVLJSnSPbI/L+52SNhktxnUpsE4oJ7qJMlJWVwWAwgOd5dHR0oNlmFnhrg9DZ2Qmx8+HhYYxYvgduEO5r5Q6xiXWdXP7jtkP+XGYOesJKkQRthZkw1VbDYrGA53msqsUJt9sd63zInI2V6xKgljCiZ17WnNyiWdfJJw7t2NZ7lp2JP1zQE3yXvoDbcAJ3myrhdLbC7W7H3102DLdo4b+aDtwgoJaAOoJQT3DnJUwf3p+2fV0n249Lz4TyJYCOMPI7+6LjN2nLZL5EiBSzGL+iwGD+Vjy5koKZUjlgJEyWSlbua+WOET3zUqgnTJRLBdPplLNvOfndbduPy888OM1O3cxJVBMRo/suZb/tV0X5UL4sIpooqGPm286xenGhNSe3aNx5CdNx8I18sxq5akqktasoOnnwPDMummgwjxmNl6xKpUo+vD9t+6bg8aqK/yZ7c5nx5WuE5WrCg/PM2EZ5m4Kv95cwV0I7Q2W0N1RJeyf1lLZR3rvxH6IvfeIZdbVRAAAAAElFTkSuQmCC") !important; 
    -moz-image-region: rect(0px, 26px, 26px, 0px) !important;


        }

размер иконки нужно подбирать с учетом выстоты самой панели и высоты menuitem . В примере, размер иконки 24x24 а высота пенели и менюшек у меня 28px. Нужно подбирать по высоте иначе будет обрезаться икона, а пункты меню(с таким же именем если есть) увеличиваться по высоте. можно это считать фичей даже :lol:

emeraldblue > 05-12-2017 13:27:00

mokujin
Сработало! Сейчас еще чтобы для каждой папки иконку в формат base64 не конвертировать попробовал подцепить картинку png прямо из папки chrome - работает!
Спасибо большое за помощь :blush:

Coroner > 05-12-2017 13:59:59
mokujin пишет

а низзя это сделать. давно пробовали многие(и я тоже) и нифига. через css низзя сменить иконку у папок панели закладок, индивидуально

Почему нет?

скрытый текст
mpwzfofdyku5oeeeejwkbrjl09g.png

Выделить код

Код:

#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="Site"] {
    list-style-image: url("data:image/png;base64,бла-бла-бла") !important;
    -moz-image-region: auto !important; };

К каждой папке можно применить и фильтр цвета

скрытый текст
ctmibk9_rlujwmyld0ikcpmzp0u.png

Выделить код

Код:

#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="111"] .toolbarbutton-icon {
    filter: hue-rotate(190deg) !important;

Ну или поменять цвет или фон.

#PlacesToolbarItems > toolbarbutton.bookmark-item[label="Site"] {
   background-color: #0C5173 !important;
   color: #FFECA0 !important;
   -moz-appearance: none !important;
}

Название папки (label="Site") должно быть на латинице, ну или userChrome.css в UTF-8 сохранять...

mokujin > 05-12-2017 15:15:34
Coroner пишет

ну или userChrome.css в UTF-8 сохранять...

не или , а без вариантов - только в 65001 !
-moz-image-region: auto да, клева. Где ж ты был годика полтора назад, когда я болел сменой иконок, этого мерзкого бледно-желтого цвета на что-нить приличное. В итоге плюнул, выдернул из omni.ja файл иконок folder-item.png, перерисовал их как нраиццо и запихиваю назад после обнов. Решил радикально эту пакость. :D

фильтры, если пральна помню, тяжелая хрень нехило жрущая ресурс. лучше ненадо.  А так да, можно, оказуеццо, все это делать. Знать бы раньше.

Coroner > 05-12-2017 15:39:35
mokujin пишет

не или , а без вариантов - только в 65001 !

Ну уже не помню точно. Я с тех пор отучился названия папок на русском писать. Но в любом случае — да, на всякий случай лучше подстраховаться.

mokujin пишет

Где ж ты был годика полтора назад,

Дык тут и был. И код этот три года назад выкладывал, ещё для [seamonkey] Оттуда и выдернул :D

mokujin пишет

фильтры, если пральна помню, тяжелая хрень нехило жрущая ресурс. лучше ненадо.

В общем да. Хотя для такого случая как выше эту разницу не измеришь. Тем более это уже баловство :D
Да и не ясно до конца с этим фильтром. Вроде бы раньше применял и для изображений в base64 и для тех, что из файла (file://d:\\Profiles\\SeaMonkey\\Chrome\\Folder.ico)
А сегодня пробовал — то выходит, то нет. Разбираться не стал, и правда — жирно фильтры для рисунков папок применять. Никаких ресурсов не напасёшься. :)
А ещё их (иконки папок), ЕМНИП, вертеть (поворачивать) можно. Хотя насчёт папок не помню точно, а вот изображения на кнопках Custom Buttons точно можно сделать так, чтобы при наведении проворачивались.

emeraldblue > 05-12-2017 16:29:35

А иконки у конкретных закладок можно менять, или только у контейнеров (папок)?

Coroner > 05-12-2017 16:33:47
emeraldblue пишет

А иконки у конкретных закладок можно менять, или только у контейнеров (папок)?

Теоретически — можно. У каждой же закладки она и так своя.
Попробуйте аналогично, подставляя в label="Site" имя (название закладки).
Во всяком случае цвет кодом меняется

скрытый текст

Выделить код

Код:

#PlacesToolbarItems > toolbarbutton.bookmark-item[label="Site"] {
   background-color: #0C5173 !important;
   color: #FFECA0 !important;
   -moz-appearance: none !important;
}

Vitaliy V. > 05-12-2017 18:44:09
emeraldblue пишет

А иконки у конкретных закладок можно менять, или только у контейнеров (папок)?

Можно, и можно не по названию а по началу адреса сделать
например так для всех страниц этого форума будет одна иконка

Выделить код

Код:

.bookmark-item:not([container])[image^="page-icon:https://forum.mozilla-russia.org/"] image {
    object-position: 16px 0px !important;
    list-style-image: none !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 48 48'><g><path d='M 2.438,0 C 1.087,0 0,1.088 0,2.438 V 45.56 C 0,46.91 1.087,48 2.438,48 H 45.56 C 46.91,48 48,46.91 48,45.56 V 2.438 C 48,1.088 46.91,0 45.56,0 Z' style='fill:rgb(146,69,101);fill-opacity:1;' /><path style='opacity:0.25;fill:rgb(0,0,0);' d='M 24,3 11.1,45 14.1,48 H 45.58 C 46.93,48 48,46.9 48,45.53 V 22.2 L 45,19.2 39,18 Z'/><path style='fill:rgb(255,255,255);' d='M 45,19.05 C 45.09,19.34 36.05,30.02 35.96,30.3 35.86,30.57 37.21,44.81 36.97,45 36.76,45.15 24.28,39.43 24,39.43 23.73,39.43 11.25,45.16 11.03,45 10.79,44.81 12.11,30.57 12.02,30.3 11.94,30.02 2.911,19.34 3.001,19.05 3.087,18.77 16.37,15.69 16.6,15.53 16.82,15.35 23.72,3 24,3 24.28,3 31.18,15.35 31.4,15.53 31.63,15.69 44.88,18.75 45,19.05' /></g></svg>") transparent center no-repeat !important;
}
/*скрыть названия всех закладок и папок на панели*/
#PlacesToolbarItems > toolbarbutton.bookmark-item .toolbarbutton-text {
    display: none !important;
}

#PlacesToolbarItems > toolbarbutton.bookmark-item .toolbarbutton-icon {
    margin: 0 !important;
}

но это работает на [firefox] 55 +, на версиях ниже можно сделать по адресу иконки [image="moz-anno:favicon:https://forum.mozilla-russia.org/favicon.ico"]

Coroner > 05-12-2017 21:52:40

Vitaliy V., вот от что в "background: url" — можно вкратце поинтересоваться что оно и как работает?
Встречал это в "иконках". Если файл file.svg содержит вот эту вот хрень — её как-то изменить можно или нужен будет свой svg файл?

Vitaliy V. пишет

Можно, и можно не по названию а по началу адреса сделать

Тут не по адресу, а по изначальной иконке определяется адрес?

Vitaliy V. > 06-12-2017 00:00:57
Coroner пишет

Vitaliy V., вот от что в "background: url" — можно вкратце поинтересоваться что оно и как работает?
Встречал это в "иконках". Если файл file.svg содержит вот эту вот хрень — её как-то изменить можно или нужен будет свой svg файл?

Мало что понял из этого вопроса. background: это универсальное свойство в CSS которое позволяет установить одновременно до пяти характеристик фона.
Если интересует SVG то что именно, приведите примеры что нужно изменить.

Coroner пишет

Тут не по адресу, а по изначальной иконке определяется адрес?

У .bookmark-item если есть атрибут image и если значение совпадает указанное в стиле то иконка заменяется
тут надо пояснить что символ ^ указывает что будет использоваться префикс т. е. не нужен адрес полностью достаточно совпадения вначале.

Coroner > 06-12-2017 00:11:23
Vitaliy V. пишет

Если интересует SVG то что именно, приведите примеры что нужно изменить.

Мне просто интересно что это за набор цифр "viewBox='0 0 48 48'><g><path d='M 2.438,0 C 1.087..."
Что это за данные, или что за формат?

Про "изменить" — я вопрос снимаю, неверное задал. Просто порой надо заменить иконку где-то, допустим чуть цвет или размер,  поменять а она, например, как у Вас в overlays.zip
Обычную png или ico я сразу в редактор загоняю и меняю, размер, например. А вот с этим форматом данных что делать? Его даже вьювером не поглядишь.
Просто интересуюсь что это такое и зачем оно...

Vitaliy V. > 06-12-2017 00:27:46

Coroner
Для SVG есть векторный редактор Inkscape https://inkscape.org/ru/ как им пользоваться в двух словах не объяснишь если нужно изучайте.

Обычную png или ico я сразу в редактор загоняю и меняю, размер, например

SVG можно открыть в любом текстовом редакторе и легко подправить цвета например fill:#f38725 - надеюсь понятно что с этим делать.
Размер тоже можно, но если нужно пересчитывать координаты то без векторного редактора не обойтись.

Coroner > 06-12-2017 00:32:33
Vitaliy V. пишет

как им пользоваться в двух словах не объяснишь если нужно изучайте.

Понятно спасибо. Я им пользуюсь, и даже обновил утром с портаблеаппс, но никогда не видел svg "внутри".
А открыть им иконки — вообще даже ума не хватило. Думал что это что-то вроде base64, которое редакторами не открыть. И не знал что их тоже можно использовать вот таким образом.

Буду знать что он и есть. Спасибо ещё раз за ответы.

villa7 > 06-12-2017 05:10:22

Vitaliy V.
Почему именно SVG, а не base64, меньше ресурсов потребляет, меньше код?

okkamas_knife > 06-12-2017 05:44:57

villa7 пишет: Почему именно SVG, а не base64,

потомучто гладиолус(каков вопрос таков ответ)

Выделить код

Код:

data:image/svg+xml;base64,77u/PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+PGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMTAiIGZpbGw9IiNmZjAwMDAiIHN0cm9rZT0iIzAwMDBmZiIgc3Ryb2tlLXdpZHRoPSIzIiBvcGFjaXR5PSIwLjgiLz48L3N2Zz4=

специально выделю заголовок
data:image/svg+xml;base64,77u

villa7 > 06-12-2017 06:11:50

okkamas_knife
Я вроде не у Вас спрашивал.

bezuma > 06-12-2017 07:21:45

Coroner
Как сделать, чтобы ваш код (смена иконки папки) заработал на нескольких папках - у меня только первая, которая в userchrome, меняется
В CSS ни бумбум  :dumb:

Coroner > 06-12-2017 10:36:50
bezuma пишет

Как сделать, чтобы ваш код (смена иконки папки) заработал на нескольких папках - у меня только первая, которая в userchrome, меняется

Несколько раз повторить код, по числу папок, меняя label в каждом куске кода. Для каждой папки — свой. Ну и картинки тоже свои для каждой. :)

скрытый текст

Выделить код

Код:

#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="Папка"] {
    list-style-image: url("data:image/png;base64,бла-бла-бла") !important;
    -moz-image-region: auto !important; };

#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="Ещё_папка"] {
    list-style-image: url("data:image/png;base64,бла-бла-бла") !important;
    -moz-image-region: auto !important; };

#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="Совсем_другая_папка"] {
    list-style-image: url("data:image/png;base64,бла-бла-бла") !important;
    -moz-image-region: auto !important; };


Для закладок можно как Vitaliy V. посоветовал. Аналогично, для каждой закладки (не папки) — свой код, в его коде меняется адрес

Выделить код

Код:

[image^="page-icon:https://forum.mozilla-russia.org/"]
Vitaliy V. > 06-12-2017 11:19:22
villa7 пишет

Почему именно SVG, а не base64, меньше ресурсов потребляет, меньше код?

Не правильное сравнение, SVG тоже можно закодировать в base64, а вот встроить растровое изображение в файл .css без base64 нельзя
что тоже плюс SVG (не надо декодировать base64) но главное то что
растр плохо масштабируется, тогда как вектор может быть неограниченно увеличен без потери качества.
Достаточно увеличить DPI в ОС чтобы это увидеть. Поэтому чтобы не добавлять .png иконки с высоким разрешением (для увеличенного DPI) в последних версиях [firefox] всё больше заменяется на .svg
Векторная графика идеальна для простых или составных рисунков, которые не нуждаются в фото-реализме.

bezuma > 06-12-2017 11:31:50

Coroner

Несколько раз повторить код, по числу папок

Разумеется, я так сразу же сделал - меняется только папка, комментирую ее - меняется еще папка, комментирую предыдущие две - меняется совсем_другая_папка

Coroner > 06-12-2017 12:04:53
bezuma пишет

Разумеется, я так сразу же сделал - меняется только папка, комментирую ее - меняется еще папка, комментирую предыдущие две - меняется совсем_другая_папка

Проверить названия, если с русскими буквами — userChrome.css должен быть

mokujin пишет

не или , а без вариантов - только в 65001 !

У меня тоже через раз получалось, не знаю в чём дело — в картинке или в её размещении дело было.

villa7 > 06-12-2017 14:15:01

Vitaliy V.
Понятно, спасибо. А то я с svg не сталкивался пока.

bezuma > 06-12-2017 16:08:34

Coroner
Ну, никак не хочет. Вот мой код из userchrome.css

скрытый текст

Выделить код

Код:

#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="S"] {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA+0lEQVQ4jc2TP0vDUBTF8/n6DfJAJ0U/gC6FhHQpuqqgk0MeFUrAIVVBnJQ6qKiLooUWCsUhCK2mvvxp8/pzEEGFEkyXXjjT5fyGc+8xhOOWhC17piX5j4Qte8JxS0YR80+IUdT8rTkDDMIIFacsVeuUd48BUHGKaUlWNz2iZETQH04HnN93AKid3mJaEq0npKPx1+6uDcB+42o6YG3LR2vNUCWsbHhoPWGcafYOLwF47gYIOyeDo+YjAC+vb/yds+tWfogLTo2nbvDLuOM1ef+IAXBPbvKvsFg5wL94YBBGhCrBtCTr2z79UJFlmuVqfV7/oBBg5jLNWudPTWurfTirV4cAAAAASUVORK5CYII=") !important;
    -moz-image-region: auto !important; };
        
#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="M"] {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB1klEQVRYhc2Xr0/DQBTHz2yqlgXV3F1CQrDTMyydw/X1QsJ/AAk4MBN4DFkFDsm/gNoEBoXeDEFgCAFGFxDb6BdRGDvGWO9aUpo8ef1+7r137wdjKT9UWQnkevBFiEC2QbwLkgOQjEC8i0C24YsQ5HqoslLa/y4WbjgVKNECyT6URCoj2YcSLTScir0wsTIC0QTJKLXwLEiU/IOVDcWdJZC8sBaeBbkAOUspxZfXoPhNbuIT4zeg5bXFN/8T8WmIOZ4AsXKubv81HD/kBALR/HPxTwtEUxdvOBXbbI/3N3Tbq6fxQqQ9USjRsr3NcDjUbNS7SnlWtBLxKisZFZm8AEj2UWUlBnK9LPG094AEyPUYfBFmBni6R7xXT2y7lv68L0IGxTuZAR7uLM/zDoMSveIARI+B5KAwAJIDK4B4axXxTi0PgMg4BOOzIwxfXxLh2+uMALxrlIRvx7szzy4TQCDbRs9wdHmeL4AvQqNCNA/AqPhoIXA9o1I8LwRvJwc2CdifDK8mzUhLwudHjE8P7W7/2Yxs2nG8tYp4dx3x5oql67+148IHkn8xkhU+lH5BFDiWa54oajHRcqKo1UwDKWo5nQGZXs8V70CJ3sd6Pkg6Ku/YrOfvNRBWOPyk4EkAAAAASUVORK5CYII=") !important;
    -moz-image-region: auto !important; };
        
#PlacesToolbarItems > toolbarbutton.bookmark-item[container][label="N"] {
    list-style-image: url("data:image/png;base64,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") !important;
    -moz-image-region: auto !important; };

Vitaliy V. > 06-12-2017 16:28:28

bezuma
Уберите точку с запятой };

bezuma > 06-12-2017 16:50:08

Vitaliy V.

Уберите точку с запятой };

Заработало. Благодарю  :beer: