Создаем темы для браузеров

Браузер – основной инструмент сетевой работы. Почему бы не раскрасить его в цвета любимой команды или просто текущего настроения? Конечно, существуют галереи, содержащие тысячи готовых тем, но если вам хочется чего-нибудь своего…

Охватить все современные интернет-обозреватели мы вряд ли сможем, поэтому остановимся на трех – Chrome, Opera и Firefox.
Тема для Chrome
Темы для Google Chrome распространяются в виде CRX-файлов. Это архивы, внутри которых находится файл-манифест, содержащий таблицу стилей, задающих внешний вид отдельных элементов интерфейса, а также папка с картинками, задействованными в теме. Надо сказать, что возможностей самовыражения здесь не так чтобы много – изменению поддается только ограниченный набор параметров внешнего вида.
Для создания темы оформления Chrome проще всего воспользоваться онлайновым сервисом Online Chrome Theme Creator (tinyurl.com/bv58n87) или же одним из дополнений, которые можно найти в интернет-магазине Chrome. Оба варианта дают возможность относительно быстро и при минимуме специфических усилий получить неплохой результат.

Онлайновый сервис удобен, поскольку позволяет получить результат без дополнительной установки инструментов. Устроен он достаточно просто. Предусмотрены два режима работы. Basic-режим выполнен в виде мастера, три шага которого включают в себя загрузку фоновой картинки, выбор одного из десятка заготовленных разработчиками вариантов стилей цветового оформления, а затем скачивание и автоматическую установку готового CRX-файла.

Продвинутый режим предполагает ручную настройку цветов отдельных элементов интерфейса и выбор изображений не только для фона, но и для панелей инструментов и закладок или лого в нижнем правом углу. Расширены и опции сохранения – тему можно скачать в виде CRX- или ZIP-файла. Несмотря на некоторые функциональные ограничения, этот редактор – отличный помощник. Более того, он даже поддерживает загрузку CRX-файлов готовых, уже существующих тем оформления, на которые можно опереться в процессе своего собственного творчества.
Среди дополнений для создания тем оформления наиболее проработаны Theme Creator и My Chrome Theme. Первый из них – не что иное как инсталлируемый аналог веб-сервиса Online Chrome Theme Creator, с которым мы только что познакомились.
Конкурент, My Chrome Theme, также использует пошаговый мастер. Первый шаг – установка фонового изображения из файла или напрямую с веб-камеры. На втором шаге определяются цвета элементов интерфейса. Хорошо, что выбор сделан наглядно и просто. Плохо, что палитра предлагаемых цветов ограниченная. Третий шаг – сохранение темы. Нам позволяют либо немедленно инсталлировать ее, либо поделиться ею посредством сайта www.mychrometheme.com. Еще одна функция дополнения – быстрое переключение между созданными темами, которые демонстрируются в виде ленты миниатюр.
Тема для Opera
Скин браузера Opera – это ZIP-архив, в котором содержатся каталоги с графикой для отдельных компонентов интерфейса браузера, а также настроечный ini-файл, который, собственно, и задает все необходимые параметры оформления. Таким образом, для создания собственной темы необходимо наполнить каталоги нужной вам графикой, а затем отредактировать файл skin.ini. Есть и печальные новости: несмотря на давнюю историю обозревателя, каких-либо толковых визуальных редакторов скинов, подобных предлагаемым для Chrome, для Opera так и не появилось. Так что придется разбираться с кодом «врукопашную».

Создать идентификатор для распространения темы Firefox можно на одном из онлайновых сервисов

Скачиваемые темы располагаются в каталоге вашего профиля Opera. Под Windows его можно найти в папке Users\\AppData\Roaming\Opera\Opera\skin. Туда же потом надо будет положить готовый ZIP-файл вашей самодельной темы.

Если вы хотите обойтись минимальным вмешательством во внешний вид браузера, например поменять только фоновую картинку, которая будет выводиться на странице быстрого доступа, вам понадобится создать ZIP-архив, содержащий только два файла: собственно нужное вам изображение в формате PNG и настроечный файл с именем persona.ini. В качестве образца можно взять файл одной из тем, скачанных с сайта Opera. В простейшем случае нам достаточно изменить содержание всего двух секций: Info и Window Image. В первую секцию вписываем название темы и имя автора. Window Image должна содержать имя PNG-файла, который вы планируете использовать для фона.
Если же вы настроены серьезно, берите за основу тему по умолчанию, ZIP-файл которой лежит в папке skins инсталляционного каталога Opera. Поскольку в возможности оформления Opera периодически вносят изменения, отражающиеся в структуре каталогов и настроечного файла, лучше всего работать именно со стандартной темой. Содержимое архива темы – набор каталогов с графикой для различных элементов интерфейса браузера, а также файл skin.ini. Заметим, что, если какой-либо графический элемент не включен в этом настроечном файле, он не будет загружен: вместо него будет использован элемент из стандартной темы по умолчанию.

Править упрощенные темы для Firefox – «Персоны» удобнее всего в дополнении Personas Plus

Файл skin.ini состоит из множества разделов, относящихся к отдельным элементам интерфейса. В каждом перечислены доступные параметры. Сначала идет название параметра, а затем его значение. Как правило, это либо число, либо имя картинки, либо значение цвета, заданное шестнадцатеричным кодом. Посмотреть соответствия цветов и кодов можно в каком-нибудь графическом редакторе или прибегнув к помощи онлайнового сервиса www.colorpicker.com. Подробное описание всех опций, содержащихся в файле skin.ini, можно найти на англоязычной страничке tinyurl.
com/c4ed9sj.
Архив готовой темы в любом случае далее копируется в каталог /skin папки вашего профиля Opera. Дальнейшая установка абсолютно стандартна и ничем не отличается от активации готовой темы, полученной из внешних источников.
Тема для Firefox
Доработать внешний вид Firefox можно с помощью тем, а также «Персон» – упрощенных аналогов тем, изменяющих только некоторые элементы интерфейса. Создание персоны – достаточно тривиальная задача. Использовать для этого лучше всего дополнение Personas Plus. В его настройках понадобится включить отображение пункта меню «Скин пользователя». Редактор такого скина содержит поля, в которых задаются два изображения, применяемые в теме, а также цвета текста. На англоязычной страничке инструкции по созданию персон есть ссылка на закачку специально сделанной заготовки в формате PSD, с помощью которой можно быстро нарисовать корректные картинки в графическом редакторе.
Создание полновесной темы оформления Firefox – более сложное дело. Для начала лучше работать на основе готового проекта. Темы, как и дополнения Firefox, распространяются с помощью контейнеров XPI. Сохранив инсталлятор, распакуйте его – это, опять же, обычный ZIP-архив с другим расширением. В нем, в частности, находятся два RDF-файла, необходимых для корректной установки, а также каталог chrome. В нем, в свою очередь, есть файл с расширением *.jar.
Он-то и содержит все необходимые нам ресурсы. Не обращайте внимания на расширение: это снова ZIP-архив. Внутри него находится ряд каталогов. Нас в первую очередь будут интересовать папки browser и global. Именно в них хранятся файлы иконок панели инструментов и менеджера закладок, фоновых рисунков и таблицы стилей, задающие оформление отдельных элементов интерфейса. При необходимости также можно обратиться к каталогу mozApps, в котором находится дополнительная графика, используемая в различных вспомогательных инструментах браузера.
Далее приступаем к основной части работы: просматриваем каталоги, изготавливаем собственные варианты графических элементов и заменяем ими файлы исходной темы. При необходимости правим код таблиц стилей. Если вы не планируете распространять свою тему, на этом, в принципе, можно остановиться и активировать исправленную тему обычным способом – просто перетащив XPI-файл в окно Firefox.
Если же ваши планы изначально более амбициозны и вы намерены поделиться своей шедевральной темой с другими, понадобится правка установочных RDF-файлов. Как минимум в файле contents.rdf надо прописать имя вашей темы, а в файле install.rdf – версию темы и ее уникальный идентификатор (UUID). Сгенерировать такой идентификатор можно непосредственно в онлайне, например можно запросто сделать это на страничках tinyurl.com/23ewlk или tinyurl.com/cr4a6w8. UP

05.02.2013
Алексей Кутовенко
Опубликовано: Upgrade