Redmine トップページの帯(ヘッダー)色を変えたい。
この疑問に回答します。
プロジェクトのチケット管理をするためのソフトとして有名なRedmineです。開発プロジェクトを複数進めているとRedmineが被ります。見た目を変更して勘違いを防ぎましょう。
トップページの帯(ヘッダー)色を変える手順
Redmine トップページの帯(ヘッダー)色を変えるにはCSSファイルを変更するだけです。CSSの変更はRedmineのウェブ画面から変更することが出来ません。直接、CSSファイルを書換えます。
関連記事 CentOS7にRedmine4を導入する(Nginx+Unicron+MySQL)
対象のCSSファイルは「application.css」です。
- [install_dir]/public/stylesheets/application.css
バックアップを取得後にファイルを書換えてください。
# cd [インストール]/redmine/public/stylesheets/ # cp application.css application.css.bak # vi application.css
3か所を変更すると色変更に違和感が無くなります。
- ① top-menu トップメニュー (初期値:#3E5B76)
- ② header ヘッダー(初期値:#628DB6)
- ③ main-menu メインメニュー(初期値:#759FCF)
色の明るさを、top-menu > header > main-menu の順にするといい感じになります。
変更箇所:top-menu トップメニュー
top-menuクラスの「background」で設定されている色を変更してください。top-menuは①の箇所になります。
#top-menu {background: #3E5B76; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;}
簡単ですね。
変更箇所:header ヘッダー
headerクラスの「background-color」で設定されている色を変更してください。headerは②の箇所になります。
#header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 8px 20px 6px; position:relative;}
簡単ですね。
変更箇所:main-menu メインメニュー
main-menuクラスの「background」で設定されている色を変更してください。main-menuは③の箇所になります。対象は hover です。マウスを合わせると色がかわります。
#main-menu li a:hover {background: #759FCF; color: #fff; }
簡単ですね。
これで、Redmine トップページの帯(ヘッダー)色を変えることが出来ます。もし、色が変わらないなどが発生した場合は、ブラウザキャッシュが原因です。
「キャッシュクリア」や「再読み込み」を実施すると設定が反映します。