Настройка внешнего вида Firefox в userChrome.css

dreamkz · №4651

Столько полезностей разбросано по всему форуму. Не знал, что можно импортировать в userChrome из другого файла.

Coroner пишет

ZAJIGAEM8 пишет
Coroner Я ваще то не профи. Может пошаговую инструкцию для таких неумех ? Вот это вот ВЫДИРАНИЕ КОДА ИЗ СТИЛЯ и всё такое... что да как ставить...
На фото третий вариант вроде как хорош!
А я там писал что "Или не выдирать."
скрытый текст
Скачиваем по ссылке https://github.com/aris-t2/customcssforfx наборчик
https://habrastorage.org/webt/wt/at/wh/ … hetwlc.png
Распаковываем его куда-нибудь. Нужна лишь папка classic
Дальше всё зависит от того, используете ли Вы свои стили и файл userChrome.css и/или userContent.css
1. Если у Вас уже есть файл userChrome.css со своими стилями:
- Переименовываете скачанный userChrome.css во что-то другое (например userChrome2.css)
- В свой userChrome.css первой строчкой вписываете @import url(userChrome2.css);
- Если имеется свой userContent.css, то переименовываете скачанный в userContent2.css
- В свой userContent.css первой строчкой добавляете @import url(userContent2.css);
- В папку Chrome переносите все скачанные файлы и папки (из папки classic)
2. У Вас нет своих файлов userChrome.css и/или userContent.css
- Создаёте в папке профиля папку Chrome
- В папку Chrome переносите все скачанные файлы и папки (из папки classic)
https://habrastorage.org/webt/5u/xv/3m/ … 6wtw3i.png
Дальше просто открываете блокнотом скачанный файл userChrome2.css или userChrome.css (соответственно для первого и второго случая описанных выше) и видите в нём кучу строк. Те, что начинаются с /* и заканчиваются */ — это комментарии.
Убирая комментарии вы включаете определённые стили. Ненужные — наоборот, с двух сторон ограничиваете символами /* и */
Там это наглядно видно. Например:
Выделить код
Код:
/************************************************************************************************/
/* button in Firefox titlebar - if menubar is disabled (Windows only) ***************************/
/************************************************************************************************/

/* only use one at a time ***********************************************************************/
@import url(./css/buttons/appbutton_in_titlebar.css); 
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only.css);  */ /* --------------------------------- */
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only_dark.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only_grey.css); */
Три стиля закомментированы и выключены. Один раскомментирован, значит включён (первый сверху).
Насколько я сейчас попробовал — он Вам и нужен.
https://habrastorage.org/webt/u8/fm/ew/ … se-bek.png
Во всём файле userChrome.css можете закомментировать ненужные или наоборот, включить что-то себе. Те самые "вкладки вниз", что многие просят", или мячик скачущий туда-сюда заменить на вращающуюся фиговину.
https://habrastorage.org/webt/x2/w-/km/ … nncvmi.png
Но описаний что отвечает за что — нет. Придётся вникать в английские названия и пробовать всё самому.
Там, где помечено only use one at a time — означает что можно выбрать лишь один стиль из нескольких, иначе один перекроет другой и будет работать лишь последний включенный, либо будет каша.

Coroner

Yeesha · №4652

egorsemenov06
Начальная страница - это обычная HTML-страница. Кликаете правой кнопкой по элементу и нажимаете "Исследовать элемент". Далее играетесь с CSS, а получившийся код вставляете в файл userContent.css:

Выделить код

Код:

@-moz-document url(about:newtab) {
    тут ваш код
}

Подсказки там: http://htmlbook.ru/css

Acid Crash · №4653

egorsemenov06 пишет

Помогите пожалуйста
как убрать выпадающее меню
http://i89.fastpic.ru/big/2018/0928/97/ … 161397.jpg

Попробуйте вот так.

Выделить код

Код:

.contentSearchOneOffsTable.contentSearchSuggestionsContainer {display: none !important;}

dreamkz · №4654

Acid Crash пишет

Попробуйте вот так.

Код работает. Поисковых предложений в виде списка нет, но всё равно выпадает серая менюшка с настройками поиска.

dreamkz · №4655

egorsemenov06, здорово, что самостоятельно решили. Только бы ещё серое меню параметров поиска не выпадало. Было бы идеально.

Acid Crash · №4656

dreamkz пишет

Только бы ещё серое меню параметров поиска не выпадало. Было бы идеально.

Как по мне, этот функционал не стОит убирать, но если уж прям так хочется, то пожалуйста.

Выделить код

Код:

#contentSearchSettingsButton {display: none !important;}

dreamkz · №4657

К теме минимализма:

Когда ставишь вкладки ниже адресной строки:

скрытый текст

Выделить код

Код:

/*
 * hide_flashplugin_message_popup
 * разместить вкладки под адресной строкой.
 * при добавлении новых панелей нужное значение может меняться
 * 
 */
#TabsToolbar {
    -moz-box-ordinal-group: 2 !important;
}
#addon-bar {
    -moz-box-ordinal-group: 3 !important;
}

, то кнопки расширений в правой части панели инструментов наплывают на кнопки "Свернуть" "Минимизировать" "Закрыть". И когда нажимаешь на какую-нибудь кнопку расширения, то экран сворачивается. Эти три кнопки можно скрыть следующим кодом.

скрытый текст

Выделить код

Код:

/* Hide min, max, close in title bar */

#titlebar-min, #titlebar-max, #titlebar-close
{ display: none !important; }

/* Hide minimize, restore, close in full screen */

#minimize-button, #restore-button, #close-button
{ display: none !important; }

Вместо "Свернуть" можно кликнуть на панель иконку [firefox]

в панели задач [windows]

. Вместо "Минимизировать" можно дважы кликнуть на пустое место в панели инструментов [firefox]

или панели вкладок. Или просто потянуть окно [firefox]

в любую сторону. А "Закрыть" [firefox]

можно через гамбургер.

sandro79 · №4658

dreamkz пишет

Когда ставишь вкладки ниже адресной строки, то кнопки расширений в правой части панели инструментов наплывают на кнопки "Свернуть" "Минимизировать" "Закрыть".

А разве этим кодом кто-то ешё пользуется? Я им пользоваося ещё на 57 бета, некоторое время.
Проблема с кнопками, возможно проявляется в этом коде только в [windows] 10, в 7 и 8 такого нет.
Используйте или пакет от Aris или код из его пакета: chrome\css\tabs\tabs_below_navigation_toolbar.css.
На 10 не проверял, т.к. ею не пользуюсь, но скорее всего в стилях от Aris проблемы с кнопками быть не должно.

dreamkz · №4659

sandro79, в [windows] 10 тоже нет таких проблем. Но я отключил Menu Bar, поэтому кнопки расширений наплывали на кнопки "Свернуть" и "Закрыть".

sandro79 пишет

А разве этим кодом кто-то ешё пользуется?

Я не понимаю в CSS. Этот код уже устарел?

Отредактировано dreamkz (08-10-2018 12:56:12)

sandro79 · №4660

dreamkz, понял. Да, тот код уже кривоват под 57+ Попробуйте добавить код ниже, значением 22 можно регулировать отступ от кнопок до панели инструментов.
Может не совсем то, но код из пакета от Aris.

скрытый текст

Выделить код

Код:

#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"] {
  margin-top: 22px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
  margin-top: 22px !important;
}

dreamkz · №4661

sandro79, попробовал. Появляется пустая верхняя панель кнопками "Свернуть", "Закрыть", но уже без меню File Edit View History и т.д. Сама по себе эта панель лишняя. А вот интересно, можно ли кнопку "Закрыть" браузер подцепить к панели инструментов? Я откючил закрытие браузера закрытием последней вкладки.

Отредактировано dreamkz (08-10-2018 13:27:58)

Yajkin · №4662

Как изменить цвет окна в firefox quantum ,и сделать его полупрозрачным?

Отредактировано Yajkin (09-10-2018 17:12:00)

MrDvD · №4663

Здравствуйте!

Недавно узнал, что с помощью userContent.css можно создавать анимации для [firefox] . Попробовал - работает.
Но мне захотелось, чтобы избранные закладки выезжали только при выделенной адресной строке. Составил данный код:

скрытый текст

Выделить код

Код:

#nav-bar {
    z-index: 1 !important;
}
#PersonalToolbar {
    margin-top: -23px !important;;
    transition: all 0.4s ease 0s !important;
}
#urlbar[focused="true"] > #PersonalToolbar {    
    margin-top: 0px !important;
    transition: all 0.4s ease 0s !important; 
}

Но почему-то он не работает, если приставить > #PersonalToolbar

Поможете разобраться в данной проблеме?

sandro79 · №4664

MrDvD, если правильно понял, то вот, но там ссылка уже нерабочая, залил архив на Яндекс диск https://yadi.sk/d/rveAQKtMuVodHg

MrDvD · №4665

sandro79, нет, это даёт тот же эффект, что и этот код, но это не то.

скрытый текст

Выделить код

Код:

#nav-bar {
    z-index: 1 !important;
}
#PersonalToolbar {    
    margin-top: -23px !important;
    transition: all 0.4s ease 0s !important;
}
#navigator-toolbox:hover > #PersonalToolbar {    
    margin-top: 0px !important;
    transition: all 0.4s ease 0s !important; 
}

Мне нужно, чтобы когда я нажал на адресную строку у меня выдвинулись закладки, а не при наведении на неё курсором.

Отредактировано MrDvD (10-10-2018 18:52:19)

Vitaliy V. · №4666

MrDvD
немного изменил свой код + добавил анимацию, пробуйте
Скачать

P.S. срабатывает по событию focus а не click ...

Отредактировано Vitaliy V. (10-10-2018 21:08:38)

dreamkz · №4667

Vitaliy V., теперь красота получилась. Плавно всплывает панель. Для небольших мониторов самое оно :rock: Да и вообще всем любителям минимализма. Спасибо!

MrDvD · №4668

Vitaliy V. спасибо вам!

Теперь всё работает как я и хотел.

Garalf · №4669

Vitaliy V.
В предыдущих версиях расширения Adds Toolbar and Buttons была очень удобная кнопка "Обновить". Нельзя ли её возвратьть на место?

Vitaliy V. · №4670

Garalf
А какая у вас версия [firefox] ? В 57+ итак же есть перемещаемая кнопка обновить/стоп/дублировать по скм

dreamkz · №4671

Подскажите, пожалуйста, как подменю "Translate selected text" разместить в основном контекстном меню, вместо названия расширения "S.3 Translator"?

ID контекстного меню "S.3 Translator": #s3google_translator-menuitem-1
ID подменю "Translate selected text": #s3google_translator-menuitem-1 > menupopup:nth-child(1)
(спасибо Viatcheslav за подробную инструкцию)

скрытый текст

dreamkz · №4672

Коменнатрий для таких чайников как я.
После некоторых экспериментов со стилями файл userChrome.css захламился вконец. И уже не помнишь что где находится. Чтобы навести порядок, создал в папке chrome отдельную папку css. В ней создал файл context.css. В этом файле прописаны стили для контекстного меню при клике правой кнопкой мыши.

Теперь все коды из основого файла стилей userChrome.css скопировал в файл context.css. Чтобы коды работали, для этого в userChrome.css задал импорт настроек

Выделить код

Код:

@import url(./css/context.css);

/* DO NOT DELETE THIS LINE */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

Очень важно, чтобы строка импорта @import url начиналась до строки @namespace url. Иначе настройки импортироваться не будут.

Таким же образом из userChrome.css можно перенести в новые файлы css и другие настройки. Что существенно облегчит визуальное восприятие всего того, что вы натворили со стилями в [firefox] :lol:

Отредактировано dreamkz (17-10-2018 16:45:32)

v4386 · №4673

При переключении со Светлой темы на Тёмную, элементы контекстного меню:

скрытый текст

и

скрытый текст

, а также Боковая панель

скрытый текст

не меняют свой цвет и шрифт. Помогите с помощью userChrome.css исправить эту проблему; чтобы Цвет и Шрифт у этих менюшек менялись в зависимости от выбранной темы.

P.S.: И еще одна проблема: как прописать отдельно для Светлой темы, и отдельно для Тёмной, чтобы Цвет папок в Закладках и в Боковой панели закладок менялся в зависимости от включённой темы. Сейчас пользуюсь Кодом, который, любезно, написал мне пользователь форума Vitaliy V. :rock:

скрытый текст

/* Цветные папки в Закладках и в Боковой Панели
treechildren::-moz-tree-image(container),
menu.bookmark-item[container="true"] {
fill: #00bfff !important;
fill-opacity: 1 !important;
}

, так вот, как правильно нужно дописать в этот Код "-moz-lwtheme-darktext" и "-moz-lwtheme-brighttext", чтоб цвет папок менялся в зависимости от включённой темы?

Отредактировано v4386 (18-10-2018 11:33:01)

Acid Crash · №4674

v4386 пишет

, так вот, как правильно нужно дописать в этот Код "-moz-lwtheme-darktext" и "-moz-lwtheme-brighttext", чтоб цвет папок менялся в зависимости от включённой темы?

Приветствую.
Пример поддежки темной темы можно подсмотреть в CustomCSSforFx от Aris-t2
Вот пример для перекраски Адресной строки (109 строка).

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

В теории (которая работает))) за темную тему отвечает вот такая конструкция

Выделить код

Код:

#main-window:not([style*='--lwt-header-image']):not([style*='--lwt-toolbar-field-background-color']):-moz-lwtheme-brighttext

Можете сравнить стоку 7 (для светлой) и 109 (для темной).

v4386 · №4675

Здравствуйте, Acid Crash!
Я не очень-то хорошо разбираюсь (точнее, практически, не разбираюсь) в написании кода, поэтому для меня это тёмный лес. Я попробовал вариации вставки "-moz-lwtheme-darktext" и "-moz-lwtheme-brighttext" в тот код, который я привел в своём прошлом посте - ничего не изменяется. Понятно, что как-то надо прописать это, но как я не знаю. И, к сожалению, тот пример что вы мне приводите, никак не приближает меня к решению этого вопроса.

Полезная информация

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Board footer