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

2. 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

3. 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

4. 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.

5. 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”/>

6. 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!

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

8. 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

9. 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/

10. 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

11. 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/

12. Identify Plone Elements: Viewlets
PLONE SYMPOSIUM EAST 2012

13. 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” />

14. 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

15. Identify Plone Elements: Portlets
PLONE SYMPOSIUM EAST 2012

16. 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” />

17. 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

18. 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

19. 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.

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

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

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

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

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

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

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

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