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

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



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

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

У каждого свой путь и твой не лучший. Мне нравится весёлый роджер троббер
chrome://global/skin/media/throbber.png
chrome://global/skin/icons/pendingpaint.png
Всего записей: 813 | Зарегистр. 26-12-2009 | Отправлено: 17:37 26-08-2024
grom17



Advanced Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Death_INN
Цитата:
Ни в чем.
Я имел ввиду: взяли бы и выложили, там ведь нет секретной информации,
а пользователи только спасибо скажут и плюс в карму.
Всего записей: 1443 | Зарегистр. 12-10-2002 | Отправлено: 17:56 26-08-2024
Death_INN

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

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

У меня с правами агент шит + основан на label под инглиш, чтобы не дублировать пункты + стилизовать инструменты разраба. В итоге без скрипта работать не будет, однако не каждый такое стилизует, так что сам селекторный svg трафарет для выделения места под иконки как-нить выложу, а уж добавить пару-тройку стилей для любителей png no data:image будет не сложно
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 18:00 26-08-2024 | Исправлено: Death_INN, 18:30 26-08-2024
Garant100



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

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

Здравствуйте!
Подскажите как внести эти изменения в браузер ?
Всего записей: 536 | Зарегистр. 18-06-2011 | Отправлено: 19:17 26-08-2024
grom17



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

На предыдущей странице я выкладывал "полный комплект". Положите его в папку с профилем.
Предварительно включив в about:config настройку toolkit.legacyUserProfileCustomizations.stylesheets = true.
Там конечно много косяков, но как говорится "что имеем"...
Здесь всё равно никто не выложит свою папку chrome. Так как это "богатство" нажитое непосильным трудом...
Всего записей: 1443 | Зарегистр. 12-10-2002 | Отправлено: 19:45 26-08-2024 | Исправлено: grom17, 20:05 26-08-2024
grom17



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

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



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

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

Здесь форум, а не стриптиз-бар. Тут за красоту не похвалят, а советами достанут.
Просто у всех свои нюансы. Кто-то использует скрипты, я сам пользуюсь UCF и у меня скрипт раскрашивает scrollbar. Другой добавляет иконку сайта в identity-box, третий иконку дефолтного поиска в панель и т.д. Кроме того, у меня ноутбук, поэтому панели компактны, меню сжаты. И пользуюсь только системной темой, на тёмной с меню будут косяки однозначно.
Могу скинуть свой chrome (только стили) без скриптов UCF в личку, только не лень разбираться будет? У меня за основу взяты стили Aris-t2 47 штук с правками + 17 моих.
Зато все меню с иконками, кроме строки меню, которой не пользуюсь.
Всего записей: 813 | Зарегистр. 26-12-2009 | Отправлено: 10:34 27-08-2024
grom17



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

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

Цитата:
Могу скинуть свой chrome (только стили) без скриптов UCF в личку
ОК. Спасибо большое заранее!
 
Всего записей: 1443 | Зарегистр. 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.
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 23:32 28-08-2024 | Исправлено: Death_INN, 22:27 31-08-2024
gutasiho

Gold Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кнопка открывает папку профиля по ЛКМ и папку Chrome по ПКМ.
Код Возможная иконка  
Всего записей: 7303 | Зарегистр. 14-09-2020 | Отправлено: 10:54 29-08-2024 | Исправлено: gutasiho, 10:55 29-08-2024
grom17



Advanced Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
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;
    }
  }
}

Для чего эта скобка. Я некоторых стилях я её комментировал (не удалял). Думал что это ошибка.
Всего записей: 1443 | Зарегистр. 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
Цитата:
Для чего эта скобка
Количество открытых и закрытых скобок должно быть одинаково
Всего записей: 1053 | Зарегистр. 17-09-2010 | Отправлено: 14:50 29-08-2024
grom17



Advanced Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Starback
Цитата:
Количество открытых и закрытых скобок должно быть одинаково
Да это я знаю,
Не корректно задал вопрос: Почему эти скобки в Notepad++ подсвечиваются красным, а остальные белым цветом?
Всего записей: 1443 | Зарегистр. 12-10-2002 | Отправлено: 16:07 29-08-2024 | Исправлено: grom17, 16:30 29-08-2024
gutasiho

Gold Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
Синтаксис соответствующего стиля отображения (Language > С > CSS) подсвечивает пару соответствующих скобок, кликнешь возле третьей скобки - подсветит соответствующую ему четвертую скобку. Прочие подсветки тоже работа синтаксиса.
Всего записей: 7303 | Зарегистр. 14-09-2020 | Отправлено: 16:43 29-08-2024
Death_INN

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

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

траблы синтаксиса css, если псевдоэлемент вложен в селектор. Это уже scss, что сродни синтаксису JavaScript
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 17:34 29-08-2024
grom17



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

Всего записей: 3427 | Зарегистр. 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 Для проверки вставить в адресную строку, и браузер покажет иконку.
В общем, повникав, можно довольно легко выбирать любую ресурсную иконку (они так называются), а их там таки дофига.
Всего записей: 7303 | Зарегистр. 14-09-2020 | Отправлено: 19:06 29-08-2024
grom17



Advanced Member		Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Death_INN С кодом всё понятно. Вот как его туда запихнуть и где этот omni.ja находится?
Всего записей: 1443 | Зарегистр. 12-10-2002 | Отправлено: 19:17 29-08-2024
gutasiho

Gold Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В той папке, где firefox.exe, в подпапке browser.
Всего записей: 7303 | Зарегистр. 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

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