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

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

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

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
alexagf, показываю на примере расширы Violentmonkey без всяких условий и уточнений для более широкого охвата

Код:
toolbaritem[label="Violentmonkey"] .webextension-browser-action {
  --v-logo: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='magenta' fill-opacity='context-fill-opacity'><path d='M 2 2 l 6 12 l 6 -12 h -2 l -4 8 l -4 -8 z'/></svg>");
  list-style-image: image-set( var(--v-logo), var(--v-logo) 2x ) !important;
}

deannik, пробуй закомментировать, а если не устроит, то явно задать

Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 23:18 03-07-2025 | Исправлено: Death_INN, 23:25 03-07-2025
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В таком виде иконка в проводнике Windows отображается черным квадратом
Код:
<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='magenta' fill-opacity='context-fill-opacity'><path d='M 2 2 l 6 12 l 6 -12 h -2 l -4 8 l -4 -8 z'/></svg>
Если удалить красную часть кода, отобразится правильно.

Всего записей: 8875 | Зарегистр. 14-09-2020 | Отправлено: 07:57 04-07-2025
alexagf



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Death_INN, изящно!
Конкретно этот код у меня работает, но когда копирую и вставляю код нужной мне иконки, она не отображается.

Код:
toolbaritem[label="YOURLS"] .webextension-browser-action {  
  --v-logo: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#fff'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path></svg>");
  list-style-image: image-set( var(--v-logo), var(--v-logo) 2x ) !important;
}  
 
Иконка отсюда. Что не так?
И второй вопрос - как прописать заливку для светлой и тёмной темы?
 

Всего записей: 1469 | Зарегистр. 23-09-2001 | Отправлено: 09:33 04-07-2025 | Исправлено: alexagf, 14:36 04-07-2025
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
а в 140 все сломали,
C год назад ты выкладывал  простенький код строчек на 15 "общий отступ для иконок конт. меню", он до сих пор нормально работает.

Всего записей: 8875 | Зарегистр. 14-09-2020 | Отправлено: 11:27 04-07-2025
Death_INN

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

Цитата:
Что не так?

Видать не пашут относительные пути. Либо полный путь, либо качать в формате svg и преобразовать в Data URI (ссылка на конвертер есть в шапке). Стилизация в общем виде без учета тем будет выглядеть так

Код:
toolbaritem[label="YOURLS"] .webextension-browser-action {
  --webextension-menupanel-image: image-set( url("..."), url("...") 2x ) !important;
  --webextension-menupanel-image-light: var(--webextension-menupanel-image) !important;
  --webextension-menupanel-image-dark: var(--webextension-menupanel-image) !important;
  --webextension-toolbar-image: var(--webextension-menupanel-image) !important;
  --webextension-toolbar-image-light: var(--webextension-menupanel-image) !important;
  --webextension-toolbar-image-dark: var(--webextension-menupanel-image) !important;
}

Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 14:30 04-07-2025 | Исправлено: Death_INN, 14:33 04-07-2025
alexagf



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

Код:
toolbaritem[label="YOURLS"] .webextension-browser-action {  
  --v-logo: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'  width='16px' height='16px' viewBox='0 0 24 24' fill='none' stroke='%23ffffff'><path d='M12.7917 15.7991L14.2223 14.3676C16.5926 11.9959 16.5926 8.15054 14.2223 5.7788C11.8521 3.40707 8.0091 3.40707 5.63885 5.7788L2.77769 8.64174C0.407436 11.0135 0.407436 14.8588 2.77769 17.2306C3.87688 18.3304 5.29279 18.9202 6.73165 19' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'></path><path opacity='0.5' d='M11.2083 8.20092L9.77769 9.63239C7.40744 12.0041 7.40744 15.8495 9.77769 18.2212C12.1479 20.5929 15.9909 20.5929 18.3612 18.2212L21.2223 15.3583C23.5926 12.9865 23.5926 9.14118 21.2223 6.76945C20.1231 5.66957 18.7072 5.07976 17.2683 5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'></path></svg>");
  list-style-image: image-set( var(--v-logo), var(--v-logo) 2x ) !important;
}  
Но это только для тёмной темы.
Как сделать код универсальным?

Всего записей: 1469 | Зарегистр. 23-09-2001 | Отправлено: 14:37 04-07-2025
deannik

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
пробуй закомментировать
Закомментировал background-color: var(--panel-item-hover-bgcolor) !important; — полоса выбора есть, закругление полосы есть.
Цитата:
а если не устроит, то явно задать
Поможете с этим?

Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 17:11 04-07-2025 | Исправлено: deannik, 21:48 04-07-2025
Death_INN

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

Цитата:
Как сделать код универсальным?

Жесть какая-то. Может кто сделает проще
Код

Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 18:30 04-07-2025 | Исправлено: Death_INN, 18:31 04-07-2025
alexagf



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

Цитата:
Жесть какая-то. Может кто сделает проще

Ну, во всяком случае работает отлично. Благодарю!

Всего записей: 1469 | Зарегистр. 23-09-2001 | Отправлено: 19:10 04-07-2025
moakt33

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

Всего записей: 74 | Зарегистр. 11-12-2023 | Отправлено: 19:40 04-07-2025 | Исправлено: moakt33, 19:44 05-07-2025
alexagf



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Уважаемые спецы!
А может кто-нибудь модифицировать этот код автоскрытия боковой панели так, чтобы открывалась она не при наведении на узкую полоску содержимого, а на саму боковую панель с кнопками FF 140+?
А в идеале еще, чтобы можно было запретить автоскрытие, если открыта панель ИИ.

Всего записей: 1469 | Зарегистр. 23-09-2001 | Отправлено: 21:01 04-07-2025
xrun1



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Есть стиль для поиска в боковой панели. В 140-й при фокусе  3 пикселя бордюра. Внутренний 1px правильный, зелёный + 2 внешних пикселя #0060DF. В 139-й внешних не было, как избавиться?

Всего записей: 1003 | Зарегистр. 26-12-2009 | Отправлено: 14:23 06-07-2025
Death_INN

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

Код:
.sidebar-panel #search-box[focused="true"] {
  outline: none !important;
}

Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 15:23 06-07-2025
doud



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А можно ли изменять текст в тултипах? Заменить на свой или совсем удалить?

Всего записей: 128 | Зарегистр. 20-08-2006 | Отправлено: 15:30 06-07-2025
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
doud
Поиск в теме по слову тултип. Тултипы можно отключить
Код:
browser.chrome.toolbar_tips = false
, кастомизировать (цвет, фон, шрифт...), привести все тултипы к одному общему стилю. Заменить текст на пользовательский у встроенных элементов браузера - не в курсах.

Всего записей: 8875 | Зарегистр. 14-09-2020 | Отправлено: 17:51 06-07-2025
doud



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho
Как отключить все тултипы я знаю, надо изменить текст только в некоторых...

Всего записей: 128 | Зарегистр. 20-08-2006 | Отправлено: 18:07 06-07-2025
xrun1



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Спасибо. Я искал по ключевому слову "focus", а ларчик открывался по-другому!

Всего записей: 1003 | Зарегистр. 26-12-2009 | Отправлено: 19:25 06-07-2025
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В v141.0beta параметр security.browser_xhtml_csp.report-only заменен на новый параметр security.csp.reporting.enabled аналогичного назначения.
security.csp.reporting.enabled = true (по умолчанию). Активирован режим "report-only" - отчеты о нарушениях CSP отправляются, но CSP ничего не блокирует. Снижения уровня безопасности не происходит. Отчеты можно просматривать в Консоли Браузера.
security.csp.reporting.enabled = false Деактивирован режим "report-only" - отчеты о нарушениях CSP не отправляются, CSP блокирует нарушителей.
Т.о., для полного ништяка
Код:
security.browser_xhtml_csp.enabled = true
security.csp.reporting.enabled = false

Всего записей: 8875 | Зарегистр. 14-09-2020 | Отправлено: 10:13 07-07-2025
Lehasven



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет, может кто знает, использую минималистскую тему, и нет панели закладок, только элементы закладок выведены в строке в виде ярлыков, если ли возможность сделать так называемый "гамбургер", что бы элементы закладок отображались определенной заданной длиной, остальные скрыты, а при наведении мышки на них она открывалась на указанную длину.
Cделал, спасибо gpt
 

Код:
 
/* Контейнер закладок в панели навигации */
#personal-bookmarks {
  max-width: 130px; /* ширина блока закладок по умолчанию */
  overflow: hidden;
  transition: max-width 0.3s ease-in-out;
  white-space: nowrap;
}
 
/* Расширение при наведении мыши */
#personal-bookmarks:hover {
  max-width: 600px; /* ширина при наведении */
}
 
/* Чтобы закладки не сжимались */
#personal-bookmarks .bookmark-item {
  min-width: 30px;
  padding-inline: 6px;
}
 

 
Вдруг кому пригодится для компактной темы

Всего записей: 364 | Зарегистр. 09-02-2010 | Отправлено: 10:32 07-07-2025 | Исправлено: Lehasven, 13:25 07-07-2025
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Farby, тута подумал, а что толку от дебаггера, если юзать его из нас никто не умеет? Ну, поможет добраться до функции, а вот как через него создать кнопку на странице about:config? Так что реализация через дебаггер так и останется открытой.

Всего записей: 3950 | Зарегистр. 24-10-2002 | Отправлено: 13:06 07-07-2025
Открыть новую тему     Написать ответ в эту тему

Страницы: 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