upgrading a plone 3 theme for plone 4: beyond the basics
DESCRIPTION
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.TRANSCRIPT
![Page 1: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/1.jpg)
Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics
![Page 2: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/2.jpg)
What’s changed?
![Page 3: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/3.jpg)
Tutorial on Plone.org will get you started
![Page 4: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/4.jpg)
Plone 4 has a new theme: Sunburst
![Page 5: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/5.jpg)
Plone 4 also includes
• Plone Classic – The default Plone 3 theme
• Plone Default – A barebones template with no styling
![Page 6: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/6.jpg)
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
![Page 7: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/7.jpg)
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)
![Page 8: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/8.jpg)
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
![Page 9: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/9.jpg)
Review all your custom templates to see whether your theme is
affected
![Page 10: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/10.jpg)
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">
![Page 11: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/11.jpg)
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"""
![Page 12: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/12.jpg)
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!
![Page 13: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/13.jpg)
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',
],
![Page 14: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/14.jpg)
Plone 3 compatibility (cont.)
• In configure.zcml: <includeDependencies package="." />
• In profiles/default/metadata.xml: <dependencies> <dependency>profile-plonetheme.classic:default</dependency> </dependencies>
![Page 15: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/15.jpg)
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
![Page 16: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/16.jpg)
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
![Page 17: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/17.jpg)
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>
![Page 18: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/18.jpg)
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!
![Page 19: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/19.jpg)
TinyMCE in addition to Kupu
• May need to define new styles for TinyMCE editor
• Kupu had: .kupu-html body
• TinyMCE has: body.mceContentBody
![Page 20: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/20.jpg)
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
![Page 21: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/21.jpg)
Styling overlays
• Target .pb-ajax and its children
![Page 22: Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics](https://reader033.vdocuments.net/reader033/viewer/2022051314/54b97e4c4a7959415f8b4607/html5/thumbnails/22.jpg)
Questions?