CloudStackインストールしたら何やる?

UIのカスタマイズでしょ。

ということでまったくの初心者ですが、
CloudStackのAdvent Calender 5日目を担当させていただきます。

UIのカスタマイズに挑戦したまとめです。
ロゴ背景とメニューアイコンの変更を行ってみました。
環境はOS:Centos6.4、バージョン4.2.0です。

ロゴ背景の変更

デフォルトの画面

f:id:kashigeru:20131203120407j:plain

参考 http://www.slideshare.net/cloudstack/cloudstack-ui-customization

下記スタイルシートを修正します。

/usr/share/cloudstack-management/webapps/client/css/cloudstack3.css

Headerの画像指定を変更します。

/*Header*/
#header {
  height: 56px;
  /*background: #DFDFDF url(../images/bg-header.png) repeat-x;*/
  background: #DFDFDF url(../images/sudachi.png) repeat-x;  ←指定を変更
}

画像を下記ディレクトリに置く

/usr/share/cloudstack-management/webapps/client/images

ログインし直すと

f:id:kashigeru:20131203121426j:plain

背景がすだちくんに変わりました。
※すだちくんは徳島県ゆるキャラです。
 http://www.pref.tokushima.jp/nattoku/about/aisatsu.html

メニューアイコンの変更

次はメニューのアイコンを変更してみます。
ロゴ背景変更の時と同じスタイルシートを修正します。

/usr/share/cloudstack-management/webapps/client/css/cloudstack3.css

試しにダッシュボードのアイコンを変更してみます。
修正箇所は
Navigation iconsのnavigation ul li.dashboard-user span.icon

デフォルトだと画像はicons.pngのbackground-positionで指定した所を参照しているのですが、
直接画像のURLを指定します。

/*Navigation icons*/
#navigation ul li.dashboard-user span.icon {
 /*background-position: -14px -18px;*/
  background-image: url(../images/sudachi1.png); ←画像を指定

画像を下記ディレクトリに置く

/usr/share/cloudstack-management/webapps/client/images

ログインし直すとダッシュボードのアイコンがすだちくんに変わっています。

f:id:kashigeru:20131203180457j:plain

すべてすだちくんへ変更w

f:id:kashigeru:20131203181009j:plain

他にも色々とカスタマイズ出来るようなので挑戦したのですが、
失敗して下記のような画面に(TдT)

f:id:kashigeru:20131203121750j:plain

FirefoxのアドオンFirebugを使いながらやるとcssの変更要素が特定しやすくなります。

f:id:kashigeru:20131203181350j:plain

こちらのChapter8も参考に。

CloudStack徹底入門

CloudStack徹底入門

超初心者的な内容ですが、参加させて頂きありがとうございました。
すだちくんもよろしくお願いします。