Статья не моя, я только перевел. Я думаю, что она даст вам общее представление об работе со скинами под браузер Opera. Статья написана под версию браузера 9.5.
Оригинал статьи: "Opera Skinning"
Автор статьи: Lars Kleinschmidt
Вступление
В первой моей статье(мой перевод), я дал вам представление о том, как работать со скинами браузера Opera, включая расположение папок со скинами, о том, как их распаковать и упаковать, как реализовать замену графического элемента (кнопок и фона). В этом наборе статей я рассмотрю еще подробнее как работать со скинами, с большим количеством практических примеров, с подробной инструкцией по файлу skin.ini, и дам несколько советов как создавать более эффектные скины. Эта статья была обновлена под версию браузера Opera 9.5.
Вы имеете доступ ко всем 5 статьям, вы можете просмотреть их по ссылкам выше. Не обязательно читать статьи по порядку - в любой части вы можете найти что-то интересное для себя, не имеет значения, каков ваш уровень работы со скинами, просто чувствуйте себя свободно и читайте статьи которые вас больше интерисуют.
Первая часть в себе содержит:
Оглавление
- Определение расположения папки со скинами
- Распаковка и упаковка скинов
- Структура скина
- Вступление к работе с файлом skin.ini
- Родные и неродные скины
- Замена отсутствующих элементов
- Совместимость скинов
- Список папок и файлов стандартного скина
- Форматы изображений
- Анимации
- Загрузка изображений
Определение расположения папки со скинами
Прежде чем приступить к редактированию скина нужно найти файлы скинов на своём жестком диске. Расположение файлов зависит от вашей операционной системы и скина, который вы хотите редактировать - расположение скина по умолчанию отличаеться от расположения скинов скаченых из Интернета, например от расположения скинов, которые можно скачать с сайта my.opera.com. Следующий список показывает, как зависит расположение папки со скинами от операционной системы:
- Windows:
- Стандартный скин расположен в папке Skin в папке установки браузера Opera - в большинстве случаев это C:\Program Files\Opera\Skin.
- Скаченные из Интернета скины расположены в папке profile\Skin. Чтобы определить, где находится папка profile нужно зайти в меню браузера "Справка" > "О программе". Есть еще один способ найти папку profile, надо зайти в меню "Пуск" > "Выполнить" и ввести %APPDATA% и после нажатия клавиши Enter должна открыться папка Application Data, в которой вы сможете найти папку скаченых скинов, полный путь - %APPDATA%\Opera\profile\Skin .
- Linux/Unix:
- Стандартный скин расположен в папке /usr/share/opera/skin.
- Скаченные из Интернета скины расположены в папке ~/.opera/skin. Заметьте, что папка .opera является скрытой папкой и вам скорее всего придеться вводить путь вручную.
- Mac OS X:
- Стандартный скин расположен в папке /Applications/Opera.app/Contents/Resources/Skin(чтобы получить доступ к папке нужно кликнуть правой кнопкой мыши по значку Opera в папке Applications(Приложения), сделайте Ctrl-клик на ней и выберите Show Package Contents(Показать содержимое пакета), чтобы получить доступ к внутренним файлам браузера Опера.)
- Скаченные из Интернета скины расположены в ~/Library/Preferences/Opera Preferences/Skin.
Изначально Opera содержит 2 скина - standard_skin.zip, который является стандартным, и родной скин, который именуеться windows_skin.zip или mac_skin.zip. Родной скин не содержит никаких изображений; он использует изображения из стандартного скина. Имена скаченых файлов скинов обычно совпадают с именем самого скина.
Распаковка и упаковка скинов
Скины упакованы как zip файлы (.zip). Когда Opera применяет скин, она распаковывает его и загружает необходимые изображения из скина, причем делает она это на лету - каждое изображение загружается только один раз, даже если оно используеться несколько раз из файла skin.ini, это значит, что уже загруженные файлы в оперативную память, не будут повторно загружатся, а сразу использоваться.
Прежде чем приступить к редактированию скина, вы должны распаковать его используя программы, такие как WinZip или 7zip. Вы можете распаковать в любую, удобную для вас папку, ведь вам все равно придеться опять запаковывать. Попробуйте сейчас - найдите и распакуйте стандартный скин браузера. Структура папки скина описана в следующем разделе.
После редактирования скина вам нужно запаковать его обратно, чтобы потом можно было использовать в браузере Opera. Вам нужно будет упаковать всю папку в которой находиться файл skin.ini, вместе со всеми файлами и папками в zip архив.
Чтобы загрузить скин в браузер нужно переместить zip файл в папку для скаченных скинов и выбрать в меню браузера "Инструменты" > "Представление" - появиться список скинов в котором должен быть и ваш. Заметьте, если файла skin.ini нету в папке со скином, то Opera выдаст такое сообщение об ошибке: "Невозможно продолжить. Пожалуйста, выберите скин сделанный для вашей версии браузера"!
Структура скина
После запаковки всех файлов и папок скина в zip файл, вы сможете найти в нем папки содержащие все необходимые изображения и файл skin.ini. Этот файл вы можете отредактировать в любом текстовом редакторе, и отредактировать информацию о скине, такую как его имя, сможете изменить пути к изображениям используемых в скине, в том числе вы можете изменить изображения для каждого элемента пользовательского интерфейса, цвета текста и фона.
Папки содержащие изображения используються скином. Создавать папки не обязательно для работы со скином - они создаються только для удобства и организации хранения данных, то есть, чтобы вам было легче найти нужный элемент.
Содержимое стандартного скина описано в разделе "Папка стандартного скина и список файлов" этой статьи.
Вступление к работе с файлом 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. В Windows вид родного скина будет соответствовать выбранной теме; в Linux интерфейс браузера будет загружаться из Qt toolkit.
Чтобы создать родной скин нужно добавить одну строчку в файл skin.ini и браузер будет использовать визуальные элементы операционной системы.
[Options]
Native Skin = 1
Для обычных скинов просто опускайте этот параметр, то есть не добавляйте эту строчку.
Замена отсутствующих элементов
Если элемент скина отсутствует, тогда вместо того, чтобы показывать пустое место, Opera автоматически загрузит похожий элемент из стандартного скина. Элемент, который не описан в файле skin.ini, будет считаться отсутствующимся, при этом не имеет значения есть ли он в папке скина или нету.
При применении скинов для старых версий часто встречаються случаи, когда необходимые изображения отсутствуют. Чтобы не показывать пустое место Opera проверяет стандартный скин на содержание этого элемента и если находит, тогда отображает его. Стандартные изображения, вставленные, по причине отсутствия какого-нибудь элемента скорее всего не подойдут по стилю с изображениями, которые находяться в вашем скине. Поэтому нужно избегать таких ситуаций.
Эта технология используеться при загрузке родного скина, который входит в стандартный комплект установки. Этот скин не содержит никаких изображений, он содержит только некоторую информацию о прорисовке того или иного элемента, фактические изображения загружаються зи стандартного скина.
Замена отсутствующих элементов может быть отключена для фонового изображения и таких элементов как, кнопки, используя опцию Fallback background и Fallback foreground в разделе [Options] файла skin.ini:
[Options]
Fallback foreground = 1
Fallback background = 1
По умолчанию эти опции включены(1 - включены, 0 - выключены) в любом случае, но не помешает включить эти опции, в случае, если стандартные опции изменены.
Совет: я не рекомендую отключать вам эти опции, так как они могут повлиять на стабильность будущих версий!
Совместимость скинов
Opera может загрузить любой скин сделанный под седьмую версию и новее. Все изображения загрузятся и будут использоваться, а отсутствующие элементы будут загружены из стандартного скина благодаря замене отсутствующих элементов.
Дополнительные изображения - которые новая версия браузера уже не использует - просто будут игнорированы. Они никак не отразятся на загрузке скина.
Список папок и файлов стандартного скина
Если вы хотите создать новый скин, то проще всего начать изменение существующего скина, например, попробуйте поизменять стандартный скин.
Следующая таблица отображает список всех папок стандатного скина, включенного в версию 9.5, и скины скаченные с MyOpera тоже должны быть похожеми, но нет никакой гарантии, что это относится ко всем скачанным скинам. Если скин, который вы пытаетесь изменить имеет другую структуру, отличающуюся от стандартного, тогда попробуйте визуально определить, по именам файлов и папок или по просмотру изображений в программе позволяющей их просматривать.
| Папка | Описание | Изображение |
| a/ | Содержит изображение границы вокруг активного элемента при управлении с клавиатуры. Этот элемент настраивать нельзя! |  |
| account/ | Не используеться в версии 9.5 |  |
| anims/ | Содержит анимации используемые в Быстром наборе и при работе с ссылками. |  |
| backgrounds/ | Содержит фоновые изображения для всех панелей инструментов. |  |
| border/ | Содержит изображение границы, разделителей в диалоговых окнах, и границы вокруг кнопок панели инструментов. |  |
| buttons/ | Содержит все изображения кнопок, которые описаны в файле skin.ini. Также содержит графику для вкладок. |   |
| caption/ | Содержит изображения таких кнопок как, свернуть, восстановить и закрыть |  |
| checkbox/ | Содержит графику пунктов выбора. |  |
| contacts/ | Содержит значки контактов для адресной книги. |  |
| dialog_images/ | Содержит значки для многих сообщений. |  |
| dialog_page/ | Содержит графику для границ и теней вокруг фона диалоговых окон. |  |
| drop_insert/ | Содержит изображение, которое появляеться при перемещении кнопок. |  |
| dropdown/ | Содержит изображение, которое используеться как фон выпадающих меню. |  |
| edit/ | Содержит графику поля редактирования для строки адреса, списков и многострочных текстовых полей. Иногда операционные системы запрещают заменять этот элемент. |  |
| expand_button/ | Содержит значки указателей выпадающих элементов в диалоговых окнах. |  |
| header_button/ | Содержит графику для заголовков. |  |
| icons/ | Содержит все значки. |  |
| link/ | Содержит значки статуса ссылок. |  |
| notifier/ | Содержит фоновое изображение для уведомителя всплывающих окон. |  |
| pagebar_close_button/ | Содержит графику кнопок закрытия вкладок. |  |
| panel_toogle/ | Содержит графику перемещения панелей. |  |
| progress/ | Содержит графику индикатора прогресса загрузки страницы. |  |
| radio_button/ | Содержит графику для пунктов выбора. |  |
| scrollbar/ | Содержит графику для полосы прокрутки. |  |
| scrollbar_knob/ | Содержит графику для главного элемента полосы прокрутки. |  |
| selector_button/ | Содержит изображение фона, которое находиться вокруг кнопок панели инструментов. |  |
| smilies/ | Содержит изображения смайлов. |  |
| speeddial/ | Содержит графику для окна быстрого набора, для окон предпросмотра сайтов, разделителей области поиска по быстрому набору, содержит тени, вместе с диалоговым окном настройки быстрого набора и изображения для операционных систем, которые не поддерживают альфа прозрачность. |  |
| trust_and_security_button/ | Содержит графику для области определения надежности сайта. (зеленый цвет добавлен в версии 9.5) |  |
Форматы изображений
Opera поддерживает PNG, JPEG, BMP и GIF изображения для скинов. В большинстве случаев используют PNG, так как этот формат поддерживает альфа каналы, позволяя отображать некоторые участки изображений прозрачными. Для фоновых изображений используют JPEG потому, что он занимает меньше места, это единственное его преимущество над PNG.
Анимации
Opera поддерживает анимированные GIF и анимированные PNG в APNG формате, APNG это продолжение того GIF только с поддержкой более 256 цветов. Анимации будут видны пока интерфейс браузера загружаеться. Анимированные изображения будут использоваться как и все остальные изображения.
Загрузка изображений
Opera загружает каждое изображение только один раз, не имеет значения сколько раз вы используете одно и тоже изображение в skin.ini, такой же принцип загрузки изображений и на HTML страницах. Это экономит оперативную память. Вы не можете одному и тому же изображению задать разные параметры, когда браузер загружает скин, он использует только первый экземпляр изображения и запоминает его и его параметры. В случае, если вы хотите задать одному изображению разные параметры, для примера, чтобы применить разные цветовые схемы, вам придеться создать несколько копий изображения в разных папках.
