Примечание.
Этот вариант не является окончательным, но вы можете приложить свою руку, чтобы сделать его таким. Для этого просто пришлите описание того, что вам не понравилось в этом переводе по адресу cancel@gorodok.net. Будет совсем хорошо, если вы напишете, почему вам присланное не понравилось. Оригинал этого текста на английском языке доступен по адресу http://my.opera.com/customize/skins/specs/ Перевод производился "поабзацно". Свежу. версию этого файла можно всегда взять отсюда. Может быть стоит добавить сюда дополнительные пункты с описанием всех параметров из какого-либо стандартного скина.

Хроника версий

Opera 7 Skin specifications (русский перевод)

Оригинал статьи – Opera 7 Skin specifications

Перевод на русский – Сергей Столяров

Введение

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

Файл "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], может быть также определена в своей собственной секции In other words, "Back" is specified under [Images], but it could just as well have been its own section, состоящей из комплекса девяти картинок, описывающих элемент. Но с того момента, когда образ обычной кнопки – просто картинка, она определяется в секции [Images], чтобы избежать беспорядка в файле скина!

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

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

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

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

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

Где данные – одно или более вхождение пар "ключ = значение"

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

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

Тип 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 используется для того, чтобы избежать повтора одних и тех же же данных для похожих элементов. Фактически будут вставлены ключи из указанного элемента.

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 [пока неизвестно], [поле слева], [смещение по вертикали], [поле справа], [положение надписи]

Кроме того, это используется для простоты, поскольку некоторые скины хотели бы чтобы разнообразные картинки на кнопках придерживались цветовой схемы и имели нестандартные поля, и при этом скины избегают использовать полный метод задания элемента. Again, this is just used for simplicity, since some skins would like various button images to adhere to the color scheme and have non-standard margins, and still avoid having to use the full section method.

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

Элемент скина: Укороченный метод, 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 не будет перерисовывать окно только потому, что мышь переместилась над ним.

For disabled state, you normally don't have to specify anything, because Opera will blend the non-disabled skin element into the background anyway, creating a disabled look for it.

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

I sugged you look at the standard skin.ini file and try things out.

-->

Примеры

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

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

Скин поля редактирования – типичный элемент типа 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, и поскольку внутренность заполняется точно внутри границ (потому что размер внутренности равен двум пикселам), границы отрисовываются и смешиваются независимо от того, какая картинка находится под полем редактирования. Это имеет желаемый эффект, когда поле редактирования на странице отбрасывают тень на фоновой рисунок и выглядят приятнее.
(*Комментарии на этот бред принимаются*)   aster