Перекрашиваем Firefox

Перекрашиваем Firefox

На первый взгляд изменения внешнего вида браузера может показатся не особо нужным, а для кого-то и попросту бесполезным занятием, но на самом деле для вебмастера правильная подсветка кода и удобный интерфейс экономить кучу времени и, что не мало важно, бережёт глаза.

Как стилизовать Firefox

По началу для стилизации ui я использовал дополнение stylish, но после недавнего обновления это дополнение перестало позволять изменять интерфейс и пришлось вернуться к «корням» и вносить изменения по старинке.

Где создавать файлы?

Первое что нужно сделать это создать два css файла
  1. userChrome.css – отвечает за стилизацию ui
  2. userContent.css – отвечает за стилизацию веб страниц
Оба файла должны располагаться в паке chrome вашего профиля. В Windows это %appdata%\Mozilla\Firefox\Profiles\XXXXXXXX\chrome где XXXXXXXX имя вашего профиля.

Содержимое файлов

Само содержимое это Каскадные таблицы стилей с использованием пространства имен (namespace)

В новых версиях объявлять пространство имен уже не нужно. Так что ничего добавлять в начале файла не нужно.

Где искать селекторы?

Есть несколько вариантов просмотра селекторов.

Инструменты браузера

  1. Открыть Инструменты браузера:
    Tools> WebDeveloper> Toggle Tools > Toolbox Options
    Инструменты > Веб-разработка > Инструменты браузера
  2. Перейти в настройки и включить две опции
    1. Enable browser chrome and add-on debugging toolboxes
      Включить инструменты отладки browser chrome и дополнений
    2. Enable remote debugging
      Включить удалённую отладку
Открыть «Инструменты браузера» можно сочетанием клавиш Ctrl+Alt+Shift+I

Затем вы можете пользоваться «Выбрать элемент со страницы» наводя его на интерфейс браузера

Открыть интерфейс как страницу

Для этого через адресную строку браузер перейдите на следующею страницу chrome://browser/content/browser.xul

Посмотреть исходные css файлы

Сами файлы находиться в архиве omni.ja в корневой директории программы.

Мой стиль для Firefox

Написать статью и не поделиться своим стилем было бы мягко говоря не разумно, поэтому держите и мой стиль для Firefox

Внешний вид

Установка

  1. Скачать последнюю версию стиля с github
  2. Распаковать архив
  3. Переместить папку chrome в папку профиля firefox
  4. Перезапустить браузер

Обновления и дополнения

Разуметься стиль будет обновляться и дополняться, поэтому следите за репозиторием, ну и конечно написание Issues и Pull requests не возбраняется.