第4章 グラフィカルユーザーインターフェイスのブランド化と色調節

グラフィカル要素をカスタマイズするには、カスタマイズ可能な要素をカスタムブランドの資料に変更または置き換え、コンテナーファイルを更新します。

インストーラーのカスタマイズ可能なグラフィカル要素は、インストーラーランタイムファイルシステムの /usr/share/anaconda/pixmaps/ ディレクトリーに保存されます。このディレクトリーには、以下のカスタマイズ可能なファイルが含まれます。

pixmaps
├─ anaconda-password-show-off.svg
├─ anaconda-password-show-on.svg
├─ right-arrow-icon.png
├─ sidebar-bg.png
├─ sidebar-logo.png
└─ topbar-bg.png

さらに、/usr/share/anaconda/ ディレクトリーには、anaconda-gtk.css という名前の CSS スタイルシートが含まれており、メインの UI 要素のファイル名とパラメーター (サイドバーとトップバーのロゴおよび背景) を決定します。このファイルには、要件に従ってカスタマイズできる以下の内容が含まれます。

/* theme colors/images */

@define-color product_bg_color @redhat;

/* logo and sidebar classes */

.logo-sidebar {
   background-image: url('/usr/share/anaconda/pixmaps/sidebar-bg.png');
   background-color: @product_bg_color;
   background-repeat: no-repeat;
}

/* Add a logo to the sidebar */

.logo {
   background-image: url('/usr/share/anaconda/pixmaps/sidebar-logo.png');
   background-position: 50% 20px;
   background-repeat: no-repeat;
   background-color: transparent;
}

/* This is a placeholder to be filled by a product-specific logo. */

.product-logo {
   background-image: none;
   background-color: transparent;
}

AnacondaSpokeWindow #nav-box {
   background-color: @product_bg_color;
   background-image: url('/usr/share/anaconda/pixmaps/topbar-bg.png');
   background-repeat: no-repeat;
   color: white;
}

CSS ファイルの最も重要な部分は、解決に基づいてスケーリングを処理する方法です。PNG イメージの背景はスケーリングされず、常に実際の画面に表示されます。代わりに、バックグラウンドには透過的な背景があり、スタイルシートは @define-color 行に一致する背景色を定義します。そのため、バックグラウンド イメージ は背景の 色 に "フェード" します。これは、イメージのスケーリングを必要とせずに、すべての解像度でバックグラウンドが機能することを意味します。

また、background-repeat パラメーターをバックグラウンドのタイル配置に変更することもできます。インストールするすべてのシステムが同じディスプレイの解像度を持つことを保証している場合は、バー全体を埋めるバックグラウンドイメージを使用できます。

上記のファイルはどれでもカスタマイズできます。これを行ったら、セクション 2.2 "product.img ファイルの作成" の手順に従い、カスタムグラフィックスを備えた独自の product.img を作成します。その後、セクション 2.3 "カスタムブートイメージの作成" を参照し、変更が含まれる新しいブート可能な ISO イメージを作成します。