Створення тем оформлення для opera
У цій частині ви познайомитеся з файлом налаштувань skin.ini. розібравши кілька загальних прикладів зміни різних ділянок скіна Opera. У третій частині цієї серії статей буде дано вичерпний опис, який роз'яснює, за що відповідають різні елементи в skin.ini. але я думаю, що розгляд кількох прикладів - більш ефективний спосіб оволодіння мистецтвом вмілого поводження з файлом skin.ini.
Налаштування кольору тексту кнопок
Відкрийте файл skin.ini і знайдіть розділ [Toolbar Button Skin]. Колір тексту там не вказано, отже, ви повинні в першу чергу додати секцію Text Color =. Значення кольору задається в вигляді шістнадцятирічного значення зі знаком «#» на початку.
Додайте рядок Text Color = # FF0000. щоб задати червоний колір тексту:
Кнопки на панелі інструментів тепер повинні виглядати наступним чином:
Для установки кольору фону елемента ви повинні додати параметр Color = в секцію, керуючу даними елементом, і задати колір, використовуючи шістнадцяткове значення. Якщо параметр Color не заданий, Opera зробить елемент прозорим, в результаті чого буде просвічувати фон елемента, розташованого під ним.
У секції [Toolbar Button Skin] встановіть параметр Color = із значенням «# 0000FF» для додавання синього фону, як показано нижче:
Це повинно привести до наступного ефекту:
Для відображення кордону елемента ви повинні додати два параметри:
- Border = встановлює товщину кордону, за замовчуванням вона дорівнює «0» (без кордону). Майте на увазі, що кордон буде починатися на краю елемента і рости всередину - установка кордону шириною 10 зробить елемент більше, вона просто почне приховувати графіком всередині елемента.
- Другий параметр, Border Color =. встановлює колір кордону. Так само як в Text Color. значення задається в шістнадцятковому вигляді.
Спробуйте самі - вставте наступні два рядки в секцію [Toolbar Button Skin]. щоб додати кордон блакитного кольору товщиною в 1 піксель для всіх кнопок на панелях інструментів:
Після застосування цих змін кнопки повинні виглядати наступним чином:
Щоб додати складніші кордону, ви можете використовувати картинки - як це зробити, описано нижче в цьому документі.
Поля (padding) і відступи (margin) кнопок
Поля (padding) встановлюють відстань між кордонами елемента і його вмістом; відступи (margin) встановлюють відстань від кордону елемента до сусіднього або батьківського елемента. Вони працюють таким же чином, як ті ж властивості в блокової моделі HTML.
Параметри Padding і Margin встановлюються незалежно для кожної з чотирьох сторін (Top, Right, Bottom, Left). Значення за замовчуванням = 0, а діапазон значень, які можуть бути встановлені, не обмежений. Негативні значення також допускаються.
З метою демонстрації, бажано встановити великі значення полів і відступів, так як це гарантує, що вони будуть добре видні - це ми і зробимо в даному прикладі. Секція [Toolbar Button Skin] вже містить 5 з 8 параметрів, таким чином, залишається додати лише 3. Встановимо Padding Top = рівним «20» і Margin Right = рівним «10», як показано нижче:
Тепер ви можете побачити велике поле (padding) зверху, у синій рамці, і невеликий відступ (margin) між кнопками за межами рамки:
Щоб дізнатися більше про ці параметри, подивіться докладні пояснення padding і margin в наступній статті.
Після того, як ми дізналися про вплив полів і відступів на відстань від внутрішньої і зовнішньої кордону, можна встановити інтервал між зображенням кнопки і текстом. Для цього необхідно додати опцію Spacing = і встановити відстань в пікселях.
Цей параметр автоматично додає заданий інтервал, де це необхідно. Якщо ви встановите в Opera стиль відображення кнопок на панелі інструментів «Тільки значки» (дивіться вкладку «Панелі інструментів» в настройках оформлення: Інструменти> Оформлення.), То інтервали будуть повністю проігноровані. З іншого боку, якщо ви встановите стиль «Значки та текст внизу», інтервал додасться під зображенням кнопки, а якщо встановити стиль «Значки та текст праворуч», то він додасться праворуч від кнопки.
У стандартному скіни Opera Spacing = дорівнює «2» для секції [Toolbar Button Skin]; підемо далі і змінимо це значення на «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. то побачите наступний код:
Як бачите, для всіх кутів і кордонів у стандартному скіни використовується одне і те ж зображення - 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 в пікселях, як зазначено пунктирною лінією на малюнку нижче:
Якщо встановити StretchBorder = 0. градієнт теж розтягнеться:
Ці два типи мають свої переваги і недоліки, і який з них підходить краще залежить від ситуації. Більшість елементів, які можна оформити, використовуючи BoxTile. також можуть бути оформлені за допомогою BoxStretch. до того ж останній, в більшості випадків, швидше створити, тому що потрібно всього одне зображення, а не дев'ять.
Стан (.hover / .attention / .selected / .pressed)
Читаючи вище розділ про типи, ви могли помітити згадка [Toolbar Button Skin.hover]. Додавання .hover до назви розділу говорить Opera використовувати цей елемент тільки при наведенні курсору миші.
Параметри, які використовуються для визначення властивостей станів такі ж, які використовуються для будь-якого іншого елемента.
Стан наведення отрісовивается поверх нормального, таким чином, якщо ви використовуєте елементи з прозорістю для стану .hover. то елементи нормального стану будуть просвічувати крізь них.
Так як стану отрісовиваємих поверх нормального, немає необхідності вказувати поля і відступи знову, за винятком випадків, коли вам це необхідно.
Зверніть увагу, що не кожен елемент підтримує їхні капітали.
Розташування (.bottom / .left / .top / .right)
Поряд з станами, описаними вище, є також індикатори розташування. Вони використовуються для визначення стилю панелей інструментів і їх вмісту в залежності від їх розташування. У стандартному скіни, як ви можете помітити, вкладки виглядають по різному в залежності від того, чи розташовані вони зверху чи знизу. Це тому, що якщо панель вкладок розташована внизу, то вкладки оформляються за допомогою [Pagebar Button Skin.bottom]. а секція [Pagebar Button Skin] використовується для трьох, що залишилися розташувань.
Якщо стиль для поточного розташування елемента доступний, то Opera використовуватиме його, в іншому випадку буде використаний загальний стиль панелі.
Давайте додамо новий стиль, який буде використовуватися в разі розташування панелі вкладок праворуч. Щоб це зробити, ви повинні додати відповідну секцію [Pagebar Skin.right] в файл skin.ini. Зверніть увагу, що секція [Tabs Skin] використовується не для оформлення панелі вкладок, а для вкладок в діалогах.
У новоствореній секції задайте тип елемента і зображення, як показано нижче:
Після додавання цієї секції в ваш скін і розташування панелі вкладок праворуч, вона повинна виглядати наступним чином:
Як бачите, кнопка «Створити вкладку» не виглядає як стрілка, тому що секція [Pagebar Floating Skin.right] порожня. Щоб повернути їй вид стрілки, скопіюйте параметри з секції [Pagebar Floating Skin] в [Pagebar Floating Skin.right]:
Коли ви це зробите, панель вкладок буде виглядати так:
клонування
Якщо ви хочете, щоб деякі елементи виглядали однаково, вам не доведеться вказувати всі параметри незалежно один від одного - це можна зробити один раз і сказати Opera скопіювати ці параметри для інших елементів. Робиться це за допомогою параметра Clone =.
Як значення береться ім'я елемента, параметри якого ви хочете клонувати, без квадратних дужок. Для того щоб нормальний стан кнопок на панелі інструментів виглядало так, ніби вони знаходяться в стані .hover (ефект наведення курсору), ви повинні замінити стандартну секцію [Toolbar Button Skin] цим:
Кнопки стануть виглядати так:
Так як Clone = копіює всі параметри від одного елемента до іншого, ви можете замінити їх, додаючи до параметру Clone інші опції елемента, який ви копіюєте, наприклад:
Це призведе до наступного ефекту:
дочірні елементи
Іншим популярним параметром є 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». Коли таке зображення використовується, воно відображається як є, тобто його розмір не змінюється, і воно не повторюється (не розмножується) в будь-якому випадку.
Замість використання цього швидкого способу створення елементів, ви можете зробити так, як показано нижче; майте на увазі, однак, що так робити не рекомендується, а згадується лише для того, щоб допомогти вам зрозуміти:
великі значки
Приємною функцією, яка не використовується в стандартному скіни, є можливість вказати значок в двох різних розмірах. Вона дозволяє користувачам вибирати: чи хочуть вони використовувати зображення меншого розміру, для економії місця на екрані, або великі, що зазвичай краще, тому що вони виглядають більш інформативно.
Перед початком використання великих значків, вам необхідно додати рядок Large images = 1 в секцію [Options]. Тепер в діалозі налаштувань «Оформлення. »Повинен з'явитися прапорець« Великі значки », який може бути встановлений незалежно для кожної панелі інструментів:
Після додавання даного параметра ви повинні визначити елементи. Це робиться додаванням .large до елементу, збільшену версію якого ви хочете додати. Для додавання збільшеною версією кнопки «Оновити», вставте рядок Reload.large = large_buttons / reload.png в секцію [Images]. де «large_buttons» - папка, в якій повинні знаходитися збільшені версії значків.
Таким же чином ви можете додати збільшені версії значків для інших елементів, наприклад, [Toolbar button skin.large] для збільшених зображень в секції [Toolbar button skin].
Зверніть увагу, що на відміну від станів і настроїв. для великих значків немає резервних елементів!