Redmine テーマ(スタイル)をカスタマイズする

Redmineは独自CSSを用意する事で、テーマ(スタイル)をカスタマイズする事ができる。仕事でまじめにRedmineを使うと気になるところがいくつかあったので、組み込んでみた。

手順は以下のとおり。

1. redmine-0.7.3/public/themes以下にフォルダを作成(このフォルダがテーマ名になる)
2. さらにその下にstylesheetsフォルダを作成する
3. 2で作成したフォルダに application.css を作成し、カスタムスタイルを定義する。
4. Redmineを再起動
5. 管理 > 設定 > 全般 > テーマで、追加テーマを選択

フォルダ構造は以下のようになる。

redmine-0.7.3/public/themes
  /alternate
  /classic
  /my_theme ←ここ以下を追加
    /stylesheets
      application.css

application.cssは、こんな風にしてみた。

/* デフォルトスタイルシートをインポート */
@import url(../../../stylesheets/application.css);

/* 日付フィールドを幅広に。数字フィールドは右寄せ。*/
#issue_start_date { width: 80px; }
#issue_due_date { width: 80px; }
#issue_estimated_hours { text-align: right; }
#issue_done_ratio { text-align: right; }
#time_entry_hours { text-align: right; }

/* 
 * 本文をインデントしてh1～h3を目立たせる
 * (全体をインデントして、見出しをマイナスインデント)
 * h2, h3に章番号を表示(Firefox用、IE未対応)
 */
   
fieldset.preview {
    margin-left: -20px;
    padding-left: 20px;
    padding-right: -40px;
}

div.wiki {
    margin-left: 20px;
    margin-right: 20px;
}

div.wiki h1, div.wiki h2, div.wiki h3 {
    margin-left: -20px;
}

div.wiki h1 {
    margin-right: -20px;
}

div.wiki h2 {
    counter-increment: chapter;
    counter-reset: section;
}

div.wiki h2:before {
    content: counter(chapter) ". ";
}

div.wiki h3 {
    counter-increment: section;
}

div.wiki h3:before {
    content: counter(chapter) "." counter(section) ". ";
}

div.wiki h4 {
    border-bottom-width: 0px;
    text-decoration: underline;
}


/*
 * 警告と情報の強調表示
 * *(warn) xxxxx
 * *(info) xxxxx
 */
ul.warn>li {
    border: 1px solid silver;
    margin: 5px 0px 5px -20px;
    padding: 2px 0px 3px 30px;
    background-image: url(../../../images/warning.png);
    background-repeat: no-repeat;
    background-position: 5px 50%;
    list-style-type: none;
}

ul.info>li {
    border: 1px solid silver;
    margin: 5px 0px 5px -20px;
    padding: 2px 0px 3px 30px;
    background-image: url(../../../images/help.png);
    background-repeat: no-repeat;
    background-position: 5px 50%;
    list-style-type: none;
}

/* テキストエリアのフォントを小さく */
textarea.wiki-edit {
    font-size: 12px;
}