Plone3 Theme

概念上 Plone3 Theme 包括 template (page template)、stylesheet (CSS)、image 三種類型，以及 browser、skin 兩種機制。剛接觸 Plone 的朋友，先從修改 image 和 CSS 下手，比較容易入門。

以 CSS 為例，開發的準備工作之一，要將 Plone 執行模式設定成 debug mode 而非 production mode，也就是 parts/instance/etc/zope.conf 檔案的內容，要有下列的設定結果：

debug-mode on

這樣 CSS 修改結果才能馬上生效，而不會受到 cache 和 compression 的影響。

在 ZMI 的 plone_skins/plone_styles 裡，找得到 ploneCustom.css 檔案，預設是個空白範例，可以用來測試設定效果。想要修改它，先確定下拉選單的選項是 custom，再按 Customize 鈕，這樣會把這份灰底設定檔複製到 portal_skins/custom 目錄，並打開在網頁上等待編輯。值得留意的是，僅管下列內容看似是註釋文字，但它們是會被執行的程式碼，通常不該被刪除：

/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

/* </dtml-with> */

除此之外的 /* */ 內容都是註釋文字，要刪要留，悉聽尊便。

例如，下列是一段可以讓版面置中對齊的設定範例：

#visual-portal-wrapper {
  background: #aaaaaa url(&dtml-portal_url;/banner.jpg) no-repeat top left;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 900px !important;
}

還有 sectional CSS 的範例，可以單獨修改首頁的顯示方式。更多的資訊，可參考 Plone 3 Theming 書籍。