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?