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

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в 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

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

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

Просьба публикуемые коды заключать в тэг [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
Также не забываем про такую строку в 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.
 
Полезные ссылки
 
Онлайн-конвертер иконок в\из Base64
Онлайн-редактор иконок SVG
Онлайн-конвертер SVG to Data URI
Мануал по определению CSS-селекторов элементов интерфейса встроенными средствами браузера
Всего записей: 7303 | Зарегистр. 14-09-2020 | Отправлено: 08:34 29-07-2023 | Исправлено: gutasiho, 09:49 30-08-2024
grom17



Advanced Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
gutasiho
Цитата:
 той папке, где firefox.exe, в подпапке browser.
1200604 строки.
 
Так понимаю что нотепадом++ можно открыть и вставить код, например в конце 1200604 строки?
 
И до кучи ещё такой вопрос: Меняю иконку .png на .svg и иконка почему то чёрная. Как исправить?
Этот параметр включён: svg.context-properties.content.enabled false => true
Всего записей: 1443 | Зарегистр. 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. Я же давал код отступа для иконок и добавление иконки в двух вариантах. Там все это есть для примера. Для кого делал - не ясно
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 20:39 29-08-2024 | Исправлено: Death_INN, 20:46 29-08-2024
deannik

Full Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, здесь Вы привели пример data:image для edit-copy.svg, а как в таком формате будет, к примеру, иконка "Сохранить страницу как.."? Я переводил в data, но "Копировать" выглядит совсем иначе код. Вашим примером возможно вставить любую иконку которой нет в омни?
Всего записей: 549 | Зарегистр. 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;
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 22:00 29-08-2024 | Исправлено: Death_INN, 22:11 29-08-2024
deannik

Full 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;
    }
  }
}
Всего записей: 549 | Зарегистр. 04-08-2013 | Отправлено: 22:14 29-08-2024 | Исправлено: deannik, 22:27 29-08-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, вроде да, не проверял. Если потребуется добавить еще одну иконку, относящуюся к menuitem, то, например, &[label="Вставить"] вставлять после первой }
Можно делать label без учета регистра символов, либо юзать подстановочные знаки, чтобы в некоторых случаях сразу двух и более зайцев окучить
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 22:27 29-08-2024 | Исправлено: Death_INN, 22:38 29-08-2024
deannik

Full Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, извиняюсь, видимо я неправильно задал вопрос.
Интересует, как переводить Вашим способом в data свои иконки? Мне вот это непонятно. Сам код? Потому как набор цифр.
Всего записей: 549 | Зарегистр. 04-08-2013 | Отправлено: 22:37 29-08-2024
Death_INN

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

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

можно вставить в редактор и посмотреть как будет выглядеть иконка по частям или вся. Можно и свою нарисовать.
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 22:50 29-08-2024 | Исправлено: Death_INN, 23:06 29-08-2024
deannik

Full 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;
    }
  }
}
Не могу найти ошибку.
Всего записей: 549 | Зарегистр. 04-08-2013 | Отправлено: 23:42 29-08-2024 | Исправлено: deannik, 23:44 29-08-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, в FF115 не будет пахать, т.к. не понимает амперсанд &. Если траблы с FF129, то могу глянуть css файлы
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 00:09 30-08-2024
deannik

Full Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, 128, в ней тоже не будет работать?
Всего записей: 549 | Зарегистр. 04-08-2013 | Отправлено: 00:18 30-08-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, будет пахать хоть в FF120, а для FF115 треба полная запись без & и вложенностей селекторов
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 00:27 30-08-2024
deannik

Full Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, у меня 128-я, значит должны работать, но не работают. Дальше пока и пробовать не стал.
Всего записей: 549 | Зарегистр. 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
это чековые пункты, если открыты иструменты разраба текущей страницы? Не стал добавлять иконку
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 14:00 30-08-2024 | Исправлено: Death_INN, 14:37 30-08-2024
deannik

Full Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
отдельно не будет пахать, а при добавлении второй иконки не нужно дублировать записи. Для теста переименуй свою папку chrome и на ее место папку chrome из архива.
Спасибо. Отдельно и небыло. С Вашим архивом работает. Подставил код иконок в свой и тоже работает. Что было так и не понял. Добавил ещё "Копировать ссылку", а вот "Сохранить как..." иконка не появляется. Видимо к этому меню уже не относится? Если данные svg из локальных иконок они всё равно должны изменять цвет или только те которые находятся в омни, т.к. все иконки чёрные, на цвет который прописан в коде не меняется?
Всего записей: 549 | Зарегистр. 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. Цвет не получается задать? Конкретный пример тогда
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 18:06 30-08-2024 | Исправлено: Death_INN, 18:08 30-08-2024
deannik

Full 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>
Но реализовать в Ваш код, чтобы стала синяя не получилось.
Всего записей: 549 | Зарегистр. 04-08-2013 | Отправлено: 18:37 30-08-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, svg.context-properties.content.enabled = true
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 19:46 30-08-2024
deannik

Full 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;
У меня не изменяет.
Всего записей: 549 | Зарегистр. 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");
Всего записей: 3427 | Зарегистр. 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

Компьютерный форум 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-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru