Xfce Wiki

Sub domains
 

Темы Xfwm4 (how-to)

Введение

Xfwm4, нативный менеджер окон рабочего стола Xfce4, использует простую, но гибкую машину тем оформления, основанную на карте элементов изображения в формате .xpm. Xfwm4 также использует текстовый файл для других опций конфигурации (см. раздел «Файл themerc»). Кроме того, можно заставить тему оформления подхватывать цвета из темы gtk, что описывается в разделе «Подхватывание цветов gtk» этого документа.

Рис. 1 - Пример окна

Расположение наборов тем оформления

В версии 4.0 менеджера окон Xfwm4 темы можно найти в следующих папках:

  • Домашняя (home) папка пользователя /.themes/xfwm4/название_темы (напр.: /home/joe/.themes/xfwm4/b5)
  • Папка общих данных системы /xfwm4/theme_name (напр.: /usr/share/xfwm4/themes/b5)

В версии 4.2 рабочего стола Xfwm темы располагаются согласно стандарту и находятся в следующих папках:

  • Домашняя (home) папка пользователя /.themes/название_темы/xfwm4 (напр.: «/home/joe/.themes/b5/xfwm4»)
  • Папка общих данных системы /themes/название_темы/xfwm4, которая контролируется менеджером пакетов (напр.: «/usr/share/themes/b5/xfwm4»)
  • Папка общих данных системы /local/themes/название_темы/xfwm4, которая контролируется локальным администратором (напр.: «/usr/local/share/themes/b5/xfwm4»)

Оформление панели заголовка

У окон может быть два состояния: активные (в фокусе) и неактивные (не в фокусе). Для этих состояний xfwm4 использует растровые файлы с соответствующими названиями, например title-1-active.xpm и title-1-inactive.xpm.

Для оформления панели заголовка xfwm4 использует 5 растровых файлов с названиями от title-1-active.xpm до title-5-active.xpm. При этом файлы с названиями top-left-active.xpm и top-right-active.xpm представляют собой верхние углы левого и правого краев, как показано на Рис. 2.

Рис. 2 - Красными границами выделены растровые файлы, представляющие всё внешнее оформление окна
Рис. 2 - Красными границами выделены растровые файлы, представляющие всё внешнее оформление окна

Та же система названий файлов применяется и к неактивным окнам. При этом слово «active» в названиях файлов заменяется словом «inactive», например title-1-inactive.xpm.

Цвет текста в панели заголовка, его тени, ориентация и прочие параметры задаются файлом themerc и описаны в соответствующем разделе этой страницы.

Боковые и нижние границы окна

Каждая боковая сторона окна состоит из двух растровых файлов. Файлы для левой стороны именуются left-active.xpm и bottom-left-active.xpm, а для правой, соответственно, right-active.xpm и bottom-right-active.xpm.

Нижняя граница окна состоит из файлов bottom-active.xpm и bottom-inactive.xpm. При отрисовке окна такой файл повторяется цепочкой до достижения размера окна.

ПРИМЕЧЕНИЕ: Области для захвата мышью по краям окон для изменения размера этих окон задаются в xfwm по ширине границ окна. Таким образом, чем шире файлы границ окна, тем шире поле захвата мышью. Это может влиять на удобство (и возможность) изменения размеров окон путем захвата границы окна мышью (особенно могут играть роль файлы bottom-left и bottom-right, отвечающие за отрисовку нижних углов окна).

Кнопки управления окном в Xfwm4

Xfwm4 до шести кнопок - закрепление (stick) окна на всех рабочих местах (виртуальных рабочих столах) меню управления окном, сворачивание окна в заголовок (shade), сворачиванеие окна в панель задач (minimize), разворачивание на весь экран (maximize) и закрытие (close).

У кнопок могут быть следующие состояния: активное (active, focused), неактивное (inactive, unfocused), подсвеченное (prelight, при наведении мыши) и нажатое (pressed) как на Рис. 3:

Рис. 3 - Состояния кнопок Xfwm4

Также в Xfwm4 могут использоваться состояния «задействовано» (toggled) для указания, задействована ли функция кнопки - см. Рис. 4. AbiWord Image stick-active.gif AbiWord Image stick-inactive.gif AbiWord Image stick-pressed.gif AbiWord Image stick-toggled-active.gif AbiWord Image image_3.gif AbiWord Image stick-toggled-pressed.gif

Рис. 4 - Кнопки прикрепления (stick) с вариантами отображения для задействованного состояния (toggled)

В версии Xfwm4 4.6 добавлен новый эффект для кнопок активного окна, prelight. При наведении курсора мыши на кнопку, кнопка может «подсвечиваться». Этот эффект может добавляться ко всем шести видам кнопок активного (active) окна путем добавления файлов с соответствующими названиями, например maximize-prelight.xpm или maximize-toggled-prelight.xpm.

Файл themerc

Для настройки таких параметров как цвета текста, расстояния для кнопок и прочих в панели заголовка xfwm4 использует текстовый файл с названием themerc, располагаемый рядом с остальными файлами в папке с соответствующей темой оформления.

Расположение кнопок

Можно «закрепить» расположение кнопок для тем, в которых это задумано, хотя стоит упомянуть, что тем самым ограничивается свобода действий пользователя над оформлением и этого стоит избегать без веских явной необходимости (например, как в теме b5, показанной ниже). Далее дается описание меток для кнопок управления окном (строки, начинающиеся с #; их стоит добавлять в начало каждого такого файла для удобства пользователей),

# Значения меток для параметра button_layout:
#    O = Меню управления окном (option menu)
#    T = Кнопка "закрепить окно на всех виртуальных рабочих столах" (stick)
#    H = Кнопка "свернуть окно в панель задач" (hide)
#    S = Кнопка "свернуть окно в панель заголовка" (shade)
#    M = Кнопка "развернуть окно во весь экран" (maximize)
#    C = Кнопка "закрыть окно" (close)
#    | = Текст заголовка окна (title)
button_layout=OTS|HMC

В качестве рабочего примера рассмотрим тему «B5». В ней используется только кнопка закрытия окна, чему соответствует строка «button_layout=C|» в файле themerc.

Ширина фона заголовка

Еще один параметр, задаваемый в файле themerc это «title_full_width». Логическое значение этого параметра задает, как располагаются изображения в панели заголовка.

Когда значение параметра выставлено как «true», центральное растровое изображение повторяется цепочкой до заполнения всей ширины окна:

Когда значение параметра выставлено как «false», центральное растровое изображение повторяется цепочкой до заполнения лишь ширины текста заголовка:

Тень текста

К тексту заголовка окна можно добавить тень путем задания значений «title_shadow_active» для активного окна и «title_shadow_inactive» для остальных, неактивных, окон.

Возможными значениями этого параметра являются «false», «true», и «frame».

Смещение текста заголовка

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

  • title_horizontal_offset=
  • title_vertical_offset_active=
  • title_vertical_offset_inactive=

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

Смещение кнопок и расстояния между ними

Подобно описанному в предыдущем разделе, кнопки можно смещать по горизонтали, используя необязательный параметр «button offset». Стоит упомянуть, что это значение рассчитывается относительно соответствующей границы окна (window border), не рамки окна (frame border).

Необязательный параметр «button_spacing» задает количество пикселей между всеми кнопками.

Необязательный параметр «maximized_offset» задает количество пикселей между крайней границей окна (top-right-active) и крайней кнопкой (close, hide или иной) в развернутом на весь экран окне.

Значок приложения

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

  • show_app_icon=true #Показывать значки приложений
  • show_app_icon=false #Показывать кнопку меню

Если в теме не предумотрена отрисовка кнопки меню, можно использовать файл с пустым квадратом.

Подхватывание цветов из темы gtk

Как можно заметить, тема, используемая в Xfwm4 по умолчанию, подхватывает цвета текущей темы gtk. Цвета темы xfwm можно задавать в файле themerc. Если они там не задаются, они автоматически подхватываются из текущей темы gtk. Использовать можно следующие цвета:

Название параметра значение из темы gtk Описание
active_text_color fg[selected] Цвет текста заголовка активного окна
inactive_text_color fg[insensitive] Цвет текста заголовка неактивного окна
active_text_shadow_color dark[selected] Цвет тени текста заголовка активного окна
inactive_text_shadow_color dark[insensitive] Цвет тени текста заголовка неактивного окна
active_border_color fg[normal] Цвет границ активного окна. Используется очень редко. Если используется, обычно выставляется черным.
inactive_border_color fg[normal] См. выше
active_color_1 bg[selected] Цвет фона для заголовка активного окна
active_color_2 bg[normal] Цвет фона для заголовка неактивного окна
active_hilight_1 light[selected] Более светлый цвет для заголовка активного окна. Используется для придания эффекта объемности.
active_hilight_2 light[normal] Более светлый цвет для активного окна
active_mid_1 mid[selected] Более темный цвет для активного окна
active_mid_2 mid[normal] Более темный цвет для активного окна
active_shadow_1 darkselected[] Более темный цвет для заголовка активного окна. Используется для придания эффекта объемности.
active_shadow_2 dark[normal] Более темный цвет для активного окна
inactive_color_1 bg[insensitive] Цвет фона для неактивного окна
inactive_color_2 bg[normal] Цвет фона для неактивного окна
inactive_hilight_1 light[insensitive] Более светлый цвет для неактивного окна. Используется для придания эффекта объемности.
inactive_hilight_2 light[normal] Более светлый цвет для неактивного окна
inactive_mid_1 mid[insensitive] Более темный цвет для заголовка неактивного окна
inactive_mid_2 mid[normal] Более темный цвет для неактивного окна
inactive_shadow_1 dark[insensitive] Более темный цвет для заголовка неактивного окна. Используется для придания эффекта объемности.
inactive_shadow_2 dark[normal] Более темный цвет для неактивного окна

Значения для параметров «fg» (передний план) и «bg» (задний план) в gtk задаются в файле gtkrc текущей темы gtk. Обратите внимание на то, что значения «dark», «light» и «mid» не могут быть заданы в файле gtkrc. Эти значения вычисляются автоматически по формуле (dark = 0.7 * bg, light = 1.3 * bg, mid = 0.5 * (dark + light)). Если соответствующие цвета не заданы в файле themerc, то во время исполнения отрисовки символы заменяютя на вычесленные, чтобы границы окон унаследовали цвета из темы gtk.

Чтобы задействовались определенные автором темы цвета, файлы XPM нужно соответственно отредактировать. Поскольку файлы XPM внутренне представлены как текст, их можно редактировать не только в графическом редакторе типа GIMP, но и в любом текстовом редакторе.

Из Википедии, свободной энциклопедии (перевод англоязычной версии статьи)

XPM (X PixMap) это текстовый формат изображений в кодировке ASCII, используемый в X Window System. Создан в 1989 г. Даниэлем Дардайе (Daniel Dardailler) и Коласом Нахабу (Colas Nahaboo) в Inria Laboratories во Франции и позже улучшен Арно Ле Хором (Arnaud Le Hors). Формат предназначен в первую очередь для создания значков и поддерживает прозрачность. Файлы формата имеют простую структуру, производную от более раннего синтакса XBM. Файлы можно создавать и изменять при помощи любого текстового редактора и включаться в файлы, написанные на языке программирования C (Си).

Из вышеприведенного текста следует, что если открыть файл XPM в любом текстовом редакторе, можно будет увидеть примерно следующее:

/* XPM */
static char * title_2_active_xpm[] = {
"5 21 10 1",
"       c None",
".      c #000000",
"+      c #FFFFFF s active_hilight_2",
"@      c #D5D6D5 s active_color_2",
"#      c #4B58A2 s active_shadow_1",
"$      c #525FAB s active_color_1",
"%      c #848FD6 s active_mid_1",
"&      c #B4BAB4 s active_mid_2",
"*      c #949594 s active_shadow_2",
"=      c #FFFFFF s active_hilight_1",
".....",
"++++#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@#",
"@@@@@",
"@@@@@"};

Не слишком углубляясь в подробности формата XPM, можно сказать, что файл изображения состоит из разных разделов: раздел описания формата изображения (ширина в пикселях, высота в пикселях, число цветов, количество обозначающих знаков на каждый цвет), раздел описания обозначений пикселей и раздел описания пикселей. Более подробно формат описан на Википедии: https://ru.wikipedia.org/wiki/X_Pixmap.

Каждому цвету, используемому в изображении, соответствует символ (если цветов больше, чем можно закодировать при помощи отдельных символов, можно использовать по несколько символов, см. пример в Википедии). Символы для обозначения цветов задаются в соответствующем разделе.

Чтобы к теме xfwm применялись цвета из текущей темы gtk, нужно соответственно отредактировать файлы XPM:

"       c None",
".      c #000000",
"+      c #FFFFFF",
"@      c #D5D6D5",
"#      c #4B58A2",
"$      c #525FAB",
"%      c #848FD6",
"&      c #B4BAB4",
"*      c #949594",
"=      c #FFFFFF",

нужно поменять на

"       c None",
".      c #000000",
"+      c #FFFFFF s active_hilight_2",
"@      c #D5D6D5 s active_color_2",
"#      c #4B58A2 s active_shadow_1",
"$      c #525FAB s active_color_1",
"%      c #848FD6 s active_mid_1",
"&      c #B4BAB4 s active_mid_2",
"*      c #949594 s active_shadow_2",
"=      c #FFFFFF s active_hilight_1",

Учитывать цвета gtk следует еще на этапе создания чернового макета темы оформления; так можно сэкономить много времени. Если во всех (или многих) растровых файлах темы используется один и тот же цвет, можно воспользоваться функционалом «Найти и заменить» в текстовом редакторе, чтобы быстро добавить описание цвета. Можно даже использовать такой инструмент, как «sed», для внесения массовых изменений во все файлы XPM редактируемой темы оформления.

Новые возможности, добавленные в Xfwm 4.2

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

Xfwm 4.2 включает новую функцию, дающую хорошие результаты при сохранении совместимости с предыдущим форматом. Новый функционал составляет итоговое изображение из файла XPM по его таблице описания цветов и файла PNG (если присутствует) с поддержкой прозрачности.

Рис. 5 - Изображения с поддержкой прозрачности из файла PNG накладываются поверх изображения из файла XPM

Названия файлов PNG должны быть идентичнф названиям соответствующих файлов XPM, с расширением «.png» (т.е. title-1-active.png, top-right-inactive.png, и т. д.). Файлы PNG не обязательны. Xfwm4 отрисовывает тему и без них, но когда они присутствуют и содержат альфа-канал (прозрачные пиксели), изображения этих файлов автоматически накладываются поверх изображений соответствующих файлов XPM для формирования итогового вида темы.

У этой техники следующие преимущества:

  • Она проста с точки зрения создателя темы. Большинство работает с подобными техниками при составлении тем в таких редакторов как GIMP.
  • Она обратно совместима с xfwm4 из версии Xfce 4.0, где файлы PNG просто игнорируются.

Заключение

Авторы надеются, что этот маленький урок «how-to» по созданию тем оформления для xfwm4 поможет вам разрабатывать собственные темы. Пожалуйста, поделитесь вашими темами с другими например на http://www.xfce-look.org.

Список названий файлов для частей и кнопок темы оформления

Это список названий файлов для всех возможных частей темы оформления, поэтому их можно просто копировать отсюда. (Подсказка: при использовании браузера Firefox удерживайте Ctrl при перетаскивании курсора, чтобы выбирать ячейки вместо текстовых строк ;-))

Активное окно (active) Неактивное окно (inactive) Подсвеченные кнопки (prelight) Нажатые кнопки (pressed) Задействованные кнопки активного окна (toggled) Задействованные кнопки неактивного окна (toggled) Подсвеченные задействованные кнопки (toggled prelight) Задействованные нажатые кнопки (toggled pressed)
menu-active menu-inactive menu-prelight menu-pressed
shade-active shade-inactive shade-prelight shade-pressed shade-toggled-active shade-toggled-inactive shade-toggled-prelight shade-toggled-pressed
stick-active stick-inactive stick-prelight stick-pressed stick-toggled-active stick-toggled-inactive stick-toggled-prelight stick-toggled-pressed
hide-active hide-inactive hide-prelight hide-pressed
maximize-active maximize-inactive maximize-prelight maximize-pressed maximize-toggled-active maximize-toggled-inactive maximize-toggled-prelight maximize-toggled-pressed
close-active close-inactive close-prelight close-pressed
top-left-active top-left-inactive
title-1-active title-1-inactive
title-2-active title-2-inactive
title-3-active title-3-inactive
title-4-active title-4-inactive
title-5-active title-5-inactive
top-right-active top-right-inactive
right-active right-inactive
bottom-right-active bottom-right-inactive
bottom-active bottom-inactive
bottom-left-active bottom-left-inactive
left-active left-inactive

Авторы

Этот урок how-to изначально создан пользователем Drewbian (drewbian собачка tsn точка cc) и позже изменен пользователями Olivier Fourdan (fourdan собачка xfce точка org) и Renato Santos (renatosan собачка gmail точка com). Англоязычная страница переведена (с небольшими изменениями) на русский пользователем Всё Пропатчено (vse точка propatcheno собачка gmail точка com).