Окт
16
2011

Создание легких тем оформления для Opera 12

Продолжаем знакомится с изменениями в Opera 12. Как мы уже знаем, разработчики переработали систему тем оформления. Разберемся в том, из чего они теперь состоят и как создавать их самому.

Итак, на днях мы познакомились с альфа-версией Opera 12. Как можно было узнать из той нашей статьи, в двенадцатой версии была переработана система тем оформления. Кстати, именно так — темы (themes), они теперь и называются. Изменения были направлены в сторону облегчения создания и использования тем. Вот и поговорим о том, как это работает. Параллельно, придумав какую-нибудь простую тему оформления для Opera.

Устройство новых легких тем оформления Opera

Устроены новые темы подобно старым — в виде Zip-файла, в котором упаковано содержимое. Это непосредственно, графическая составляющая и файл persona.ini. Перейдя по ссылке на такой файл, Opera автоматически установит тему поверх той, которая стоит по умолчанию.

Файл persona.ini содержит ряд разделов. Каждый раздел начинается словами в квадратных скобках. Например, [Options]. Каждый блок содержит информацию, с указаниями параметров темы. Ключевым моментом является простота. Кстати, прошлые темы, полностью меняющие интерфейс, также доступны. Теперь же можно дать пользователям возможность менять оформление, оставаясь в рамках одного интерфейса. Это гораздо проще в использовании.

В Opera 12 alpha пока только возможно менять фоновое изображение, окрашивать в разные цвета. К финальному релизу возможности будут расширены. Посмотрим теперь, как происходит создание темы.

Сразу стоит сказать, что для тестирования вам необходима Opera 12 alpha 1+. В итоге, при установке, мы получим что-то вроде такого изображения:

Новые темы оформления в Opera 12

Выбрать темы можно перейдя в Меню — Оформление. Все установленные темы вы можете найти по адресу: [домашняя папка]/Library/Opera на Mac и Linux, а также C:\users\[user]\AppData\Roaming\Opera\Opera на ОС Windows.

Мы скачали одну из предлагаемых в данное время тем. После этого распаковали файл .zip и зашли в распакованную папку. Открываем файл persona.ini в текстовом редакторе. Далее смотрим, что он содержит.

# This file describes a test personas for the Opera browser. Not meant for redistribution.

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

Далее идет раздел [Info]

Name=Monster — Название темы
Author=Opera Software — Имя автора
Version=1 — Версия темы
Preview Image= — имя картинки для предварительного просмотра. Но, в настоящее время не используется.

Далее начинается блок [Options]

Colorize Color — цвет окраски. Цвет указывается в шестнадцатеричном коде #xxxxxx
Например, Colorize Color = #1091ce
Цвет окрашивания перекрывает текущие цвета темы с определенным оттенком.

Следующий раздел — [Window Image]

Здесь осуществляется настройка оформления окна браузера.

Type = BestFit — определяет расположение главного рисунка. Подробнее про варианты можно почитать в данной статье, посвященной старым темам оформления Opera.
Tile Center = background/Background.jpg — здесь определяется путь к изображению, которое будет использоваться в качестве пользовательского изображения темы.
Colorize = 0/1 — указывает, желаете ли вы (1) или нет (0) наложить оттенок на изображение.

Следующий раздел — [Clear elements]

Speed Dial Widget Blank Skin = 1
Speed Dial Widget Skin = 1
Window Skin = 1
Document Window Skin = 1

Установка этих параметров на 1 приведет к тому, что изображение будет видно на Экспресс-панели. Если вам это не надо — ставьте 0.
На этом настройки пока заканчиваются. Их, действительно, очень мало и все очень просто!
Все темы будут доступны по адресу https://addons.opera.com/themes/

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

< files *.zip >
ForceType application/x-opera-configuration-skin
< /files >
Только уберите пробелы везде перед скобками

Делаем свою тему для Opera 12

Итак, давайте быстро сделаем тему оформления для браузера.

1. Определяем на жестком диске директорию, куда будем сохранять файлы, которые затем заархивируем в Zip.

2. Открываем текстовый редактор и создаем новый документ. Можно сразу сохранить его в нашу подготовленную папку. Имя для сохранения — persona.ini (обратите внимание, расширение файла — .ini). Сохранять надо в кодировке utf8.

3. Находим графический файл, который будет основой нашей темы. Мы нашли вот такой вот зеленый листок на одном из бесплатных фотостоков:

Фотография листа с фотостока

Разрешения 2048*1365 — вполне хватит. В настойках мы укажем, что хотим растягивать графический файл на все окно.

4. Теперь возвращаемся в текстовый редактор и прописываем настройки.
В разделе [Info] пишем:

Name=Summer (назовем тему так)
Author=webrowser.ru
Version=1

Раздел [Options]
Colorize Color = #ff8e3f — цвет выбрали оранжевый. Должен неплохо смотреться с нашим листом. Оранжевым будут все панели, вкладки.

Раздел [Window Image]
Type= BestFit — тип отображения
Tile Center= background/summer.jpg — это путь к рисунку. Соответственно, в нашей папке мы создали еще одну, с именем background
Colorize= 0 — поставим ноль, нам не надо накладывать оттенок на изображение.

[Clear elements]
Speed Dial Widget Blank Skin = 1
Speed Dial Widget Skin = 1
Window Skin = 1
Document Window Skin = 1
Везде поставим единицы, чтобы рисунок отображался на Экспресс-панели.

Все, наш файл готов. Теперь идем в нашу папку. Выделяем наши элементы (файл с настройками и папку с рисунком) и через контекстное меню архивируем их.

Архивирование файлов для themes

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

Все! Наша тема готова. Осталось только скопировать файл в папку с профилем, и там в папку \skin.
Теперь запускаем Opera 12 и идем в Меню — Оформление. Здесь выбираем нашу тему и вуаля:

Самодельная тема оформления

16 комментариев Комментировать

  • Здорово!

  • Спасибо за инструкцию. Вот если бы еще панель адреса и дополнений можно было сделать хотя бы «полу»-прозрачными, было бы вообще здорово. Поэтому пока остаюсь на IBIS Inspire Transparent. ))

    Кстати, а старые скины, которые skins :), упразднят или нет? Надеюсь, что нет, ведь среди них очень много добротных.

  • Это темы ? Не смешите людей-картинок насували и темой обозвали. Все в блеклом виде, иконки хрен разберешь.

    Вообщем дерьмо

    • болт, такая же система оформления у Chrome и Firefox. Плюсов в данном случае является то, что похоже, старые темы упразднять не будут. И они по-прежнему будут функционировать.

  • Colorize Color = #ff8e3f

    а где можно узнать какой цвет — какой код?

    • Ну, например, отсюда:

      i039.radikal.ru/0802/3b/9b21e5443107.gif

      (эту таблицу я делал очень давно по совсем другому поводу)

      Вот только цвет накладывается по методу Hue (оттенок). Это значит, что яркость выбранного цвета не имеет значения. Главное — сам цвет. В частности, если вы выберите черный цвет, то панели станут не черными, а просто бесцветными (бледно-серебристыми)

    • > cheps

      В том же ворде (или каком-нибудь граф. редакторе) тыкаешь Цвет шрифта -> Другие цвета — > Спектр. И там будет красный, зеленый, синий. Тыкаешь на цвет и переводишь эти числа в 16-ричную систему. Вот тебе и код.

      Если охота узнать код цвета у тебя на экране, то запускаешь прогу, например, InqSoft Windows Scanner, тыкаешь пипетку и тыкаешь на объект на экране и отобразится код в виде красный/синий/зелеый, код HTML и код Delphi.

    • cheps, помимо примера Anton Diaz можно использовать приложение одного из прошлогодних участников конкурса 10к

      10k.aneventapart.com/1/Uploads/236/

      Или в поисковике набрать «цветовой круг».

    • Ну и Яндекс-сервис можно использовать:

      yandex.ru/yandsearch?text...&lr=213#down

  • Пока работает очень глюкаво, кстати.

    • Очень глюкаво, это точно.

  • Вот только одного непонятно/, есть ли возможность делится со всеми? то есть когда появится возможность закачивать темы на addons.opera.com/themes/

    Не понятно, что будет со старыми скинами, ведь теперь из интерфейса к ним не попадешь.

    P.S. В конце красивый пример, ссылочку можно на него?

    • P.S. В конце красивый пример, ссылочку можно на него?

      dl.dropbox.com/u/12589319/summer.zip

      Сохраняйте в папку skin, находящуюся в папке профиля.

  • Зацените оформления Opera my.opera.com/community/cu...2&rtype=skin

  • Администрация, подскажите пожалуйста, что за картинка в самом начале?)

    • oc2pus, это рисунок, созданный Jon Hicks. Скачать можно по данной ссылке dl.dropbox.com/u/12589319/Background.jpg

Оставить комментарий

Цитировать

Следуй за нами в твиттере!