Ploneのスキンをカスタマイズしていこうじゃないか２

さぁ後半戦に突入です。とりあえず残っているのはカラム部とフッタ部ですな。早速カラム部から。

カラム部はテーブルレイアウトになっています。左のカラムが「#portal-column-one」、中央カラムが「#portal-column-content」、右のカラムが「#portal-column-two」と名付けられています。各カラムはtdで作られていますので「vertical-align: top;」が必要です。

また今回は３段組のリキッドでいきたいと思いますが、左右のカラムは固定幅で設定したいと思います。ここで問題なのは左右カラムの幅をいくつにするかということですが、まぁこういうのはだいたい200px前後というのが相場じゃないでしょうか。そして左右にカラムがある場合は片方を200pxより小さく、もう片方を200pxより大きくとるのがいいですな。Ploneでいえば例えばナビゲーションツリーなんかは階層ごとに字下げがあるので幅は広めにとりたいし、カレンダーみたいに完全に幅が決まっているものなんかは広くとることもないかなと。

これをふまえてここではデフォルトでナビゲーションツリーが配置されている左カラムは220px、カレンダーが配置されている右カラムは170pxとしておきます（テキトーまんせー）。マージンとかパディングもテキトーに少しとっておこうかな。

#portal-columns{
  margin-top: 15px;
  width: 100% !important;
}

#portal-column-one{
  vertical-align: top;
  width: 200px;
  padding: 5px;
  padding-top: 15px;
}

#portal-column-content{
  vertical-align: top;
  padding: 5px;
}

#portal-column-two{
  vertical-align: top;
  width: 170px;
  padding: 5px;
  padding-top: 15px;
}

３段組が終わったところで左カラムのポートレットの設定に移ることに。

前回見たとおり、SpreadFirefoxの左ポートレットはポートレットヘッダが緑色の文字色・グレーの下線というスタイル。テキトーにマージンやパディングなんかも設定しておきましょうか。文字スタイルはaタグがある場合と無い場合を想定して設定しておきます。

#portal-column-one .portletHeader{
  padding: 5px;
  margin-bottom: 5px;
  color: #1D9101;
  border-bottom: 1px solid #CDD5D5;
  text-decoration: none;
  font-weight: normal;
}
#portal-column-one .portletHeader a{
  color: #1D9101;
  text-decoration: none;
  font-weight: normal;
}

続いてポートレットアイテム。ここは基本的にaタグのスタイルそのままでいいんだけど、liとかddのスタイルでは左マージンがとられているのでこいつを消しておきます。ulはリストスタイルも無くしておく必要があるでしょう。ついでにフッタもほげほげ。

#portal-column-one ul{
  margin-left: 0;
  list-style: none;
  list-style-image: none;
}

#portal-column-one li, #portal-column-one dd{
  margin-left: 0;
}

#portal-column-one .portletFooter{
  padding-top: 5px;
  padding-right: 5px;
  border-top: 1px solid #CDD5D5;
  text-align: right;
}

#portal-column-one .portletFooter a{
  color: #4C6699;
}

さてめんどくさいのがナビゲーションツリーとログインフォーム。まずナビゲーションツリーは他のポートレットと違って、単純にdlでタグ付けされているわけではなく、dlにulが内包されている形になっています。ul内のliによってツリーが構成され、「navTreeLevel（数字）」というクラスによって階層が実現されてます。階層は一番上の階層がレベル０で、一応レベル５まで存在します。よく使いそうなレベル０～２くらいはちょっと大きめの字下げで、レベル３以降は狭めの字下げにしてやることにします。

.navTreeLevel0{padding-left: 0; }
.navTreeLevel1{padding-left: 15px;}
.navTreeLevel2{padding-left: 30px;}
.navTreeLevel3{padding-left: 40px;}
.navTreeLevel4{padding-left: 50px;}
.navTreeLevel5{padding-left: 60px;}

もうちょっといろいろ設定した方がいいクラスなんかもありそうですが、めんどくさいのでとりあえずこれだけにしておきます。

次はログインフォーム。ポートレットにあるログインフォームはSpreadFirefoxでは独自のスタイルが設定されているのでこいつに取りかかります。ここには「portlet-login」というIDが設定されています。これに対して背景色、ボーダー、パディングなどを設定していきます。よく見たらログインボタンのボーダーも少しスタイルを設定する必要があるみたいな気が。おっとSpreadFirefoxではここのヘッダーは非表示ですか。

#portlet-login{
  padding: 10px;
  background: #EDF2F2;
  border: 1px solid #CDD5D5;
}
#portlet-login .portletHeader{
  display: none;
}
#portlet-login .formControls input{
  margin-top: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #DDE3E4;
  border-bottom: 2px solid #DDE3E4;
  border-left: 2px solid #fff;
}

左ポートレットはこれでキリがついたことにしておきましょう。

続いて右カラムに移ります。左カラムと違って背景色などありますのでカラーなどを調整していきます。パディングとかも適宜調整。もうここらへんは色さえあってればいいかくらいの勢いで見た目を確認しながらテキトーにやります。

#portal-column-two .portlet{
  padding: 15px;
  padding-bottom: 10px;
  background: #CDF2AE;
}
#portal-column-two .portletHeader{
  margin-bottom: 5px;
  color: #1D9101;
  border: 0;
  text-decoration: none;
  font-weight: bold;
}
#portal-column-two .portletHeader a{
  color: #1D9101;
  text-decoration: none;
  font-weight: bold;
}

#portal-column-two ul{
  margin-left: 0;
  list-style: none;
  list-style-image: none;
}
#portal-column-two .portletItem, #portal-column-two .portletFooter{
  margin-left: 0;
}
#portal-column-two .portletFooter{
  padding-top: 5px;
  border-top: 1px solid #C6DDA2;
}

右カラムでめんどくさいのがカレンダー。まぁほかっといてもいいかー、と思いつつも、右カラムポートレットに近くしてみようかなと思い立ってほげほげ。カレンダーはtableで作られているので、thにはportletHeaderと同じスタイルを適用。th aにはportletHeader aと同じスタイルを適用。

.ploneCalendar{
  width: 170px;
  background: #CDF2AE;
}
.ploneCalendar th{
  padding-top: 10px;
  padding-bottom: 10px;
  color: #1D9101;
  border: 0;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
}
.ploneCalendar th a{
  color: #1D9101;
  text-decoration: none;
  font-weight: bold;
}
.ploneCalendar td{
  padding: 3px;
  text-align: right;
}

いよいよ残りわずかになって参りました。portal-column-contentを調整します。気になるのはドキュメントアクション（プリントアウトとかメールで送るとかそういうやつ）。インライン表示して右寄せしてやりましょうか。あとはコンテンツヘッドラインの下線色とdocumentByLineの色くらいかな。

.documentActions ul{
  list-style: none;
  list-style-image: none;
  text-align: right;
}
.documentActions li{
  display: inline;
}
.documentByLine{
  margin-bottom: 10px;
  color: #716F67;
}

#region-content h1, #region-content h2, #region-content h3, #region-content h4, #region-content h5, #region-content h6{
  padding-bottom: 3px;
  border-color: #CDD5D5;
}

ラストぉ！フッタを設定しないとね。文字小さめ、中央揃えで、文字色薄め、リンクには下線。

#portal-footer{
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid #676767;
  color: #676767;
  text-align: center;
  font-size: 0.8em;
}
#portal-footer a{
  color: #676767;
}

今日は疲れたのでここまで。次回はこれをプロダクトにまとめたいと思います。