Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics
What’s changed?
Tutorial on Plone.org will get you started
Plone 4 has a new theme: Sunburst
Plone 4 also includes
• Plone Classic – The default Plone 3 theme
• Plone Default – A barebones template with no styling
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
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)
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
Review all your custom templates to see whether your theme is
affected
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">
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"""
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!
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',
],
Plone 3 compatibility (cont.)
• In configure.zcml: <includeDependencies package="." />
• In profiles/default/metadata.xml: <dependencies> <dependency>profile-plonetheme.classic:default</dependency> </dependencies>
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
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
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>
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!
TinyMCE in addition to Kupu
• May need to define new styles for TinyMCE editor
• Kupu had: .kupu-html body
• TinyMCE has: body.mceContentBody
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
Styling overlays
• Target .pb-ajax and its children
Questions?