Theme QuickStart
設定網址是在 /@@theming-controlpanel 這個設定介面並不會被佈景主題影響，慣例上是從進階設定的「不套用佈景主題的網址」欄位把 IP 填入。
想要調整 Plone 的外觀，通常有三種策略和方式：1) Skin 機制，這是 Plone 4.1 之前的傳統方式。 2) Diazo 機制，從 Plone 4.2 開始導入，它可以跟 Skin 並存，不過，如果只是小規模的調整，實務上還是透過 Skin 比較容易上手。 3) 直接使用 Barceloneta Theme 模組，並搭配 plone.app.theming 和 Diazo 引擎，這是 Plone 5 的預設機制，舊有的 portal_skins 已被移除，或是建議不再使用，改用 plone-legacy 來讓 Barceloneta Theme 相容舊有視覺樣式。
Fat Theme: 不僅提供視覺設計，也提供程式功能，通常要搭配其他套件，像 collective.themefragments, collective.themesitesetup, collective.taxonomy, plonetheme.webpacktemplate 之類。
Plone5 Default Theme
Plone 5 預設佈景主題使用 Barceloneta Theme 模組，它以 Bootstrap 3 為基礎，但並不相依，能在 Plone 環境裡獨立使用。修改之前應該先了解 Plone 結構並盡量沿用視覺元素，例如 LESS 設定值。
Plone Legacy Classes and IDs: .portlet .portletNews, .formHelp .formControls, .context .standalone .destructive, .documentFirstHeading, #portal-column-content, #edit-bar
最簡化的修改範例，先要認識 Resource 和 Bundle，常見的方式是讓客製版本供前台瀏覽之用，沿用 Barceloneta 供後台管理之用。
註: plonetheme.barceloneta PLIP 13787 修改，也有人提議朝 distribution 方向發展。
Gallery
Barceloneta 使用 LESS 作為樣式檔的前處理器，可以在 plonetheme/barceloneta/theme/less 裡，看到樣式資源檔案的目錄結構。依照功能分類，包括 base styling, layout, function, component, view 之類的獨立檔案，主要控制全局的是 barceloneta.plone.less 檔案。
在控制台可以設定 LESS 變數值，修改 color, size, font 之類的參數。新增 class 或 id (應該不是客製的?) 時，要使用 plone-* 的 namespace。
透過 metadata.xml 檔案，可以指定 plonetheme.barceloneta:registerless 的 Resource Profile。
想要修改 LESS 的 CSS 設定值，要在 plonetheme.barceloneta 的 src 目錄，執行 grunt less 或 grunt watch 指令。
最簡化的修改技巧 昇級過程要處理相依問題: plonetheme/barceloneta/theme/less/barceloneta.plone.local.less
<element key="bowerPath"\"{site_url}++plone++static/components/\"</element>
<element key="mockupPath"\"{site_url}++resource++mockup/\"</element>
<element key="mockuplessPath"\"{site_url}++resource++mockupless/\"</element>
grid.plone.less 或 normalize.plone.less 缺少下列設定值，會造成 Bootstrap Grid 產生錯誤:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
plonetheme.booster 範例 wordpress child theme
Using Barceloneta Only for Backend Backend Example #1 #2
Products.CMFPlone/_scripts/_generate_gruntfile.py
+if HAS_BARCELONETA: + modify_vars['barcelonetaPath'] = os.path.join( + os.path.dirname(plonetheme.barceloneta.__file__), + 'theme', + )
Creating Custom Theme Package
預設使用 mr.bob 來建立套件的目錄結構，舊版環境有用 zopeskel.diazotheme 的例子。
例子1: mr.bob with Plone 5.1.1 Unified Installer
$ cd src $ ../bin/mrbob -O my.website bobtemplates.plone:theme_package
例子2: mr.bob with Plone 4.3.7 Unified Installer:
$ cd src
$ ../bin/mrbob -O crgis.theme bobtemplates:plone_addon
--> What kind of package would you like to create?
Choose between 'Basic', 'Dexterity', and 'Theme'. [Basic]: Theme
--> Author's name []:
--> Author's email []:
--> Author's github username:
--> Package description [An add-on for Plone]:
--> Plone version [4.3.6]:
Generated file structure at /home/username/plone_dir/zinstance/src/crgis.theme
預設安裝 plone.app.themingplugins 1.0, z3c.jbot 0.7.2, plone.api 1.4.11, decorator 3.4.2 (最後兩個是 Plone 4.3.x 需要的)
mr.bob with Plone 5.0.7 Unified Installer
include barceloneta resources, toolbar vars and Grunt setup for Themes
如果不想安裝 z3c.jbot 和 plone.app.themingplugins 相依模組，至少要在 setup.py 裡移除。
bobtemplates.plone: For Plone 4 the ussage of ZopeSkel should be enough. It doesn't make sense to support this in the same package here, because it's quite different. But basically with some changes to the rules, it should even work for Plone 4 with Barceloneta. Because we include all Barceloneta resources and the template. But i would recommend to go with ZopeSkel for Plone 4.
Plone Theming Step by Step, by David Bain
背景資訊: Content Providers, Viewlets, formlib
預設啟動 HTML filtering 機制，可以從 ZMI 的 portal_transforms 進行設定。
Template Language 只處理網頁顯示
修改 my/theme/profiles/default/viewlets.xml 檔案的內容，其中的 skinname 要和 profiles.zcml 裡的設定值搭配。
<?xml version="1.0"?> <order manager="plone.topbar" skinname="CGIS" based-on="Plone Default"> <viewlet name="plone.personal_bar" /> </order> <hidden manager="plone.portaltop" skinname="CGIS"> <viewlet name="plone.personal_bar" /> </hidden> </object>
上述的設定結果，會在 plone.topbar 裡顯示 plone.personal_bar，同時也把 plone.portaltop 裡的 plone.personal_bar 取消顯示。
Adventures in the Theming the Complete Saga
註: 如果新增或修改 browser/sunburstview.py 的 Browser View 定義，記得 browser/interfaces.py 也要視需要跟著修改，不然會遇到 Authentication Error 之類的錯誤。
ref: http://www.themeswiki.org/Customizing_Plone_3
mobile.css: portlets go below the content with limited resolution using Sunburst
Customizing Main Template Viewlets
collective.portlet.actions sphinx.themes.plone: Custom Search Per Version
wootheme/woocommerce is a wordpress plugin.
item_icon vs Plone5 Icon Thumb Enhancement in Plone5
SCSS example SCSS vs LESS less2scss Webpack
WCGA and W3C Validation
Google Mobile Friendly Checking
iframe facebook
plone.app.theming
Edit Theme Switcher for plone.app.theming
compatibility: collective.jbot
Bootstrap
使用任一版本的 Bootstrap: A bootstrap theme is just CSS as mentionned on bootswatch, so you can just replace the current css of plonetheme.bootstrap which is an "base theme" for Plone
Register CSS Resource Directory Replace jQueryUI Resource by Bootstrap3 Using Grunt & Bower
Plone User Interface Elements Test Page http://plone.org/test_rendering
plonetheme.bootstrap vs vs.bootstrap.plonetheme diazotheme.bootstrap
Migration Guide: version 2 vs version 3 glyphicon
z3c.jbot
可以處理 CMF object 和 Skin object，但 Subfolder object 的情境下要連 Subfolder 也修改。
collective.examples.jbotforskins
jbot 與 five.grok browserlayer.xml
Make a TTW jbot collective.jbot
FROM:
/* for highlighting of search terms */
.highlightedSearchTerm {
background-color: #ffa;
}
TO:
/* for highlighting of search terms */
.highlightedSearchTerm {
background-color: transparent;
}
collective.pfg.fancybox copyright and copydescrib
Global Navigation / portal_tabs
偵測 current active tab 方法: 1. @@plone_layout 2. @@plone_portal_state
remove Home tab in front page for anonymous users python: member is not None
remove Search box / Breadcrumb from anonymous users
Show Viewlet Only to One Page or Folder
http://stackoverflow.com/questions/3310295/can-a-plone-viewlet-be-made-to-appear-on-one-page-or-folder-only
BrowserView as HomePage
http://plone.org/documentation/kb/applying-a-custom-view-to-a-specific-folder
http://plone.org/documentation/kb/custom-default-page
http://plone.org/documentation/kb/how-to-create-and-set-a-custom-homepage-template-using-generic-setup
Move front-page globalnav to footer
Icon Font Generator config.json Remove Paperclip Fontello Icon for File Types, Replaced by Mimetype Icon
plone5ui.blogspot.com
isThemeEnabled and Conditional CSS
Disable Theming When the User can Edit the Content
<notheme css:if-content="#an-id-only-on-the-edit-page" />
Rotated Image, Responsive Menu
Register Viewlet for Multiple Dexterity Content Types
plone/app/form/pageform.pt 裡定義 <metal:block define-slot="authenticator"> 會被 plone/app/controlpanel/control-panel.pt 用到，程式碼定義在 plone/protect/authenticator.py:
def authenticator(self)
collective.multitheme: for Mosaic and ThemingFragments
Layered Model of Layout Editability
If we require themes to be able to render a very simple grid *in some parts of the page*, then that may not be so onerous.
| Skill Sets | Target Audience | |
|---|---|---|
| The Diazo theme (technically optional) | HTML/CSS skills. Some minor CSS requirements (a basic grid that must work inside the editable bits of panel, an ability to render things like content listings when produced by tiles), but this is not really different from what happens today. | Web Designers |
| The placement of tiles into the grid in the various panels of the site layout | Can be done with a GUI through Site Setup. It's possible to define multiple different site layouts (corresponding to different sections of the site). | Site Administrators |
| The definition of panels and their logical placement in the unthemed site | HTML/CSS skills. The easiest way to implement this would be to have some "skeleton" layouts (3 column, 2 column, with header/footer, etc) that we ship as flat HTML files. When an administrator goes to create a new site layout, the "skeleton" is copied into an editable object. The GUI editor allows changing the contents of the grid inside the pre-defined panels, but not the static bits around it. | Integrators |
| The panels and any static content in main_template | ZPT skills | Core developers |
| The view templates that render content items | ZPT skills | Core developers and add-on developers |
Plone4 Default Theme
Plone 4 預設佈景主題使用 Sunburst Theme 模組，Plone 3 時代的預設模組被命名為 Plone Classic Theme，不過，這兩者的 Skin Layer 都以 Plone Default 為基礎，雖然 Plone Classic Theme 有被安裝到系統裡，但預設啟用的是 Sunburst Theme，想要換回 Plone3 的老樣子，可從 Theme settings 的 Default theme 改選 Plone Class Theme。一般情況下，佈景主題裡的 main_template.pt 檔案，是第一個被讀取的檔案，它以 <div id="ooo"> 來定義 header、columns、footer 等網頁區塊，利用 row 和 cell 的 CSS Class 來定義位置比例，像 <span> 通常用於行內 (inline) 定義值。
