matsukawar's blog

個人的な技術ブログ。テクニカルアーキテクトを目指しています。Twitter : https://twitter.com/matsukawar

TFSのタスクボードのデザインを変える

ALM Advent Calendar 2012の18日目の記事を書きます。

Team Web AccessのタスクボードのデザインはTeam Web Accessテーマを切り替えることで変更できます。といっても、実際は色が変わるようなものしか用意されていません。
テーマはCSSファイルなどで構成されていますので、もっと自分なりにカスタマイズが可能です!

これについては、以前の日記でテーマの保存場所を特定して、簡単な実験までやっていました。

TFS11のTeamWebAccessで製品バックログを登録する
http://d.hatena.ne.jp/matsukawar/20120519/1339304495

今日は、実際にCSSをいじって、カスタマイズしてみたので、すこしご紹介します。
CSSファイルのカスタマイズは自己責任です!元に戻せるようにバックアップを取ってください;)

修正するファイルは、以下の場所にあります。修正後にTFSの再起動は必要ありませんでした。修正後、ウェブブラウザを更新すると、最新のCSSファイルがロードされて意図したとおりに動作するはずです!

C:\Program Files\Microsoft Team Foundation Server Dev11\Application Tier\Web Services\_static\tfs\11\App_Themes\Default

1.タスクのマウスホバー時の強調表示

タスクをマウスホバーした際に、タスクを特定のスタイルに変更します。

以下を追加します。

.tbTile:hover
{
  border 5px dotted #000000;
}
2.タスクの残工数の入力欄のみ色を変える

デフォルトでは、タスクの工数の入力欄はbackgroundと同色であり、クリックする場所を間違えるとタスクが開いてしまうという、ちょっと不満があったので、目立つようにピンク色にしました。初期設定になっていないのが不思議です。

.tbTile .witRemainingWork にbackground-color属性を追記します。

.tbTile .witRemainingWork
{
 ...
  background-color: pink;
}

こんな感じで、テンプレートをつくっていきます!
ほんとは、テーマ作って公開するとこまでいきたかったですが、時間切れです(>_<)