Personal tools
Navigation
About this blog
なごすいぶろぐ。「すべてはなごすいのために」。
Categories
COREBlog2 (29)
Zope (59)
Linux (26)
Misc (47)
Nagosui (11)
ReadingCOREBlog (7)
Plone (74)
Python (17)
Turbogears (18)
COREBlog1 (30)
moblog (5)
Django (12)
Recent entries
ALAにJeffさんの記事が。 nyusuke 2007-06-14
WebデザイナーのためのDjangoはじめの一歩 nyusuke 2007-05-29
東海Python Workshop 01終了 nyusuke 2007-05-27
東海Python Workshop 01が開催されます nyusuke 2007-05-13
管理画面からみるPlone3.0ベータ(後半) nyusuke 2007-05-03
Recent comments
Re:WebデザイナーのためのDjangoはじめの一歩 nyusuke 2007-06-01
Re:WebデザイナーのためのDjangoはじめの一歩 pateo 2007-05-31
Re:東海Python Workshop 01終了 nyusuke 2007-05-31
Re:東海Python Workshop 01終了 kfuruhata 2007-05-30
Re:管理画面からみるPlone3.0ベータ(前半) nyusuke 2007-05-03
Recent trackbacks
Plone Captcha 1.0.2 と Plone Captchas 1.0 takalog 2007-01-13
plone 2.5.2-rc1 にアップグレード takalog 2007-01-05
Vine Linux 4.0 にアップグレード(その1) takalog 2006-11-26
オハイオ州日本語サイトを手かけ始めた ロバートのブログ 2006-08-14
TurboGears関連記事 Twisted Mind in TurboGears 2006-08-06
Recent Changes
All recent changes…
Amazon Items






Adsense
Document Actions

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

後半戦に突入

by nyusuke posted at 2006-02-19 20:39 last modified 2006-08-06 17:38

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

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

また今回は3段組のリキッドでいきたいと思いますが、左右のカラムは固定幅で設定したいと思います。ここで問題なのは左右カラムの幅をいくつにするかということですが、まぁこういうのはだいたい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;
}

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

前回見たとおり、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(数字)」というクラスによって階層が実現されてます。階層は一番上の階層がレベル0で、一応レベル5まで存在します。よく使いそうなレベル0~2くらいはちょっと大きめの字下げで、レベル3以降は狭めの字下げにしてやることにします。

.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;
}

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

060219-1

Category(s)
Plone Plone
The URL to Trackback this entry is:
http://nagosui.org:8080/Nagosui/COREBlog2/plone-skin-customizing-firefox-clone-2/tbping
Add comment

You can add a comment by filling out the form below. Plain text formatting.

(Required)
(Required)
(Required)
(Required)
Enter the word