Создаем тему для xfwm4

[Malaheenee]

Преамбула
Давно назревал вопрос создания собственной темы для xfwm. т.к. имеющиеся не устраивали по тем или иным причинам. То кнопки противные, то расположение их какое-то странное, то цвета не устраивают... Последней каплей было отсутствие темы a-la ROSA Desktop Fresh KDE. Поэтому решено было сделать свою собственную тему с изысканными кордебалетом... Эм-м-м, не будем отвлекаться. Тем более, что <glamour>xfce нынче в тренде</glamour>.
Для создания темы нам понадобятся два инструмента: GIMP и любой текстовый редактор.
Хочется предупредить: собственно рисование всех элементов темы займет у вас от силы час. А вот подбор цветов, проектирование и тонкая настройка могут никогда не закончиться. 

Точный состав
Собственно, из чего состоит тема? Из 56 xpm-файлов, такого же количества необязательных png и текстового themerc. Кроме того, некоторые авторы добавляют еще и README. Почему столько? Потому что элементов много, каждый имеет два состояния (active и inactive - для окна в фокусе и на заднем плане, соответственно). Все окно складывается из множества кусочков как конструктор.



Границы
Самый сложносоставной элемент - заголовок окна. Помимо правой и левой границ, title разбит аж на пять отдельных кусочков!  В терминологии xfwm это будут файлы:

Код Выделить Развернуть

top-left-active.xpm    title-1-active.xpm    title-2-active.xpm    title-3-active.xpm    title-4-active.xpm    title-5-active.xpm    top-right-active.xpm
top-left-inactive.xpm  title-1-inactive.xpm  title-2-inactive.xpm  title-3-inactive.xpm  title-4-inactive.xpm  title-5-inactive.xpm  top-right-inactive.xpm
На элементах top-left, top-right и title-1, title-5 рисуются кнопки. title-3 служит подложкой для текста заголовка, а обрамляют его title-2 и title-4.

С левой и правой сторонами дело обстоит попроще - они состоят всего из одного элемента:

Код Выделить Развернуть

left-active.xpm      right-active.xpm
left-inactive.xpm    right-inactive.xpm

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

Код Выделить Развернуть

bottom-left-active.xpm      bottom-active.xpm      bottom-right-active.xpm
bottom-left-inactive.xpm    bottom-inactive.xpm    bottom-right-inactive.xpm

Кнопки
Их в xfwm много и все они имеют два дополнительных состояния - при наведении курсора (prelight) и нажатое (pressed).

Традиционные свернуть, закрыть и меню окна:

Код Выделить Развернуть

hide-active.xpm  hide-inactive.xpm  hide-prelight.xpm  hide-pressed.xpm

Код Выделить Развернуть

close-active.xpm  close-inactive.xpm  close-prelight.xpm  close-pressed.xpm

Код Выделить Развернуть

menu-active.xpm  menu-inactive.xpm  menu-prelight.xpm  menu-pressed.xpm

Более сложные, такие как развернуть (maximize), свернуть в заголовок (shade) и прикрепить (stick), имеют еще подтип toggled - своеобразный вариант для обратного действия:

Код Выделить Развернуть

maximize-active.xpm          maximize-inactive.xpm           maximize-prelight.xpm          maximize-pressed.xpm
maximize-toggled-active.xpm  maximize-toggled-inactive.xpm   maximize-toggled-prelight.xpm  maximize-toggled-pressed.xpm

Код Выделить Развернуть

shade-active.xpm          shade-inactive.xpm           shade-prelight.xpm          shade-pressed.xpm
shade-toggled-active.xpm  shade-toggled-inactive.xpm   shade-toggled-prelight.xpm  shade-toggled-pressed.xpm

Код Выделить Развернуть

stick-active.xpm          stick-inactive.xpm           stick-prelight.xpm          stick-pressed.xpm
stick-toggled-active.xpm  stick-toggled-inactive.xpm   stick-toggled-prelight.xpm  stick-toggled-pressed.xpm

Рисуем
Согласно Википедии, XPM - текстовый формат графических файлов. Поэтому для его создания даже и не особо нужен графический редактор. Сам файл "внутри" выглядит так (на примере кнопки close-active.xpm):

Код Выделить Развернуть

/* XPM */
static char * close_active_xpm[] = {
"14 10 3 1",
" c None",
". c #F6F6F6",
"+ c #505050",
"..............",
"..............",
"...+++..+++...",
"....++++++....",
".....++++.....",
".....++++.....",
"....++++++....",
"...+++..+++...",
"..............",
".............."};
где close_active_xpm[] - имя элемента, "14 10 3 1" (через пробел) - размер и цвет (ширина - высота - число цветов - символов на цвет), "+   c #505050" (символ - знак_табуляции - с - пробел - цвет) - соответствие символа цвету в кодировке HTML. А дальше и есть наш рисунок.

Сильно большие элементы создавать не стоит. Например, левая граница окна может быть 4 пикселя в ширину и 10 - в высоту. Делать размер кнопки больше размера заголовка и вовсе не имеет смысла.
Для файлов, ответственных за рисование углов нужно создавать по возможности квадратное изображение:

Код Выделить Развернуть

/* XPM */
static char * bottom_left_active_xpm[] = {
"10 10 2 1",
" c None",
"+ c #50A5FF",
"++++      ",
"++++      ",
"++++      ",
"++++      ",
"++++      ",
"++++      ",
"++++++++++",
"++++++++++",
"++++++++++",
"++++++++++"};
Прозрачность традиционно задается пробелом, описываемым как "    c None".

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

Для элементов title-2 и title-4 размер также принципиален - они не растягиваются, а рисуются как есть. Элементы title-1, title-3, title-5 и bottom растягиваются только в ширину. left и right (границы окна) - тянутся в высоту.

Как будет выглядеть каждый элемент - дело только вашей фантазии. Можно рисовать все в GIMP, а потом нажимать "Экспорт в..." и сохранять как xpm.

Гламур
Помните о png файлах? Так вот, они как раз нам понадобятся для "огламуривания" темы, т.е. создания псевдо-3D-эффекта. Для каждого xpm-файла следует создать одноименный png, который будет содержать в себе налагаемое сверху изображение.



Собираем в единое целое
Рисунки готовы. Теперь самое время придумать имя теме. Пусть она называется "My cool xfwm theme". Создайте каталог с таким именем, в нем еще один - уже с именем xfwm4 (обязательно!) и копируйте туда все рисунки. Последний штрих - создаем там же текстовый файл themerc, в котором задаются параметры как поступать с тем или иным элементом.:

Код Выделить Развернуть

#  Цвет текста
active_text_color=#333333
inactive_text_color=#999999

#  Сдвиг кнопок относительно края окна и друг друга. Может быть отрицательным.
button_offset=0

#  Расстояние между кнопками. Может быть отрицательным, тогда они будут налагаться друг на друга
button_spacing=-1

#  Сдвиг кнопок в режиме "развернуто на весь экран"
maximized_offset=2

#  Следует ли расширить title-3 на весь заголовок или отображать его только под текстом
full_width_title=true

#  Показывать иконку приложения? Если нет, то будет просто кнопка меню.
show_app_icon=true

# Тень текста
title_shadow_active=false
title_shadow_inactive=false

# Сдвиг текста по вертикали и горизонтали
title_horizontal_offset=1
title_vertical_offset_active=1
title_vertical_offset_inactive=1

Можно запретить пользователям менять расположение текста и кнопок, жестко задав расположение:

Код Выделить Развернуть

#  O = Меню окна (menu)
#  T = Прикрепить (stick)
#  H = Свернуть (hide)
#  S = Свернуть в заголовок (shade)
#  M = Развернуть (maximize)
#  C = Закрыть (close)
#  | = Текст (title)
button_layout=OTS|HMC

# Выравнивание текста
title_alignment=left

Хитрости
Хитрость 1:
Тема классная, цвета радуют глаз. Но тут захотелось сменить тему GTK на что-то другое и снова получается диссонанс. Придется перекрашивать? Нет. Разработчики предусмотрели и такой вариант развития событий. Для каждого цвета можно указать соответствие в цветах GTK:

Код Выделить Развернуть

". c #333333 s active_color_1",
"+ c #F05120 s active_text_color",
И тема будет "косить под" оформление GTK. Подробнее о соответствиях - по первой полезной ссылке

Хитрость 2:
Для создания кнопок в стиле a-la последние версии Windows размер кнопки укажите равным размеру заголовка (title), а пространство снизу заполните прозрачностью:

Код Выделить Развернуть

/* XPM */
static char * close_active_xpm[] = {
"33 20 3 1",
" c None",
". c #333333",
"+ c #F05120",
".+++++++++++++++++++++++++++++++.",
".+++++++++++++++++++++++++++++++.",
".+++++++++++++++++++++++++++++++.",
".+++++++++++++++++++++++++++++++.",
".+++++++++++++++++++++++++++++++.",
".+++++++++++...+++...+++++++++++.",
".++++++++++++...+...++++++++++++.",
".++++++++++++++...++++++++++++++.",
".+++++++++++++.....+++++++++++++.",
".++++++++++++...+...++++++++++++.",
".+++++++++++...+++...+++++++++++.",
".+++++++++++++++++++++++++++++++.",
".+++++++++++++++++++++++++++++++.",
".+++++++++++++++++++++++++++++++.",
".+++++++++++++++++++++++++++++++.",
" ............................... ",
"                                 ",
"                                 ",
"                                 ",
"                                 "};



Полезные ссылки:
1. Официальный how-to.
2. Любая тема в /usr/share/themes/*/xfwm4/
3. Статья из PCLinuxOS Magazine.

Благодарим за терпение и удачного рисования

[Datarza]

Насколько я понимаю, это темы оформления окон, которые задаётся в диспетчере окон. А где можно найти исчерпывающее описание про темы, которые задаются во внешнем виде. Особенно интересны GTK 3 темы (так как в Debian всего две такие, Адвайта c глючным меню и феникс не входящий в стандартную поставку XFCE)...

[Malaheenee]

Попробуйте порыться на убунтовском форуме. Там в свое время активно обсуждался этот вопрос и мы даже какое-то мини-руководство читали.

[skyhawk1979]

Ребят, привет всем. Не пинайте сильно, пожалуйста. Подскажите, если не сложно, как поменять именно фон рамки окна? Вроде делаю все правильно, а выходит ерунда. Фон-то меняеятся, но вместе с ним расползаются и кнопки. Явно я что-то не то делаю.
Ах да, чуть не забыл, XFCE4.14, т.е. я кручу тему xfwm4)))

P.S. Спасибо, уже не нужно, разобрался сам))