Вид Mumble может быть настроен при использовании так называемых Qt (http://ru.wikipedia.org/wiki/Qt) таблиц стилей (кратко QSS). Они сильно похожи на широко применяемые каскадные таблицы стилей (CSS), используемые в web разработке. Если у Вас есть хоть какой-нибудь опыт работы с ними (CSS), Вы легко сможете создавать скины для Mumble.
Ничего страшного, если у Вас нет опыта работы с CSS. Мы попытаемся объяснить основные аспекты создания скинов в этой статье.
Для лучшего понимания, во всем гиде мы будем использовать один скин, который имеет название Chocolate.
Уверяем Вас, создание скина для Mumble – задача не сложная, но требующая определенного времени и терпения.
Начнем с объяснения точного расположения скина Mumble.
Во-первых, чтобы использовать скин, у Вас должна быть папка для скинов в Program Files\Mumble. В папке скинов, нужно будет создать другую папку. Название этой папки будет названием Вашего скина.
Например, если бы Вы хотели создать скин под названием "Chocolate", тогда у Вас была бы следующая структура папок:
Код: Выделить всё
C:\Program Files\Mumble\skins\Chocolate
Если Вы хотите посмотреть любое из этих изображений, Вы можете найти их здесь (https://github.com/mumble-voip/mumble/tree/master/icons).emblems/emblem-favorite.svg *
categories/applications-internet.svg *
places/network-workgroup.svg *
Chocolate.qss
authenticated.svg
channel.svg
channel_active.svg
channel_linked.svg
comment.svg
comment_seen.svg
config_asio.png
config_basic.png
config_dsound.png
config_lcd.png
config_msgs.png
config_network.png
config_osd.png
config_plugin.png
config_shortcuts.png
config_ui.png
deafened_self.svg
deafened_server.svg
layout_classic.svg
layout_custom.svg
layout_hybrid.svg
layout_stacked.svg
mumble.osx.png
mumble.svg
muted_local.svg
muted_self.svg
muted_server.svg
muted_suppressed.svg
rec.svg
talking_alt.svg
talking_off.svg
talking_on.svg
talking_whisper.svg
Все, что представляет собой скин - это один файл, который содержит кодирующие элементы скина (Chocolate.qss) - код, который определяет цвет фона, шрифтов, и т.д. - и изображения, использующиеся в Mumble.
Любое из вышеперечисленных изображений подключается простым размещением их в Program Files\Mumble\skins\Chocolate или в правильно указанный подкаталог.
Вот пример изображений, которые могут быть использованы в QSS:
Для этих изображений Вы должны использовать формат PNG вместо SVG.arrow_down.png
arrow_left.png
arrow_right.png arrow_*.png dimensions: 7x7
arrow_up.png
branch.png
branch_closed.png
branch_end.png branch_*.png dimensions: 10x18
branch_more.png
branch_open.png
checkbox_0.png
checkbox_0_d.png
checkbox_0_hover.png
checkbox_0_hover_d.png
checkbox_0_pressed.png
checkbox_1.png checkbox_*.png dimensions: 13x13
checkbox_1_d.png
checkbox_1_hover.png
checkbox_1_hover_d.png
checkbox_1_pressed.png
radiobutton_0.png
radiobutton_0_hover.png
radiobutton_0_pressed.png
radiobutton_1.png radiobutton_*.png dimensions: 13x13
radiobutton_1_hover.png
radiobutton_1_pressed.png
Определения и Использование SVG
"SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. " (взято с Wikipedia http://ru.wikipedia.org/wiki/SVG).
Проще говоря, это не бинарные изображения. Приложение читает их, превращая в нормальное изображение. SVG изображения – это большие текстовые файлы. Благодаря этому, их масштаб может легко изменяется от крошечных изображений до изображений размером с Ваш экран.
В настоящее время, в Mumble, прежде всего, используются SVG изображения, но еще есть некоторые изображения в формате PNG.
Чтобы создавать файлы SVG, Вам необходима программа по созданию SVG файлов.
Inkscape (http://www.inkscape.org/), вероятно, одна из лучших программ такого рода.
Единственная проблема, похоже, может состоять только в том, что большинству людей чуждо создание SVG файлов. Уверяем, создание SVG файлов в Inkscape – процесс не сложный. И у Вас не должно возникнуть лишних проблем с этим. Помните, что в SVG, нет единиц измерений. Все масштабируемо.
Вам необходимо использовать формат svgtiny для своего файла SVG. Если Вы используете Inkscape, сохраняйте его как "Plain SVG".
Преобразование PNG в SVG
Изменение формата PNG изображений может изменить их размер.
Итак, переходим к преобразованию файлов PNG -> SVG:
- Запускаем Inkscape.
- Открываем нужный файл .png
- Переходим в: Effects -> Images -> Embed All Images...
- Жмем OK
- Сохраняем: Save image as "Plain SVG".
- И используем получившийся SVG файл в своем стиле.
Вот превосходный гид (http://doc.trolltech.com/qq/qq20-qss.html), который объяснит структуру Qt скинов и как узнать название определенного параметра или элемента класса.
QSS файлы
Qt таблицы стилей состоят в основном из синтаксиса, применяемого в каскадных таблицах стилей (CSS), используемых в web разработке. Вам будет проще, если у Вас есть опыт работы с CSS.
В Configure -> Settings -> User Interface -> Skin Вы можете указать QSS файл, который будет использоваться. Этот файл содержит все кодовые элементы стиля.
Базовая структура файла QSS включает в себя:
Код: Выделить всё
/* this is a comment */
QTreeView {
background-color: white;
color: black;
}
QTextBrowser {
background-color: #CCCCFF; /* 3 digit hex colors also acceptable: #CCF */
}
QMenuBar {
/* place more stuff here */
}
QMenu {
/* place more stuff here */
}
- QTreeView относится к области канала/пользователя Mumble.
- QTextBrowser относится к области напечатанных сообщений.
- QMenuBar и QMenu относятся к главному меню.
Для более сложного изменения внешнего вида Mumble в Вашем файле QSS должно быть описано много главных элементов, таких как полос прокрутки, чекбоксы, кнопки и текст. Для этого рекомендуем Вам обратиться к документации Qt по таблицам стилей (http://doc.trolltech.com/stylesheet.html). Чтобы изменить вид специфичной части Mumble, ознакомьтесь с его Qt структурой (http://wiki.mumble.info/wiki/Qt_Structure).
Вот небольшая часть QSS, которая используется почти во всех скинах для Mumble. Это может помочь Вам в Ваших начинаниях по созданию скинов.
Код: Выделить всё
QHeaderView::section {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
color: #333;
border: 1px solid #333;
border-color: #fff #333 #333 #fff;
height: 1.54em;
}
QMainWindow#MainWindow * {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
}
QMainWindow#MainWindow{
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
border: 0;
}
QMenuBar {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
color: #333;
font-weight: bold;
border: 1px solid transparent;
border-bottom-color: #333;
}
QMenuBar::item {
background: transparent;
color: #333;
border: 0;
}
Самая тяжелая часть в создании скина - это поиск названия того, что должно быть изменено. К счастью, есть довольно легкий способ сделать это.
Во-первых, Вы должны скачать zip-архив с источника Mumble (https://github.com/mumble-voip/mumble/a ... master.zip). Извлеките из него файлы, затем перейдите в *\mumble\src\mumble.
Затем установите Qt Creator (http://qt-project.org/downloads). Теперь можете открыть с помощью Qt Designer необходимые *.ui файлы (находятся в папке *\mumble\src\mumble), которые относятся к любой части Mumble.
Например, если Вы хотите изменить стиль главного окна, то нужно открыть файл MainWindow.ui. Если файлы этого типа не открывается автоматически в Qt Designer, то нужно правой кнопкой мышки щелкнуть по .ui файлу, выбирать «открыть с помощью», щелкнуть по кнопке «Обзор» и перейти к
Код: Выделить всё
C:\Qt\2009.05\qt\bin\designer.exe
Код: Выделить всё
QMainWindow * {
background-color: #000;
}
Например, откройте ConfigDialog.ui. Щелкните на вертикальном белом поле слева. В верхнем левом углу Qt Designer Вы должны увидеть на первом плане "qlwIcons QListWiget". Благодаря этому, Вы поймете, что можете изменить вид этого поля, используя описание класса:
Код: Выделить всё
QListWidget#qlwIcons {
attribute: value;
}
Код: Выделить всё
QListWidget#qlwIcons::item {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
}
Код: Выделить всё
QListWidget#qlwIcons::item:selected {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
}
Размещение иконок на панели инструментов:
Изменение внешнего вида окна логов"applications-internet.svg" ----->/icons/tango/categories/applications-internet.svg Подключение
"Information_icon.svg" ---->/icons/publicdomain/Information_icon.svg Это информация для сервера
"self_undeafened.svg"----->/icons/self_undeafened.svg Включение наушников и микрофона
"deafened_self.svg" ----->/icons/deafened_self.svg Отключение наушников и микрофона
"comment.svg"---->/icons/comment.svg коментарий
"audio-input-microphone.svg" ----->/icons/tango/actions/audio-input-microphone.svg Включение микрофона
"audio-input-microphone-muted.svg" ----->/icons/tango/actions/audio-input-microphone-muted.svg Отключение микрофона
Начиная с 1.2.1 были добавлены определенные аспекты стиля log сообщений. Доступны следующие новые классы QSS:
Имейте в виду, что каналы, цели и источники в окне логов Mumble – описываются одинаково. Изменить их вид можно, наример, так:Timestamps: log-time
Servers: log-server
Channels: log-channel
Operation targets: log-target
Operation sources: log-source
Privileges: log-privilege
Код: Выделить всё
.log-time {
color: blue;
}
Тут больше рекомендаций, чем стандартов, но, в любом случае, это должно уменьшить путаницу.
Обращение с изображениями
Если Вы используете дополнительные изображения, не определенные Mumble, Вы должны разместить изображения в пределах директории скина. Вот пример такого случая:
Код: Выделить всё
/* change the left arrow of the scrollbar */
QScrollBar::left-arrow {
image: url(skin:arrow_left.svg);
}
За дополнительной информацией Вы можете обратиться к документации Qt по таблицам стилей, как было сказано ранее.
Код означает, что файл arrow_left.png должен находиться в том же каталоге, что и текущий файл QSS. Если Вы хотите поместить его в папку "images" в Вашей папке скина, то это выглядело бы так:
Код: Выделить всё
/* change the left arrow of the scrollbar */
QScrollBar::left-arrow {
image: url(skin:images/arrow_left.svg);
}
Рекомендуется использовать стиль "WindowsXP" или "WindowsVista" для всех стилей. Это потому что у них есть наименьшее количество визуальных дефектов.
Смотрите также
Синтаксис стилей http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html
Примеры стилей http://qt-project.org/doc/qt-4.8/styles ... mples.html
Дополнительные стили http://qt-project.org/doc/qt-4.8/styles ... rence.html
Данная статья являяется переводом этой статьи