portlet の色と余白を変更

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

takanori

目次

偶数行の色を変更[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_properties の columnOneWidth (左側の表示幅)と columnTwoWidth (右側の表示幅)というプロパティで設定しています。

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

Modify columnOneWidth property

行間の幅の変更[padding]

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

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

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

次に、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