Customization

Theme Overview

Sunburst 是 Plone 4 的預設佈景主題，原始碼的 skins 目錄包含相關的資源檔，其中的 CSS 檔案依據重要性排序如下：

skins/
├── sunburst_templates
│   └── main_template.pt
├── sunburst_styles
│   ├── base_properties.props
│   ├── base.css
│   ├── public.css
│   ├── forms.css
│   ├── columns.css
│   ├── controlpanel.css
│   ├── authoring.css
│   ├── member.css
│   ├── mobile.css
│   ├── portlets.css
│   ├── navtree.css
│   ├── print.css
│   ├── invisibles.css
│   ├── IEFixes.css
│   ├── reset.css
│   ├── RTL.css
│   ├── kupuplone.css
│   ├── deprecated.css
│   └── ploneCustom.css.dtml
└── sunburst_images
    ├── logo.png
    └── pb_close.png

Skin

section.css

利用 CSS 設定修改特定目錄或型別的顯示方式，通常是取消特定項目的顯示。

# customize 'getSectionFromURL' in plone_scripts
# edit the last line from:
return "section-" + contentPath[0]
# to:
return " ".join(["section-" + "-".join(contentPath[:d+1] for d in range(len(contentPath))])

allchars = "".join([chr(x) for x in range(256)])
return " ".join([c.translate(allchars, ' ') for c in ["section-" + "-".join(contentPath[:d+1]) for d in range(len(contentPath))]])

常用的技巧，是利用 CSS Class Name 來取消特定項目的顯示，例如 .next {display: none !important;} 來取消 Prev Next Listing Bar 的項目顯示，通常會搭配 Collection 型別的情境，所以可以用 .portaltype-collection .next {} 來精準比對。不過，實務上 .next {display: none} 還是會誤殺「後 N 筆」的顯示，技巧是搭配 z3c.jbot 建立 plone.app.layout.nextprevious.nextprevious.pt 的 Override 檔案，例如把 class="next" 改成 class="list-next" 就可以避免誤殺的情況。

Remove Skins Example

Plone4 Skin Theme 直接在 Plone5 生效的話，可能因為 Skin Layer 預設缺少設定值，造成讀不到 CSS JS 資源檔的問題，要從 portal_skins 的 Properties 檢查。

Error Message

default_error_message.pt 和 standard_error_message.pt

Responsive Design

考慮挑選符合 Responsive Design 的 Diazo 模組，像 plonetheme.responsivetheme 或 beyondskins.responsive 可以先安裝測試，這樣有助於建立適合 mobile device 或不同瀏覽環境的網站。

Responsive Grid Frameworks

Responsive Grid System

Section Navigation

Dropdown Menu / Mega Menu: webcouturier.dropdownmenu: plone5 textnroll.theme UUID fixing 外觀範例 textnroll + Plone5

Products.PloneOrg

待顯示圖表說明客製化關係圖 pragmatic plone project p14-15

Title Customization Based On URLs plone.app.layout/viewlets/common.py TitleViewlet (title.pt) 直接繼承會 conflict 在 configure.zcml 裡使用 layer 選項就不會 conflict

使用 tal:condition="python: not isAnon" 的 Template 語法來過濾特定 Tab 的顯示

Template Customization

z3c.jbot: logo.pt plone.app.layout/viewlets/logo.pt

http://plone.org/documentation/kb/customization-for-developers/tutorial-all-pages

widget rendering

tweak autogenerated IDs and HTML titles

Random Header Image

related item display more info and sorting

Form

PloneFormGen

Action

Problem Creating New Action: folder_content view Move Order

Access Parent Container

go to top

新增項目後執行特定動作

plone.pathbar Viewlet 執行 PathBar 的 Python Class，實際再呼叫 breadcrumbs_view。

class PathBarViewlet(ViewletBase):
    index = ViewPageTemplateFile('path_bar.pt')

    def update(self):
        super(PathBarViewlet, self).update()

        self.is_rtl = self.portal_state.is_rtl()

        breadcrumbs_view = getMultiAdapter((self.context, self.request),
                                           name='breadcrumbs_view')
        self.breadcrumbs = breadcrumbs_view.breadcrumbs()

breadcrumbs_view 在 Products/CMFPlone/browser/configure.zcml 註冊兩次：

  <browser:page
      for="*"
      name="breadcrumbs_view"
      class=".navigation.PhysicalNavigationBreadcrumbs"
      permission="zope.Public"
      allowed_attributes="breadcrumbs" />

  <browser:page
      for="plone.app.layout.navigation.interfaces.INavigationRoot"
      name="breadcrumbs_view"
      class=".navigation.RootPhysicalNavigationBreadcrumbs"
      permission="zope.Public"
      allowed_attributes="breadcrumbs" />

Control Panel

Dictionary Type Record

FavIcon can be scaled from 128px or more down to 16px without quality compromises.

<link rel="icon" href="/++theme++mytheme/img/favicon.png" type="image/png">
<link rel="apple-touch-icon" href="/++theme++mytheme/img/favicon.png">