【Redmine】トップページの帯(ヘッダー)色を変える

ソフトウエア

<景品表示法に基づく表記> 本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

知りたいこと。解決できること

Redmine トップページの帯(ヘッダー)色を変えたい。

この疑問に回答します。

プロジェクトのチケット管理をするためのソフトとして有名なRedmineです。開発プロジェクトを複数進めているとRedmineが被ります。見た目を変更して勘違いを防ぎましょう。

トップページの帯(ヘッダー)色を変える手順

Redmine トップページの帯(ヘッダー)色を変えるにはCSSファイルを変更するだけです。CSSの変更はRedmineのウェブ画面から変更することが出来ません。直接、CSSファイルを書換えます。

Redmineのインストール場所は任意です。自分の環境に合わせて読替えてください。私は /usr/share/redmine にインストールを行いました。

関連記事 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か所を変更すると色変更に違和感が無くなります。

Redmine トップページの帯(ヘッダー)色を変える
Redmine トップページの帯(ヘッダー)色を変える
  • ① 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 トップページの帯(ヘッダー)色を変えることが出来ます。もし、色が変わらないなどが発生した場合は、ブラウザキャッシュが原因です。

「キャッシュクリア」や「再読み込み」を実施すると設定が反映します。