Введение в создание скинов для Opera

Введение

Это руководство научит вас основам создания скина для Оперы. Звучит болезненно, неправда ли? Даже и не думайте - я не собираюсь причинять вред вашему браузеру, я просто помогу персонализировать внешний вид и заполнить альтернативными изображениями кнопки, панели инструментов, фоны, и остальные визуальные элементы, которые вы видите в браузере. Помните, что все эти изображения будут находиться в файловом пакете на вашем жестком диске. В этой статье мы покажем вам как найти такие пакеты на вашем компьютере, что такое пакет скинов по умолчанию, как распаковать и запаковать его, и дадим вам несколько примеров как можно с легкостью внести несколько изменений в скине браузера, таких как, например, замена графического содержания кнопок и заднего фона. Структура статьи:

Расположение файлов скина

Распаковка / упаковка скинов

Стандартный список файлов/папок в пакете скина

Пример 1: изменения кнопки в панели инструментов

Пример 2: добавление кнопки на панель инструментов

Пример 3: добавление фонового изображения для быстрого набора

Расположение файлов скина

Перед тем как начать редактирование скина вам нужно найти необходимые файлы на своем жестком диске. Их расположение различно и зависит от операционной системы, на которой вы используете браузер Opera, и скина который вы хотите отредактировать. Расположение скина, установленного по умолчанию, отличается от тех скинов, которые вы можете скачать с my.opera.com. Следующий список покажет вам расположение файлов разных скинов на разных операционных системах:

Windows:

Стандартный скин можно найти в подкаталоге Skin каталога установки Opera. Обычно это C:\Program Files\Opera\Skin.

Загруженные скины сохраняются в profile\Skin. Выяснить, где находится каталог профиля, можно на странице "Справка > О программе". Также вы, обычно, можете перейти в этот каталог, выбрав "Пуск > Выполнить" и введя %APPDATA%\Opera\profile\Skin.

Linux/Unix:

Стандартный скин можно найти в /usr/share/opera/skin.

Загруженные скины сохраняются в ~/.opera/skin. Имейте в виду, что каталог .opera скрытый, поэтому может потребоваться набрать путь вручную.

Mac OS X:

Стандартный скин можно найти в пакете с приложением, обычно в /Applications/Opera.app/Contents/Resources/Skin (для того, чтобы получить доступ к содержимому пакета, просто щелкните по иконке Opera с нажатой кнопкой Ctrl и выберите Show Package Contents).

Загруженные скины сохраняются в ~/Library/Preferences/Opera Preferences/Skin.

Opera поставляется с двумя скинами: standard_skin.zip, который является Стандартным, и системный, который называется windows_skin.zip или mac_skin.zip. Системный скин не содержит изображений; вместо этого он использует отдельные из стандартного скина. Имена файлов загруженных скинов, как правило, аналогичны именам скинов.

Распаковка и запаковка скинов

Скины упаковываются в zip-архивы (.zip). Во время установки, Opera распаковывает скин и загружает все необходимые изображения из пакета налету - каждое изображение загружается единожды, даже если оно вызывается несколько раз.

Перед тем как вы сможете редактировать скин вы должны распаковать его, используя архиватор типа WinZip или 7Zip. Вам не нужно распаковывать его в какое-то определенное место, так как вам все равно придется запаковывать скин позже. Попробуйте прямо сейчас - найдите стандартный скин браузера Opera и распакуйте его. Структура папок этого пакета (как показано в Opera 9.2x) описывается в следующем разделе.

После редактирования скина вы должны упаковать файлы снова, что бы Опера смогла их загрузить. Сделайте это внутри папки со скином - выделите skin.ini и файлы/папки с изображениями, а затем добавьте их в zip архив.

Для загрузки скинов в Оперу вы должны поместить zip архив в папку, куда загружаются скины, затем запустите Оперу и выберите "Инструменты > Представление" - тогда вы сможете выбрать ваш скин из списка доступных там. Обратите внимание, что если skin.ini находится не в корневой директории zip файла, Опера выдаст сообщение об ошибке "Невозможно продолжить. Пожалуйста выберите скин для вашей версии Оперы."!

Стандартный список файлов/папок в пакете скина

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

Если вы хотите редактировать существующие скины, вам будет полезно знать, где находятся изображения, составляющие разные части интерфейса Оперы. Нижеследующая таблица показывает, какие картинки лежат во всех папках, которые содержит дефолтный скин - эти данные верны для скинов релиза Оперы 9.2 и могут быть верны для некоторых других скинов, которые можно скачать с my.opera.com - но не для всех. Если вы редактируете скин с другой файловой структурой, обычно вы можете сами разобраться, где лежат те или иные файлы, глядя на названия папок или просматривая содержащиеся в них картинки с помощью программы просмотра изображений.

Обратите внимание, что файловая структура скина для Оперы 9.5 бета такая же, как у версий 9.2x, но с несколькими дополнениями. В данном документе мы будем ориентироваться на базовую структуру версий 9.2x, так как структура папок дефолтового скина для 9.5 будет в финальной версии сильно отличаться от теперешней. Мы дадим вам действительное описание структуры когда выйдет финальная версия, так что следите за изменениями.

border/ Содержит изображения для границ рамок и разделителей в диалоговых окнах и рамки вокруг кнопок на панели инструментов.

buttons/ Содержит все изображения касательно кнопок на панели инструментов - они описаны в разделах Skin.ini Boxes и Images.

caption/ Содержит рисунки кнопок уменьшения, восстановления и закрытия окна, которые находятся в правом верхнем углу (левом, если вы используете Mac)

checkbox/ Содержит изображение чекбоксов

contacts/ содержит графику для значков контактов

dialog/ Содержит фоновые изображения для диалоговых окон.

dialog_button_border/ Содержит тени, которые появляются при нажатии кнопок в диалоговых окнах (не используется в версии 9.2 и позже)

dialog_images/ Содержит иконки для некоторых сообщений, например, в диалоговых и предупреждающих окнах

dialog_page/ Содержит изображения для границ и теней вокруг внутреннего фона диалоговых окон

drop_insert/ Содержит изображения которые применяются на объект во время переноса кнопки.

edit/ Содержит графику для полей заполнения таких как поле адреса, поле поиска, дерево, список и многострочные поля. Все это сложно измененять из-за некоторых неизменяемых деталей, используемых операционной системой.

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

icons/ Содержит большую часть иконок, за исключением тех, месторасположение которых описано в других ячейках таблицы

notifier/ Содержит фоновые изображения всплывающих сообщений и внутристраничного поиска.

pagebar_close_button/ Содержит изображения для кнопок закрытия на вкладках.

panel_toggle/ Содержит изображения переключения панелей.

progress/ Содержит несколько индикаторов графика прогресса

push_button/ Содержит основные графические элементы для кнопок OK, Cancel и других, встречающихся в диалоговых окнах, а также выпадающие кнопки в выпадающих полях и полосы прокрутки

push_default_button/ Тоже что и выше, но для кнопки по умолчанию. Эта кнопка, которая используется по умолчанию, когда вы нажимаете Enter.

radio_button/ Содержит графику кнопок-переключателей (radio button)

scrollbar/ Содержит графику для заднего фона полос прокрутки и стрелочек на кнопках сверху и снизу поля прокрутки

scrollbar_knob/ Содержит графику для ползунка прокрутки

selector_button/ Содержит фоновую графику, которая окружает кнопки панели инструментов, графику кнопок выбора панелей и показа панели (для состояний .hover, .selected и .pressed).

smilies/ Содержит изображения смайликов.

speeddial/ Содержит графику для миниатюр быстрого набора, включая иконки, отделитель для поля поиска, трафарет с тенями для диалога настройки быстрого набора и трафарет без теней для систем, не поддерживающих альфа-прозрачность.

startup_dialog/ Содержит графику для заголовка стартового диалога версии 7(больше не используется в теме оформления по умолчанию)

tab_button/ Содержит графику для кнопок панели вкладок на этой самой панели и в диалоговых окнах.

tab_button_bottom/ Содержит графику для кнопок панели вкладок в случае расположения панели внизу окна браузера.

toolbar_button/ Содержит графику фона кнопок стартового диалога версии 7(больше не используется)

trust_and_security_button/ Содержит графику для области вокруг кнопок защита от мошенничества/безопасность в адресной строке (зеленого цвета в версии 9.5.)

window/ Содержит общее фоновое изображение для всех панелей инструментов - смена этого рисунка - это лёгкий путь к персонализации вашего скина для браузера Opera.

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

Пример 1: замена кнопки панели инструментов

В этом примере вы замените кнопку "обновить" на ту что показана на рис.1

Рисунок 1: Новая кнопка "обновить"

Во-первых, распакуйте архив стандартного скина, как это было объяснено ранее. Рисунок, который вы хотите заменить (кнопка панели инструментов), должен находиться в папке buttons/ - поищите там файл с соответствующим названием. Вы наверняка найдёте reload.png - нужный вам рисунок.

Теперь замените старый reload.png показанным ранее(конечно, если хотите, вы можете использовать собственное изображение вместо него).

Чтобы использовать изменённый скин в Opera, он снова должен быть запакован. Поднимитесь на уровень вверх в файловом менеджере, вы окажетесь в корне папки, где находится skin.ini, выберите все файлы, добавьте их в новый zip-архив и дайте ему какое-нибудь легко запоминающееся название.

Теперь положите получившийся zip-файл в директорию скинов Opera, перезапустите Opera и выберите в меню Инструменты>Представление, в списке скинов вы увидите название вашего zip-файла. Выберите его и вы увидите новую кнопку "обновить", как показано на рисунке 2.

Рисунок 2: Opera с изменённой кнопкой "обновить".

Пример 2: добавляем иконку для кнопки панели инструментов

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

В этом примере вы сначала добавите свою кнопку в панели инструментов, затем примените рисунок к этой кнопке. Этот пример менее подробно разъяснён, чем первый, так что вам лучше сначала прочитать первый пример, если вы ещё этого не сделали.

Для добавления кнопки нажмите здесь, потом OK в появившемя диалоговом окне и перетащите кнопку на любую панель. Она должна появиться там, как показано на рисунке 3.

Ссылка кнопки выше уже применяет название изображения "Next page" к новой кнопке - позже мы добавим иконку с этим названием в скин.

Изображение 3: Новая кнопка без иконки.

Далее, распакуйте скин так же, как вы это делали в примере 1 и перейдите в каталог «buttons/» - это наиболее подходящее место для хранения новой иконки. Теперь, конечно же, вам нужно само изображение иконки для кнопки - например, используйте ту, что на рисунке 4.

Изображение 4: Иконка для настраиваемой кнопки «следующая вкладка».

Назовите изображение «nextpage.png» и сохраните его в каталог «buttons/».

Осталось совсем немного для того, чтобы завершить этот пример. Пока что изображение не отобразится, если упаковать и загрузить скин потому, что оно не связано с кнопкой в файле skin.ini. Для этого необходимо проассоциировать изображение с названием кнопки в skin.ini. Откройте skin.ini в текстовом редакторе и прокрутите до секции [Images]. Записи в этой секции имеют следующий формат:
Название изображения = путь/к/изображению.png
Как вы можете заметить, путь указывается относительно размещения файла skin.ini.

Добавьте следующую строку сразу же за [Images] для связи вашей иконки с вашей кнопкой:

Next page = buttons/nextpage.png

Сохраните изменения и закройте текстовый редактор, затем запакуйте файлы и, как уже говорилось, положите zip-архив в папку со скинами Оперы. Теперь перезагрузите Оперу и выберите скин как ранее - на кнопке, которую вы добавили на панель в начале этого примера, должна быть иконка, как показано на изображении 5.

Изображение 5: Новая кнопка, с использованием выбранного изображения

Пример 3: добавление фонового изобрадения в «Быстрый запуск»

В этом примере вы замените белый фон в «Быстром запуске» используя изображение 6 - заполним им как черепицей всю белую страницу.

Изображение 6: Подготовленный кусочек фона для страницы «быстрого запуска».

Опять же, вы должны распаковать скин. Далее, так как вы хотите добавить изображение в «быстрый запуск», положете вышеуказанное изображение в папку «speeddial/» (имя файла изображения speeddialbackground.png).

Далее откройте файл skin.ini в текстовом редакторе. Фон «быстрого набора» изменяется в секции [Speed Dial Widget Skin]. По умолчанию эта секция должна выглядеть так:

[Speed Dial Widget Skin] (Скин виджета «Быстрый набор»)

Padding Left = 1 (отступ слева)

Padding Top = 1 (отступ сверху)

Padding Right = 1 (отступ справа)

Padding Bottom = 1 (отступ снизу)

Border = 1 (Рамка)