Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Компьютеры » Программы » Mozilla Firefox: стили userChrome.css и скрипты js

Модерирует : gyra, Maz

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161

Открыть новую тему     Написать ответ в эту тему

gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору



В теме обсуждается настройка внешнего вида Firefox с использованием userChrome.css, userContent.css, а так же использование скриптов js (uc.js).

Родственные темы: Mozilla Firefox | Расширения для Firefox
 
Обсуждение на "Форуме Mozilla Россия":
Настройка внешнего вида Firefox в userChrome.css,
UCF - ваши кнопки, темы, дополнения, скрипты…
 
Темы на GitHub:
Aris-t2 CustomCSSforFx | Aris-t2 CustomJSforFx | xiaoxiaoflood/firefox-scripts | Endor8/userChrome.js | Alice0775 userChrome.js  
VitaliyV UCF - UserChromeFiles | MrOtherGuy/firefox-csshacks (known as MOG) | VicDobrov UCF-скрипты


Просьба публикуемые коды заключать в тэг [code][/code] (из выпадающего меню), а коды более 10 строк - в двойной тэг [more][code][/code][/more] Подробное разъяснение.
 
Как подключить скрипты JS:
метод Aris-t2 | метод xiaoxiaoflood | метод Endor8 | метод user_chrome_files (UCF)
Как подключить скрипты JSM, MJS в загрузчик скриптов от Aris-t2 , а если у вас Firefox v117+, то дополнительно...
 
Еще один способ активации, нюансы: скрипты можно поместить в пользовательслую папку, можно не прописывать активацию каждого скрипта отдельно.
 
Куда вписывать код для стиля userChrome.css и userContent.css
1\ Также не забываем про такую строку в user.js / prefs.js (для включения userChrome.css и userContent.css):
Код:
// Turn on userChrome.css and userContent.css support
// Включить поддержку userChrome.css и userContent.css
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);  
либо эту настройку включить через about:config.
2\ v136+: отключить CSP (Content Security Policy - Политика безопасности контента), снижает безопасность!:
Код:
security.browser_xhtml_csp.enabled = false
3\ v139+: если некоторые скрипты JS не работают, можете сделать так, снижает безопасность!:
Код:
security.allow_unsafe_dangerous_privileged_evil_eval = true  

Полезные ссылки
Онлайн-конвертер иконок в\из Base64
Онлайн-редактор иконок SVG
Онлайн-конвертер SVG to Data URI
Мануал по определению CSS-селекторов элементов интерфейса встроенными средствами браузера

Всего записей: 9024 | Зарегистр. 14-09-2020 | Отправлено: 08:34 29-07-2023 | Исправлено: gutasiho, 16:26 26-07-2025
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho
Цитата:
 той папке, где firefox.exe, в подпапке browser.
1200604 строки.
 
Так понимаю что нотепадом++ можно открыть и вставить код, например в конце 1200604 строки?
 
И до кучи ещё такой вопрос: Меняю иконку .png на .svg и иконка почему то чёрная. Как исправить?
Этот параметр включён: svg.context-properties.content.enabled false => true

Всего записей: 1634 | Зарегистр. 12-10-2002 | Отправлено: 19:31 29-08-2024 | Исправлено: grom17, 20:35 29-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17, в омни не надо ничего пихать. Либо свои иконки в профиле оставляешь как есть, либо заменяешь теми, что есть в омни, либо переводишь в формат data:image (пример приводил). И svg файлы имеют текстовый формат.

Цитата:
svg.context-properties.content.enabled

Этого не всегда достаточно. Если в стилях для соответствующих элементов добавлен -moz-context-properties с филом, то цвет задается через fill, если не намудрил c svg. Я же давал код отступа для иконок и добавление иконки в двух вариантах. Там все это есть для примера. Для кого делал - не ясно

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 20:39 29-08-2024 | Исправлено: Death_INN, 20:46 29-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, здесь Вы привели пример data:image для edit-copy.svg, а как в таком формате будет, к примеру, иконка "Сохранить страницу как.."? Я переводил в data, но "Копировать" выглядит совсем иначе код. Вашим примером возможно вставить любую иконку которой нет в омни?

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 21:17 29-08-2024 | Исправлено: deannik, 10:40 01-09-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, иконок миллионы, поэтому не может, чтобы все юзали какой-то один набор, так что не могу гадать, о какой иконке идет речь.
Не вижу смысла переводить svg в нечитаемый base64 (кроме особых случаев), это же не png.
Твой "Копировать" будет выглядеть так

Код:
url("data:image/svg+xml;charset=utf-8,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity'><path d='M6 15c-1.108 0-2-.892-2-2V5c0-1.108.892-2 2-2h7c1.108 0 2 .892 2 2v5l-5 5H9zm0-1h3V9h5V5c0-.554-.446-1-1-1H6c-.554 0-1 .446-1 1v8c0 .554.446 1 1 1zm4-.414L13.586 10H10zM3 1c-1.108 0-2 .892-2 2v8c0 1.108.892 2 2 2h1v-1H3c-.554 0-1-.446-1-1V3c0-.554.446-1 1-1h7c.554 0 1 .446 1 1h1c0-1.108-.892-2-2-2H3z'/></svg>");

 
Цвет обычно отдельно задаю, а не внутри data:image fill: #8e8e98;

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 22:00 29-08-2024 | Исправлено: Death_INN, 22:11 29-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, всё верно набор другой, но меня как раз и заинтересовало как переводить в такой формат именно свои иконки? В base64 переводит много сайтов онлайн, а Ваш совсем иной.
 
Добавлено:
Death_INN

Цитата:
Цвет обычно отдельно задаю, а не внутри data:image fill: #8e8e98;

Т.е. будет так:
Код:
@-moz-document url-prefix("chrome://browser/content/") {
  menupopup:not(.in-menulist) menuitem:not([checked], [icon], .menuitem-iconic) {
    &[label="Копировать"]::before {
      background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity'><path d='M6 15c-1.108 0-2-.892-2-2V5c0-1.108.892-2 2-2h7c1.108 0 2 .892 2 2v5l-5 5H9zm0-1h3V9h5V5c0-.554-.446-1-1-1H6c-.554 0-1 .446-1 1v8c0 .554.446 1 1 1zm4-.414L13.586 10H10zM3 1c-1.108 0-2 .892-2 2v8c0 1.108.892 2 2 2h1v-1H3c-.554 0-1-.446-1-1V3c0-.554.446-1 1-1h7c.554 0 1 .446 1 1h1c0-1.108-.892-2-2-2H3z'/></svg>");  
      fill: red;
    }
  }
}

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 22:14 29-08-2024 | Исправлено: deannik, 22:27 29-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, вроде да, не проверял. Если потребуется добавить еще одну иконку, относящуюся к menuitem, то, например, &[label="Вставить"] вставлять после первой }
Можно делать label без учета регистра символов, либо юзать подстановочные знаки, чтобы в некоторых случаях сразу двух и более зайцев окучить

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 22:27 29-08-2024 | Исправлено: Death_INN, 22:38 29-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, извиняюсь, видимо я неправильно задал вопрос.
Интересует, как переводить Вашим способом в data свои иконки? Мне вот это непонятно. Сам код? Потому как набор цифр.

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 22:37 29-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, мне не сложно самому перевести svg в data:image, но можно юзать, что-то типа такого

Цитата:
Потому как набор цифр

можно вставить в редактор и посмотреть как будет выглядеть иконка по частям или вся. Можно и свою нарисовать.

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 22:50 29-08-2024 | Исправлено: Death_INN, 23:06 29-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, кстати, код, что я выкладывал выше, не рабочий, как и вот этот, что пытаюсь сделать:
Цитата:
@-moz-document url-prefix("chrome://browser/content/") {
  menupopup:not(.in-menulist) menuitem:not([checked], [icon], .menuitem-iconic) {
    &[label="Выделить всё"]::before {
      background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity'><path d='M4 4v3h3V4zm5 0v3h3V4zM4 9v3h3V9zm5 0v3h3V9zM3 1c-1.108 0-2 .892-2 2v2h1V3c0-.554.446-1 1-1h2V1H3zm8 0v1h2c.554 0 1 .446 1 1v2h1V3c0-1.108-.892-2-2-2h-2zM1 11v2c0 1.108.892 2 2 2h2v-1H3c-.554 0-1-.446-1-1v-2H1zm13 0v2c0 .554-.446 1-1 1h-2v1h2c1.108 0 2-.892 2-2v-2h-1z'/></svg>");
      fill: red;
    }
  }
}
Не могу найти ошибку.

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 23:42 29-08-2024 | Исправлено: deannik, 23:44 29-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, в FF115 не будет пахать, т.к. не понимает амперсанд &. Если траблы с FF129, то могу глянуть css файлы

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 00:09 30-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, 128, в ней тоже не будет работать?

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 00:18 30-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, будет пахать хоть в FF120, а для FF115 треба полная запись без & и вложенностей селекторов

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 00:27 30-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, у меня 128-я, значит должны работать, но не работают. Дальше пока и пробовать не стал.

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 04:59 30-08-2024 | Исправлено: deannik, 05:00 30-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, отдельно не будет пахать, а при добавлении второй иконки не нужно дублировать записи. Для теста переименуй свою папку chrome и на ее место папку chrome из архива.
 
А все знали, что
Главное меню - Tools - Browser Tools - Web Developer Tools
Гамбургер - More tools - Web Developer Tools
это чековые пункты, если открыты иструменты разраба текущей страницы? Не стал добавлять иконку

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 14:00 30-08-2024 | Исправлено: Death_INN, 14:37 30-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
отдельно не будет пахать, а при добавлении второй иконки не нужно дублировать записи. Для теста переименуй свою папку chrome и на ее место папку chrome из архива.
Спасибо. Отдельно и небыло. С Вашим архивом работает. Подставил код иконок в свой и тоже работает. Что было так и не понял. Добавил ещё "Копировать ссылку", а вот "Сохранить как..." иконка не появляется. Видимо к этому меню уже не относится? Если данные svg из локальных иконок они всё равно должны изменять цвет или только те которые находятся в омни, т.к. все иконки чёрные, на цвет который прописан в коде не меняется?

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 17:00 30-08-2024 | Исправлено: deannik, 17:19 30-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik

Цитата:
"Сохранить как..."

&[label^="Сохранить как" i]::before
Если внутри svg или data:image прописано fill='context-fill', то цвет задается в стилях через fill. Цвет не получается задать? Конкретный пример тогда

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 18:06 30-08-2024 | Исправлено: Death_INN, 18:08 30-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
Если внутри svg или data:image прописано fill='context-fill', то цвет задается в стилях через fill. Цвет не получается задать? Конкретный пример тогда
Не понял какой пример? Тот же код "Копировать", "Выделить всё", что Вы мне скинули. В обоих прописано fill: red, но иконки получаются не красные, а чёрные, хотя в локальной папке оригинальные иконки серые. Вашим способом они не красятся, наверное нужен другой код? Есть svg внутри прописано
Код:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#8e8e98">
<g class="blue" style="fill:#178bff">
<rect width="2" height="9.429" x="7" y="3.286" rx="1" ry="1" transform="rotate(-45 8 8)"/>
<path d="M2.354 4.522 4.485 2.39a.5.5 0 0 1 .711 0l3.19 3.19.014-.015a2 2 0 0 0 0-2.821L6.272.616a2 2 0 0 0-2.821 0L.616 3.451a2 2 0 0 0 0 2.821L2.744 8.4a1.993 1.993 0 0 0 2.8.02l-3.19-3.186a.5.5 0 0 1 0-.712zM15.416 9.759 13.287 7.63a2 2 0 0 0-2.821 0l-.015.015 3.189 3.189a.5.5 0 0 1 0 .711l-2.132 2.132a.5.5 0 0 1-.711 0L7.61 10.49a1.993 1.993 0 0 0 .02 2.8l2.128 2.128a2 2 0 0 0 2.821 0l2.835-2.835a2 2 0 0 0 .002-2.824z"/>
</g>
</svg>
Но реализовать в Ваш код, чтобы стала синяя не получилось.

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 18:37 30-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, svg.context-properties.content.enabled = true

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 19:46 30-08-2024
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, если правильно сделал, то не работает
Код:
&[label="Копировать ссылку"]::before {
     background-image: url("data:image/svg+xml;charset=utf-8,<svg svg.context-properties.content.enabled = true width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity'><g class='blue' style='fill:#178bff'><rect width='2' height='9.429' x='7' y='3.286' rx='1' ry='1' transform='rotate(-45 8 8)'/><path d='M2.354 4.522 4.485 2.39a.5.5 0 0 1 .711 0l3.19 3.19.014-.015a2 2 0 0 0 0-2.821L6.272.616a2 2 0 0 0-2.821 0L.616 3.451a2 2 0 0 0 0 2.821L2.744 8.4a1.993 1.993 0 0 0 2.8.02l-3.19-3.186a.5.5 0 0 1 0-.712zM15.416 9.759 13.287 7.63a2 2 0 0 0-2.821 0l-.015.015 3.189 3.189a.5.5 0 0 1 0 .711l-2.132 2.132a.5.5 0 0 1-.711 0L7.61 10.49a1.993 1.993 0 0 0 .02 2.8l2.128 2.128a2 2 0 0 0 2.821 0l2.835-2.835a2 2 0 0 0 .002-2.824z'/></g></svg>");
      fill: blue;
И всё же код, расположенный ниже, должен изменять цвет иконки или нет?
Код:
[label="Копировать"]::before {
      background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='context-fill' fill-opacity='context-fill-opacity'><path d='M6 15c-1.108 0-2-.892-2-2V5c0-1.108.892-2 2-2h7c1.108 0 2 .892 2 2v5l-5 5H9zm0-1h3V9h5V5c0-.554-.446-1-1-1H6c-.554 0-1 .446-1 1v8c0 .554.446 1 1 1zm4-.414L13.586 10H10zM3 1c-1.108 0-2 .892-2 2v8c0 1.108.892 2 2 2h1v-1H3c-.554 0-1-.446-1-1V3c0-.554.446-1 1-1h7c.554 0 1 .446 1 1h1c0-1.108-.892-2-2-2H3z'/></svg>");
      fill: #FF2400;
У меня не изменяет.

Всего записей: 685 | Зарегистр. 04-08-2013 | Отправлено: 20:22 30-08-2024 | Исправлено: deannik, 20:23 30-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, хотел сразу написать, но думал, что и так ясно. В предыдущем моем сообщении речь шла о параметре из about:config, который по умолчанию почему-то отключен
 
А для иконки пункта "Копировать ссылку" не нужно ничего усложнять, она же есть в браузе
background-image: url("chrome://global/skin/icons/link.svg");

Всего записей: 4003 | Зарегистр. 24-10-2002 | Отправлено: 20:35 30-08-2024 | Исправлено: Death_INN, 20:59 30-08-2024
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161

Компьютерный форум Ru.Board » Компьютеры » Программы » Mozilla Firefox: стили userChrome.css и скрипты js


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru