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

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

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

Maz (23-01-2026 14:24): Mozilla Firefox: стили userChrome.css и скрипты js (Часть 2)  Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 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 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200

   

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

Всего записей: 9429 | Зарегистр. 14-09-2020 | Отправлено: 08:34 29-07-2023 | Исправлено: Maz, 14:21 23-01-2026
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Yankell,
Цитата:
как в 140 убрать вот этот элемент?


Код:
#tabbrowser-tabs {
    border-inline-start: none !important;
}

Всего записей: 1758 | Зарегистр. 12-10-2002 | Отправлено: 10:38 24-12-2025
Yankell

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17, спасибо! Почему-то не пришло в голову такое простое решение.

Всего записей: 492 | Зарегистр. 26-11-2016 | Отправлено: 12:24 24-12-2025
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Использую адаптивную ширину вкладок, но есть нюанс, никак не могу уменьшить ширину активной вкладки хотя бы до 180px.
Использую данный код:

Код:
:root {
    --uc-active-tab-width: clamp(110px, 30vw, 220px);
    --uc-inactive-tab-width: clamp(80px, 30vw, 112px);
}
.tabbrowser-tab[selected][fadein]:not([pinned]) {
    min-width: var(--uc-active-tab-width) !important;
    transition: ease-in-out 1.5s !important;
    transition-duration: 380ms !important;
}
.tabbrowser-tab[fadein]:not([selected]):not([pinned]) {
    max-width: var(--uc-inactive-tab-width) !important;
    transition: ease-in-out 1.5s !important;
    transition-duration: 380ms !important;
}

 
Добавлено:
Может у кого есть варианты решения данной проблемы?
 
Добавлено:
Как будто где-то установлена фиксированная ширина вкладок, но так ли это?
 
Добавлено:
Если убрать этот блок кода, тогда ширина регулируется, но мне нравится как работает этот код, хотелось бы его оставить.

Всего записей: 1758 | Зарегистр. 12-10-2002 | Отправлено: 18:05 24-12-2025
alloledd

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

Код:
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 10px !important;
max-width: 250px !important;  
/* расстояние от иконки до края вкладки */
 --inline-tab-padding: 2px; }
 
/* Активную вкладку увеличить  */
.tabbrowser-tab[fadein][selected]:not([pinned])
/* , .tabbrowser-tab:hover[fadein]:not([pinned]) */
{
    min-width: 250px !important;
}

В принципе можно задать любой размер.

Всего записей: 7809 | Зарегистр. 25-10-2019 | Отправлено: 18:35 24-12-2025
grom17



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

Код:
/* Активная вкладка */
.tabbrowser-tab[fadein][selected]:not([pinned]) {
    min-width: 200px !important;
    transition: ease-in-out 1.5s !important;
    transition-duration: 380ms !important;
}
/* Не активная вкладка  */
.tabbrowser-tab[fadein]:not([pinned]) {
    max-width: 110px !important;
    transition: ease-in-out 1.5s !important;
    transition-duration: 380ms !important;
}

Теперь работает как мне нужно.

Всего записей: 1758 | Зарегистр. 12-10-2002 | Отправлено: 19:12 24-12-2025
alloledd

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

Всего записей: 7809 | Зарегистр. 25-10-2019 | Отправлено: 19:37 24-12-2025
Yankell

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Решил проблему с значком приватной вкладки, пишу на случай, если кому тоже надо:

Код:
 .tabbrowser-tab[usercontextid="6"] .tab-label-container{
  background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important; background-repeat: no-repeat;    
    background-position: right 5px center !important;  
 }


 
upd не понравился итоговый результат, убрал иконку вкладки и поставил значок туда.

Всего записей: 492 | Зарегистр. 26-11-2016 | Отправлено: 19:38 24-12-2025 | Исправлено: Yankell, 21:17 24-12-2025
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
alloledd,
Цитата:
разделитель между вкладками у кого-нибудь есть


Код:
.tab-background {
border-right: 1px solid red !important;
}

 
Добавлено:

Код:
.tabbrowser-tab {
    border-inline-end: 1px solid !important;
}

Всего записей: 1758 | Зарегистр. 12-10-2002 | Отправлено: 19:46 24-12-2025
alloledd

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
Что-то у меня не появились разделители.  
А вот эти у кого-нибудь ещё щас работают?
http://forum.ru-board.com/topic.cgi?forum=5&topic=50823&start=920#12

Всего записей: 7809 | Зарегистр. 25-10-2019 | Отправлено: 21:36 24-12-2025
Death_INN

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

Всего записей: 4155 | Зарегистр. 24-10-2002 | Отправлено: 22:01 24-12-2025
alloledd

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, обводка только на активной вкладке, на остальных нет, фон не отличается. Поэтому и хотелось бы разделитель.  

Всего записей: 7809 | Зарегистр. 25-10-2019 | Отправлено: 22:19 24-12-2025
Death_INN

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

Всего записей: 4155 | Зарегистр. 24-10-2002 | Отправлено: 23:08 24-12-2025 | Исправлено: Death_INN, 23:08 24-12-2025
alloledd

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

Всего записей: 7809 | Зарегистр. 25-10-2019 | Отправлено: 23:15 24-12-2025
Death_INN

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

Код:
.tab-background {
    background-color: color-mix(in srgb, var(--tab-selected-bgcolor) 15%, transparent);
}

Всего записей: 4155 | Зарегистр. 24-10-2002 | Отправлено: 23:24 24-12-2025
grom17



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

Цитата:
А вот эти у кого-нибудь ещё щас работают?
http://forum.ru-board.com/topic.cgi?forum=5&topic=50823&start=920#12

Да, работают. Проверил на чистом профили. Если у тебя не "пашут", попробуй в чистый userChrome запихнуть.

Всего записей: 1758 | Зарегистр. 12-10-2002 | Отправлено: 23:29 24-12-2025
Death_INN

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

Всего записей: 4155 | Зарегистр. 24-10-2002 | Отправлено: 23:46 24-12-2025
alloledd

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
для темной, если стили без нарушения каскада, вполне бы подошло так  

У меня ничего не изменилось.
grom17
Цитата:
Да, работают. Проверил на чистом профили.

Спасибо. Да, работают, понял, что причина где-то в user_chrome_files. Буду дальше искать. )
Death_INN
Цитата:
Вот разделитель между меню и панелью вкладок, если они одного фона, не помешал бы

Меню у меня с автоскрытием и фоном отличается от панели вкладок. Так что там меня всё устраивает.

Всего записей: 7809 | Зарегистр. 25-10-2019 | Отправлено: 00:09 25-12-2025
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Этот стиль показывает кнопки закрытия вкладок, которые появятся при наведении курсора на место кнопки,
но при наведении на вкладку часть текста (если он занимает всю вкладку, т.е. длинный) пропадает там где находится кнопка.
У меня не получается сделать так, что-бы текст не исчезал при наведении на вкладку, в том месте где находится кнопка.
Понятно ли объяснил, думаю да. Вот код в который нужно внести дополнения-исправления с комментариями:
 
Вопрос решён, спасибо всем!

Всего записей: 1758 | Зарегистр. 12-10-2002 | Отправлено: 01:46 25-12-2025 | Исправлено: grom17, 12:44 25-12-2025
alloledd

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как выравнять по центру иконки в закреплённых вкладках?
 
Пака так выровнял, если лучше ничего не найдётся.
.tab-icon-image {
  margin-left: -4px !important;
}

Всего записей: 7809 | Зарегистр. 25-10-2019 | Отправлено: 07:18 25-12-2025 | Исправлено: alloledd, 08:13 25-12-2025
Satanachia

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Народ! На forum.mozilla-russia.org серьезные проблемы с заходом, а если умудрился зайти, то буквально через несколько минут сайт закрывается.Скриншот В топики зайти невозможно, страницы полностью не загружаются. Там установили какую то защиту.
Неужели нет решения, для этой ситуации?

Всего записей: 1320 | Зарегистр. 22-10-2012 | Отправлено: 08:11 25-12-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 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200

Компьютерный форум Ru.Board » Компьютеры » Программы » Mozilla Firefox: стили userChrome.css и скрипты js (Часть 1)
Maz (23-01-2026 14:24): Mozilla Firefox: стили userChrome.css и скрипты js (Часть 2)


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

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

LiteCoin: LgY72v35StJhV2xbt8CpxbQ9gFY6jwZ67r

Рейтинг.ru