Не отображается картинка в base64 из userChrome.css

emeraldblue · №1

Доброго времени суток. Пишу данный код в 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 · №2

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

Отредактировано mokujin (05-12-2017 12:22:16)

emeraldblue · №3

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

Выделить код

Код:

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

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

Добавлено 05-12-2017 12:25:23

mokujin пишет

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

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

Отредактировано emeraldblue (05-12-2017 12:25:23)

mokujin · №4

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

emeraldblue · №5

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

mokujin · №6

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

Выделить код

Код:

.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:

Отредактировано mokujin (05-12-2017 13:27:47)

emeraldblue · №7

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

Coroner · №8

mokujin пишет

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

Почему нет?

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

Выделить код

Код:

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

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

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

Выделить код

Код:

#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 · №9

Coroner пишет

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

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

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

Coroner · №10

mokujin пишет

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

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

mokujin пишет

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

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

mokujin пишет

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

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

Отредактировано Coroner (05-12-2017 15:40:50)

emeraldblue · №11

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

Coroner · №12

emeraldblue пишет

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

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

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

Выделить код

Код:

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

Vitaliy V. · №13

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"]

Отредактировано Vitaliy V. (05-12-2017 18:54:17)

Coroner · №14

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

Vitaliy V. пишет

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

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

Vitaliy V. · №15

Coroner пишет

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

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

Coroner пишет

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

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

Coroner · №16

Vitaliy V. пишет

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

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

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

Vitaliy V. · №17

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

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

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

Coroner · №18

Vitaliy V. пишет

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

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

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

villa7 · №19

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

okkamas_knife · №20

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

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

Выделить код

Код:

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

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

villa7 · №21

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

bezuma · №22

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

Coroner · №23

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/"]

Отредактировано Coroner (06-12-2017 10:37:53)

Vitaliy V. · №24

villa7 пишет

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

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

bezuma · №25

Coroner

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

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

Полезная информация