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

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

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

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

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

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

Цитата:
но при этом скрывают иконки неактивных строк

Я в теме говорил, что макс гибкость, когда трафарет для иконок через before делается. А тебе разве что вместо
background: none !important; пробовать
background-color: var(--panel-background) !important;
т.е. цвет фона при наведении на неактивный пункт равен цвету фона самого меню

Всего записей: 3404 | Зарегистр. 24-10-2002 | Отправлено: 22:12 25-07-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Стиль окна встроенного контекстного переводчика
Код:
/* userChrome.css */
/* Notice - if you want fully disabling context translator: browser.translations.select.enable = false */
panel.translations-panel-view {
    width: 920px !important;
}
panel.translations-panel-view textarea#select-translations-panel-text-area {
    height: 240px !important;
    font-size: 20px !important;
    color: #6f0045 !important;
}

Всего записей: 7264 | Зарегистр. 14-09-2020 | Отправлено: 08:21 26-07-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Всем доброго вечера!
В userChrome.css есть такие строки:
@import url("css/gamburger/gamburger_context_menu.css");
@import url("css/icons_context_menu.css");
Это для иконок меню Гамбургер и Контекстного меню и всё прекрасно работает, но стоит их поменять местами
и стили перестают работать, как по мне, этого не должно быть, или я чего-то недопонимаю?

Всего записей: 1437 | Зарегистр. 12-10-2002 | Отправлено: 20:30 27-07-2024
AlAvis

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
Стили применяются в том порядке - в каком записаны . При импортировании всё считывается как один файл .
Если у вас в первом общее правило , а во втором частное (противоречащее общему) - всё работает .
А при изменении порядка - учтётся только общее .
 
Вобщем то потому и используются настолько подробные адреса элементов - что бы на другие не влияло .

Всего записей: 2128 | Зарегистр. 15-07-2013 | Отправлено: 20:39 27-07-2024 | Исправлено: AlAvis, 20:42 27-07-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
AlAvis
Ну хорошо. А почему тогда другие строки переставляю и всё работает?
А в данном случае если я подниму @import url("css/icons_context_menu.css"); над @import url("css/gamburger/gamburger_context_menu.css"); перестаёт работать только @import url("css/icons_context_menu.css");, а всё остальное работает. Я вас понимаю, что всё должно работать как вы описали, но я честно говоря в "ступоре" почему именно строка @import url("css/icons_context_menu.css"); вызывает такой "глюк"?

Всего записей: 1437 | Зарегистр. 12-10-2002 | Отправлено: 21:07 27-07-2024
AlAvis

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
Пример :
если в первом правиле указано скрыть все кнопки , а во втором некоторую показать - все кнопки будут скрыты , но одна показана ;
при изменении очерёдности последним сработает скрыть все , в том числе и которую хотели показать .
 
Так и у вас , какое то правило оказывается более общим и переписывающим частное .
Если же пересекающихся правил нет - очерёдность не важна .

Всего записей: 2128 | Зарегистр. 15-07-2013 | Отправлено: 21:36 27-07-2024 | Исправлено: AlAvis, 21:36 27-07-2024
Death_INN

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

Цитата:
Это для иконок меню Гамбургер и Контекстного меню и всё прекрасно работает, но стоит их поменять местами
и стили перестают работать

Это надо смотреть содержимое userChrome.css (трабл вариант) и gamburger_context_menu.css
 
AlAvis

Цитата:
Если же пересекающихся правил нет - очерёдность не важна

У себя делаю так, чтобы очередность была не важна и при пересекающихся правилах

Всего записей: 3404 | Зарегистр. 24-10-2002 | Отправлено: 22:41 27-07-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
AlAvis
Death_INN
Спасибо вам за разъеснение! Действительно "мешал" один параметр. Закоментировав его всё заработало и теперь куда бы я не переставлял строки в userChrome.css всё работает "как надо".
Единственный "косячок" - пропала иконка "Новая вкладка" в icons_context_menu.css но это уже часная проблема, думаю разберусь.
Я взял и "раздербанил" leptonChrome.css (не спрашивайте зачем) из набора Lepton-Proton-Style на два файла: 1) icons_context_menu.css 2) gamburger_context_menu.css
и вроде всё получилось, за исключением небольшого нюанса о котором я писал выше.
Ещё раз СПАСИБО ВАМ БОЛЬШОЕ!

Всего записей: 1437 | Зарегистр. 12-10-2002 | Отправлено: 11:01 28-07-2024 | Исправлено: grom17, 11:17 28-07-2024
Death_INN

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

Всего записей: 3404 | Зарегистр. 24-10-2002 | Отправлено: 12:30 28-07-2024
deannik

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

Всего записей: 533 | Зарегистр. 04-08-2013 | Отправлено: 13:24 28-07-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik
http://forum.ru-board.com/topic.cgi?forum=5&topic=50823&start=3200#17
 

Всего записей: 7264 | Зарегистр. 14-09-2020 | Отправлено: 13:56 28-07-2024 | Исправлено: gutasiho, 14:10 28-07-2024
DeZz



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как то можно отметить (цветом другим к примеру) не загруженные (т.н. "спящие") вкладки?

Всего записей: 1219 | Зарегистр. 23-01-2006 | Отправлено: 17:17 28-07-2024 | Исправлено: DeZz, 17:37 28-07-2024
Death_INN

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

Цитата:
Убрать ореол в текстовых полях и сделать тоньше рамку?

Часть стилизации берет на себя OS. Нужно у нее отобрать права и подгонять по шаблону, если получится
Код для UserContent.css

Всего записей: 3404 | Зарегистр. 24-10-2002 | Отправлено: 18:23 28-07-2024 | Исправлено: Death_INN, 18:31 28-07-2024
Death_INN

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

Цитата:
Как то можно отметить (цветом другим к примеру) не загруженные (т.н. "спящие") вкладки?

Можно. Если не ошибаюсь, то в этом случае элемент с классом tabbrowser-tab получает атрибут pending

Всего записей: 3404 | Зарегистр. 24-10-2002 | Отправлено: 22:34 28-07-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Как подровнять иконки и текст на доп. меню?

Всего записей: 1437 | Зарегистр. 12-10-2002 | Отправлено: 22:41 28-07-2024
DeZz



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

Код:
.tabbrowser-tab:pending .tab-content {
  border-top-style: solid !important;
  border-top-width: 3px !important;
  border-top-color: green !important;
}

 
пробую так, но не выходит (
 
grom17
встречный вопрос - а как Вы прикрутили иконки в это меню?

Всего записей: 1219 | Зарегистр. 23-01-2006 | Отправлено: 09:31 29-07-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
DeZz, атрибут в квадратных скобках без двоеточия .tabbrowser-tab[pending]

Всего записей: 3404 | Зарегистр. 24-10-2002 | Отправлено: 09:57 29-07-2024 | Исправлено: Death_INN, 09:57 29-07-2024
DeZz



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
супер! правда у меня теперь not(:hover) "перебивает" [pending]. Их как то можно "подружить" ?
 

Код:
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  border-top-style: solid !important;
  border-top-width: 3px !important;
  border-top-color: gray !important;
}
 
.tabbrowser-tab[pending] .tab-content {
  border-top-style: solid !important;
  border-top-width: 3px !important;
  border-top-color: white !important;
}

Всего записей: 1219 | Зарегистр. 23-01-2006 | Отправлено: 10:29 29-07-2024
Death_INN

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

Код:
.tabbrowser-tab:not([selected], :hover) .tab-content {
  border-block-start: 3px solid gray;
}
.tabbrowser-tab[pending] > .tab-stack > .tab-content {
  border-block-start-color: white;
}

Не могу тестить (все отрублено), замороженных вкладок не бывает, но думаю, что можно не исключать активную вкладку, т.к. при переключении на нее атрибут pending удаляется

Всего записей: 3404 | Зарегистр. 24-10-2002 | Отправлено: 11:19 29-07-2024 | Исправлено: Death_INN, 11:27 29-07-2024
DeZz



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

Всего записей: 1219 | Зарегистр. 23-01-2006 | Отправлено: 11:53 29-07-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

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