Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tips / Theme QuickStart

Theme QuickStart

Plone 5 預設佈景主題使用 Barceloneta Theme 模組,並搭配 和 Diazo 引擎。 Map Library 新增底圖 Cluster Timeline theme 找 map 範例

設定網址是在 /@@theming-controlpanel 這個設定介面並不會被佈景主題影響,慣例上是從進階設定的「不套用佈景主題的網址」欄位把 IP 填入。

想要調整 Plone 的外觀,通常有三種策略和方式:1) Skin 機制,這是 Plone 4.1 之前的傳統方式。 2) Diazo 機制,從 Plone 4.2 開始導入,它可以跟 Skin 並存,不過,如果只是小規模的調整,實務上還是透過 Skin 比較容易上手。 3) 直接使用 Barceloneta Theme 模組,並搭配 和 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 方向發展


Clean Blog

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;
*: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


+    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 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

預設安裝 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 和 相依模組,至少要在 裡移除。

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 只處理網頁顯示

Dynamic View

修改 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" />
<hidden manager="plone.portaltop" skinname="CGIS">
  <viewlet name="plone.personal_bar" />

上述的設定結果,會在 plone.topbar 裡顯示 plone.personal_bar,同時也把 plone.portaltop 裡的 plone.personal_bar 取消顯示。

Adventures in the Theming the Complete Saga

註: 如果新增或修改 browser/ 的 Browser View 定義,記得 browser/ 也要視需要跟著修改,不然會遇到 Authentication Error 之類的錯誤。


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

Tab 顯示與建立

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

Plone 5 DL/DT/DD Removing

Google Mobile Friendly Checking

iframe facebook

Edit Theme Switcher for

compatibility: collective.jbot


使用任一版本的 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

plonetheme.bootstrap vs vs.bootstrap.plonetheme diazotheme.bootstrap

Migration Guide: version 2 vs version 3 glyphicon


可以處理 CMF object 和 Skin object,但 Subfolder object 的情境下要連 Subfolder 也修改。


jbot 與 five.grok browserlayer.xml

Make a TTW jbot collective.jbot

Disable Highlight Search Term

/* for highlighting of search terms */
.highlightedSearchTerm {
   background-color: #ffa;

/* for highlighting of search terms */
.highlightedSearchTerm {
   background-color: transparent;

collective.pfg.fancybox copyright and copydescrib

CSS selected by if statement

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

BrowserView as HomePage

Move front-page globalnav to footer

Icon Font Generator config.json Remove Paperclip Fontello Icon for File Types, Replaced by Mimetype Icon

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/ 裡定義 <metal:block define-slot="authenticator"> 會被 plone/app/controlpanel/ 用到,程式碼定義在 plone/protect/

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 SetsTarget 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。一般情況下,佈景主題裡的 檔案,是第一個被讀取的檔案,它以 <div id="ooo"> 來定義 header、columns、footer 等網頁區塊,利用 row 和 cell 的 CSS Class 來定義位置比例,像 <span> 通常用於行內 (inline) 定義值。