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

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

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

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-селекторов элементов интерфейса встроенными средствами браузера

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



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

Цитата:
svg иконки, как у меня

У каждого свой путь и твой не лучший. Мне нравится весёлый роджер троббер
chrome://global/skin/media/throbber.png
chrome://global/skin/icons/pendingpaint.png

Всего записей: 1003 | Зарегистр. 26-12-2009 | Отправлено: 17:37 26-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
Ни в чем.
Я имел ввиду: взяли бы и выложили, там ведь нет секретной информации,
а пользователи только спасибо скажут и плюс в карму.

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 17:56 26-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
xrun1, чем не лучший? все в одном файле. А у вас как я помню, было два css и один зависим от другого + каталог с кучей иконок
 
grom17

Цитата:
взяли бы и выложили

У меня с правами агент шит + основан на label под инглиш, чтобы не дублировать пункты + стилизовать инструменты разраба. В итоге без скрипта работать не будет, однако не каждый такое стилизует, так что сам селекторный svg трафарет для выделения места под иконки как-нить выложу, а уж добавить пару-тройку стилей для любителей png no data:image будет не сложно

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



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

Цитата:
Продолжая тему иконки контекстного меню (больная тема).
99% иконизировано всё (меню -> субменю или как его там...) в общем здесь.
Не могу добраться до ПКМ "Перевести текст ссылки на английский", не то что бы этот параметр очень нужен, просто он там должен быть - и точка.

Здравствуйте!
Подскажите как внести эти изменения в браузер ?

Всего записей: 591 | Зарегистр. 18-06-2011 | Отправлено: 19:17 26-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Garant100
Цитата:
Подскажите как внести эти изменения в браузер ?

На предыдущей странице я выкладывал "полный комплект". Положите его в папку с профилем.
Предварительно включив в about:config настройку toolkit.legacyUserProfileCustomizations.stylesheets = true.
Там конечно много косяков, но как говорится "что имеем"...
Здесь всё равно никто не выложит свою папку chrome. Так как это "богатство" нажитое непосильным трудом...

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 19:45 26-08-2024 | Исправлено: grom17, 20:05 26-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
сам селекторный svg трафарет для выделения места под иконки как-нить выложу

Вот за это спасибо большое!

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 22:49 26-08-2024
xrun1



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

Цитата:
Здесь всё равно никто не выложит свою папку chrome

Здесь форум, а не стриптиз-бар. Тут за красоту не похвалят, а советами достанут.
Просто у всех свои нюансы. Кто-то использует скрипты, я сам пользуюсь UCF и у меня скрипт раскрашивает scrollbar. Другой добавляет иконку сайта в identity-box, третий иконку дефолтного поиска в панель и т.д. Кроме того, у меня ноутбук, поэтому панели компактны, меню сжаты. И пользуюсь только системной темой, на тёмной с меню будут косяки однозначно.
Могу скинуть свой chrome (только стили) без скриптов UCF в личку, только не лень разбираться будет? У меня за основу взяты стили Aris-t2 47 штук с правками + 17 моих.
Зато все меню с иконками, кроме строки меню, которой не пользуюсь.

Всего записей: 1003 | Зарегистр. 26-12-2009 | Отправлено: 10:34 27-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
xrun1
Цитата:
Здесь форум, а не стриптиз-бар. Тут за красоту не похвалят, а советами достанут.
Так я не в претензии, может шутка неудачная про "богатство".

Цитата:
нажитое непосильным трудом...
Я сам как могу скребу то там - то здесь (пока знаний не хватает). А так да, советами и вопросами точно замучают.

Цитата:
Могу скинуть свой chrome (только стили) без скриптов UCF в личку
ОК. Спасибо большое заранее!
 

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 11:31 27-08-2024 | Исправлено: grom17, 11:45 27-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подготавливаем отступы для иконок. Тест на FF129 в userChrome.css без каких-либо других стилей или скриптов со стилями.
Если все устраивает, то можно файл назвать icon-padding.css и делать импорт из userChrome.css
 
Способов добавить иконку много. Рассмотрим пункт Copy (Копировать), который имеется во многих меню. id разные, но у всех имеется label и можно одним стилем иконизировать сразу все (инглиш вариант).

Код:
@-moz-document url-prefix("chrome://browser/content/") {
  menupopup:not(.in-menulist) menuitem:not([checked], [icon], .menuitem-iconic) {
    &[label="Copy"]::before {
      background-image: url("chrome://global/skin/icons/edit-copy.svg");
      fill: green;
    }
  }
}

Если иконки нет в браузе, то ее можно добавить в формате data:image/svg. Все стили с иконками можно хранить в icons.css.

Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 23:32 28-08-2024 | Исправлено: Death_INN, 22:27 31-08-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кнопка открывает папку профиля по ЛКМ и папку Chrome по ПКМ.
Код Возможная иконка  

Всего записей: 8876 | Зарегистр. 14-09-2020 | Отправлено: 10:54 29-08-2024 | Исправлено: gutasiho, 10:55 29-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
Если все устраивает
Да, всё ОК.

Код:
@-moz-document url-prefix("chrome://browser/content/") {
  menupopup:not(.in-menulist) menuitem:not([checked], [icon], .menuitem-iconic) {
    &[label="Copy"]::before {
      background-image: url("chrome://global/skin/icons/edit-copy.svg");
      fill: green;
    }
  }
}

Для чего эта скобка. Я некоторых стилях я её комментировал (не удалял). Думал что это ошибка.

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 14:45 29-08-2024 | Исправлено: grom17, 16:29 29-08-2024
Starback



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17 14:45 29-08-2024 UTC+3
Цитата:
Для чего эта скобка
Количество открытых и закрытых скобок должно быть одинаково

Всего записей: 1156 | Зарегистр. 17-09-2010 | Отправлено: 14:50 29-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Starback
Цитата:
Количество открытых и закрытых скобок должно быть одинаково
Да это я знаю,
Не корректно задал вопрос: Почему эти скобки в Notepad++ подсвечиваются красным, а остальные белым цветом?

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 16:07 29-08-2024 | Исправлено: grom17, 16:30 29-08-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
Синтаксис соответствующего стиля отображения (Language > С > CSS) подсвечивает пару соответствующих скобок, кликнешь возле третьей скобки - подсветит соответствующую ему четвертую скобку. Прочие подсветки тоже работа синтаксиса.

Всего записей: 8876 | Зарегистр. 14-09-2020 | Отправлено: 16:43 29-08-2024
Death_INN

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

Цитата:
Почему эти скобки в Notepad++ подсвечиваются красным, а остальные белым цветом?

траблы синтаксиса css, если псевдоэлемент вложен в селектор. Это уже scss, что сродни синтаксису JavaScript

Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 17:34 29-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho Death_INN Понял, спасибо!
Никак не могу найти информацию для заменны офлайн иконок на онлайн.
Например: chrome://browser/skin/history.svg по этому адресу находит нужную иконку.
Можно ли каким то образом посмотреть этот каталог, что-бы кликнув по иконке скопировать этот адресс и вставить в стиль?

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 18:15 29-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17, chrome://* - это не онлайн, а внутри omni.ja Там сокращения в пути, указанные в манифесте. Так что путь проще узнать поиском по омни или онлайн поиском:  https://searchfox.org/mozilla-release/search?q=history.svg
 
Если представить, что иконки edit-copy.svg нет в омни, то ее можно добавить так

Код:
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.035 1.25c-1 0-1.812.812-1.812 1.813h1.5c0-.173.14-.313.312-.313h5.95c.172 0 .313.14.313.313v7.65c0 .172-.14.312-.313.312v1.5c1 0 1.813-.812 1.813-1.813v-7.65c0-1-.812-1.812-1.813-1.812h-5.95z'/><path fill-rule='evenodd' d='M3.063 4.225c-1.001 0-1.813.812-1.813 1.813v7.65c0 1 .812 1.812 1.813 1.812h5.95c1 0 1.812-.812 1.812-1.812v-7.65c0-1.001-.812-1.813-1.813-1.813h-5.95zM2.75 6.038c0-.173.14-.313.313-.313h5.95c.172 0 .312.14.312.313v7.65c0 .172-.14.312-.313.312h-5.95a.313.313 0 0 1-.312-.312v-7.65z' clip-rule='evenodd'/></svg>");


Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 18:34 29-08-2024 | Исправлено: Death_INN, 18:42 29-08-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
Распакуйте omni.ja для ознакомления, эта иконка в этом пути omni\chrome\browser\skin\classic\browser\history.svg
 
Добавлено:
Другая иконка лежит в \omni\chrome\browser\skin\classic\browser\addons\addon-install-blocked.svg
Для добавления в стиль chrome://browser/skin/addons/addon-install-blocked.svg Для проверки вставить в адресную строку, и браузер покажет иконку.
В общем, повникав, можно довольно легко выбирать любую ресурсную иконку (они так называются), а их там таки дофига.

Всего записей: 8876 | Зарегистр. 14-09-2020 | Отправлено: 19:06 29-08-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN С кодом всё понятно. Вот как его туда запихнуть и где этот omni.ja находится?

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 19:17 29-08-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В той папке, где firefox.exe, в подпапке browser.

Всего записей: 8876 | Зарегистр. 14-09-2020 | Отправлено: 19:18 29-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

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