PLONE SYMPOSIUM EAST 2012
How to Get Started
Theming Plone
Chrissy Wainwright

Choose Your Own Adventure
PLONE SYMPOSIUM EAST 2012
You are given a Plone 4 site without any styles.
Do you:
Build a Diazo theme... go to slide 3
Build a traditional Plone theme... go to slide 6
Make changes in the site... go to slide 18

Diazo Theming
PLONE SYMPOSIUM EAST 2012
Why you would choose a Diazo theme:
* You have already built a static theme
* The theme needs a lot of Plone elements
moved around
* You want to keep the theme completely
separate
* You don’t have time to learn the ins and
outs of Plone

What is Diazo?
PLONE SYMPOSIUM EAST 2012
Diazo allows you to take a static theme (HTML
file with CSS, JS, etc) and hook the dynamic Plone
elements into it using a set of rules.

Diazo Rules
PLONE SYMPOSIUM EAST 2012
<replace css:theme=”#logo”
css:content=”#portal-logo”/>
<after css:theme-children=”head”
content=”/html/head/script” />
<drop css:theme=”#column-two”
if-content=”not(//*[@id=’portal-column-two’])”/>
<copy attributes=”class” css:content=”body”
css:theme=”body”/>

Traditional Plone Theming
PLONE SYMPOSIUM EAST 2012
Why you would choose a traditional theme:
* You already know how to do Plone theming
* You are only making minor template and
styling changes
* You are stuck using an older version of Plone
* You want to be able to make theme changes
in-site later *
* coming soon in plone.app.theming!

Change the Logo
PLONE SYMPOSIUM EAST 2012
The name of the logo image to be used can be
found and changed in base_properties.props
Put your new logo in skins/images/ and make
sure the name matches that in base_properties,
or that it is the same filename as the current logo,
which will override it.

Apply Styles
PLONE SYMPOSIUM EAST 2012
Put a file into your theme/skins/styles folder
called ploneCustom.css
Create new CSS files by putting them in the styles
folder, and adding them to the CSS registry.
cssregistry.xml - Generic Setup - portal_css

Generic Setup
PLONE SYMPOSIUM EAST 2012
Generic Setup is the connection between
content/changes in your site and the filesystem.
ZMI > portal_setup > Import/Export tab
theme/profiles/default/

Generic Setup
PLONE SYMPOSIUM EAST 2012
* portal_actions : Action Providers : actions.xml
* portal_css : Stylesheet Registry : cssregistry.xml
* portal_javascripts : Javascript Registry :
jsregistry.xml
* portal_types : Types Tool : types/[type].xml
* @@manage-viewlets : Viewlet Settings :
viewlets.xml

Finding Plone Templates
PLONE SYMPOSIUM EAST 2012
Using omelette in your buildout, you can find the
templates you want to override.
Viewlets: plone/app/layout/viewlets
Portlets: plone/app/portlets/portlets
Other templates: Products/CMFPlone/skins/

Identify Plone Elements: Viewlets
PLONE SYMPOSIUM EAST 2012

Overriding Viewlets: z3c.jbot
PLONE SYMPOSIUM EAST 2012
z3c.jbot can be used when you need to make
template changes to a viewlet.
In theme/browser/configure.zcml:
<include package=”z3c.jbot” file=”meta.zcml” />
<browser:jbot
directory=”template-overrides”
layer=”.interfaces.IThemeSpecific” />

Override Viewlets: z3c.jbot
PLONE SYMPOSIUM EAST 2012
Templates can now go into
theme/browser/template-overrides named by
referencing the dotted path to the file:
plone.app.layout.viewlets.footer.pt

Identify Plone Elements: Portlets
PLONE SYMPOSIUM EAST 2012

Overriding Portlets
PLONE SYMPOSIUM EAST 2012
In theme/browser/configure.zcml:
<include package=”plone.app.portlets” />
<plone:portletRenderer
portlet=”plone.app.portlets.portlets.events.
IEventsPortlet”
template=”events.pt”
layer=”interfaces.IThemeSpecific” />

Overriding Content Type Templates
PLONE SYMPOSIUM EAST 2012
If the original template is found in skins:
* put a copy in your theme/skins/ folder
* use the exact same name
* copy any associated .metadata files
* ex: Products/CMFPlone/skins/plone_content/
document_view.pt

Custom Folder (In-Site Changes)
PLONE SYMPOSIUM EAST 2012
This method is not recommended for completely
theming your site! Only for making quick fixes.
ZMI > portal_skins > custom
ZMI > portal_view_customizations

Custom Folder Overrides
PLONE SYMPOSIUM EAST 2012
In portal_skins, open the template you want to
override (e.g. plone_content > document_view).
Click the customize button. This will create a
copy in the custom folder so you can now make
changes.

Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2012
What to look for when your changes are not
showing up
Flickr: gfpeck

Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2012
1. Make sure the theme is installed
ZMI > portal_quickinstaller
(or Site Setup > Add-Ons)

Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2012
2. Restart your instance after certain changes
* .zcml
* .py
* new z3c.jbot override

Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2012
3. Turn on Development mode
ZMI > portal_css
ZMI > portal_javascripts

Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2012
4. Generic Setup - XML Files
* import changes in
ZMI > portal_setup > import tab

Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2012
5. Check the custom folder
ZMI > portal_skins > custom
ZMI > portal_view_customizations > contents

Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2012
5. Skins Order
ZMI > portal_skins > properties tab

PLONE SYMPOSIUM EAST 2012
eck out
Ch
.com/ demos
six feetup