Создание тем оформления для Opera.
Часть 1: Введение

Страницы: 1/5: Введение – 2/5: Примеры создания скинов – 3/5: Структура skin.ini – 4/5: Описание элементов skin.ini – 5/5: Советы и хитрости

Предисловие

В моей первой статье о темах оформления Opera я сделал краткое введение в мир скинов Opera, в том числе рассказал о том, где можно взять файлы скина, как распаковывать и упаковывать их, а также привёл несколько примеров замены базовой графики (например, кнопок и блоков фона). В этой серии статей я пойду намного глубже в тему – представлю вам большое количество практических примеров, подробное руководство по файлу skin.ini, описание элементов, а также некоторые советы и приёмы создания более эффективных скинов. Статья обновлена для Opera 9.5.

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

Содержание первой части выглядит следующим образом:

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

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

Windows:

стандартный скин можно найти в папке skin в каталоге установки Opera, в большинстве случаев это должно быть C:\Program files\Opera\skin;
загруженные темы хранятся в каталоге профиля, в папке profile\skin. Выяснить, где находится каталог profile, вы можете в меню Справка → О программе или перейдя по ссылке opera:about – в разделе Пути → Папка Opera указан точный адрес каталога профиля. В обычном варианте установки (многопользовательском) вы можете быстро перейти к этой папке, нажав кнопку Пуск → Выполнить и введя %appdata%\Opera\Opera\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 (Стандартная Windows) или mac_skin.zip (Native MacOS skin). Нативный скин не содержит изображений – он берёт их из стандартной темы. Название загруженных файлов тем оформления, как правило, похоже на имя скина.

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

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

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

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

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

Структура скина

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

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

Содержимое стандартного скина Opera описано в разделе "Список папок/файлов стандартного скина" данного руководства.

Введение в skin.ini

Файл skin.ini, расположенный в корне каждого скина, является управляющим и (или) конфигурационным файлом скина. Он определяет служебную информацию, общие параметры, а также параметры каждого элемента, используемого в скине.

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

[Info]
Name=Opera7 Standard Skin
Author=Opera Software
Version=3
Preview Image=

Name и Author – устанавливают название темы и её автора; они будут отображаться в диалоговом окне, показываемом вам после загрузки темы и в списке тем диалогового окна "Оформление";
Version= – определяет версию используемого файла skin.ini; это значение не должно использоваться для указания версии скина, в скинах, созданных для Opera 9.5 или позднее, оно должно быть установлено на 3;
Preview Image= – не используется, этот параметр можно опустить.

Следующим разделом этого файла идет секция [Options], определяющая общие параметры, например является ли скин нативным (см. раздел ниже), а также остальные секции, описывающие элементы скина. Мы узнаем больше об этих разделах далее в данной серии статей.

Нативные/нормальные скины

Opera предлагает два типа скинов: нативные и нормальные. Основные различия между ними заключаются в следующем:

Нормальные скины очень настраиваемы, поскольку они позволяют персонализировать почти всё — изображения кнопок, фоны, кнопки в диалогах, полосы прокрутки и остальные элементы. Они позволяют придать Opera свой собственный стиль, независимо от используемой операционной системы, и от того, как выглядят другие приложения.

Нативные темы используют элементы операционной системы для большинства элементов — только изображения кнопок устанавливаются в скине. Все остальные элементы, такие как фон и диалоги взяты из операционной системы, в которой они находятся. Это делает Opera более похожей на родное для этой операционной системы приложение и способствует более эффективной интеграции с другими приложениями в системе.

Нативные темы поддерживаются на всех операционных системах, где работает Opera. В Windows внешний вид нативного скина контролируется используемой темой оформления Windows; на Linux Opera рисует нативные элементы посредством Qt-инструментария.

Чтобы сделать скин нативным, необходимо добавить следующую запись в skin.ini, которая автоматически включит нативность скина для текущей операционной системы:

[Options]
Native Skin = 1

Для нормальных тем просто опустите эту строку – Opera по умолчанию будет считать её нормальной (не нативной).

Режим совместимости

Если в скине отсутствует элемент, то вместо отображения пустого пространства Opera автоматически загрузит его из стандартной темы. Элемент считается отсутствующим, если нет описывающей его строки в skin.ini – не имеет значения, присутствует ли изображение для этого элемента внутри пакета скина или нет.

Отсутствующие изображения часто встречаются, когда скин был сделан для предыдущей версии Opera и, соответственно, отсутствуют для недавно добавленных кнопок. Чтобы избежать показа пустого пространства, Opera проверит, содержит ли стандартный скин этот элемент, и, если оно есть, отобразит этот значок. Это позволяет избежать нарушения функциональности из-за отсутствия кнопок, хотя и может привести к несогласованности стиля кнопок.

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

Режим совместимости может быть отключен отдельно для изображений переднего и заднего плана (например, изображения кнопок, кнопки в диалогах, и т.д.) с использованием настроек Fallback background и Fallback foreground в разделе [Options]:

[Options]
Fallback foreground = 1
Fallback background = 1

По умолчанию оба параметра включены (1), поэтому вам необходимо добавить эти строки только если настройки по умолчанию были изменены.

Примечание. Не рекомендуется изменять этот параметр, т.к. это может нарушить прямую совместимость!

Прямая и обратная совместимость

Opera может загрузиться с любым скином, сделанным для Opera 7 или более новой. Все изображения, присутствующие в скине, будут отображаться, а отсутствующие – загружаться из стандартной темы, благодаря режиму совместимости, как описано выше.

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

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

Если вы хотите создать новый скин, то проще всего начать с редактирования существующего, например стандартного, скина.

Следующий список папок актуален для стандартной темы, включённой в Opera 9.5x. Он применим для большинства тем, которые вы можете скачать с My Opera, однако нет гарантии, что он применим для всех из них. Если скин, который вы пытаетесь редактировать, имеет отличную от стандартной структуру папок, в большинстве случаев вы можете выяснить, где находятся искомые файлы, глядя на имена папок и просматривая файлы изображений (при условии, что создатель скина использовал логическую систему именования файлов и структуры).

Папка	Описание	Предпросмотр
a/	Содержит границы, появляющиеся вокруг активных элементов при клавиатурной навигации. Не желательно изменять!
account/	Не используется Opera 9.5
anims/	Содержит анимацию, используемую в различных местах интерфейса, например в Экспресс-панели и в Opera Link
backgrounds/	Содержит фоновые изображения для всех панелей инструментов
border/	Содержит изображения границ для панелей инструментов, разделителей в диалоговых окнах и границ кнопок на панелях
buttons/	Содержит все изображения кнопок на панелях (они описаны в секциях [Boxes] и [Images] файла skin.ini) и графику для кнопок вкладок на панели вкладок
caption/	Содержит графику для кнопок "Свернуть", "Восстановить", "Закрыть", расположенных справа от панели меню или слева, если вы используете Mac
checkbox/	Содержит графику для чекбоксов
contacts/	Содержит значки контактов
dialog_images/	Содержит значки для некоторых сообщений, например, в диалоговых и предупреждающих окнах
dialog_page/	Содержит изображения границ и теней вокруг внутреннего фона диалоговых окон
drop_insert/	Содержит изображения, которые появляются на объектах во время перетаскивания кнопок
dropdown/	Содержит изображение, используемое как фон выпадающих списков
edit/	Содержит графику для редактируемых полей, таких, как поле адреса, поле поиска, дерево, список и многострочные поля. Эту графику довольно сложно изменять из-за некоторых неизменяемых деталей, используемых операционной системой
expand_button/	Содержит изображения стрелок, используемые на расширяемых элементах в диалогах
header_button/	Содержит изображения для заголовков. Например, их можно найти сверху в древовидном представлении почты и настроек
icons/	Содержит все значки (иконки)
link/	Содержит значки статуса для Opera Link
notifier/	Содержит фоновые изображения всплывающих сообщений и внутристраничного поиска
pagebar_close_button/	Содержит изображения для кнопок закрытия на вкладках
panel_toggle/	Содержит изображения переключателя боковой панели
progress/	Содержит графику индикаторов прогресса
radio_button/	Содержит графику радиокнопок
scrollbar/	Содержит изображения стрелок на кнопках полосы прокрутки
scrollbar_knob/	Содержит изображения ползунка полосы прокрутки
selector_button/	Содержит фоновую графику, окружающую кнопки панели инструментов и переключателя боковой панели (для состояний .hover, .selected и .pressed)
smilies/	Содержит все изображения смайлов
speeddial/	Содержит графику для эскизов экспресс-панели, включая иконки, разделитель под полем поиска, подложку с тенью для диалога настройки экспресс-панели и без тени – для систем, не поддерживающих альфа-прозрачность
trust_and_security_button/	Содержит графику для области вокруг кнопок защиты от мошенничества/безопасности в адресной строке (зеленого цвета в версии 9.5)

Форматы изображений

Опера поддерживает PNG-, JPEG-, BMP- и GIF-изображения для скина. В большинстве случаев вы будете использовать PNG-изображения, так как они поддерживают альфа-каналы, что позволяет использовать частичную прозрачность в изображениях. Для фоновых изображений иногда лучшим выбором будет формат JPEG, степень сжатия которого немного лучше, чем PNG.

Анимации

Опера поддерживает анимированные GIF- и анимированные PNG-файлы в APNG формате. APNG является предпочтительным, т.к. GIF поддерживает только 256 цветов. Анимация будет проигрываться в пользовательском интерфейсе Opera при загрузке. Анимированные изображения используются в скине так же, как любое другое изображение.

Загрузка изображений

Опера будет загружать каждое изображение только один раз, независимо от того, как часто оно упоминается в skin.ini, таким же образом, как и в HTML-документе. Это экономит память, но в то же время несёт с собой некоторые проблемы. В частности, вы не можете использовать одно изображение несколько раз с различными параметрами, применяемыми к нему, т.к. при загрузке скина Opera возьмёт первый найденный экземпляр картинки и запомнит его параметры. Следовательно, если вы хотите применить одно и то же изображение с различными параметрами, например в одном месте с включённым параметром Colorize, а в другом – с выключенным, вам придётся использовать две различные копии изображения в разных местах.