パーソナルツール
現在の場所: ホーム plone カスタマイズ portlet の色と余白を変更
書いた本
Plone 完全活用ガイド の Chapter 1, 2, 3, 11 を執筆しました。
plone のインストール、使い方から、機能・デザインのカスタマイズ、プロダクトの作り方まで、 plone のすべてがぎゅっと詰まっている書籍になっていると思います。
plone に興味がある人から、すでに使いこなしている方まで、ぜひ読んでみてください。
Plone 完全活用ガイドのサポートページ
ナビゲーション

 
文書操作

portlet の色と余白を変更

作成者 takanori 最終変更日時 2005年05月11日 01時10分

「最近の公開」 portlet や「最近の blog エントリー」 portlet を表示するようになったのにあわせて、portlet の表示方法を少し変更しました。

目次

偶数行の色を変更[evencolor]

plone の portlet を表示するときに、偶数行には色がつくようになっています。 この色は初期状態では #f7f9fa という薄い水色になっています。

この色だとこのサイトの他の色と合わないので、変更します。

色を変更するために、portal_skins/custom/base_properties にアクセスします。 (custom フォルダに base_properties が存在しない場合は、 /portal_skins/plone_styles/base_properties にアクセスして Customize ボタンをクリックしてコピーを作成します。) 次に、Properties タブをクリックして、プロパティを表示します。

Click properties tab

portlet の偶数行の色は evenRowBackgroundColor というプロパティに設定してあります。 ここでは値を #e9ebb1 に変更します。

Modify evenRowBackgroundColor property

変更を保存して portlet を再表示すると、偶数行の背景色が変更されていることが確認できます。

表示幅の変更[columnwidth]

次に、portlet の表示幅を変更します。 blog エントリーなどでタイトルを表示すると、たくさん改行されて窮屈な感じが吸うrので、portlet の表示幅を標準よりも広げようと思います。

portlet の表示幅は portal_skins/custom/base_propertiescolumnOneWidth (左側の表示幅)と columnTwoWidth (右側の表示幅)というプロパティで設定しています。

ここでは、左側の portlet の表示幅を広げるので、columnOneWidth プロパティの値を初期値の 16em から 24em に変更します。

Modify columnOneWidth property

行間の幅の変更[padding]

最後に、portlet の中の行間が広く高さをとるので、この幅を狭くします。

この行間の幅は今まで設定してきたプロパティではなく、plone.css に記述してあります。 しかしここでは、plone.css は直接編集しないで ploneCustom.css に記述を追加する形で設定を変更します。

base_properties と同様に portal_skins/plone_styles にアクセスし、 ploneCustom.csscustom フォルダにコピーします。

次に、ploneCustom.css に以下のように記述します。:

    /* <dtml-var "enableHTTPCompression(request=REQUEST, debug=1, css=1)"> (this is for http compression) */
    /* <dtml-with base_properties> (do not remove this :) */
    /* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

    .portletContent {
      padding: 0.3em 0.5em;
    }

    /* </dtml-with> */

真中の .portletContent が追加した記述で、余白を上下に 0.3em 左右に 0.5em とるように指定しています。(初期値ではどちらも 1em となっています。)

これらの変更により、 portlet は以下のように表示されるようになりました。

Sample portlet image


Powered by vine linux, python, zope, plone, coreblog