Создание тем оформления для Opera.
Часть 2: Примеры создания скинов

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

Введение

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

Большинство примеров в этой части посвящено редактированию стиля кнопок на панелях инструментов – это обусловлено тем, что они влияют на всегда видимые при настройках по умолчанию элементы, и имеют большинство атрибутов, которые вам придётся часто изменять. При обычных настройках Opera, на панели адреса вы найдёте кнопки без текстовых подписей (Назад, Вперёд, Обновить, …), а также кнопки с текстовыми подписями на Главной панели, которую можно включить в меню «Вид > Панели инструментов». В приведённых ниже примерах я рассмотрю изменение некоторых из них. Чтобы изменения, описанные в этих примерах, вступили в силу, вы должны сохранить файл skin.ini и изменённые картинки, упаковать их в архив со скином, скопировать его обратно в нужное место, затем перезапустить Opera и выбрать обновлённый скин в настройках оформления.

Содержание

Настройка цвета текста кнопок
Цвет фона
Границы
Поля (padding) и отступы (margin) кнопок
Интервал
Тип элементов BoxStretch/BoxTile
Состояние (.hover / .attention / .selected / .pressed)
Расположение (.bottom / .left / .top / .right)
Клонирование
Дочерние элементы
Значки
Большие значки

Настройка цвета текста кнопок

В первом примере изменим цвет текста кнопок на панели инструментов. Это повлияет на кнопки всех панелей инструментов, таких как: главная панель, панель адреса, панель почты и другие.

Откройте файл skin.ini и найдите раздел [Toolbar Button Skin]. Цвет текста там не задан, следовательно, вы должны в первую очередь добавить секцию Text Color = . Значение цвета задаётся в виде шестнадцатеричного значения со знаком «#» в начале.

Добавьте строку Text Color = #FF0000, чтобы задать красный цвет текста:

[Toolbar Button Skin]
Text Color = #FF0000

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

Цвет фона

Для установки цвета фона элемента вы должны добавить параметр Color = в секцию, управляющую данным элементом, и задать цвет, используя шестнадцатеричное значение. Если параметр Color не задан, Opera сделает элемент прозрачным, в результате чего будет просвечивать фон элемента, расположенного под ним.

В секции [Toolbar Button Skin] установите параметр Color = со значением «#0000FF» для добавления синего фона, как показано ниже:

[Toolbar Button Skin]
Color = #0000FF

Это должно привести к следующему эффекту:

Границы

Для отображения границы элемента вы должны добавить два параметра:

Border = устанавливает толщину границы, по умолчанию она равна «0» (без границы). Имейте в виду, что граница будет начинаться на краю элемента и расти внутрь – установка границы шириной 10 не сделает элемент больше, она просто начнёт скрывать графику внутри элемента.
Второй параметр, Border Color = , устанавливает цвет границы. Так же как в Text Color, значение задаётся в шестнадцатеричном виде.

Попробуйте сами – вставьте следующие две строчки в секцию [Toolbar Button Skin], чтобы добавить границу голубого цвета толщиной в 1 пиксель для всех кнопок на панелях инструментов:

Border = 1
Border Color = #0000FF

После применения этих изменений кнопки должны выглядеть следующим образом:

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

Поля (padding) и отступы (margin) кнопок

Поля (padding) устанавливают расстояние между границами элемента и его содержимым; отступы (margin) устанавливают расстояние от границы элемента до соседнего или родительского элемента. Они работают таким же образом, как те же свойства в блочной модели HTML.

Параметры Padding и Margin устанавливаются независимо для каждой из четырёх сторон (Top, Right, Bottom, Left). Значение по умолчанию = 0, а диапазон значений, которые могут быть установлены, не ограничен. Отрицательные значения также допускаются.

В целях демонстрации, желательно установить большие значения полей и отступов, так как это гарантирует, что они будут хорошо видны – это мы и сделаем в данном примере. Секция [Toolbar Button Skin] уже содержит 5 из 8 параметров, таким образом, остаётся добавить всего 3. Установим Padding Top = равным «20» и Margin Right = равным «10», как показано ниже:

[Toolbar Button Skin]
Padding Left = 4
Padding Top = 20
Padding Right = 6
Padding Bottom = 5
Margin Right = 10
Margin Left = 0
Margin Top = 0
Margin Bottom = 0

Теперь вы можете увидеть большое поле (padding) сверху, в синей рамке, и небольшой отступ (margin) между кнопками за пределами рамки:

Чтобы узнать больше об этих параметрах, посмотрите подробные объяснения padding и margin в следующей статье.

Интервал

После того, как мы узнали о влиянии полей и отступов на расстояние от внутренней и внешней границы, можно установить интервал между изображением кнопки и текстом. Для этого необходимо добавить опцию Spacing = и установить расстояние в пикселях.

Этот параметр автоматически добавляет заданный интервал, где это необходимо. Если вы установите в Opera стиль отображения кнопок на панели инструментов «Только значки» (смотрите вкладку «Панели инструментов» в настройках оформления: Инструменты > Оформление...), то интервалы будут полностью проигнорированы. С другой стороны, если вы установите стиль «Значки и текст внизу», интервал добавится под изображением кнопки, а если установить стиль «Значки и текст справа», то он добавится справа от кнопки.

В стандартном скине Opera Spacing = равен «2» для секции [Toolbar Button Skin]; пойдём дальше и изменим это значение на «15», чтобы сделать интервал более заметным, как показано ниже:

[Toolbar Button Skin]
Spacing = 15

Это приведёт примерно к следующему результату:

Тип элементов BoxStretch/BoxTile

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

Чтобы использовать изображения в качестве фона элемента, вы должны сначала задать его тип: Type = . Наиболее часто используемые в стандартном скине типы – BoxStretch и BoxTile.

В элементах BoxTile вы можете использовать в общей сложности девять изображений:

По одному изображению для каждого угла – Corner Topleft, Corner Topright, Corner Bottomright, Corner Bottomleft. Их положение зафиксировано в углах элемента.
По одному изображению для каждой границы – Tile Left, Tile Top, Tile Right, Tile Bottom. Они повторяются, заполняя пространство вдоль каждой границы элемента.
Одно центральное изображение, которое повторяется, заполняя пустое пространство в средней части элемента – Tile Center.

Изображения располагаются следующим образом:

Если вы посмотрите на секцию [Toolbar Button Skin.pressed] в файле skin.ini, то увидите следующий код:

[Toolbar Button Skin.pressed]
Type = BoxTile
Tile Center = selector_button/selector_selected.png
Tile Left = border/simple_border.png
Tile Top = border/simple_border.png
Tile Right = border/simple_border.png
Tile Bottom = border/simple_border.png
Corner Topleft = border/simple_border.png
Corner Topright = border/simple_border.png
Corner Bottomright = border/simple_border.png
Corner Bottomleft = border/simple_border.png

Как видите, для всех углов и границ в стандартном скине используется одно и то же изображение – border/simple_border.png; Tile Center использует другое.

Давайте сделаем кое-что интересное – скопируйте эти 10 строк в секцию [Toolbar Button Skin] для оформления кнопок в нормальном состоянии – теперь скин будет выглядеть так:

Если вы удалите 4 строки, отвечающие за стиль границ (Tile Left, Tile Top, Tile Right, Tile Bottom), затем обновите скин, то заметите, что только углы и центральная часть изображения остались цветными, а границы стали прозрачными:

Области, которые остаются прозрачным, определяются существующими изображениями. В данном примере угловые изображения – 1х1 пиксель, таким образом, область, отведённая для границ, занимает 1px в высоту для верхней и нижней границы, и 1px в ширину для левой и правой границы. Если бы углы изображения были 5px в высоту и 2px в ширину, то высота, зарезервированная для верхней и нижней границы, была бы 5px, а ширина, зарезервированная для левой и правой границы, была бы всего 2 пикселя.

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

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

Изображение определяется как Tile Center, а размер границы, который не будет растянут, задаётся параметром StretchBorder в пикселях, как указано пунктирной линией на рисунке ниже:

Фон панели адреса в стандартном скине установлен параметром BoxStretch, а также StretchBorder со значением «3». Так сделано потому, что три крайних левых пикселя изображения содержат градиент, имитирующий тень:

[Addressbar Skin]
Fallback version = 3
Type = BoxStretch
StretchBorder = 3
Tile Center = backgrounds/addressbar.png

Если установить StretchBorder = 0, градиент тоже растянется:

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

Для разъяснения других типов элементов, читайте раздел «Типы элементов» в третьей части этой серии статей.

Состояние (.hover / .attention / .selected / .pressed)

Читая выше раздел о типах, вы могли заметить упоминание [Toolbar Button Skin.hover]. Добавление .hover к названию раздела говорит Opera использовать этот элемент только при наведении курсора мыши.

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

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

То же происходит и с другими состояниями. Доступные состояния: .hover, .pressed (используется, когда элемент нажат), .selected (используется, когда элемент выбран, например, с помощью сочетания клавиш), .disabled (используется, например, для кнопки "Жезл"/"Вход", если в Opera не сохранён пароль/логин для сайта), .attention (используется, например, для обозначения только что загрузившейся в фоне вкладки или для корзины в панели вкладок, когда всплывающее окно было заблокировано) и .open.

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

Обратите внимание, что не каждый элемент поддерживает все состояния.

Расположение (.bottom / .left / .top / .right)

Наряду с состояниями, описанными выше, имеются также индикаторы расположения. Они используются для определения стиля панелей инструментов и их содержимого в зависимости от их расположения. В стандартном скине, как вы можете заметить, вкладки выглядят по разному в зависимости от того, расположены ли они сверху или снизу. Это потому, что если панель вкладок расположена внизу, то вкладки оформляются с помощью [Pagebar Button Skin.bottom], а секция [Pagebar Button Skin] используется для трёх оставшихся расположений.

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

Давайте добавим новый стиль, который будет использоваться в случае расположения панели вкладок справа. Чтобы это сделать, вы должны добавить соответствующую секцию [Pagebar Skin.right] в файл skin.ini. Обратите внимание, что секция [Tabs Skin] используется не для оформления панели вкладок, а для вкладок в диалогах.

Во вновь созданной секции задайте тип элемента и изображение, как показано ниже:

[Pagebar Skin.right]
Type = BoxTile
Tile Center = backgrounds\dialog.png

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

Как видите, кнопка «Создать вкладку» не выглядит как стрелка, т.к. секция [Pagebar Floating Skin.right] пуста. Чтобы вернуть ей вид стрелки, скопируйте параметры из секции [Pagebar Floating Skin] в [Pagebar Floating Skin.right]:

[Pagebar Floating Skin.right]
Type = BoxTileHorizontal
Tile Left = backgrounds/pagebar_floating_left.png
Tile Center = backgrounds/pagebar_floating_center.png
Tile Right = backgrounds/pagebar_floating_right.png
Padding Top = 0
Padding Bottom = 0
Padding Right = 0
Padding Left = 0
Margin Left = 0
Margin Top = 0
Margin Bottom = 0
Margin Right = -23

Когда вы это сделаете, панель вкладок будет выглядеть так:

Клонирование

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

В качестве значения берётся имя элемента, параметры которого вы хотите клонировать, без квадратных скобок. Для того чтобы нормальное состояние кнопок на панели инструментов выглядело так, будто они находятся в состоянии .hover (эффект наведения курсора), вы должны заменить стандартную секцию [Toolbar Button Skin] этим:

[Toolbar Button Skin]
Clone = Toolbar Button Skin.hover

Кнопки станут выглядеть так:

Так как Clone = копирует все параметры от одного элемента к другому, вы можете заменить их, добавляя к параметру Clone другие опции элемента, который вы копируете, например:

[Toolbar Button Skin]
Clone = Toolbar Button Skin.hover
Tile Center = backgrounds/pagebar.png
Margin Right = 3

Это приведёт к следующему эффекту:

Дочерние элементы

Другим популярным параметром является Child0 = . Эта опция создаёт элемент внутри элемента, указанного вами. Дочерний элемент растягивается до заполнения содержимого родительского элемента. Если заданы границы или углы, то занимаемая ими площадь не будет заполнена, так же, как в случае с «Tile Center» в Type = BoxTile.

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

Найдите секцию [Push Button Skin] и добавьте в неё строку Child0 = Reload. Это приведёт к тому, что кнопки в диалоговых окнах станут выглядеть так:

Вы можете добавить к одному элементу несколько дочерних: первый будет называться Child0 = , второй – Child1 = , и т.д.

Значки

Вы, возможно, уже задавались вопросом, как сказать Opera, какое изображение использовать для значка, используемого в панели инструментов и других местах. Значок «Обновить», упомянутый в предыдущем примере, не имеет своего собственного раздела, так как же он определяется?

В конце файла skin.ini вы можете найти секции [Images] и [Boxes]. Это специальные разделы, которые работают не так, как те, о которых вы знали до сих пор – каждая строка в этих разделах создает новый элемент с одним изображением, назначенным на него.

Строка Panel Search = buttons/search.png создаёт элемент Panel Search и ассоциирует с ним изображение «search.png», расположенное в папке «buttons». Когда такое изображение используется, оно отображается как есть, т.е. его размер не изменяется, и оно не повторяется (не размножается) в любом случае.

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

[Panel Search]
Type = Image
Tile Center = buttons/search.png
Width = 22
Height = 22

Большие значки

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

Перед началом использования больших значков, вам необходимо добавить строку Large images = 1 в секцию [Options]. Теперь в диалоге настроек «Оформление...» должен появиться флажок «Большие значки», который может быть установлен независимо для каждой панели инструментов:

screenshot of Appearance dialog with %22Large images%22 checked

После добавления данного параметра вы должны определить элементы. Это делается добавлением .large к элементу, увеличенную версию которого вы хотите добавить. Для добавления увеличенной версии кнопки «Обновить», вставьте строку Reload.large = large_buttons/reload.png в секцию [Images], где «large_buttons» – папка, в которой должны находиться увеличенные версии значков.

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

Обратите внимание, что в отличие от состояний и расположений, для больших значков нет резервных элементов!