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

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

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



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
AnTul
Ну, нужно написать тогда автору на github.  
(Я не могу, т.к. забанен там)

Всего записей: 266 | Зарегистр. 04-09-2014 | Отправлено: 19:20 16-11-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как сделать что-бы цвет кнопки "Открыть новую вкладку" становился таким (выделено красным) только при наведении на неё?
 
#tabs-newtab-button > .toolbarbutton-icon {  
    padding: 6px !important;
    max-height: 28px !important;
    max-width: 28px !important;
    background-image: linear-gradient(#444444, #222222) !important;
    transition: opacity 0.25s ease,
                    visibility 0.6s ease,
                    background-color 0.3s ease !important;
}

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

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
В конец добавить, а потом подумать о градиенте
Код:
#TabsToolbar #tabbrowser-tabs #tabs-newtab-button:hover {
  background: #ff0040 !important;
}

Всего записей: 8870 | Зарегистр. 14-09-2020 | Отправлено: 20:25 17-11-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho
Понял, спасибо! Что-то не сразу сообразил о #tabs-newtab-button:hover.

Цитата:
В конец добавить,
не понимаю как это. Вернее не соображу.
 
Сделал так, работает на ура! Спасибо!

Код:
#tabs-newtab-button:hover > .toolbarbutton-icon {  
    padding: 6px !important;
    max-height: 28px !important;
    max-width: 28px !important;
    background-image: linear-gradient(#666666, #333333) !important;
    transition: opacity 0.25s ease,
        visibility 0.6s ease,
        background-color 0.3s ease !important;
}

Хотелось бы ещё менять цвет НАЖАТОЙ кнопки.

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 21:06 17-11-2024 | Исправлено: grom17, 21:15 17-11-2024
kokoss19

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

Цитата:
Хотелось бы ещё менять цвет НАЖАТОЙ кнопки.

Попробуйте так:

Код:
#tabs-newtab-button > .toolbarbutton-icon {
  fill: red;
}


----------
Win7 / FF115

Всего записей: 2174 | Зарегистр. 16-07-2018 | Отправлено: 22:42 17-11-2024
grom17



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

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 11:52 18-11-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17
У вас эта кнопка сложнее светофора на ближайшем перекрестке! fill так и должен работать, он меняет только цвет плюсика.
Индикация состояния нажато-отжато полезна только для кнопок триггерного действия, имеющих два фиксированных стабильных положения, например, кнопка показать-скрыть вертикальный тулбар у Aris-t2. Дело хозяйское.

Всего записей: 8870 | Зарегистр. 14-09-2020 | Отправлено: 14:09 18-11-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho Да, я уже понял. Всё сейчас работает нормально.
Нашёл у себя пару "косяков". Разбираюсь уже. Спасибо!

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 14:21 18-11-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот ещё вопрос: как убрать значёк TWP - Translate Web Pages?
Вернее как убрать (скрыть) я знаю, а вот как убрать пустоту, как на картинке, у меня не получается.
Может у кого есть мысли по этому поводу?


Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 23:13 18-11-2024
kokoss19

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

Цитата:
Вот ещё вопрос: как убрать значёк TWP - Translate Web Pages?  

Настройки TWP  -> Прочее-> Показывать значок в адресной строке

Цитата:
а вот как убрать пустоту, как на картинке, у меня не получается.  

В каком месте пустота? А то я её чёто не наблюдаю!

----------
Win7 / FF115

Всего записей: 2174 | Зарегистр. 16-07-2018 | Отправлено: 23:41 18-11-2024
Smallette

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

Код:
/*Скрытие иконок в адресной строке*/
#urlbar #identity-box,
#urlbar #page-action-buttons,
#urlbar #tracking-protection-icon-container,
#urlbar .urlbar-addon-page-action,
#urlbar #star-button-box {
    opacity: 0 !important;
}
#urlbar:hover #identity-box,
#urlbar:hover #page-action-buttons,
#urlbar:hover #tracking-protection-icon-container,
#urlbar:hover .urlbar-addon-page-action,
#urlbar:hover #star-button-box {
    opacity: 1 !important;
    transition: opacity 100ms ease !important;
}

Всего записей: 403 | Зарегистр. 01-11-2006 | Отправлено: 06:54 19-11-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kokoss19
Цитата:
 В каком месте пустота?
Это я подфотошопил, что-бы показать как хотелось бы.
 
Smallette Спасибо! Я тоже одно время использовал такой эффект, только у меня значки плавно "выезжали" сбоку.
 
Добавлено:
kokoss19
Цитата:
Настройки TWP  -> Прочее-> Показывать значок в адресной строке


Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 10:29 19-11-2024 | Исправлено: grom17, 22:44 20-11-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Самая простая кнопка перезапуска браузера. Создать закладку на
Код:
about:restartrequired
и стилем назначить ресурсную иконку
Код:
/* userChrome.css */
.bookmark-item[label="Restart Required"] image {
    padding: 0 0 16px 16px !important;
    background-image: url("chrome://global/skin/icons/reload.svg"); !important;
}
.bookmark-item[label="Restart Required"] .menu-iconic-text {
    font-family: cursive; !important;
    color: #ff0040 !important;
}
Если язык браузера не английский, в строке [label= введите отображаемое у вас название закладки.
 

Всего записей: 8870 | Зарегистр. 14-09-2020 | Отправлено: 12:20 19-11-2024 | Исправлено: gutasiho, 15:43 19-11-2024
AlAvis

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Похоже в 133 сломали z-index .

Всего записей: 2483 | Зарегистр. 15-07-2013 | Отправлено: 15:36 19-11-2024
DeZz



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

Всего записей: 1356 | Зарегистр. 23-01-2006 | Отправлено: 21:43 19-11-2024 | Исправлено: DeZz, 21:43 19-11-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
DeZz
Код:
/* userChrome.css */
/* "Set Image as Desktop Background..." Item style */
#context-setDesktopBackground {
/*    display: none !important;        /* hide item */
    color: red !important;                /* font color */
    font-weight: bold !important;     /* bold */
    font-family: cursive;                  /* font type */
}

Всего записей: 8870 | Зарегистр. 14-09-2020 | Отправлено: 09:15 20-11-2024 | Исправлено: gutasiho, 09:16 20-11-2024
DeZz



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho
Работает. Спасибо за доп. варианты по кастомизации!

Всего записей: 1356 | Зарегистр. 23-01-2006 | Отправлено: 10:46 20-11-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Можно ещё так сделать, тогда будут подсвечиваться все сроки тем-же цветом где назначен цвет шрифта:

Код:
/* Подсведка акцентным цветом контекстного меню при наведении мышкой */
 
@-moz-document url-prefix("chrome:"), url-prefix("about:") {
:root {
    --v-menupopup-item-min-height: 24px;
    --v-menupopup-item-padding-inline: 8px;
    --v-menupopup-text-inline-start: 4px;
    --v-menupopup-icon-fill-opacity: 1;
    --v-arrowpanel-color: var(--menu-color, var(--arrowpanel-color, FieldText));
    --v-arrowpanel-background: var(--menu-background-color, var(--arrowpanel-background, Field));
    --v-arrowpanel-border-color: var(--menu-border-color, var(--arrowpanel-border-color, ThreeDShadow));
    --v-panel-separator-color: var(--menu-border-color, var(--panel-separator-color, ThreeDShadow));
    --v-arrowpanel-dimmed: var(--menuitem-hover-background-color, var(--arrowpanel-dimmed, color-mix(in srgb, currentColor 20%, transparent)));
    --v-arrowpanel-dimmed-further: var(--menuitem-hover-background-color, var(--arrowpanel-dimmed-further, color-mix(in srgb, currentColor 10%, transparent)));
}
:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem)[_moz-menuactive="true"] {
    background-color: var(--v-arrowpanel-dimmed) !important;    
  }
}

Может здесь есть (а может нет) лишние строки или неточности (поправьте, кого замнтересует), не проверял (пока некогда), но это работает.

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



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

Код:
:root {
  --v-menupopup-item-min-height: 26px;
  --v-menupopup-icon-fill-opacity: 1;
  --v-arrowpanel-dimmed:  
        var(--menuitem-hover-background-color,  
        var(--arrowpanel-dimmed, color-mix(in srgb,  
        currentColor 20%, transparent))); }
:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem)[_moz-menuactive] {
        background-color: var(--v-arrowpanel-dimmed) !important;    
}

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



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Такой вопрос на сон грядущий: обратил внимание что текст в меню (три нижние строки) отличается от остального.
Через "Инспектор" не смог добиться прозрачности текста, что-бы выровнять с остальным. Помогите кто чем может.

Всего записей: 1633 | Зарегистр. 12-10-2002 | Отправлено: 22:42 20-11-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