なんだこれは

Ploneの初期画面です。

Ploneはbodyタグ以下のコンテンツ全体を「visual-portal-wrapper」で包んでいます。そこでこの visual-portal-wrapper の幅を設定してやって、固定幅で表示させてみます。

＊IEバグ回避のために、bodyタグに「text-align: center」、visual-portal-wrapperに「text-align: left」を設定しています。またwrapperがよくわるようにボーダーを表示し、トップマージンに20pxを確保します

Plone.cssは以下のような変更になります。

body {
 font: &dtml-fontBaseSize; ;
 background-color: &dtml-backgroundColor;;
 color: &dtml-fontColor;;
 margin: 0;
 padding: 0;
 text-align: center;　←追加
}

#visual-portal-wrapper {
 margin: 0 auto;
 margin-top: 20px;　←追加
 padding: 0;
 width: 700px;　←追加
 border: 1px solid black;　←追加
 text-align: left;　←追加
}

これを表示すると

とまぁ、ここまではいいですが、bodyの背景をちょっと変えてみましょう。

bodyの背景色はbackgroundColorというプロパティで指定されているので、base propertyをいじってやります。試しに黒にしてみます。

wrapperの部分は白のままにしておきたいので、Plone.cssは以下のような変更になります。

#visual-portal-wrapper {
 margin: 0 auto;
 margin-top: 20px;
 padding: 0;
 width: 700px;
 border: 1px solid black;
 text-align: left;
 background: white;　←追加
}

と、背景色の指定を追加します。

これを表示すると

検索ボタンとコンテンツ部まで黒になります。

なんでやねん。

まぁ、こいつらが背景にbackgroundColorを指定しているからなんだけど…

検索ボタンは↓こいつ。

input.searchButton {
 font-size: 100%;
 margin-bottom: &dtml-borderWidth; ! important;
 background: &dtml-backgroundColor; url(&dtml-portal_url;/search_icon.gif) 2px 1px no-repeat;
 cursor: pointer;
 padding: 1px 1px 1px 15px;
 text-transform: &dtml-textTransform;;
}

コンテンツ部は↓こいつ。

.documentContent {
 font-size: 110%;
 padding: 0em 1em 2em 1em !important;
 background: &dtml-backgroundColor;;
}