Theme It Yourself
Tools and Techniques for themeing a Plone 3.0 site
David Convent
5th Plone Conference
Naples – Oct 2007

The Audience
I need to know what you need to learn
(few questions)

About me
● Working at the Royal Belgium Institute of
Naural Science
● Project: MARS (Multimedia Archaeological
Research System)
● Contact: davconvent@gmail.com
● IRC: davconvent

This talk
This talk is a tutorial, mostly given as a live demo.
Detailed documentation on covered subjects is
available on http://plone.org/documentation

Documentation
http://plone.org/documentation/tutorial/creating-plone-themes
http://plone.org/documentation/tutorial/genericsetup
http://plone.org/documentation/tutorial/customizing-main-template-viewlets
http://plone.org/documentation/tutorial/buildout

File System Development
Good reasons for choosing to develop on the file system:
● Repeatable
● Version-able
● Testable
● Distributable
● Lets you do more

Tools for Initiating a new project
● Paste Script / paster
$ paster create -t TEMPLATE
[–svn-repository=REPOS]
[–config=CONFIGFILE] [PROJECTNAME]
● ZopeSkel (demo)
$ paster create –list-templates
● DIYPloneStyle

Anatomy of a theme package
● skins/ folder still there
● __init__.py is now empty (at least it can be)
● No Extensions/ folder, thus no Install.py
module

Anatomy (continued)
● zcml files
– configure.zcml
– skins.zcml
– profiles.zcml
● profiles/ folder
● browser/ module (sub package)
– configure.zcml

Generic Setup
● Registering skins
demo: Add new skin folder (skins.zcml +
profiles/default/skins.xml)
● Registering stylesheets
demo: browser/configure.zcml and
profiles/default/cssregistry.xml

Zope 3 resources
● Images
– Don't have Zope 2 image methods
(i.e. the tag() method that generates and <img/>
html tag)
● Stylesheets
– Not ideal when DTML is needed

The stylesheet
● Important: manually set 'portal_css' in debug
mode before starting any CSS work.
● Use of the Firefox 'Web Developer' add-on
toolbar.
● Other handy Firefox extensions and add-ons:
– View Source Chart
– Aardvark
– Firebug

xhtml output
● Strong advise: use default Plone output
● If changing the output is really needed...
– Macros and slots in Zope 2 Page Templates
– New Zope 3 Viewlets implementation in Plone 3

Playing with viewlets
● Viewlets and viewlet managers
● Viewlets in main template

Find your way
● @@manage-viewlets
● plone.app.layout.viewlets

Viewlet class methods
● self.render()
● self.update()

Adding a new viewlet
● Write class/template
● Declare viewlet in zcml
● Set up the order in GS profile

Overriding a viewlet
● Introduction to Zope 3 browser layers
● plone.theme
● plone.browserlayer

Thank you!
Any further question?
Announce:
Join our team during the sprint and help us
create new themes for Plone!