【Jenkins】Simple Theme Pluginを使って色と画像を変えてみた

1. プラグインの管理から「Simple Theme Plugin」をインストール
2. Jenkinsの管理→システムの設定からThemeを設定できるところへ移動しURL of theme CSSに「/userContent/sample.css」を記載する
3. Jenkinsのホームディレクトリ/userContent へ移動
chefからインストールした場合は /var/lib/jenkins/jenkins-data/userContent/ になります
4. 以下のファイルをダウンロードし配置移動したディレクトリ配下に配置
• jenkins_logo.png
  
• topbar.png
  
• sample.css

@charset "utf-8";

#main-table {
  background-image: url(jenkins_logo.png) !important;
}

#top-panel {
  background-image: url(topbar.png) !important;
}

5. Jenkinsのホームディレクトリ/userContent に以下のように配置される
• /var/lib/jenkins/jenkins-data/userContent/jenkins_logo.png
• /var/lib/jenkins/jenkins-data/userContent/topbar.png
• /var/lib/jenkins/jenkins-data/userContent/sample.css
6. Jenkinsをリロードして画像が変っていることを確認する

JavaScriptも同じようにおけば読み込んでくれるみたいです
簡単なデザイン変更やツール作成時にはいいかもしれないですね

■Tips

sample.css, jenkins_log.png, topbar.pngはそれぞれJenkinsのプロセスを実行しているユーザの権限を与えてください
権限がうまく設定されていないとUI上で反映されません

/userContent/sample.cssはhttpでブラウザ閲覧できる場所にないとJenkinsも参照できません
例えばJenkinsにアクセスするURLがhttp://localhost/jenkinsだった場合には設定するURLは「/jenkins/userContent/sample.css」と入力する必要があります