This document provides an overview of how to create and customize a Plone theme. It discusses using paster templates to create a theme, installing the theme, changing the logo, applying custom stylesheets, overriding viewlets and portlets, editing action providers, and common issues that can occur when customizing themes.

1. PLONE SYMPOSIUM EAST 2011
Plone Theming in a
Nutshell
Chrissy Wainwright

2. Create the Theme
PLONE SYMPOSIUM EAST 2011
$ paster create -t plone3_theme
From the command line, use paster in
builtout/src to create the theme.
This template does work for Plone 4, specify
‘Sunburst Theme’ as the skinbase.

3. Install the Theme
PLONE SYMPOSIUM EAST 2011
Add your new theme to buildout.cfg in the
[buildout] section under eggs, zcml, and develop.
Run buildout, start instance, and install theme in
ZMI > portal_quickinstaller.

4. Change the Logo
PLONE SYMPOSIUM EAST 2011
The name of the logo image to be used can be
found and changed in
skins/styles/base_properties.props
Put your new logo in skins/images/ and make
sure the filename matches what is in
base_properties.

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

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

7. Generic Setup
PLONE SYMPOSIUM EAST 2011
* 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

8. Find Original Templates
PLONE SYMPOSIUM EAST 2011
Using omelette, you can find the templates you
want to override.
Viewlets: plone/app/layout/viewlets
Portlets: plone/app/portlets/portlets
Other templates: Products/CMFPlone/skins/

9. Identify Plone Elements: Viewlets
PLONE SYMPOSIUM EAST 2011

10. Override Viewlets
PLONE SYMPOSIUM EAST 2011
From plone/app/layout/viewlets:
* viewlet-specific code in configure.zcml
* viewlet template

11. Override Viewlets
PLONE SYMPOSIUM EAST 2011
Put overrides into theme/browser:
* configure.zcml
- update relative paths (manager, class)
- add template=”...
- add layer=”.interfaces.IThemeSpecific”
* viewlet template

12. Override Viewlets: z3c.jbot
PLONE SYMPOSIUM EAST 2011
Or use z3c.jbot!
In theme/browser/configure.zcml:
<include package=”z3c.jbot” file=”meta.zcml” />
<browser:templateOverrides
directory=”template-overrides”
layer=”.interfaces.IThemeSpecific” />

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

14. Identify Plone Elements: Portlets
PLONE SYMPOSIUM EAST 2011

15. Override Portlets
PLONE SYMPOSIUM EAST 2011
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” />

16. Override Templates
PLONE SYMPOSIUM EAST 2011
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

17. Editing Actions
PLONE SYMPOSIUM EAST 2011
Parts of the site that use actions:
* personal bar (login, preferences, etc)
* main navigation Home link
* document actions (print, send)
* site actions (contact, accessibility, etc)

18. Editing Actions
PLONE SYMPOSIUM EAST 2011
* ZMI > portal_actions
* Export Action Providers
* remove extra code from actions.xml that you
did not adjust

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

20. Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2011
1. Make sure the theme is installed
ZMI > portal_quickinstaller

21. Common Stumbling Blocks
PLONE SYMPOSIUM EAST 2011
2. Restart your instance
* .zcml
* .py
* new z3c.jbot override

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

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

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

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

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