Скины Opera своими руками

Введение

Файл скина к программе Opera 7 – это сжатый архиватором zip файл с расширением .zip, который содержит файл "skin.ini" в корне архива и набор картинок, описывающих внешний вид скина.

Файл "skin.ini" содержит полное описание скина, также в том файле указываются ссылки на все остальные файлы в архиве.

Opera 7 по умолчанию содержит файлы скинов "standard_skin.zip" и "windows_skin.zip", standard – это скин по умолчанию, windows – облегченный классический скин, выглядящий как обычный интерфейс Windows.

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

Файл "skin.ini" так же как и другие ".ini" файлы разделены на несколько секций, содержащих одну или более вхождений пар "ключ = значение" Всё это выглядит примерно так:

[Имя секции]

Имя ключа	= значение
Имя еще одного ключа	= значение

...

Вы получите гораздо больше пользы при чтении этого файла, если будете иметь под рукой файлы skin.ini из состава архивов standard_skin.zip и windows_skin.zip.

В любом случае, создание скина часто происходит методом проб и ошибок.

Секция Info

Секция [Info] обычно располагается первой и должна содержать следующее:

Name=имя скина
Author=имя автора
Version=2

Значение ключа Version должно быть 2, в противном случае Opera 7 не будет рассматривать этот скин вообще.

Секция Options

Секция [Options] обычно размещается после секции [Info] и может содержать следующие данные.

Native Skin = 0 или 1

Если вы установите этот ключ в значение 1, Opera будет рисовать элементы управления так же, как это делает система. По умолчанию значение этого ключа – 0, так что вы можете спокойно пропускать этот ключ вообще. Более подробно: если вы выставите значение этого ключа в 1 (как это сделано в скине "windows"), некоторые элементы скина будут отрисовываться кодом, включенным в Opera. Этот код использует системные функции для рисования элементов управления и рамок.

Pagebar max button width =
Pagebar min button width =

Используйте эти ключи для установки минимальной и максимальной ширины (в пикселах) кнопок на панели pagebar. Обычно вы можете пропустить эти ключи, если не хотите их определять.

Fallback foreground = 0 или 1
Fallback background = 0 или 1

Эти ключи определяют, должна ли Opera обращаться к стандартному скину, если элемент foreground или background не найден.

Обычно Fallback foreground должен быть 1 и Fallback background – 0. Другими словами, элементы переднего плана (такие как картинки на кнопках), которые в скине не определены, выбираются из стандартного, но фоновые картинки не отображаются вовсе, если они не заданы в текущем скине.

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

Элементы скина

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

Полный метод означает, что вы будете определять элементы скина в его собственной секции, например:

[Имя элемента скина]
...данные....

укороченный метод означает, что вы будете определять элемент не в его секции, а как вхождение в секции [Images].

[Images]
Имя элемента скина = ...данные...

Если вы посмотрите на файл skin.ini из архива standard_skin.zip, вы увидите, что все картинки для кнопок панелей определены в секции [Images], в то время как элементы, определяющие внешний вид окон, определены полным методом.

Важная вещь, которую нужно понять, что это все сделано для простоты! С точки зрения Opera нет различий между элементом для картинки кнопки Back и элементом для фона окна.

Другими словами, "Back", определенная в секции [Images], может быть также определена в своей собственной секции, состоящей из комплекса девяти картинок, описывающих элемент. Но так как образ обычной кнопки – просто картинка, она определяется в секции [Images], чтобы избежать путаницы в файле скина!

Таким образом, укороченный метод (описание элемента помещается в секцию [Images]) используется, когда элемент состоит только из одной картинки и не требуется гибкость, которую даёт использование своей собственной секции.

Также есть другой укороченный метод, когда описание элемента помещается в секцию [Boxes]. Так же как и секция [Images], секция [Boxes] используется в определенных случаях. Подробнее об этом ниже.

Элемент скина: Полный метод

Когда элемент определяется в полной секции, она может выглядеть так:

[Имя элемента скина]
..данные..

Где данные – одна или более строк вида "ключ = значение"

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

Type = Image или Box или BoxTile. По умолчанию – Image.

Тип Image редко используется для полного метода определения элемента, поскольку он нужен только для элементов с одной картинкой и в этом случае лучше использовать укороченный метод (например, помещение в секцию [Images], как это объяснялось выше). Если вы используете этот тип, ваша единственная картинка должна быть определена в ключе "Tile Center" (см. ниже) и вы должны также определить её ширину и высоту (см. ниже).

BoxTile – наиболее часто используемый тип. Для BoxTile вы можете определить до девяти картинок, используя ключи "Tile" и "Corner", описанные ниже. Эти девять картинок используются для отрисовки полного элемента скина. Если одна или более из картинок пропущены (или отсутствуют соответствующие файлы в архиве), Opera будет производить отрисовку исходя из доступных ей картинок. Например, элемент скина Page Bar tab часто требует только шести картинок.

Тип Box так же, как BoxTile может определять до девяти картинок, однако в отличие от BoxTile картинки в ключах "Tile" не размножаются, а центрируются .

Tile Center	= center.png
Tile Left	= left.png
Tile Top	= top.png
Tile Bottom	= bottom.png
Tile Right	= right.png
Corner Topleft	= topleft.png
Corner Topright	= topright.png
Corner Bottomleft	= bottomleft.png
Corner Bottomright	= bottomright.png

Эти девять ключей определяют разнообразные картинки, которыми отрисовываются BoxTile или Box. Значения справа от знака равенства являются именами файлов, содержащихся где-то в архиве скина (в zip-файле).

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

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

ВАЖНОЕ ЗАМЕЧАНИЕ! Opera будет загружать определенную картинку из файла только один раз, независимо от того, сколько раз она используется в файле skin.ini. Так что не беспокойтесь о многократном использовании картинки, она будет загружена только один раз и не будет влиять на эффективность использования памяти. Также каждый элемент скина загружается в момент его первого использования, чтобы уменьшить время запуска Opera и объем используемой памяти.

Child0 = Имя другого элемента скина
Child1 = Все еще другой элемент скина
Child2 = Все еще другой элемент скина
...

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

ВАЖНОЕ ЗАМЕЧАНИЕ! Если вы используете дочерние элементы, никогда не создавайте "циклы" (т.е. когда элемент каким-либо образом будет родителем самого себя). Opera не обнаруживает такие циклы... и падает :)

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

Margin Left	= 0
Margin Top	= 0
Margin Bottom	= 0
Margin Right	= 0
Padding Left	= 2
Padding Top	= 2
Padding Right	= 2
Padding Bottom	= 2

Эти ключи определяют внешние поля (margins) и внутренние отступы (padding) некоторого элемента. 0 – значение по умолчанию для полей, 2 – для отступов.

К настоящему времени Opera использует эти значения по-разному для некоторых элементов. Например, определение отступа для элемента [Window Skin] НЕ создаст отступ (padding) вокруг окна.

Однако, они будут работать там, где это больше всего требуется: панели, кнопки и картинки.

Для скина панели инструментов, такого как "Mainbar Skin", поля (margins) не используются, и расстояние между границами панели и её содержимым задают отступы (padding).

Для скина кнопки, такого как "Pagebar Button Skin", поля (margins) используются для задания расстояния вокруг кнопки. Padding используется для задания расстояния внутри кнопки вокруг её содержимого.

Для картинок кнопок, например, "Back", поля используются для задания расстояния вокруг картинки.

Также для всех родительских элементов скина дочерние элементы будут отрисовываться после отрисовки содержимого родителя И поля дочернего элемента используются для определения области рисования.

Width =
Height =

Эти ключи используются редко. Так как их значение может изменяться во время работы программы. Например, для элемента [Window Skin] ключи "width" и "height" равняются текущим размерам окна, так что нет смысла определять их в файле скина.

Однако картинки внутри кнопок нуждаются в указании ключей Width и Height, поскольку они используются для определения того, как много места на панели требуется для кнопок. Но почти все такие картинки определяются с использованием укороченного метода внутри секции [Images], где Opera берет ширину и высоту картинки элемента скина из действительных размеров файла этой картинки. Однако существуют случаи, когда требуется указание ключей Width и Height.

Text Bold	= 0 or 1
Text Color	= #rrggbb
Text Underline	= 0 or 1

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

Text Zoom = 0 or 1

Это специальный ключ, который имеет значение только для элементов скина кнопки, и даже когда установлен в 1, будет давать эффект, только если кнопки имеют установленными стиль "Image and text below", система поддерживает масштабирование (windows 2000 и выше) и специальные эффекты включены. См. примеры ниже.

Color = #rrggbb

Этот ключ определяет цвет фона, который рисуется перед отрисовкой элемента.

Colorize = 0 or 1

Этот ключ устанавливается, если элемент скина должен изменяться под воздействием параметра браузера Color Scheme, выбранного пользователем. ВНИМАНИЕ! По умолчанию 1.

Blend = от 0 до 100; 100 значение по умолчанию.

Этот ключ определяет режим смешивания, используемый для отрисовки элемента в состоянии hover. Другими словами, он имеет змысл только когда определяется элемент скина ".hover". (См. ниже объяснения состояний) Если hover-элемент существует, тогда элемент отрисовывается поверх того же, но не-hover элемента, с указанным значением режима смешивания.

Clone = некоторый элемент скина

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

Обратите внимание, что Clone используется для упрощения файла skin.ini, но не для того, чтобы избежать загрузки картинок более чем один раз.

Skin Element: Упрощенный метод, Images

Когда элемент скина имеет тип Image, самый простой путь для его определения – это включить его в секцию [Images], например, так:

[Images]

Back	= small_buttons/general_back.png
Forward	= small_buttons/general_forward.png

...

Вы также можете определить несколько больше параметров, не используя для элемента отдельную секцию:

Имя элемента = filename, colorize, margin left, margin top, margin right, margin bottom

Например:

Back = back.png, 1, 2, 2, 2, 2

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

ВАЖНОЕ ЗАМЕЧАНИЕ! В то время как значение параметра Colorize по умолчанию 1 (включено) при использовании полного метода, этот же параметр при задании элемента в секции [Images] имеет значение по умолчанию 0 (выключено).

Элемент скина: Укороченный метод, Boxes

Мы уже говорили об элементах скина типа Box ранее. Иногда бывает необходимо определить блок, который состоит только из одной картинки, вместо девяти. В этом случае вы можете избежать использования полного метода и взамен поместить определение блока в секцию [Boxes].

Эта секция во многом похожа на [Images], но есть существенное отличие:

Элементы, указанные в секции [Images] будут растянуты по размеру отрисовываемого элемента, а элементы из секции [Boxes] всегда будут просто центрироваться.

Типы и состояния элементов скина

Как уже было сказано ранее, каждый элемент скина имеет имя, по которому он ищется в файле skin.ini. Типичный пример - "Window Skin", который используется для отрисовки фона окна и "Back", используемый для отрисовки кнопки Back.

Кроме имени, элемент скина может иметь определенные модификаторы типа и состояния. Точнее, элемент скина может опционально иметь один модификатор типа и/или один или несколько модификаторов состояния.

Чтобы определить тип и состояние некоторого элемента скина, нужно добавить имя типа и состояния в конец имемни элемента, разделяя их точками. Например, так:

[Images]
Back.large = large/back.png
...
[Pagebar Button Skin.hover]
..данные..

Заметьте, что .large и .hover – расширения имени элемента скина.

В данном примере .large – модификатор типа, .hover – модификатор состояния. Модификатор типа должен идти перед любым модификатором состояния (когда элемент находится под указателем мыши).

Когда Opera отрисовывает элемент скина, она пытается найти элемент с таким именем (в файле скина), который имеет тип и состояние, непосредственно совпадающие с типом и состоянием самого элемента. Если он не найден, Opera использует ближайший похожий элемент, который может быть просто элементом скина – без модификаторов типа или состояния.

В настоящее время доступны такие модификаторы Типа:

.large

Этот модификатор используется для картинок на кнопках, когда пользователь выбрал режим "large images" для панелей инструментов.

.left или .top или .bottom или .right

Эти модификаторы используются для скинов панелей инструментов (например, "Mainbar Skin"). Другими словами, вы можете определить различные параметры для элемента скина в зависимости от его положения.

Доступные модификаторы состояний:

.attention	состояние кнопок на панели page bar, когда страница загрузилась
.disabled	любая недоступная кнопка или любой другой предмет интерфейса
.hover	когда уклазатель мыши проходит поверх кнопки (см. также комментарий к ключу Blend)
.selected	когда кнопка или предмет любой другой интерфейса активизирован (или выбран)
.pressed	когда кнопка нажата
.open	когда что-либо считается открытым, например, пиктограмма папки.

В настоящее время эти атрибуты во многих случаях работают, когда имеет смысл определять некоторые состояния для элемента скина. Например, было бы хорошо, если бы кнопка почты имела атрибут attention, когда приходит новая почта, однако это не работает в версии 7.0. Или, например, Window Skin.hover тоже не работает... Opera не будет перерисовывать окно только потому, что мышь переместилась над ним...

Для заблокированного (disabled) состояния Вам чаще всего не нужно определять что-либо, потому что Opera будет смешивать изображение нормального состояния элемента с изображением фона в любом случае, создавая изображение для заблокированного состояния.

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

Примеры

Несколько примеров, которые показывают, как определять элементы скина.

1. Эффект появления текста на главной панели инструментов (из скина standard_skin.zip).

[Toolbar Button Skin.large]

Type	= BoxTile
Text Zoom	= 1

[Toolbar Button Skin.large.pressed]

Type	= BoxTile
Padding Left	= 3
Padding Top	= 3
Padding Right	= 1
Padding Bottom	= 1

[Images]
...

Back.large	= 2nice/back.png, 1, 0, 0, 0, -13
Forward.large	= 2nice/forward.png, 1, 0, 0, 0, -13

...

Модификатор .large обозначает, что это только для панели, для которой установлено свойство "large images", и так как она не имеет заданных элементов типа tiles или corners, кнопка в действительности не имеет собственной графики, за исключением картинки, определяющей действие, внутри кнопки; которая в свою очередь является отдельным элементом скина и никак не влияет непосредственно на кнопку.

Из-за того, что в первой секции ([Toolbar Button Skin.large]) отступы (padding) не определены, для них используется значение по умолчанию (т.е. 2). Модификатор ".pressed" имеет немного другие параметры, определяющие отступы элемента. Это вызвано тем, что для создания эффекта "нажатости", картинка смещается на один пиксель вниз и вправо.

Элемент Back.large показывает, как картинка для действия Back сделана специально для панели со включенным параметром "large images", и параметры после имени файла определяют, что на эту картинку должен влиять параметр браузера color scheme.

Последний параметр после имени файла определяет нижнее расстояние между элементом и рамкой как -13, и это вместе с параметром Text Zoom используется для создания кнопок панели с эффектом появления текста в нижней части картинки заднего плана. Используемые в данном примере картинки имеют в своей нижней части рисунок отражения картинки (то есть это не какой-то эффект скина, а просто так нарисовано).

Кажется, некоторые авторы скинов не поняли, как этот эффект был реализован. Не забудьте удалить это отрицательное смещение, если вы не хотите пользоваться таким же эффектом.

2. Пример элемента скина поля редактирования (взят из скина standard_skin.zip)

Взгляните на него:

[Edit Skin]

Type	= BoxTile
Margin Left	= 2
Margin Top	= 2
Margin Right	= 2
Margin Bottom	= 2
Padding Left	= 2
Padding Top	= 2
Padding Right	= 2
Padding Bottom	= 2
Tile Left	= edit/left.png
Tile Top	= edit/top.png
Tile Right	= edit/right.png
Tile Bottom	= edit/bottom.png
Corner Topleft	= edit/topleft.png
Corner Topright	= edit/topright.png
Corner Bottomright	= edit/bottomright.png
Corner Bottomleft	= edit/bottomleft.png
Child0	= Edit Interior Skin

[Edit Interior Skin]
Color = Window

Скин поля ввода (edit field) – типичный элемент типа BoxTile, однако обратите внимание на следующее:

Поля (margins) установлены в 2, так что разные поля поиска на панели имеют между собой небольшое расстояние.

Ключ Tile center опущен, так что этот элемент не имел бы внутри ничего, если бы не было ключа Child0, который указывает на новый элемент скина – Edit Interior Skin.

Так как файлы edit/left.png и т.п. сделаны, чтобы создать границу в два пиксела для элемента Edit Skin, это будет соответствовать значению Padding в 2 пикселя и таким образом дочерний элемент Edit Interior Skin будет отрисовываться непосредственно внутри границ.

Элемент Edit Interior Skin включает только один ключ Color, который имеет значение Window. Это одно из двух поддерживаемых предопределенных значений, которые могут быть использованы вместо определения цвета с использованием метода #rrggbb.

Использование значения "Window", вынуждает Opera использовать предопределенное системой значение цвета для внутренности окна. То есть standard_skin.zip хотя и игнорирует многие системные настройки цвета, позволяет использовать системное значение фона окна. Другое предопределенное значение – "Window disabled".

Важным пунктом этого примера является использование ключа Child0. Какзалось, почему бы просто не определить в разделе Edit Skin цвет с использованием ключа "Color = Window" безо всяких дочерних элементов? Причина состоит в том, что весь фон поля ввода должен быть закрашен перед отрисовкой границ. Поскольку в отрисовку границ включается альфа-смешивание, итоговая картинка должна быть такой, чтобы цвет границы всегда смешивался и становился оттенком фонового цвета элемента.

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

Перевод – Сергей Столяров