This document is a tutorial on upgrading a Plone 3 theme to Plone 4, highlighting the significant changes such as new theme structures, modified template variables, and viewlet management shifts. It provides guidance on maintaining compatibility with Plone 3 while implementing new features in Plone 4, including CSS updates and handling of the TinyMCE editor. Key considerations include reviewing custom templates, updating interface dependencies, and adjusting to new viewlet placements and styling needs.

1. Upgrading a Plone 3 Theme for
Plone 4: Beyond the Basics

2. What’s changed?

3. Tutorial on Plone.org will get you started

4. Plone 4 has a new theme:
Sunburst

5. Plone 4 also includes
• Plone Classic – • Plone Default –
The default Plone 3 A barebones template
theme with no styling

6. Updates to main_template.pt
• Defines on the html tag have been modified
• Some new defines have been added to the
body tag
• Viewlet managers formerly in content area
have been moved to main_template
• New slot called "content-core" has been
added for the content body

7. Updates to template variables
• Many global template variables are no longer
available
 Good news: speed!
 Bad news: you must define them to use them
NameError: name 'templateId' is
not defined
• Examples: template_id, toLocalizedTime, portal,
isAnon, member . . . many more (see docs on
Plone.org)

8. Moved viewlet managers / macros
• Document title, description,
abovecontenttitle, belowcontenttitle,
abovecontentbody, belowcontentbody,
relateditems - out of content templates and
into main
• Keywords in belowcontent, not in
belowcontenttitle
• Contenthistory a link in documentbyline, not
in belowcontentbody

9. Review all your custom templates
to see whether your theme is
affected

10. Update the “based-on” declarations
in Generic Setup profiles
• Skin paths (skins.xml) and viewlet managers
(viewlets.xml) should be based on “Plone
Classic Theme” instead of “Plone Default”
<order manager="plone.portaltop"
skinname="UCLA Default Theme" based-
on="Plone Classic Theme">

11. Update the theme specific interface
• Subclass the interface from Plone Classic
Theme (not IDefaultPloneLayer) in browser/
interfaces.py
from plonetheme.classic.browser.interfaces
import IThemeSpecific as IClassicTheme
class IThemeSpecific(IClassicTheme):
"""theme-specific layer"""

12. But, but …
• What if I want my theme to be compatible
with Plone 3 and Plone 4?
• Why are my viewlets showing up all over?
• What’s with the personal bar?
• How do I deal with the new visual editor,
TinyMCE?
• Where are the CSS selectors I was using?
• My overlays are whack!

13. Preserving Plone 3 compatibility
• Add a dependency on plonetheme.classic – so
imports don’t fail in your Plone 3 sites
• In setup.py:
install_requires=[
'setuptools',
# -*- Extra requirements: -*-
'plonetheme.classic',
],

14. Plone 3 compatibility (cont.)
• In configure.zcml:
<includeDependencies package="." />
• In profiles/default/metadata.xml:
<dependencies>
<dependency>profile-
plonetheme.classic:default</dependency>
</dependencies>

15. Viewlet changes
• plone.personal_bar – in plone.portalheader
instead of plone.portaltop
• plone.site_actions – in plone.portalfooter
instead of plone.portalheader
• plone.path_bar – in plone.abovecontent
instead of plone.portaltop
• plone.abovecontent viewlet manager comes
before plone.contentviews

16. Controlling viewlets
• Use viewlets.xml to hide duplicate viewlets
• Show them again on uninstall
• Use conditional zcml to register viewlets as
needed for Plone 3 or Plone 4

17. Conditional ZCML Example
<!-- Plone 3 condition check-->
<configure zcml:condition="not-installed plone.app.upgrade">
<browser:viewlet
name="plone.personal_bar”
manager="plone.app.layout.viewlets.interfaces.IPortalTop"
. . . />
</configure>
<!-- Plone 4 condition check-->
<configure zcml:condition="installed plone.app.upgrade">
<browser:viewlet
name="plone.personal_bar”
manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
. . . />
</configure>

18. Adjust to the personal bar in Plone 4
• Has the .actionMenu class – dropdown
behavior and green styles
• Is structured as definition list (dl) rather than
unordered list (ul)
• May need to write new styles, to:
 Render the options inline (old-fashioned way)
 Coordinate with your site design (avoid the
green)
• Includes Site Setup link – hurray!

19. TinyMCE in addition to Kupu
• May need to define new styles for TinyMCE
editor
• Kupu had:
.kupu-html body
• TinyMCE has:
body.mceContentBody

20. CSS changes
• .documentContent and #region-content are
gone – use #content, #content-core, or other
selectors
• .documentEditable comes later, after
abovecontent viewlet and status messages
• #content ul and #content li a override styles
for .configlets – use #content ul.configlets
and #content ul.configlets li a

21. Styling overlays
• Target .pb-ajax and its children

22. Questions?