Basic steps to make a Plone 3 theme usable in Plone 4 and solutions to more advanced issues you may encounter during the upgrade process.

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?