2016-03-22

Linux:Xfce4(xfwm4)用のウインドウテーマ作成(1)


Xfce4デスクトップ環境の標準ウインドウマネージャであるxfwm4用のウインドウテーマを作成してみたいと思います。
GTK+2のmetacityで作ればGTK+2ベースのデスクトップ環境でなら大抵使えるものが出来ますが、xfwm4専用はmetacityよりも設定ファイルの構造が簡単で楽に作れるので、Xfce4を使っているユーザーならまずこっちから学んでいったほうが良いと思います。


テーマファイルの置き場所

現在Xfceのバージョン4.2以前のものを使っているディストリビューションは多分無いと思いますが、テーマファイルの置き方が4.2以前と以後では異なり、下記置き場所は4.2以降に対応しています。
/usr/share/themes/[テーマ名]/xfwm4
または
/home/[ユーザー名]/.theme/[テーマ名]/xfwm4
です。

themerc

このファイルが無いとxfwm4ディレクトリ内のデータは認識されません。
ファイルはテキストファイルでボタン画像の配置を調整したりタイトルテキストの設定などを行います。
themercはファイル内に何も記述されていなくても(設定する必要がない場合でも)必ず作成して下さい。
このファイルもxfwm4ディレクトリに置いてください。

画像ファイル

ウインドウフレーム画像はいくつかのパーツに分けて作成します。

xfem4のウインドウテーマは画像の名前でどこに使うパーツなのかを認識するため、決められた名前を付ける必要があります。

ウインドウフレーム画像の種類

ウインドウのフレーム部分に使う画像は
  • top-left(タイトルバーの左端)
  • top-right(タイトルバーの右端)
  • title-1(左側ボタンの表示領域)
  • title-2(左側ウインドウタイトル名の端)
  • title-3(ウインドウタイトル表示部分)
  • title-4(右側ウインドウタイトル名の端)
  • title-5(右側ボタンの表示領域)
  • left(左端のフレーム)
  • right(右端のフレーム)
  • bottom-left(左下フレームの角部分)
  • bottom-right(右下フレームの角部分)
  • bottom (下フレーム)
の12種類あり、それぞれ前面に表示時(active)と背面表示時(inactive)の合計24種類の画像を用意する必要があります。
ファイル名は上記名前にactiveまたはinactiveという単語をつけた名前にする必要があります。

例)
top-left-active.png
top-left-inactive.png

アクティブウインドウと非アクティブウインドウの状態が切り替わっても画像の状態(非アクティブウインドウ時に明度を下げるなど)を変えない場合は、どちらかの画像だけを作成しもう片方はシンボリックリンクにしても問題なく動作します。

タイトルバーボタンの種類

タイトルバーに使用するボタン画像は
  • close(ウインドウを閉じる)
  • maximize(ウインドウ最大化)
  • hide(ウインドウを隠す ※MS Windowsでいう最小化)
  • shade(タイトルバーを残し隠す)
  • menu(ウインドウメニューを表示)
  • stick(現在のワークスペースに固定)
の6種類を最低でもアクティブ時(active)、非アクティブ時(inactive)用の合計12種類作成する必要があります。

またお好みでボタンの状態により画像を切り替えたい場合は
  • prelight(マウスポインタが乗った状態)
  • pressed (クリックした時)
  • toggled(機能がONの状態)※maximize、shade、stickのみ
の画像が必要になります。
こちらの画像はなくても動作に支障はありません。

ファイルの名前はウインドウフレームの時と同じようにつける必要があります。

例)
close-active.png
close-prelight.png
maximize-toggled-active.png
maximize-toggled-inactive.png


下記画像は自分でテストするにあたり作成した画像です。
元画像が小さいので200%に拡大しています。
画像をクリックすると拡大します

実際にテーマとして設定すると下記ウインドウの様に表示されます。
※ウインドウ内のパーツは今回のテーマでは変化しません。



次はthemercファイルによる設定を書きたいと思います。


にほんブログ村 IT技術ブログへ ブログランキング・にほんブログ村へ

0 件のコメント:

コメントを投稿