Redmineのヘッダー色を変更して、
どのプロジェクトに関する情報を操作しているのかをぱっと見で分かるようにする。
目的：ヘッダー色を変更する。
プロジェクト管理、タスク管理でRedmineをよく使います。
使い慣れている人が多かったり、導入のハードル（利用開始までのリードタイムや運用コスト）が
低かったりするのはいいのですが、
内部的な管理とお客さん向けの管理で別のRedmineを使うことがあって、これが大変。
どっちのRedmineを使ってるんだ？となることが多くて、いつか変な更新しそう。。
なので、ヘッダー色を変えて直感的にどっちのRedmineを使っているかわかるようにしよう。
というのが本日の目的。
対応方法：cssの修正。
Redmineの管理画面から変えられないかと探したけど、見つからず。
ヘッダの変更にはstylesheetを編集する必要がありそうでした。
↓のcssを修正すれば変えられそうだと判断。
htdocs/public/stylesheets/application.css環境
* Debian 10.9
* Redmine 4.1.1
cssの編集
cd htdocs/public/stylesheets/
cp application.css application.css.org
# 変更したい色をベースに変更箇所を特定。-> 全体的に変更して感覚的に違うものとしたいので。
# vi でファイルを編集
# diffで変更前後を比較。。したらたくさん出てきたので変更後だけピックアップ。
diff application.css application.css.org
< #top-menu {background: #004d40; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;}
< #header {min-height:5.3em;margin:0;background-color:#009688;color:#f8f8f8; padding: 4px 8px 20px 6px; position:relative;}
< #main-menu li a:hover {background: #009688; color: #fff; }
< #main-menu li a.new-object {background-color: #009688; }
< border-right: 1px solid #009688;
< border-bottom: 1px solid #009688;
< border-left: 1px solid #009688;
< #main-menu .menu-children li a:hover {color: #fff; background-color: #009688;}
< #project-jump .drdn-items>a:hover {background-color:#009688; color:#fff !important;}
< .ui-menu .ui-menu-item:hover {font-weight:normal; color:#555; background:#009688; color:#fff !important; border:1px solid #009688;}
< .ui-menu .ui-menu-item.ui-state-focus {font-weight:normal; color:#555; border-color:#009688;}
< .tribute-container li.highlight {background-color: #009688; color:#fff;}
< #top-menu {background: #004d40; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;}
< #header {min-height:5.3em;margin:0;background-color:#009688;color:#f8f8f8; padding: 4px 8px 20px 6px; position:relative;}
< #main-menu li a:hover {background: #009688; color: #fff; }
< #main-menu li a.new-object {background-color: #009688; }
< border-right: 1px solid #009688;
< border-bottom: 1px solid #009688;
< border-left: 1px solid #009688;
< #main-menu .menu-children li a:hover {color: #fff; background-color: #009688;}
< #project-jump .drdn-items>a:hover {background-color:#009688; color:#fff !important;}
< .ui-menu .ui-menu-item:hover {font-weight:normal; color:#555; background:#009688; color:#fff !important; border:1px solid #009688;}
< .ui-menu .ui-menu-item.ui-state-focus {font-weight:normal; color:#555; border-color:#009688;}
< .tribute-container li.highlight {background-color: #009688; color:#fff;}これで見た目は変わったので、とりあえずOK。
やってみた感想
思ったよりcssの設定箇所が多かったので、ちゃんと修正できているか微妙ですが、
とりあえず当初の目的は達成できたのでよしとしました。
コメント