Начало...

Установка

Скачайте и установите последнюю версию Mozilla (так же установите DOM Inspector), и выберите classic скин. Вы можете использовать этот же браузер и для просмотра web-страниц, но если что-то произойдет, возможно, вы не сможете использовать Mozilla без повторной установки. Поэтому мы рекомендуем установить вторую копию программы в другую папку(убедитесь, что вы используете разные профили для каждой копии Mozilla).

Извлечение `chrome`

Chrome находится в директории \mozilla\chrome содержащей индивидуальные модули в Jar-файлах. Jar-файлы - это zip-файлы с другим расширением. Вы можете открыть их вашим zip-архиватором, так же как и обычные zip-файлы.

Mozilla устанавливается с двумя скинами, Classic и Modern. Посмотрев в директорию, вы увидите, что там находятся файлы classic.jar и modern.jar. Это и есть скины. В наших уроках мы будем использовать Classic скин как основу. Распакуйте classic.jar в папку \classic (\mozilla\chrome\classic), убедитесь, что структура директорий не нарушилась. Помните, если в какой-то момент вы захотите вернуться к исходному коду, просто распакуйте этот jar-файл снова, поверх тех, что вы изменили.

Теперь все CSS и изображения извлечены, но если вы измените их и запустите Mozilla, то вы не увидите сделанные изменения, потому что все еще настроено для использования jar-файлов. Чтобы Mozilla использовал извлеченные нами файлы в качестве скина, мы должны открыть \mozilla\chrome\installed-chrome.txt в текстовом редакторе. Сделайте резервную копию этого файла, на случай если вы совершите ошибку.

В файле вы увидите список. Задайте поиск для classic.jar. В каждую строку, которая ссылается на classic.jar мы должны внести изменения (примерно в 5 строках). Удалите выделенный текст:

Оригинал
skin,install,url,jar:resource:/chrome/classic.jar!/skin/classic/global/
Измененный
skin,install,url,resource:/chrome/classic/skin/classic/global/

После внесения изменений, сохраните их и запустите Mozilla. Если Mozilla запустилась, и все в порядке, значит все сделано правильно. Если же нет, то вновь откройте installed-chrome.txt и корректно повторите изменения в строках.

Изменение границ и цветов

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

Директории

В \mozilla\chrome\classic\skin\classic находится много различных директорий, которые содержат информацию о скине который поумолчанию входит в состав Mozilla. Наиболее важная директория - \global. Вид поумолчанию элементов управления определяется именно здесь и любые изменения в этой директории затронут все компоненты Mozilla. Если вы хотите изменить внешний вид checkboxes, радио кнопок и линейки прокрутки - то вам сюда.

Следующая директория - \communicator. эта директория содержит все изображения и стили для блоков Mozilla, которые не определены в их собственных индивидуальных директориях. Тут вы можете изменить менеджер закладок и окно профиля.

Три оставшиеся директории очевидны. Они содержат изображения/стили для браузера, почтового клиента и компоновщика.

CSS файлы

CSS файлы в этих директориях указывают браузеру, как показывать кнопки и другие средства управления, где поместить изображения, какие границы и отступы применить к ним, etc. В следующей части давайте изменим стандартную кнопку.

Идите в \mozilla\chrome\classic\skin\classic\global и откройте button.css в вашем любимом текстовом редакторе. Прокрутите вниз до button {. Эта секция определяет стандартную кнопку в ее обычном состоянии (не в фокусе мыши, не недоступна и не выбрана).

Измените background-color: на DarkBlue и color: на White. Сохраните файл и запустите Mozilla. Когда браузер откроется, возможно, вы не увидите ничего особенного. Выберите пункт "Настройки" в меню "Правка" и посмотрите на кнопки там. Они должны быть голубыми с белым текстом.

Изменение изображений

Изображения, используемые на кнопках и в интерфейсе, расположены в тех же самых директориях, что и CSS файлы. Для внесения изменений замените изображения на ваши собственные. У них может быть такой же размер, но это не обязательно. Если вы используете изображения другого размера, то вы также должны внести изменения во все CSS файлы, которые управляют этими изображениями.

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

Создание инсталяционного скрипта

Подготовка к созданию инсталяции

Прежде, чем мы сможем создать инсталяционный пакет, мы должны удалить все ссылки на Classic скин. Скопируем все из \mozilla\chrome\classic\skin\classic в директорию которую назовем , к примеру \mySkin.

Информация о скине

Когда происходит переключение между скинами, то осуществляется предварительный просмотр и отображается некоторая информация относительно скина. Это, то, что мы сейчас собираемся сделать.

Сделайте скриншот вашей темы для Mozilla и создайте изображение размером 438x89 пикселей. Поместите его в \mySkin и назовите preview.png (естественно, если это jpg или gif назовите его preview.jpg или preview.gif соответственно)

Скачайте contents.rdf поместите в \mySkin и откройте в текстовом редакторе. Этот файл - маленькая база данных в формате XML которая используется, чтобы описать скин.

  <!-- List all the skins being supplied by this theme -->
  <RDF:Seq about="urn:mozilla:skin:root">
    <RDF:li resource="urn:mozilla:skin:mySkin/1.0" />

Найдите в коде часть приведенную выше. Измените выделенную синим часть так , чтобы в ней были название вашего скина и его версия. Прокрутите вниз до следующей секции. next section.

  <RDF:Description about="urn:mozilla:skin:mySkin/1.0"
      chrome:displayName="My Skin"
      chrome:accessKey="M"
      chrome:author="Me"
      chrome:description="This is my custom skin for mozilla"
      chrome:name="mySkin/1.0"
      chrome:image="preview.png">

Выделенный синим текст поясняется ниже.

Первая линия должна соответствовать тому, что вы указали в предыдущей секции.
Имя для отображения. Это то, что пользователь видит в панеле настроек в части "Темы".
"Клавиша доступа" - клавиша для активирования скина в панели настроек.
Автор. Поместите здесь свое имя.
Комментарий к изображению для предварительного просмотра.
Поместите название вашего скина и его версию в эту строку.
Ваше изображение для предварительного просмотра (preview.png/preview.jpg/preview.gif) указывается здесь.

The packages section lists which components of the Browser suit that you are modifying. Если у вас также есть скин для Chatzilla, вы должны добавить другую строку схожую с остальными и изменить ее чтобы указать на Chatzilla. Этот список будет включать все наши изменения, после того как мы приведем синий текст в соответствие с теми именем и версией, которые мы указали в предыдущей секции.

<RDF:li resource="urn:mozilla:skin:mySkin/1.0:communicator"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:editor"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:global"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:messenger"/>
<RDF:li resource="urn:mozilla:skin:mySkin/1.0:navigator"/>

В завершение в последней секции файла contents.rdf мы должны сообщить Mozilla для какой версии предназначен этот скин. В этом примере указана версия 1.0, по этому этот скин подойдет только для Mozilla 1.0. Вам придется увеличить номер версии для приведения его в соответствие с версией Mozilla для которой вы его создавали. Если вы укажете здесь неправильный номер версии, то после установки скина и попытки переключиться на него, вы получите сообщение , что данный скин для устаревшей версии. Если это произойдет, то вернитесь к этому шагу и исправьте на ту версию Mozilla, которую вы используете.

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:communicator"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:editor"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:global"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:messenger"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:mySkin/1.0:navigator"/>

Сохраните файл и выйдите из текстового редактора.

Jar-файл

В директории \mySkin, у вас теперь наряду с файлами contents.rdf и preview.png должно быть 5 под-директорий. Выделите их все и упакуйте в ZIP-архив, убедитесь в правильности (не включите директорию \mySkin в ваш архив, в нем должно быть только его содержимое). Создав ZIP-архив, переименуйте его в mySkin.jar.

Содержимое mySkin.jar
contents.rdf
preview.png
\navigator\...
\messenger\...
\global\...
\editor\...
\communicator\...